/**
 * USA Rejser :: Gravity Forms
 *
 * Rule level overrides of the parent theme's plugins/gravityforms/gravityforms.css. Design tokens live in
 * brand.css; anything both brands should get belongs in the parent's assets/src/css/
 * instead. See ../../../README.md for the full convention.
 *
 * Plain CSS, no build step - the parent's postcss syntax (@mixin, nesting, @extend) does
 * nothing here. Breakpoint table is in the header of brand.css.
 */

/*
 * The parent's button hovers swap one brand color for another: complimentary ->
 * secondary, or tertiary -> primary. In the USA Rejser palette --color-secondary and
 * --color-complimentary are the same red (#bf0a30), so those swaps would render as no
 * hover feedback at all. The rules here replace the swap with "the button's own color,
 * darkened" via --button-hover-darken (brand.css). Each one restates a parent hover it
 * deliberately overrides - none of it is new styling.
 */

/* Gravity Forms multi-page next/submit buttons. */
#siteMain .gform_wrapper.gform-theme--orbital .gform-page-footer input[type="button"].gform_next_button:hover,
#siteMain .gform_wrapper.gform-theme--orbital .gform-page-footer input[type="submit"]:hover {
	background-color: hsl(from var(--color-complimentary) h s calc(l * var(--button-hover-darken)));
}

/*
 * The focus ring comes off the select, and only the select.
 *
 * The parent gives a focused field border-color: var(--color-secondary) and a 3px outline in
 * var(--color-complimentary), 2px out. On Norsk Rejsebureau those are two different colours;
 * here they are the same red, so a focused control is ringed in 3px of saturated red sitting
 * 2px outside a pill.
 *
 * On a text field that is fine. On a select it is not, because macOS draws the option list as
 * a translucent panel over the control - so the ring shines through the open dropdown, and
 * because it sits outside the control it also protrudes past the panel. That is the stray red
 * curve across an open Vælg periode.
 *
 * :focus-visible was the first thing tried and it does not work. The idea was to keep the ring
 * for the keyboard and drop it for a click, since somebody who just clicked knows where they
 * are - but measured on a real mouse click Chrome reports :focus-visible as matching on a
 * select anyway. It is not a control you can type into, so the heuristic treats it as one that
 * always deserves announcing. Nothing is gained and a rule that looks like it does something
 * is worse than none.
 *
 * So the outline goes, for select alone. Text fields and textareas keep the parent's ring
 * untouched - there is no panel over them and nothing to shine through.
 *
 * What replaces it is the same red on the control's own edge: the parent's border-color, plus
 * an inset shadow to double its weight. Inset, so it stays inside the silhouette the panel
 * covers rather than drawing a line around it, and a shadow rather than border-width so the
 * control does not change size and shove the form two pixels when it is focused.
 *
 * The selector is the parent's own with everything but select dropped, so this replaces one
 * declaration on one control rather than winning a specificity contest.
 */
#siteMain .gform_wrapper.gform-theme--orbital .gfield select:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--color-secondary);
}

/*
 * The gap moves onto the fields, so a conditional field can slide.
 *
 * Gravity Forms reveals a conditional field with jQuery's slideDown, which zeroes height,
 * padding and margin and counts all five back up frame by frame. .gform_fields is a twelve
 * column grid with row-gap: 40px, and a gap belongs to the container, not to the item - so
 * there is no property on the field for jQuery to animate. The full 40px appears the instant
 * the field becomes a grid item and vanishes the instant it stops being one.
 *
 * Measured on Form 30: the form jumps 40px in the first frame of opening and 40px in the last
 * frame of closing, with four smooth pixels per frame in between. Both ends snap; the middle
 * glides. That is the whole of what looks broken.
 *
 * So the spacing is moved to where it can be animated. row-gap goes to zero and every field
 * carries the same distance as margin-bottom instead, which is one of the five jQuery already
 * counts up - and the reveal becomes smooth from nothing to full, gap included.
 *
 * The distance is still GF's own --gf-form-gap-y, read rather than repeated, so a form that
 * sets it differently keeps its own spacing and this follows.
 *
 * The negative margin is the last row's. A gap sits between rows and not after the final one;
 * a margin sits after every field, including the last. Pulling one gap off the container's
 * bottom leaves the form exactly the height it was.
 */
#siteMain .gform_wrapper.gform-theme--orbital .gform_fields {
	row-gap: 0;
	margin-bottom: calc(var(--gf-form-gap-y) * -1);
}

#siteMain .gform_wrapper.gform-theme--orbital .gfield {
	margin-bottom: var(--gf-form-gap-y);
}


/*
 * And the last 36 pixels of a checkbox field.
 *
 * Gravity Forms renders a checkbox field as a fieldset with a legend for its label, and a
 * legend is not an ordinary box: a rendered legend sits outside the fieldset's content box, so
 * height does not reach it. slideUp animates the field down to height 0 and the legend's 36px
 * are still standing - they only leave when display: none takes the whole element out. On
 * staging's Form 3 that is a 36px snap in the last frame of closing, with the date and number
 * fields beside it already at zero.
 *
 * Floating the legend takes it out of that slot. It stops being a rendered legend and becomes
 * an ordinary block inside the fieldset, which overflow: hidden then clips like anything else,
 * and width: 100% keeps it on a line of its own so nothing moves at rest. Measured on staging:
 * the largest step in a close goes from 36px to 8.1, and every fieldset on the form is the
 * height it was, to the pixel.
 *
 * Checkbox fields only, deliberately, though radio fields are fieldsets too. Floating a radio
 * field's legend adds 24px to it - Periode on that form goes from 60 to 84 - which is a real
 * change to a field that is not animating to pay for a snap in one that is. If a radio field
 * is ever revealed conditionally it will snap by its legend, and this is the place to widen.
 */
#siteMain .gform_wrapper.gform-theme--orbital fieldset.gfield--type-checkbox > legend.gfield_label {
	float: left;
	width: 100%;
}

/*
 * And what follows it has to clear it.
 *
 * A float is only avoided by line boxes, not by the boxes themselves: the checkboxes' own
 * container kept its position at the top of the fieldset and only its text wrapped, so the
 * control ended up underneath the label. Measured on staging before this: legend and container
 * both at 875. Cleared, the container starts at 911, which is where it was before the legend
 * was floated at all.
 *
 * Written as "whatever comes after the legend" rather than by class, because that is the
 * relationship that matters and it holds whatever GF names the container.
 */
#siteMain .gform_wrapper.gform-theme--orbital fieldset.gfield--type-checkbox > legend.gfield_label + * {
	clear: both;
}