/* ═══════════════════════════════════════════════════════════
   E+ROSE — Accessibility layer (WCAG 2.1 AA) · v109
   Loaded last on every page so these rules win over page styles.
═══════════════════════════════════════════════════════════ */

/* Screen-reader-only text */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ── NAV: legible over photo heroes (1.4.3) ──
   A dark scrim sits behind the transparent nav whenever it overlays a photo,
   so white links never fall on bright parts of the image. */
body:has(.hero) nav[role="navigation"]:not(.scrolled),
body:has(.atl-hero) nav[role="navigation"]:not(.scrolled),
body:has(.loc-page-hero) nav[role="navigation"]:not(.scrolled){
  background:linear-gradient(to bottom,rgba(7,7,10,.86) 0%,rgba(7,7,10,.74) 100%);
}
nav[role="navigation"]:not(.scrolled) .nav-links a{color:rgba(255,255,255,.92)}
/* Light logo over the dark top state; main.js darkens it once the ivory nav appears */
nav[role="navigation"]:not(.scrolled) .nav-logo img{filter:brightness(0) invert(1)}

/* ── Hero overlays: keep hero copy readable over photos ── */
.atl-hero-overlay{background:
  linear-gradient(to right,rgba(7,7,10,.62) 0%,rgba(7,7,10,.25) 55%,rgba(7,7,10,0) 80%),
  linear-gradient(to top,rgba(7,7,10,.92) 0%,rgba(7,7,10,.66) 55%,rgba(7,7,10,.55) 100%)!important}
.atl-hero-content h1 em{color:rgba(255,255,255,.82)!important}
.atl-hero-sub{color:rgba(255,255,255,.82)!important}

/* ── Motion: nothing auto-moves longer than 5 seconds without a pause control (2.2.2) ── */
.hero-img,.atl-hero-img,.loc-page-hero-img{animation-duration:5s!important}
.scroll-line{animation-iteration-count:2!important}
.motion-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(7,7,10,.35);background:var(--ivory);color:var(--void);font:500 12px/1 var(--sans);letter-spacing:.06em;cursor:pointer;border-radius:2px}
.motion-toggle:hover{border-color:var(--void)}
.motion-toggle svg{width:14px;height:14px;fill:currentColor}
.motion-paused{animation-play-state:paused!important}

/* ── Contrast fixes (1.4.3) ── */
.marquee-item{color:rgba(7,7,10,.7)}
.text-link{color:rgba(7,7,10,.74)}
.pillar-num{color:var(--brass)!important;opacity:1!important}
.value-num,.af-num{color:var(--brass)!important}
.atl-diff-num{color:rgba(205,174,118,.62)!important}
.standard-num{color:var(--brass-light)!important}
.never-found{color:rgba(255,255,255,.66)!important}
.never-found strong{color:rgba(255,255,255,.85)!important}
.article-meta{color:var(--stone)!important}
.article-card-featured .article-meta{color:rgba(255,255,255,.66)!important}
.privacy-updated{color:var(--stone)!important}
.award-item{color:var(--brass-deep)!important}
.lc-dark .lc-h-lbl{color:rgba(255,255,255,.66)!important}
.city-head-dark .city-head-cnt{color:rgba(255,255,255,.66)!important}
.wp-meta-item{color:rgba(255,255,255,.66)!important}
.quick-app-label,.quick-note,.catering-note,.platform-label,.review-featured-attr{color:rgba(255,255,255,.66)!important}
.order-band p{color:rgba(255,255,255,.66)!important}
.app-cta{background:var(--charcoal)!important}
.app-cta p{color:rgba(255,255,255,.72)!important}

/* ── Homepage mobile menu: match the other pages (solid ivory panel, readable links) ── */
.mobile-nav-drawer::before{content:none!important}
@media(max-width:900px){
  .mobile-nav-drawer{width:auto!important;transform:none!important;box-shadow:none!important;background:rgba(247,242,235,.99)!important}
}

/* ── Photo strips: let the row grow with its photos on phones (no text overlapping images) ── */
@media(max-width:768px){
  .img-strip:has(> img){height:auto!important}
  .img-strip > img{height:240px!important}
}

/* ── Reflow at 320px (1.4.10): no sideways scrolling on small phones ── */
.footer-legal{flex-wrap:wrap;row-gap:12px}
@media(max-width:600px){
  [style*="display:grid"]:not(.img-strip)[style*="grid-template-columns:repeat("],
  [style*="display:grid"]:not(.img-strip)[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  [style*="display:grid"] > *,.ing-intro > *{min-width:0}
  .ing-intro{padding-left:20px!important;padding-right:20px!important}
  .ing-intro-stat > *{min-width:0}
  .stat-card{padding:28px 20px!important}
}

/* ── Form fields: a clear focus ring, not just a colour shift on the underline (2.4.7) ── */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--brass)!important;outline-offset:2px!important}

/* ── Tagline: "You are what you rep<strong>eat</strong>." ── */
h1 em strong,h2 em strong{font-weight:600}
.footer-tagline strong{font-weight:500;color:rgba(255,255,255,.9)}