/* Advil x Spilt Milk — "Don't miss a beat" theme
 * Palette + components derived from the TCG_Advil_Spilt_MILK mockup (v3).
 * Loaded last by cms/advil-spilt-milk/base.html.twig. Hand-authored (not webpack-built).
 */

:root {
  --asm-navy:      #292a62;  /* page + nav background (sampled from the hero) */
  --asm-navy-deep: #1f2050;  /* footer bottom bar */
  --asm-yellow:    #f2e500;  /* WIN wordmark, buttons, field labels, step numbers */
  --asm-cyan:      #46c4d0;  /* section/question text, nav links */
  --asm-cyan-soft: #7fd6de;  /* input drop-shadow */
  --asm-blue:      #1e73d6;  /* links */
  --asm-white:     #ffffff;
  --asm-font: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --asm-num-w:   3.5rem; /* reserved width for the step number ("01") at 3rem Black italic */
  --asm-num-gap: 1.25rem;/* gap between the step number and the question text */
}

/* Base size for the whole theme. All type below is rem (anchored to this html
   root), so this one value scales every heading/label/body up together to match
   the mockup's larger set. Bumped from the 16px default to 18px. */
html { font-size: 18px; }

body {
  font-family: var(--asm-font);
  color: var(--asm-white);
  background-color: var(--asm-navy);
  /* Prevent the page from sliding sideways (e.g. when focusing/typing in the
     textarea on mobile): the fields' offset teal shadow can poke a few px past
     the viewport edge and trigger horizontal scroll. `clip` (not `hidden`) so it
     doesn't turn the full-height flex body into a broken vertical scroll box. */
  overflow-x: clip;
}

/* Crowd band sits at the END of the form (bottom of the content area) and blends UP into the navy:
   the last fields, consent, reCAPTCHA and submit sit over it, and the image's navy-gradient top
   merges seamlessly with the form background — exactly like the mockup. */
main {
  background: var(--asm-navy) url("../images/advil-spilt-milk/footer-desktop.png") center bottom / 100% auto no-repeat;
}
/* Success page has no mockup yet — the crowd band looks odd there, so drop it and
   keep a plain navy body. (Design to be confirmed.) */
main:has(.asm-success) {
  background-image: none;
}
@media (max-width: 767.98px) {
  main {
    background-image: url("../images/advil-spilt-milk/footer-mobile.png");
    /* No overlap on mobile — the full hero is shown, form sits below (see page 3
       of the mockup). The desktop overlap is on #entry-form (min-width:768). */
    margin-top: 0;
  }
}

/* Constrain the content column so the form sits centered like the mockup. */
@media (min-width: 992px) {
  main > .container { max-width: 900px; }
}

.advil-header {
  z-index: 2;
}

/* Pull the entry form up so it overlaps onto the hero's blended lower area, and
   sit it above the header in the stacking order. #entry-form is the shared form
   component's id, but this stylesheet only loads on Advil, so it stays Advil-only.
   The -212px is a desktop value; mobile keeps its own -14vw pull (on `main` above). */
#entry-form {
  position: relative;
  z-index: 2;
  /* Indent all form content by the step-number column so fields/labels align to
     the question TEXT, not the number. The number is pulled back out into this
     gutter by .asm-step's negative margin below (see mockup). */
  padding-left: calc(var(--asm-num-w) + var(--asm-num-gap));
}
@media (min-width: 768px) {
  #entry-form {
    /* Overlap scales with viewport width (≈ the hero's height = width/1.976). The
       +60px offsets the container's py-5 so the overlap fades to ~0 on smaller
       screens (no header overlap) and only grows on larger ones. Capped at -240px. */
    margin-top: max(-240px, calc(20px - 15vw));
  }
}

/* ---- generic headings (Thank You / Coming Soon / Closed) ---- */
.asm-heading {
  color: var(--asm-white);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-align: center;
}
.asm-heading .asm-hl { color: var(--asm-yellow); }

/* =====================================================================
   NAVBAR
   ===================================================================== */
.asm-navbar {
  background-color: var(--asm-navy);
  padding-block: .5rem;
}
.asm-lockup { height: 44px; width: auto; }
.asm-nav-link {
  color: var(--asm-cyan) !important;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: 22px;
  padding-inline: .4rem;
}
.asm-nav-link:hover,
.asm-nav-link:focus { color: var(--asm-white) !important; }
.asm-nav-link.active {
  color: var(--asm-yellow) !important;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.asm-haleon { display: inline-flex; align-items: center; }
/* Haleon wordmark is a wide 6.3:1 logo; sized so its rendered WIDTH (~133px)
   matches the Advil & Go lockup on the left of the menu (44px × 3.08 ≈ 135px). */
.asm-haleon-logo { height: 21px; width: auto; display: block; }
@media (max-width: 991.98px) { .asm-haleon-logo { height: 17px; } }
.navbar-toggler { color: var(--asm-cyan); font-size: 1.4rem; }

/* =====================================================================
   ENTRY FORM  (shared component: templates/components/page/form.html.twig)
   ===================================================================== */
.page-contents { color: var(--asm-white); }

/* Numbered step headings — injected as `label`-type fields (class "asm-step").
   Markup: <span class="asm-num">01</span> Question text */
.asm-step {
  color: var(--asm-cyan);
  font-weight: 800;
  font-style: italic;
  font-size: 1.5rem;
  margin-bottom: .25rem;
  display: flex;
  align-items: baseline;
  gap: var(--asm-num-gap);
  /* Pull the whole heading left by the number column so the number hangs in the
     form's left gutter while the question text lands on the shared content edge. */
  margin-left: calc(-1 * (var(--asm-num-w) + var(--asm-num-gap)));
}
.asm-step .asm-num {
  color: var(--asm-yellow);
  font-weight: 900;
  font-style: italic;
  font-size: 3rem;
  line-height: 1;
  /* Fixed width so the question text always starts at the same content edge
     (matches the field labels/inputs), regardless of the number's glyph width. */
  flex: 0 0 auto;
  display: inline-block;
  width: var(--asm-num-w);
}
.asm-step .asm-q { min-width: 0; }

.separator.asm-rule {
  height: 24px;
  background: var(--asm-yellow);
  /* Wedge now runs the full width of the form column so it lines up with the
     right edge of the fields above/below it (was clipped at ~97%). */
  clip-path: polygon(0.5% 70%, 100% 0, 99.2% 70%, 0 100%);
  /* Even, tighter breathing room above and below the divider. */
  margin: 1.5rem 0;
  border: 0;
}

/* Field labels (FIRST NAME*, EMAIL ADDRESS* ...) — yellow, uppercase, bold. */
.page-contents .form-label {
  color: var(--asm-yellow);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .95rem;
  margin-bottom: .35rem;
}
/* Empty labels (textarea/radio use the step heading instead) collapse. */
.page-contents .form-label:empty { display: none; }

/* Required asterisk — always yellow, like the mockup (even on white consent text). */
.page-contents .required::after { content: " *"; color: var(--asm-yellow); }
/* Yellow asterisk inside the cyan step headings (asm-step text is cyan). */
.asm-req { color: var(--asm-yellow); }

/* Inputs / selects / textarea — white fields with a soft teal offset shadow. */
.page-contents .form-control,
.page-contents .form-select {
  background-color: var(--asm-white);
  border: 0;
  border-radius: 0;
  color: var(--asm-navy);
  padding: .7rem .9rem;
  box-shadow: 5px 7px 0 var(--asm-cyan-soft);
}
.page-contents .form-control:focus,
.page-contents .form-select:focus {
  box-shadow: 5px 5px 0 var(--asm-cyan-soft), 0 0 0 .2rem rgba(242, 229, 0, .5);
  outline: none;
}
.page-contents textarea.form-control { min-height: 150px; resize: vertical; }
.page-contents .form-control::placeholder { color: #9aa0b5; }

/* Live word counter under the open question. */
.asm-wordcount {
  margin-top: 1rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--asm-cyan);
  text-align: right;
}
.asm-wordcount.is-max { color: var(--asm-yellow); }
.asm-wordcount.is-over { color: #ff4d4f; }

/* Festival-location radios — force the group full width (the shared component
   wraps `option` fields in col-md-6) and lay the four choices out inline. */
.dropdown-item-festival_location {
  flex: 0 0 100%;
  max-width: 100%;
}
.page-contents .form-check-inline { margin-right: 2rem; }
.page-contents .form-check-input {
  background-color: var(--asm-white);
  border: 0;
  width: 1.15em;
  height: 1.15em;
  /* Mockup controls are flat white circles — no offset shadow. */
  box-shadow: none;
}
/* Festival-location (02) radios fill with the design's teal when selected
   (was yellow). Consent checkboxes keep their own colour, set below. */
.page-contents .form-check-input:checked {
  background-color: var(--asm-cyan);
  border-color: var(--asm-cyan);
}
.page-contents .form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(70, 196, 208, .5);
}
/* Consent checkboxes ("agree to terms" / privacy) render as CIRCLES like the
   radios in the mockup, but stay real checkboxes functionally. Round shape + a
   radio-style filled dot when checked (replaces Bootstrap's checkmark tick). */
.page-contents .form-check-input[type="checkbox"] {
  border-radius: 50%;
}
.page-contents .form-check-input[type="checkbox"]:checked {
  /* Consent checkboxes keep the yellow fill + navy dot (only the 02 radios go teal). */
  background-color: var(--asm-yellow);
  border-color: var(--asm-yellow);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23292a62'/%3e%3c/svg%3e");
}
/* Radio option labels (Geelong, Canberra ...) — teal italic per client feedback
   ("change the festival options from yellow to the teal colour used in the design").
   The #entry-form id keeps this ahead of the white consent-label rule below
   (.page-contents .form-check .form-check-label), which is more specific and would
   otherwise paint these white. */
#entry-form .dropdown-item-festival_location .form-check-label {
  color: var(--asm-cyan);
  font-weight: 800;
  font-style: italic;
  font-size: 1.05rem;
}

/* Consent checkboxes — light text, sit on the navy background. */
.page-contents .form-check .form-check-label { color: var(--asm-white); }
.page-contents .form-check a { color: var(--asm-yellow); text-decoration: underline; }

/* Vertically centre the consent text against its (circular) checkbox. */
#entry-form .form-check.d-flex.flex-row { align-items: center; }
#entry-form .form-check.d-flex.flex-row .form-check-label { padding-top: 0; }
/* Drop Bootstrap's .25em top margin so the box sits dead-centre, not slightly low. */
#entry-form .form-check.d-flex.flex-row .form-check-input { margin-top: 0; }

/* Extra breathing room between the last input row and the FIRST consent line.
   Both consent cols are matched, then the top gap is removed from the second one
   so only the gap above the consent group grows. */
#entry-form .col-12:has(> .form-check.d-flex.flex-row) { padding-top: 1.5rem; }
#entry-form .col-12:has(> .form-check.d-flex.flex-row) + .col-12:has(> .form-check.d-flex.flex-row) { padding-top: 0; }

/* Submit button — yellow pill, navy label. Overrides bootstrap btn-light/text-dark. */
.page-contents button[type="submit"] {
  background-color: var(--asm-yellow) !important;
  color: var(--asm-navy) !important;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 0;
  /* Square corners — override the shared template's .rounded-pill (!important). */
  border-radius: 0 !important;
  padding: .85rem 3rem;
}
.page-contents button[type="submit"]:hover { filter: brightness(.95); }
.page-contents button[type="submit"]:disabled {
  background-color: #c9c9cf !important;
  color: #6b6b78 !important;
  cursor: not-allowed;
  filter: none;
  opacity: 1;
}

.g-recaptcha { margin-top: .5rem; }

/* Field validation messages — a little breathing room above each one so they
   don't sit flush against the field/control (noticeable on mobile). */
.page-contents .invalid-feedback.d-block { margin-top: .5rem; }

/* Alerts stay readable on the navy background (component renders them inside the form). */
.page-contents .alert { color: #212529; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.asm-footer { background-color: transparent; }
/* Legal/disclaimer band — WHITE with navy text (the crowd image lives at the end of the form above,
   painted on <main>). */
.asm-footer-main {
  background-color: #fff;
  color: var(--asm-navy);
}
.asm-footer-warning {
  color: var(--asm-navy);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
}
.asm-footer-fine { color: var(--asm-navy); font-size: .8rem; }

/* Bottom links bar — navy with white links + icons. */
.asm-footer-bar { background-color: var(--asm-navy); }
.asm-footer-links { gap: .25rem; align-items: center; }
.asm-footer-link {
  color: var(--asm-white) !important;
  font-weight: 700;
  font-style: italic;
  padding: 0 .5rem;
}
.asm-footer-link:hover { color: var(--asm-yellow) !important; }
.asm-footer-sep { color: var(--asm-white); padding: 0 .25rem; font-weight: 700; font-style: italic; }
.asm-footer-social a { color: var(--asm-white); font-size: 1.25rem; }
.asm-footer-social a:hover { color: var(--asm-yellow); }

/* =====================================================================
   SUCCESS / THANK YOU
   ===================================================================== */
.asm-success h3 { font-weight: 600; color: var(--asm-white); }
.asm-success .asm-heading::after {
  content: "";
  display: block;
  width: 200px; max-width: 60%;
  height: 4px;
  background: var(--asm-yellow);
  margin: 1rem auto 0;
  transform: rotate(-1deg);
}

/* =====================================================================
   TERMS PAGE
   ===================================================================== */
.asm-terms { color: var(--asm-white); position: relative; z-index: 2; }
/* Pull the terms block up so "TERMS AND CONDITIONS" overlaps the hero's lower
   blend, like the mockup (desktop only). */
@media (min-width: 768px) { .asm-terms { margin-top: max(-200px, calc(60px - 15vw)); } }

/* "TERMS AND CONDITIONS" heading — yellow, sits on the navy above the card. */
.asm-terms-title {
  color: var(--asm-yellow);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: 2.4rem;
  letter-spacing: .01em;
  margin: 0 0 1.5rem;
}
/* Light card holding the clauses (mockup). */
.asm-terms-card {
  background: #eef0f2;
  color: var(--asm-navy);
  padding: 2.5rem 2.25rem;
}
/* Promo name line from the T&C document, above the numbered list. */
.asm-terms-promo {
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 1.75rem;
}
/* Numbered clauses — cyan italic hanging numbers, navy text (mockup). */
.asm-terms-list {
  list-style: none;
  counter-reset: tc;
  margin: 0;
  padding: 0;
}
.asm-terms-list > li {
  counter-increment: tc;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1.25rem;
  line-height: 1.55;
}
.asm-terms-list > li::before {
  content: counter(tc);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.2rem;
  color: var(--asm-cyan);
  font-weight: 800;
  font-style: italic;
}
.asm-terms-card a { color: var(--asm-navy); text-decoration: underline; }
.asm-terms-card strong { font-weight: 800; }

/* ---- responsive tweaks ---- */
@media (max-width: 767.98px) {
  html { font-size: 15px; }        /* smaller type on mobile (whole theme is rem-based) */
  /* iOS Safari auto-zooms the page (and then lets it pan sideways) whenever a focused
     input/textarea/select has a font-size < 16px. The mobile root above is 15px, so the
     fields inherit 15px and trigger the zoom the moment you tap/type — this is the
     "horizontal sliding once I add text" issue. `overflow-x: clip` can't stop it (the pan
     is Safari's zoom layer, not CSS overflow). Pin the controls to 16px to kill the zoom.
     16px is the exact threshold; keep it in px (absolute) so the root scale can't drop it. */
  .page-contents .form-control,
  .page-contents .form-select { font-size: 16px; }
  /* Smaller step number + tighter gutter on mobile. Both the form's left indent
     and the number's outdent use these vars, so shrinking them pulls the number
     in from the left while keeping the fields aligned to the question text and the
     outer left/right margins symmetric. */
  :root { --asm-num-w: 1.7rem; --asm-num-gap: .6rem; }
  .asm-step { font-size: 1.1rem; }               /* smaller so the 01 heading fits in 2 rows, not 3 */
  .asm-step .asm-num { font-size: 1.5rem; }
  .page-contents .form-label { font-size: .95rem; } /* field labels (FIRST NAME, etc.) on mobile — bumped up for readability */
  .asm-lockup { height: 38px; }
  /* Festival radios: two aligned columns with more vertical space between rows. */
  .dropdown-item-festival_location > .mt-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: .5rem;
    row-gap: 1.25rem;
  }
  .dropdown-item-festival_location .form-check-inline { margin-right: 0; }
  /* More breathing room between a field and its "This field is required" error on mobile. */
  .page-contents .invalid-feedback.d-block { margin-top: 1rem; }

  /* Terms clauses on mobile: the desktop 3rem hanging indent + 2.25rem card padding
     leave too little width on a narrow screen, so dense clauses (e.g. 24) wrap raggedly
     and read cramped. Tighten the card padding + number gutter to give the text more
     room, add a touch more line-height and inter-clause spacing for an even rhythm. */
  .asm-terms-card { padding: 1.75rem 1.25rem; }
  .asm-terms-list > li {
    padding-left: 2rem;
    margin-bottom: 1.5rem;
    line-height: 1.65;
  }
  .asm-terms-list > li::before { width: 1.6rem; }
}