/*
 * UK Fetish Awards.
 *
 * The design's styling is inline on the elements, exactly as it was signed
 * off. This file only carries the things an inline style cannot do: the page
 * frame, the responsive switches the canvas computed in JavaScript, and the
 * states it toggled from component state.
 */

/* The hidden attribute has to beat inline display values. The Spotlight
   thank you panel carries an inline display:flex alongside hidden, so
   without this it sits on the form before anyone has applied. */
[hidden] {
  display: none !important;
}

/* ---- frame -------------------------------------------------------------- */

html,
body {
  margin: 0;
  background: #0a0908;
  color: #ede6da;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

* {
  box-sizing: border-box;
}

a {
  color: #e2bd76;
  text-decoration: none;
}

a:hover {
  color: #f6e2b0;
}

::selection {
  background: #e2bd76;
  color: #0a0908;
}

img,
video {
  max-width: 100%;
}

/* A visible focus ring. The design has none, and keyboard users need one. */
:focus-visible {
  outline: 2px solid #f6e2b0;
  outline-offset: 3px;
}

.ukfa-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 14px 22px;
  background: #e2bd76;
  color: #0a0908;
  font: 800 13px/1 'Archivo', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ukfa-skip:focus {
  left: 12px;
  top: 12px;
}

/* ---- navigation --------------------------------------------------------- */

/*
 * The canvas set these from window.innerWidth and re-rendered on resize.
 * Media queries do the same thing without a re-render, at the design's own
 * breakpoints: mob is below 700px, tab below 1100px.
 */

[data-a='navlogo'] {
  height: clamp(48px, 5.6vw, 80px);
}

[data-a='navsocial'] {
  display: flex;
}

[data-a='navreg'] {
  display: flex;
}

[data-a='gbtn'] {
  gap: 22px;
  padding: 13px 26px;
}

[data-a='barrow'] {
  display: inline-block;
}

[data-a='blabel-mob'] {
  display: none;
}

[data-a='mdevil'] {
  width: 150px;
}

@media (max-width: 1099px) {
  [data-a='navsocial'],
  [data-a='navreg'] {
    display: none;
  }
}

@media (max-width: 699px) {
  [data-a='navlogo'] {
    height: 40px;
  }

  [data-a='gbtn'] {
    gap: 10px;
    padding: 11px 16px;
  }

  [data-a='barrow'],
  [data-a='blabel-wide'] {
    display: none;
  }

  [data-a='blabel-mob'] {
    display: inline;
  }

  [data-a='mdevil'] {
    width: 92px;
  }
}

/* ---- drawer submenus ---------------------------------------------------- */

/*
 * The canvas held the open state in the component and wrote the grid row and
 * the plus rotation inline. Here the button carries data-open and CSS does
 * the rest, so the transition is identical and nothing needs re-rendering.
 */

[data-a='msub-toggle'][data-open='1'] {
  color: #e2bd76;
}

[data-a='msub-toggle'][data-open='1'] [data-a='msub-plus'] {
  transform: rotate(45deg);
}

/*
 * Both states live here, not inline.
 *
 * The canvas wrote grid-template-rows straight onto the element, and an
 * inline declaration beats any selector, so the collapsed 0fr could never be
 * overridden and Categories and Winners simply would not open. Same trap as
 * the lightbox and the vote modal: if a state has to be switched, the
 * element cannot carry that property inline.
 */
[data-a='msub-panel'] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-a='msub-panel'][data-open='1'] {
  grid-template-rows: 1fr;
}

/* ---- motion ------------------------------------------------------------- */

/*
 * Every scroll and loop effect is driven by GSAP from main.js. When somebody
 * has asked their system for less motion, main.js skips the timelines and
 * leaves the page in its final state; these rules make sure nothing is left
 * mid-animation or invisible.
 */

@media (prefers-reduced-motion: reduce) {
  [data-a='trackP'],
  [data-a='trackP2'],
  [data-a='ribbon'],
  [data-a='ticker'] {
    animation: none !important;
    transform: none !important;
  }

  [data-a='beam'],
  [data-a='embers'] {
    display: none;
  }

  video[data-a='herovid'] {
    display: none;
  }
}

/* ---- lightbox ----------------------------------------------------------- */

/*
 * The canvas mounted this on demand. It is always present here, so the open
 * state is a data attribute: an inline display:none would win over any rule
 * trying to show it, which is the trap that cost time on the sibling build.
 */

[data-a='lightbox'] {
  display: none;
}

[data-a='lightbox'][data-open='1'] {
  display: flex;
}

/* ---- editor content ----------------------------------------------------- */

/*
 * Only for pages written in the editor rather than built from the design:
 * terms, privacy and anything added later. The design has no styles for
 * running copy, so these follow its type.
 */

.ukfa-prose h2,
.ukfa-prose h3 {
  margin: 1.8em 0 0.6em;
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  color: #ede6da;
}

.ukfa-prose h2 {
  font-size: clamp(30px, 3.6vw, 52px);
}

.ukfa-prose h3 {
  font-size: clamp(22px, 2.4vw, 32px);
}

.ukfa-prose a {
  color: #e2bd76;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ukfa-prose ul,
.ukfa-prose ol {
  padding-left: 1.3em;
}

.ukfa-prose li + li {
  margin-top: 0.4em;
}

.ukfa-prose img {
  height: auto;
  border-radius: 10px;
}

.ukfa-prose blockquote {
  margin: 1.6em 0;
  padding: 0 0 0 22px;
  border-left: 2px solid #e2bd76;
  color: #ede6da;
}

/* ---- About column ------------------------------------------------------- */

/*
 * The canvas made this column sticky on a wide viewport and static below the
 * tablet breakpoint, where a sticky mascot would follow the reader down a
 * single column of text.
 */

[data-a='introcol'] {
  position: sticky;
}

@media (max-width: 1099px) {
  [data-a='introcol'] {
    position: relative;
  }
}

/*
 * Below the tablet breakpoint the lace used to drop onto a line of its own
 * under the mascot: 80px wide, 820 tall, most of the screen black beside it,
 * and the copy pushed a screen and a half further down. Mario asked for it
 * next to the head instead. The wrapper is display:contents above the
 * breakpoint, so the wide three-column layout never sees it.
 */

[data-a='introduo'] {
  display: contents;
}

@media (max-width: 860px) {
  [data-a='introduo'] {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2.5vw, 22px);
    width: 100%;
  }

  [data-a='introcol'] {
    flex: 0 1 auto !important;
    max-width: none !important;
    /*
     * The column carries top:120px for the wide layout, where it is sticky
     * and wants to hang below the headline. Relative and stacked, that offset
     * only pushes the mascot down over the copy, so it goes.
     */
    top: 0 !important;
  }

  /*
   * preserveAspectRatio="slice" rather than a matching aspect-ratio. Scaling
   * the whole 80 x 820 down to fit would draw the diamonds a third of their
   * width; cropping from the top keeps them the size they are on the wide
   * layout and simply shows fewer of them.
   */
  [data-a='lace'] {
    flex: 0 0 auto !important;
    width: clamp(34px, 11vw, 46px);
    height: 300px;
    overflow: hidden !important;
  }

  /*
   * The cord is the expensive part on a phone: 270px of a two-pixel dotted
   * line with the whole width black beside it. Shortened, with the ring and
   * the head brought up to meet it, and the block's own height cut to match.
   * The pendulum's transform is untouched, because GSAP owns it.
   */
  [data-a='pend'] {
    height: 310px !important;
  }

  [data-a='pend'] > div:first-child {
    top: -40px !important;
    height: 110px !important;
  }

  [data-a='pend'] > div:nth-child(2) {
    top: 58px !important;
  }

  [data-a='mface'] {
    top: 64px !important;
  }

  /* The section's own padding, which was set for the wide layout. */
  #intro {
    padding-top: clamp(40px, 11vw, 100px) !important;
    padding-bottom: clamp(52px, 12vw, 80px) !important;
  }
}

/* ---- archive reel ------------------------------------------------------- */

/*
 * The canvas sized each tile from the viewport. These are the same three
 * sizes it computed, as plain rules keyed on the tile's own width: 760 for
 * the three wide tiles and 640 for the last, then .75 of that on tablet and
 * a share of the viewport on a phone.
 */

[data-a='gtile'] {
  width: 760px;
  height: clamp(340px, 44vw, 600px);
}

[data-a='gtile'][data-w='640'] {
  width: 640px;
}

@media (max-width: 1099px) {
  [data-a='gtile'] {
    width: 570px;
  }

  [data-a='gtile'][data-w='640'] {
    width: 480px;
  }
}

@media (max-width: 699px) {
  [data-a='gtile'],
  [data-a='gtile'][data-w='640'] {
    width: 82vw;
    height: 105vw;
  }
}

/* ---- category cards ----------------------------------------------------- */

/*
 * Padding, the icon circle and the gap above the tag were all computed from
 * the viewport in the canvas. Two sizes, at the design's phone breakpoint.
 */

[data-a='cat'],
[data-a='surprise'] {
  padding: 26px 26px 30px;
}

[data-a='caticon'] {
  width: 52px;
  height: 52px;
}

[data-a='cattag'] {
  margin-top: 30px;
}

/* In the drawer the icon circle is a fixed 38px, which the design set inline. */
[data-a='mlinks'] [data-a='caticon'] {
  width: 38px;
  height: 38px;
}

@media (max-width: 699px) {
  [data-a='cat'],
  [data-a='surprise'] {
    padding: 20px 20px 22px;
  }

  [data-a='caticon'] {
    width: 44px;
    height: 44px;
  }

  [data-a='cattag'] {
    margin-top: 18px;
  }
}

/* ---- press gallery ------------------------------------------------------ */

/*
 * Each shot carries its base height and its intrinsic ratio as custom
 * properties; the width follows from them, and the negative margins centre it
 * on its coordinate. The canvas recomputed all of this in JavaScript on every
 * resize, which is the one thing worth not reproducing.
 */

[data-a='galcard'] {
  --ukfa-shot-scale: 1;

  height: calc(var(--ukfa-shot-h) * var(--ukfa-shot-scale));
  width: calc(var(--ukfa-shot-h) * var(--ukfa-shot-scale) * var(--ukfa-shot-ratio));
  margin-top: calc(var(--ukfa-shot-h) * var(--ukfa-shot-scale) / -2);
  margin-left: calc(var(--ukfa-shot-h) * var(--ukfa-shot-scale) * var(--ukfa-shot-ratio) / -2);
}

@media (max-width: 1099px) {
  [data-a='galcard'] {
    --ukfa-shot-scale: 0.82;
  }
}

@media (max-width: 699px) {
  [data-a='galcard'] {
    --ukfa-shot-scale: 0.62;
  }
}

/* ---- nominee filters ---------------------------------------------------- */

/*
 * The canvas wrote each letter's colours inline from component state. Here
 * the button carries data-on and these rules do the same three states:
 * selected, available, and present but with nobody filed under it.
 */

[data-a='nomletter'] {
  color: #ede6da;
  background: rgba(237, 230, 218, 0.06);
  border: 1px solid rgba(226, 189, 118, 0.28);
  opacity: 1;
}

[data-a='nomletter'][data-on='1'] {
  color: #0a0908;
  background: #e2bd76;
  border-color: #e2bd76;
}

[data-a='nomletter'][disabled] {
  opacity: 0.3;
  cursor: default;
}

/* Hidden by the search or the A to Z. */
[data-a='nom'][hidden] {
  display: none;
}

/*
 * "No nominees match" is only shown once a filter has emptied the grid. It
 * carries the hidden state inline-free so it is correct before main.js runs.
 */
[data-a='nomnone'] {
  display: none;
}

[data-a='nomgrid'][data-empty='1'] + [data-a='nomnone'] {
  display: block;
}

[data-a='rail'] {
  -ms-overflow-style: none;
}

[data-a='rail']::-webkit-scrollbar {
  display: none;
}

/* ---- vote modal --------------------------------------------------------- */

/*
 * One dialog, two panels, switched by data-step. The canvas mounted and
 * unmounted these; keeping them in the markup means the step changes without
 * anything being built mid-click.
 *
 * The hidden state has to live here rather than on the elements. It did not:
 * each panel carried its own inline `display:flex`, which outranks any
 * stylesheet rule, so the rule below was dead and every step was on screen at
 * the same time. Nothing in this dialog may carry an inline `display`.
 */

[data-a='votemodal'] {
  display: none;
}

[data-a='votemodal'][data-open='1'] {
  display: flex;
}

[data-a='votemodal'] [data-panel] {
  display: none;
}

[data-a='votemodal'][data-step='form'] [data-panel='form'],
[data-a='votemodal'][data-step='sent'] [data-panel='sent'] {
  display: flex;
}

/* An error line takes no room until it says something. */
[data-a='voteerror']:empty {
  display: none;
}

[data-a='votesubmit'][disabled] {
  opacity: 0.55;
  cursor: progress;
}

/* Visible to a screen reader, not on screen. */
.ukfa-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Q&A ---------------------------------------------------------------- */

[data-a='faqtab'] {
  color: #e2bd76;
  background: rgba(0, 0, 0, 0);
  border: 1px solid rgba(226, 189, 118, 0.3);
}

[data-a='faqtab'][data-on='1'] {
  color: #0a0908;
  background: #e2bd76;
  border-color: #e2bd76;
}

[data-a='faq'][hidden] {
  display: none;
}

[data-a='faqtoggle'][data-open='1'] [data-a='faqq'] {
  color: #e2bd76;
}

[data-a='faqtoggle'][data-open='1'] [data-a='faqplus'] {
  transform: rotate(45deg);
  background: rgba(226, 189, 118, 0.12);
}

/*
 * Both states, here rather than inline.
 *
 * The closed row used to be written on the element as `grid-template-rows:0fr`,
 * which outranks any stylesheet rule, so the open rule below never applied and
 * no answer on the Q&A page could be opened at all. Same failure the drawer's
 * submenus had: a property that gets switched cannot be set inline.
 */
[data-a='faqpanel'] {
  grid-template-rows: 0fr;
}

[data-a='faqpanel'][data-open='1'] {
  grid-template-rows: 1fr;
}

/* ---- control fonts ------------------------------------------------------ */

/*
 * Buttons and form controls do not inherit the page's typeface on their own,
 * so anything that did not set one explicitly was rendering in the browser's
 * default - Arial here, next to Archivo everywhere else. It showed on the
 * carousel arrows, the search submits and the drawer's submenu toggles.
 *
 * The admin bar sets its own face at a higher specificity and is unaffected.
 */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* ---- consent checkboxes ------------------------------------------------- */

/*
 * One box, used by all three forms that ask for consent: the enquiry forms,
 * the entry form and the voting dialog. It used to be styled only inside
 * `.ukfa-cf7`, so the same question looked like a native operating system
 * checkbox on the entry form and in the vote modal and like the design
 * everywhere else.
 *
 * The surrounding label layout stays scoped, because `.ukfa-cf7 label` and
 * `.ukfa-apply label` are flex columns for the field captions and a consent
 * line has to opt back out of that. Nothing competes in the vote modal, so
 * the shared rule below is enough there.
 */
.ukfa-check {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
  color: rgba(237, 230, 218, 0.8);
  cursor: pointer;
}

.ukfa-check a {
  color: #e2bd76;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ukfa-check input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  background: rgba(17, 14, 11, 0.9);
  border: 1px solid rgba(226, 189, 118, 0.45);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.ukfa-check input[type='checkbox']:hover {
  border-color: rgba(226, 189, 118, 0.8);
}

.ukfa-check input[type='checkbox']:focus-visible {
  outline: 2px solid #e2bd76;
  outline-offset: 2px;
}

.ukfa-check input[type='checkbox']:checked {
  background-color: #e2bd76;
  border-color: #e2bd76;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230a0908' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---- gallery columns ---------------------------------------------------- */

/*
 * The canvas chose a column count from the viewport. Masonry here is CSS
 * columns, as the design had it, so the count follows the width directly.
 */

[data-a='galcols'] {
  columns: 4;
}

@media (max-width: 1240px) {
  [data-a='galcols'] {
    columns: 3;
  }
}

@media (max-width: 860px) {
  [data-a='galcols'] {
    columns: 2;
  }
}

@media (max-width: 560px) {
  [data-a='galcols'] {
    columns: 1;
  }
}

/* ---- enquiry forms ------------------------------------------------------ */

/*
 * CF7 writes these inputs, so the design's field styling cannot be inline on
 * them as it is everywhere else. This is the same field: 56px tall, dark
 * fill, thin gold border that brightens on focus.
 */

.ukfa-cf7 p {
  margin: 0 0 18px;
}

.ukfa-cf7 label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(237, 230, 218, 0.7);
}

.ukfa-cf7 input[type='text'],
.ukfa-cf7 input[type='email'],
.ukfa-cf7 input[type='tel'],
.ukfa-cf7 input[type='url'],
.ukfa-cf7 select,
.ukfa-cf7 textarea {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  font: inherit;
  font-size: 16px;
  color: #ede6da;
  background: rgba(17, 14, 11, 0.8);
  border: 1px solid rgba(226, 189, 118, 0.22);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.3s;
  text-transform: none;
  letter-spacing: 0;
}

.ukfa-cf7 textarea {
  height: auto;
  min-height: 150px;
  padding: 16px 18px;
  line-height: 1.6;
  resize: vertical;
}

.ukfa-cf7 select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #e2bd76 50%),
    linear-gradient(135deg, #e2bd76 50%, transparent 50%);
  background-position: calc(100% - 22px) 24px, calc(100% - 16px) 24px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.ukfa-cf7 input:focus,
.ukfa-cf7 select:focus,
.ukfa-cf7 textarea:focus {
  border-color: #e2bd76;
}

.ukfa-cf7 ::placeholder {
  color: rgba(237, 230, 218, 0.38);
}

/*
 * The two columns the design puts the short fields in.
 *
 * Explicitly two, not `auto-fit, minmax(220px, 1fr)`. The form card is
 * `flex: 1.4 1 420px`, so its inner width is around 420px on a normal desktop,
 * and auto-fit needs 458px before it will lay out two tracks - it silently
 * collapsed to a single column on the very screens this is meant for. The
 * pairing is a design decision, so it is stated rather than inferred from the
 * space available, and only given up when the fields would genuinely be too
 * narrow to use.
 */
.ukfa-cf7 .ukfa-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 560px) {
  .ukfa-cf7 .ukfa-row {
    grid-template-columns: 1fr;
  }
}

/*
 * The vertical rhythm.
 *
 * Contact Form 7's autop is switched off for these two forms, because it turns
 * the rows into a column of stray <br>s. That also means there are no <p>
 * wrappers left to carry the spacing, so the blocks carry it themselves.
 */
.ukfa-cf7 > label,
.ukfa-cf7 > .ukfa-row,
.ukfa-cf7 > .ukfa-consent {
  margin-bottom: 18px;
}

.ukfa-cf7 > .ukfa-consent {
  margin-top: 4px;
}

.ukfa-cf7 .ukfa-actions {
  margin-top: 24px;
}

/* ---- consent ------------------------------------------------------------ */

/*
 * Set apart from the fields rather than tacked on after them: this is the part
 * a visitor is agreeing to, and it reads as small print if it sits in the same
 * rhythm as the inputs.
 */
.ukfa-cf7 .ukfa-consent {
  display: grid;
  gap: 14px;
  padding: 20px;
  background: rgba(17, 14, 11, 0.55);
  border: 1px solid rgba(226, 189, 118, 0.18);
  border-radius: 6px;
}

/*
 * Overrides `.ukfa-cf7 label`, which is the small uppercase caption used above
 * a field. Consent is a sentence, so it is set as one.
 */
.ukfa-cf7 .ukfa-check {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
  color: rgba(237, 230, 218, 0.82);
  cursor: pointer;
}

/*
 * CF7 wraps an acceptance in three elements of its own. `display: contents`
 * takes them out of the layout so the checkbox and the sentence are the flex
 * children here, instead of a nested stack that cannot be aligned.
 */
.ukfa-cf7 .ukfa-check .wpcf7-form-control-wrap,
.ukfa-cf7 .ukfa-check .wpcf7-acceptance,
.ukfa-cf7 .ukfa-check .wpcf7-list-item,
.ukfa-cf7 .ukfa-check .wpcf7-list-item > label {
  display: contents;
}

.ukfa-cf7 .ukfa-check a {
  color: #e2bd76;
  text-decoration: underline;
  text-underline-offset: 2px;
}


.ukfa-cf7 .wpcf7-acceptance label,
.ukfa-cf7 .wpcf7-acceptance .wpcf7-list-item-label {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: rgba(237, 230, 218, 0.8);
}

.ukfa-cf7 .wpcf7-list-item {
  margin: 0;
}

.ukfa-cf7 input[type='submit'] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 18px 32px;
  background: #e2bd76;
  color: #0a0908;
  /* Buttons do not inherit the form's face on their own, so without this the
     only Arial on the page was the one word the visitor is asked to click. */
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s;
}

.ukfa-cf7 input[type='submit']:hover {
  background: #f6e2b0;
}

/*
 * CF7's own messages, in the design's voice rather than its default blue.
 *
 * Qualified with `form.ukfa-cf7` rather than `.ukfa-cf7` alone. CF7's stylesheet
 * carries `.wpcf7 form .wpcf7-response-output`, which is more specific than a
 * bare `.ukfa-cf7 .wpcf7-response-output` and wins however late this file
 * loads. Matching its shape and adding the theme's own class outranks it.
 */
/*
 * Never draw the box when there is no message in it.
 *
 * CF7 hides this itself, but only for the states it knows about - init,
 * resetting, submitting - and not for `validating`, which is the class the
 * form carries while it checks a field. Giving the box a border made that
 * gap visible as an empty outlined rectangle under the button. Keyed on
 * emptiness instead of on a state, so no future state can reopen it.
 *
 * Emptiness specifically, not aria-hidden: CF7 leaves aria-hidden="true" on
 * this element even once it has written a message into it, so keying on that
 * attribute hides the success notice as well.
 */
.wpcf7 form.ukfa-cf7 .wpcf7-response-output:empty {
  display: none;
}

.wpcf7 form.ukfa-cf7 .wpcf7-response-output {
  margin: 8px 0 0;
  padding: 14px 18px;
  border: 1px solid rgba(226, 189, 118, 0.5);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #ede6da;
}

.ukfa-cf7 .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #ff9a8a;
}

/*
 * The state classes sit on the form itself, so these were written as
 * `.ukfa-cf7 form.invalid`, which looks for a form inside the form and matched
 * nothing: every failure and every success was drawn in CF7's default colours.
 */
.wpcf7 form.ukfa-cf7.invalid .wpcf7-response-output,
.wpcf7 form.ukfa-cf7.unaccepted .wpcf7-response-output,
.wpcf7 form.ukfa-cf7.failed .wpcf7-response-output,
.wpcf7 form.ukfa-cf7.aborted .wpcf7-response-output,
.wpcf7 form.ukfa-cf7.spam .wpcf7-response-output {
  border-color: #ff9a8a;
  color: #ff9a8a;
  background: rgba(255, 154, 138, 0.08);
}

.wpcf7 form.ukfa-cf7.sent .wpcf7-response-output {
  border-color: #e2bd76;
  color: #ede6da;
  background: rgba(226, 189, 118, 0.1);
}

/* CF7's spinner is a grey disc built for a light admin form. */
.ukfa-cf7 .wpcf7-spinner {
  margin: 0 0 0 14px;
  background: rgba(226, 189, 118, 0.25);
}

.ukfa-cf7 .wpcf7-spinner::before {
  background: #e2bd76;
}

/* ---- entry form --------------------------------------------------------- */

/*
 * Same field as the enquiry forms. This one is the theme's own markup, so it
 * could have been styled inline, but keeping both forms on one set of rules
 * means they cannot drift apart visually.
 */

.ukfa-apply {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ukfa-apply label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(237, 230, 218, 0.7);
}

.ukfa-apply input[type='text'],
.ukfa-apply input[type='email'],
.ukfa-apply input[type='tel'],
.ukfa-apply select,
.ukfa-apply textarea {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  font: inherit;
  font-size: 16px;
  color: #ede6da;
  background: rgba(17, 14, 11, 0.8);
  border: 1px solid rgba(226, 189, 118, 0.22);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.3s;
  text-transform: none;
  letter-spacing: 0;
}

.ukfa-apply textarea {
  height: auto;
  min-height: 170px;
  padding: 16px 18px;
  line-height: 1.6;
  resize: vertical;
}

.ukfa-apply select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #e2bd76 50%),
    linear-gradient(135deg, #e2bd76 50%, transparent 50%);
  background-position: calc(100% - 22px) 24px, calc(100% - 16px) 24px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.ukfa-apply input:focus,
.ukfa-apply select:focus,
.ukfa-apply textarea:focus {
  border-color: #e2bd76;
}

.ukfa-apply ::placeholder {
  color: rgba(237, 230, 218, 0.38);
}

.ukfa-apply input[type='file'] {
  padding: 14px 16px;
  font: inherit;
  font-size: 14px;
  color: rgba(237, 230, 218, 0.8);
  background: rgba(17, 14, 11, 0.8);
  border: 1px dashed rgba(226, 189, 118, 0.35);
  border-radius: 6px;
  text-transform: none;
  letter-spacing: 0;
}

/*
 * Two columns, stated rather than inferred - same reasoning as the enquiry
 * forms. `auto-fit, minmax(220px, 1fr)` needs 458px before it lays out two
 * tracks and this card's inner width is around 420px, so it quietly rendered
 * as a single column of full width boxes on every desktop.
 */
.ukfa-apply .ukfa-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 560px) {
  .ukfa-apply .ukfa-row {
    grid-template-columns: 1fr;
  }
}

.ukfa-apply .ukfa-hint {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(237, 230, 218, 0.5);
}

.ukfa-apply .ukfa-check {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: rgba(237, 230, 218, 0.8);
  cursor: pointer;
}

.ukfa-apply .ukfa-check a {
  color: #e2bd76;
}

.ukfa-apply .ukfa-error {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #ff9a8a;
}

.ukfa-apply .ukfa-error:empty {
  display: none;
}

.ukfa-apply button[type='submit'] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 18px 32px;
  background: #e2bd76;
  color: #0a0908;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s;
}

.ukfa-apply button[type='submit']:hover {
  background: #f6e2b0;
}

.ukfa-apply button[type='submit'][disabled] {
  opacity: 0.55;
  cursor: progress;
}

/* ---- sponsor bar -------------------------------------------------------- */

/*
 * The logo run scrolls slowly along the bar. It is two identical halves, so
 * translating by half its width loops without a seam. CSS rather than GSAP
 * because the bar has to behave the same on every page whether or not the
 * scroll timeline has initialised.
 */

@keyframes ukfa-sponsor-run {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

[data-a='sponsortrack'] {
  animation: ukfa-sponsor-run 48s linear infinite;
}

[data-a='sponsorbar']:hover [data-a='sponsortrack'] {
  animation-play-state: paused;
}

/* The empty slot pulses, which is what Mario meant by "flash it". */
@keyframes ukfa-sponsor-flash {
  0%,
  100% {
    background-position: 160% 0;
  }

  55%,
  60% {
    background-position: -60% 0;
  }
}

[data-a='sponsorglow'] {
  animation: ukfa-sponsor-flash 4.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-a='sponsortrack'],
  [data-a='sponsorglow'] {
    animation: none;
  }
}

/* Below the phone breakpoint the label column costs more than it gives. */
@media (max-width: 560px) {
  [data-a='sponsorbar'] [data-a='sponsorname'] {
    display: none;
  }
}

/* ---- opportunities carousel --------------------------------------------- */

/*
 * The track is animated by GSAP. Without motion it still has to be usable,
 * so it falls back to a scrollable rail rather than a frozen half-row.
 */

@media (prefers-reduced-motion: reduce) {
  [data-a='opprail'] {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  [data-a='trackO'] {
    transform: none !important;
  }

  [data-a='trackO'] [data-a='oppcard'] {
    scroll-snap-align: start;
  }

  /* The duplicate half is decoration; hide it when nothing is moving. */
  [data-a='trackO'] [data-a='oppcard'][aria-hidden='true'] {
    display: none;
  }
}

/* ---- spotlight: Live Gemini banner on a phone -------------------------- */

/*
 * Stacked, the wide panel crops its banner from 3.5:1 down to 16:10, and a
 * centre crop throws the subject off the right edge. Mario's note of
 * 2 November: "Gemini image is a bit out on fetish mobile spotlight". The
 * wide layout is unaffected, where the picture runs the full width behind
 * the copy and centre is correct.
 */

@media (max-width: 860px) {
  .spot-wide[data-brand='live-gemini'] .spot-photo {
    background-position: 76% center !important;
  }
}