/* ==========================================================================
   accessibility.css  —  WCAG 2.2 AA remediation overrides
   --------------------------------------------------------------------------
   Loaded LAST (see functions.php) so it wins on equal specificity.

   Deliberately a separate file rather than edits to stylesheet/mobile/tablet/
   desktop .scss, because there is no sass toolchain on this server: editing
   the compiled .css directly would desynchronise it from the .scss source and
   the next compile would silently revert every fix in here.

   Selectors are copied verbatim from the originals so specificity matches,
   and each block is wrapped in the same media context the original lived in
   (mobile.css = all widths, tablet.css = min-width 720, desktop.css =
   min-width 1024) because those files are scoped by <link media> attribute.

   To revert everything: remove the wp_enqueue_style('accessibility', ...)
   line from functions.php. Nothing else in the theme depends on this file.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Skip link  —  WCAG 2.4.1 Bypass Blocks (A)
   Off-screen until focused, then pinned top-left above the fixed header
   (header z-index is 100000).
   -------------------------------------------------------------------------- */
.skipLink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000001;
  display: block;
  padding: 14px 20px;
  background-color: #1d1d1b;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: underline;
  white-space: nowrap;
}

.skipLink:focus {
  left: 0;
  top: 0;
  outline: 3px solid #ffffff;
  outline-offset: -6px;
}


/* --------------------------------------------------------------------------
   2. Visually-hidden utility
   For text that must reach assistive tech but not the visual design
   (e.g. "(opens in a new window)"). Never use display:none for this —
   that removes the text from the accessibility tree entirely.
   -------------------------------------------------------------------------- */
.visuallyHidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   3. Site title  —  WCAG 1.3.1 / 2.4.6
   The masthead logo was an <h1> on every page, so no page had a heading that
   named it. It is now <p class="siteTitle">; these rules reproduce the old
   `header[role="banner"] .wrap h1` styling exactly so the logo is unchanged.
   -------------------------------------------------------------------------- */
header[role="banner"] .wrap .siteTitle {
  background-image: url("../sprites/sprite.svg");
  background-size: 500px 500px;
  font-size: 20px;
  text-indent: -9999px;
  background-position: -20px -20px;
  width: 136px;
  height: 17px;
  position: absolute;
  top: 50%;
  left: 20px;
  margin: 0;
  padding: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

header[role="banner"] .wrap .siteTitle a {
  display: block;
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 1024px) {
  header[role="banner"] .wrap .siteTitle {
    background-position: -170px -20px;
    width: 167px;
    height: 21px;
    left: 90px;
  }
}

@media only screen and (min-width: 1300px) {
  header[role="banner"] .wrap .siteTitle {
    left: 0;
  }
}


/* --------------------------------------------------------------------------
   4. Focus visibility  —  WCAG 2.4.7 Focus Visible (AA)
   reset.css sets `*:focus { outline: none }` and `a { outline: none }` with no
   replacement, so nothing on the site showed keyboard focus.

   :focus-visible is used rather than :focus so mouse and touch users see no
   change at all — the ring appears only for keyboard interaction.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid #1d1d1b;
  outline-offset: 2px;
}

/* Dark surfaces need a light ring: mobile menu, footer, desktop dropdown,
   and the parallax bands that sit on photography. */
.mobileMenu :focus-visible,
footer :focus-visible,
header[role="banner"] .wrap .mainNav ul li.subNav ul :focus-visible,
.fullWidth :focus-visible,
.mapContent :focus-visible {
  outline-color: #ffffff;
  outline-offset: 2px;
}

/* Form fields read better with the ring tight to the control. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #1d1d1b;
  outline-offset: 0;
}

/* Fallback for engines without :focus-visible — show a ring on plain :focus
   rather than leaving those users with none. */
@supports not selector(:focus-visible) {
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus,
  [tabindex]:focus {
    outline: 3px solid #1d1d1b;
    outline-offset: 2px;
  }
}


/* --------------------------------------------------------------------------
   5. Closed mobile menu must not hold focus  —  WCAG 2.4.3 Focus Order (AA)
   The panel was hidden with `left: 100%` only, leaving its links focusable
   while off-screen: tabbing from the header walked into invisible content.

   visibility is transitioned with a delay equal to the slide duration so the
   existing 0.6s animation is preserved exactly — the panel only becomes
   inert once it has finished sliding away.
   -------------------------------------------------------------------------- */
.mobileMenu {
  visibility: hidden;
  -webkit-transition: left 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0s linear 0.6s;
  transition: left 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0s linear 0.6s;
}

body.showNav .mobileMenu {
  visibility: visible;
  -webkit-transition: left 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0s linear 0s;
  transition: left 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0s linear 0s;
}


/* --------------------------------------------------------------------------
   6. Desktop dropdowns must open on keyboard focus  —  WCAG 2.1.1 (A)
   Submenus were revealed by :hover only, and were hidden with opacity:0 —
   which leaves their links in the tab order. Keyboard users tabbed into
   invisible links. :focus-within reveals the panel on focus; mouse
   behaviour is untouched.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 1024px) {
  header[role="banner"] .wrap .mainNav ul li.subNav:focus-within ul {
    opacity: 1;
    pointer-events: all;
  }
}


/* --------------------------------------------------------------------------
   7. Contrast: brand green as a TEXT colour  —  WCAG 1.4.3 (AA)
   #7ec047 on white measures 2.21:1 and cannot carry text at any size.
   #527d2e is the same hue at 65% lightness and measures 4.85:1.

   The green FILL colour is never changed — only green used as text/icon
   colour on a light ground. Green text on the dark nav and dark footer
   already measures 7.65:1 and is deliberately left alone.
   -------------------------------------------------------------------------- */
.boxCols .wrap .col .content h2 span,
.counterSection.green .wrap .cols .col h3,
.page.newsArticle .wrap article blockquote,
.page.newsArticle.defaultPage .wrap a,
.page .wrap article time,
.page .wrap .offersGrid .offer .description p span,
.instagramFeed .wrap header p a:hover,
.locationsGrid .wrap .col.info .locationList li ul li.showLocation,
.locationsGrid .wrap .col.info .locationList li ul li .locationBtn.showLocation,
.careers-nav ul li a:hover,
.careersPage .top-copy p a,
.careersPage .bottom-copy p a,
.careersPage .roles .copy p a {
  color: #527d2e;
}

@media only screen and (min-width: 1024px) {
  .boxCols .wrap .col .content a:hover,
  .tickertape .hold a h5 span,
  .slider .all:hover,
  .page .wrap article:not(.greenBg):hover .summary span,
  .locationsGrid .wrap .col.info .locationList li > ul > li:hover,
  .locationsGrid .wrap .col.info .locationList li ul li .locationBtn:hover,
  .careersPage .roles .copy .link a:hover,
  .careersPage .roles--single .copy .link a:hover {
    color: #527d2e;
  }

  /* The store info panel sits on #e6e6e6, where #527d2e is only 3.88:1.
     A further step down gives 5.8:1 on that panel. */
  .mapContent .hiddenContent a:hover {
    color: #3f6024;
  }
}


/* --------------------------------------------------------------------------
   8. Contrast: text ON the brand green fill  —  WCAG 1.4.3 (AA)
   White on #7ec047 is 2.21:1. The fill is kept exactly as-is and the text
   is switched to the near-black already used elsewhere in the theme, which
   measures 7.65:1 against the same green.

   NOTE: this includes the main navigation, because the masthead itself is
   green. That is the single most visible change in this remediation. The
   only alternative that keeps white nav text is darkening the masthead
   green to ~#3f6024 or beyond, which is a brand change.
   -------------------------------------------------------------------------- */
header[role="banner"] .wrap .mainNav ul li,
header[role="banner"] .wrap .mainNav ul li a {
  color: #1d1d1b;
}

.boxCols .wrap .col.greenBg,
.boxCols .wrap .col .content form button,
.getApp .wrap h2,
.getApp .wrap > a,
.homeHero .swiper-slide .content .link a.btn--Green,
.homeHero.slider .swiper-slide .content .link a.btn--Green,
.boxCols.registerCols .wrap .col.greyBg .content .gform_legacy_markup_wrapper form .gform_footer.top_label input[type="submit"] {
  color: #1d1d1b;
}


/* --------------------------------------------------------------------------
   9. Links in prose must not rely on colour alone  —  WCAG 1.4.1 (A)
   `body a { text-decoration: none }` removed every underline sitewide, so
   links inside body copy had no non-colour cue.

   Scoped to article/prose content only — navigation, buttons, footer links
   and hero CTAs keep their current underline-free styling, since those are
   identifiable from their position and shape.
   -------------------------------------------------------------------------- */
.page .wrap article a,
.page.newsArticle .wrap article a,
.page.newsArticle.defaultPage .wrap article a,
.careersPage .top-copy p a,
.careersPage .bottom-copy p a,
.careersPage .roles .copy p a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Buttons and image links inside prose are identifiable by shape — exclude
   them so the underline does not appear under a CTA or a thumbnail. */
.page .wrap article a.btn,
.page .wrap article a[class*="btn--"],
.page .wrap article figure a,
.page .wrap article a > img {
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   10. Hero carousel pause control  —  WCAG 2.2.2 Pause, Stop, Hide (A)
   The hero autoplays; a persistent pause mechanism is required. Sized to a
   44x44 target, placed clear of the slick dots, and given both a light and
   a dark treatment so it reads on any slide.
   -------------------------------------------------------------------------- */
.heroPause {
  position: absolute;
  bottom: 14px;
  right: 16px;
  z-index: 60;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(29, 29, 27, 0.35);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.heroPause:hover {
  background-color: #ffffff;
}

/* Glyph is drawn in CSS so it needs no sprite coordinates and stays crisp. */
.heroPause .heroPause__glyph {
  display: block;
  position: relative;
  width: 14px;
  height: 14px;
  margin: 0 auto;
  pointer-events: none;
}

/* Paused state (slider is running) — show two bars */
.heroPause[data-state="playing"] .heroPause__glyph:before,
.heroPause[data-state="playing"] .heroPause__glyph:after {
  content: '';
  position: absolute;
  top: 0;
  width: 4px;
  height: 14px;
  background-color: #1d1d1b;
}

.heroPause[data-state="playing"] .heroPause__glyph:before { left: 1px; }
.heroPause[data-state="playing"] .heroPause__glyph:after  { right: 1px; }

/* Playing state (slider is stopped) — show a triangle */
.heroPause[data-state="paused"] .heroPause__glyph:before {
  content: '';
  position: absolute;
  top: 0;
  left: 3px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #1d1d1b;
}

@media only screen and (min-width: 1024px) {
  .heroPause {
    bottom: 24px;
    right: 28px;
  }
}


/* --------------------------------------------------------------------------
   11. Offer price is not a heading
   Prices were marked up as <h5>, which put non-heading text into the
   document outline and skipped from h2 to h5. The markup is now a <p> with
   this class; these rules reproduce the previous h5 appearance.
   -------------------------------------------------------------------------- */
.slider .swiper-container .swiper-wrapper .swiper-slide .content .offerPrice,
.slider .swiper-slide .content .offerPrice {
  margin: 0;
  padding: 0;
}


/* --------------------------------------------------------------------------
   12. Respect reduced-motion preferences  —  WCAG 2.3.3 (AAA, low cost)
   Users who have asked their OS to reduce motion get no carousel animation,
   no parallax transition and no slide easing.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* The menu still needs to become inert when closed, so keep the delay. */
  .mobileMenu {
    -webkit-transition: visibility 0s linear 0s;
    transition: visibility 0s linear 0s;
  }
}


/* --------------------------------------------------------------------------
   13. Reflow / text resize  —  WCAG 1.4.4 (AA), 1.4.10 (AA)
   Fixed pixel heights on text containers clip their contents at 200% zoom
   and at larger OS text sizes. Each rule below relaxes `height` to
   `min-height` at the SAME value, so layout is byte-identical at default
   zoom and the box is only allowed to grow when the text needs it.

   Scope is the high-traffic text templates agreed for this pass: page,
   news/article, the store locator columns and the boxCols content blocks.
   Deliberately NOT changed: `.locationsGrid .wrap .col .map` (the Google
   Maps canvas needs an explicit height) and `.col.imageCol` (fixed-ratio
   background image panels).
   -------------------------------------------------------------------------- */

/* --- from mobile.css (applies at all widths) --- */
.page .wrap header .download {
  height: auto;
  min-height: 50px;
}

.page .wrap .offersGrid .offer .topOffer {
  height: auto;
  min-height: 78px;
}

.locationsGrid .wrap .col.info {
  height: auto;
  min-height: 396px;
}

/* --- from tablet.css (min-width: 720px) --- */
@media only screen and (min-width: 720px) {
  .boxCols.latestOffers .wrap .col {
    height: auto;
    min-height: 300px;
  }

  .page .wrap header .download {
    height: auto;
    min-height: 70px;
  }

  .page .wrap article {
    height: auto;
    min-height: 180px;
  }

  .locationsGrid .wrap .col {
    height: auto;
    min-height: 516px;
  }
}

/* --- from desktop.css (min-width: 1024px) --- */
@media only screen and (min-width: 1024px) {
  .boxCols.latestOffers .wrap .col {
    height: auto;
    min-height: 300px;
  }

  .page .wrap article {
    height: auto;
    min-height: 244px;
  }

  .locationsGrid .wrap .col {
    height: auto;
    min-height: 600px;
  }
}


/* --------------------------------------------------------------------------
   14. Store rows are buttons now  —  WCAG 2.1.1 Keyboard (A)
   The 226 store rows were <li> elements with a click-only handler: no
   tabindex, no role, no key binding, so selecting a store was impossible
   without a mouse. Each row now contains a real <button>.

   These rules strip the button back to inheriting everything from the <li>
   it sits in, so the list looks exactly as it did before.
   -------------------------------------------------------------------------- */
.locationsGrid .wrap .col.info .locationList li ul li .locationBtn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* The row keeps the same pointer affordance the <li> had. */
@media only screen and (min-width: 1024px) {
  .locationsGrid .wrap .col.info .locationList li ul li .locationBtn {
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
  }
}

/* The panel heading receives focus when a store is opened; it is a heading,
   not a control, so it should not display a focus ring. */
.mapContent .hiddenContent h4[tabindex="-1"]:focus,
.mapContent .hiddenContent h4[tabindex="-1"]:focus-visible {
  outline: none;
}


/* --------------------------------------------------------------------------
   15. Page-title headings promoted to <h1>  —  WCAG 1.3.1, 2.4.6
   The only <h1> on the site was the masthead logo, so no page had a heading
   that named it, and page titles rendered as <h3> (an h1 -> h3 level skip).

   Page titles are now <h1>. These rules reproduce the exact appearance of the
   headings they replace, so nothing moves:
     .page .wrap header h1  <- was h2  (locations, offers and news archives)
     .page .wrap article h1 <- was h3  (pages, default pages, single news)
   Font comes from the 'zona_problack' group the originals belonged to.
   -------------------------------------------------------------------------- */
.page .wrap header h1,
.page .wrap article h1 {
  font-family: 'zona_problack';
  font-style: normal;
}

.page .wrap header h1 {
  font-size: 3.3125rem;
  text-transform: uppercase;
}

.page .wrap article h1 {
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 1.2;
  padding-bottom: 5px;
}

@media only screen and (min-width: 720px) {
  .page .wrap header h1 {
    font-size: 4.5rem;
  }
}

@media only screen and (min-width: 1024px) {
  .page .wrap header h1 {
    font-size: 4.5rem;
  }
}

/* Templates built entirely from ACF content blocks have no visible heading
   that names the page. They get an <h1> carrying the page title, available to
   assistive tech and to heading navigation, with no visual footprint. */
.pageTitleHidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   16. Real headings on the policy pages  —  WCAG 1.3.1, 2.4.6
   Privacy Policy, Cookie Policy and Careers Privacy Policy are the longest
   documents on the site and had no headings at all - their section titles
   were <p><strong>Section name</strong></p>, which looks like a heading but
   carries none of the structure, so heading navigation was useless on exactly
   the pages where it matters most.

   Those paragraphs are now <h2>. This rule reproduces the appearance of the
   bold paragraph they replace (same size, weight and line-height), so the
   pages read identically.
   -------------------------------------------------------------------------- */
.page.newsArticle.defaultPage .wrap article h2 {
  font-size: 0.8125rem;
  line-height: 1.2;
  font-weight: bold;
}


/* --------------------------------------------------------------------------
   17. Form labels must survive being filled in  —  WCAG 1.3.1, 4.1.2 (A)
   The theme repurposes real <label> elements as fake placeholders and hid
   them with `display: none` as soon as the field had a value. display:none
   removes an element from the accessibility tree, so a filled-in field had
   NO accessible name at all - a screen reader user reviewing or correcting
   the form heard only "edit text".

   opacity:0 hides the label visually in exactly the same way but keeps it in
   the accessibility tree, so the field keeps its name. The element is already
   position:absolute and pointer-events:none, so nothing shifts and nothing
   becomes clickable.
   -------------------------------------------------------------------------- */
.placeholder.hide {
  display: block;
  opacity: 0;
}

/* Fields in an error state, and their messages. */
[aria-invalid="true"] {
  outline: 2px solid #ad312c;
  outline-offset: 0;
}

ul[data-errorlist] {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  color: #ad312c;
  font-size: 0.8125rem;
  line-height: 1.3;
}


/* --------------------------------------------------------------------------
   18. Careers / Life at Daybreak card titles  —  WCAG 1.3.1
   These were <h4> sitting directly beneath the page <h1> - a three-level jump,
   and the only headings on either page. They are now <h2>; these rules
   reproduce the previous `.careersPage .roles h4` appearance exactly.
   -------------------------------------------------------------------------- */
.careersPage .roles h2 {
  margin: 0 0 20px;
  font-size: 1.8rem;
}

@media only screen and (min-width: 1024px) {
  .careersPage .roles h2 {
    font-size: 4.5rem;
  }
}


/* --------------------------------------------------------------------------
   19. Listing card titles  —  WCAG 1.3.1
   News and offer card titles were <h3> directly under the page <h1>. They are
   now <h2>; these rules reproduce the previous appearance exactly.

   Note the contrast fix folded in below: the green news card set its title to
   white on #7ec047 (2.21:1). The date beside it was already near-black, so
   matching it both fixes the contrast and makes the card internally consistent.
   -------------------------------------------------------------------------- */

/* --- news cards: from `.page .wrap article h3` (all widths) --- */
.page.newsArchive .wrap article .summary h2 {
  font-family: 'zona_problack';
  font-style: normal;
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 1.2;
  padding-bottom: 5px;
}

.page .wrap article.blackBg .summary h2 {
  color: white;
}

/* Was white (2.21:1 on the green card). Near-black measures 7.65:1. */
.page .wrap article.greenBg .summary h2 {
  color: #1d1d1b;
}

@media only screen and (min-width: 1024px) {
  .page .wrap article .summary h2 {
    font-size: 1.5625rem;
    padding-bottom: 10px;
    max-width: 570px;
  }
}

/* --- offer cards: from `.offersGrid .offer .description h3` --- */
.page .wrap .offersGrid .offer .description h2 {
  font-size: 0.625rem;
  line-height: 1.2;
  font-weight: 700;
}

@media only screen and (min-width: 720px) {
  .page .wrap .offersGrid .offer .description h2 {
    font-size: 1.0625rem;
  }
}