/* Accessibility styles (WCAG 2.2 AA). Loaded by index.html and by accessibility.html, after the page's other
   stylesheets. Nothing here changes a colour or a word; it adds the phone menu, focus rings on every background,
   reduced motion, required and error states for the forms, and the fixes for sideways scroll. */

/* ================================================================ screen-reader-only text */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ================================================================ skip link and focus rings */
/* The skip link sits over the navy bar when it gets focus: a white ring with a navy ring inside it shows against
   any background. */
.skip-link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 3px var(--navy); }
/* The success cards sit on the pink section: a white ring. */
#request-samples .form-card:focus-visible { outline-color: #fff; }
/* The sentence that gets focus after a form is sent: the page's focus ring in navy on the white card. */
.form-card .lede:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
/* Main takes focus when the skip link is used; it is not a control, so it shows no ring. The next Tab shows the ring on
   the first control. */
main:focus-visible { outline: none; }

/* ================================================================ header and phone menu */
/* The nav sits in a header so the page has a banner landmark; the header is what sticks. */
.site-header { position: sticky; top: 0; z-index: 50; }
.site-header nav { position: relative; }

/* The menu button is off on wide screens and, without scripting, everywhere. */
.nav-toggle { display: none; }

@media (max-width: 1100px) {
  /* Without scripting the links stay in view, wrapped under the bar. */
  html:not(.js) .nav-inner { flex-wrap: wrap; }
  html:not(.js) .nav-links { display: flex; flex: 1 0 100%; order: 5; flex-wrap: wrap; gap: 4px 22px; }
  html:not(.js) .nav-links a { padding: 8px 0; }

  html.js .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto; flex: none;
    min-width: 44px; min-height: 44px; padding: 0 16px 0 14px;
    background: transparent; color: #fff; border: 2px solid #F08CB8; border-radius: 0;
    font: inherit; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none;
    cursor: pointer; -webkit-appearance: none; appearance: none;
  }
  html.js .nav-toggle:hover { background: rgba(255, 255, 255, .1); }
  html.js .nav-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
  /* The brand triangle: points right when the menu is closed and down when it is open. */
  .nav-toggle-mark {
    display: inline-block; width: 0; height: 0; flex: none;
    border-left: 11px solid #F08CB8; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  }
  html.js .nav-toggle[aria-expanded="true"] .nav-toggle-mark { transform: rotate(90deg); }
  html.js .nav-cta { margin-left: 0; }

  /* The panel drops from under the bar, over the page, so opening it moves nothing. */
  html.js .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 2;
    flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; margin: 0; padding: 6px 0 14px;
    background: var(--navy); border-top: 1px solid rgba(255, 255, 255, .22); border-bottom: 3px solid var(--pink);
    max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto;
  }
  html.js .nav-links.is-open { display: flex; }
  html.js .nav-links a {
    display: flex; align-items: center; min-height: 52px; padding: 8px 28px; font-size: 21px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  html.js .nav-links a:last-child { border-bottom: 0; }
  /* The ring sits inside each row; the panel scrolls, so a ring outside the row would be cut off. */
  html.js .nav-links a:focus-visible { outline-offset: -6px; }
}
@media (max-width: 520px) {
  /* Room for the Menu button beside the logo and Get in touch, in the brand font and in the four other options. */
  nav .brand img { height: 40px !important; }
  .nav-inner .brand { flex: none; }
  .nav-inner { gap: 8px; }
  .nav-cta { font-size: 16px; padding: 9px 16px 9px 10px; line-height: 1.15; }
  html.js .nav-toggle { font-size: 16px; padding: 0 10px; gap: 6px; }
  html.js .nav-links a { padding-left: 28px; padding-right: 28px; }
}
@media (max-width: 380px) {
  .nav-inner { padding-left: 16px; padding-right: 16px; }
  html.js .nav-links a { padding-left: 16px; padding-right: 16px; }
}

/* ================================================================ lists */
/* The nutrition tags are a list now, so a screen reader says how many there are. */
.attr-row { list-style: none; }

/* ================================================================ forms */
/* A required field: a mark next to its label, and the existing hint underneath says "required" in words. */
.req { color: var(--purple); font-weight: 700; margin-left: .15em; }
/* Error state: the field gets a heavier maroon edge, and its hint (the same words, now an error) turns maroon and bold
   with an angular "!" mark, so the cue is not colour alone. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-bottom: 3px solid var(--purple); box-shadow: inset 0 0 0 2px var(--purple); background: #fff;
}
.f-field.has-error .hint { color: var(--purple); font-weight: 700; }
.f-field.has-error .hint::before {
  content: "!"; content: "!" / "";
  display: inline-flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; margin-right: .5em;
  background: var(--purple); color: #fff; font-size: .9em; font-weight: 700; line-height: 1; vertical-align: -.15em;
  clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
}
/* The newsletter field has no visible label (the owner's call); its row keeps its look. */
.signup-form { margin: 0; }

/* ================================================================ sideways scroll */
/* v24's step-4 arrow trail sits at right:-170px and made the page 7 to 20 px wider than the window between 1400 and
   1425 px. The section clips it; nothing focusable lives out there, and the page no longer needs overflow-x:hidden on
   body to hide it. */
#how-we-work { overflow-x: clip; }
body { overflow-x: visible; }

/* ================================================================ reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  /* The hero art is in its final state at once. */
  .cracker-herb { animation: none !important; opacity: 1 !important; }
  .btn-pink:hover .burst span { animation: none !important; }
}

/* ================================================================ forced colours (Windows High Contrast) */
@media (forced-colors: active) {
  /* The buttons' fills are painted by pseudo-elements, which this mode removes; a border keeps the shape. */
  .btn-pink, button.btn-outline-navy { border: 2px solid ButtonText; }
  .nav-toggle { border-color: ButtonText; }
  /* The menu triangle is made of borders, which this mode would colour as a box; keep its own colours. */
  .nav-toggle-mark { forced-color-adjust: none; border-left-color: ButtonText; }
}

/* Required-field note at the top of each form */
.req-note { font-size: 14px; color: var(--ink, #2E4668); margin: 4px 0 10px; }