/* ── Shared accessibility + cookie-consent styles ──
   Loaded by every website page AFTER the page's own stylesheet, so these rules
   win on equal specificity. Colours use each theme's variables with fallbacks
   (style.css / muasher-style.css define --dark/--darker/--gl; nitaq-style.css
   doesn't, hence the fallbacks). Target: WCAG 2.2 AA. */

/* Visually hidden but still read by screen readers */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

/* Skip link — first focusable element on every page */
.skip-link {
  position: fixed;
  top: -120px;
  inset-inline-start: 16px;
  z-index: 10001;
  background: #fff;
  color: #0a1810;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  transition: top .15s
}

.skip-link:focus {
  top: 12px
}

/* The skip-link target receives focus programmatically; no ring needed there */
main:focus {
  outline: none
}

/* Clear, consistent keyboard focus ring (yellow reads on every dark theme) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #ffd257;
  outline-offset: 3px;
  border-radius: 6px
}

/* Content stays visible when JavaScript doesn't run (a11y.js sets html.js) */
html:not(.js) .reveal {
  opacity: 1;
  transform: none
}

/* Hamburger is a real <button> now — reset the native button look */
button.hamburger {
  background: none;
  border: 0;
  padding: 8px 4px;
  margin: 0;
  color: inherit;
  font: inherit
}

/* FAQ: hide closed answers from screen readers too, not only visually.
   The larger max-height leaves room for answers when text is zoomed. */
.faq-item .faq-a {
  visibility: hidden
}

.faq-item.open .faq-a {
  visibility: visible;
  max-height: 1200px
}

/* Pricing ticks/crosses are decorative — the list text (plus a hidden
   "not included" prefix on .na items) carries the meaning. Browsers that
   don't support the alt-text syntax keep the original content rule. */
.price-features li::before {
  content: '✓' / ''
}

.price-features li.na::before {
  content: '✕' / ''
}

.price-features li.addon::before {
  content: '＋' / ''
}

/* Footers carry more links now — let them wrap */
.footer-links {
  flex-wrap: wrap;
  row-gap: 10px
}

/* "Cookie settings" is a button styled like the footer links around it */
.footer-links .consent-settings-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: .8rem;
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
  transition: color .2s
}

.footer-links .consent-settings-btn:hover {
  color: var(--gl, #5FD3C6)
}

/* ── Cookie consent banner ── */
.consent-banner {
  position: fixed;
  inset-inline: 16px;
  bottom: 16px;
  z-index: 10000;
  max-width: 760px;
  margin-inline: auto;
  background: var(--darker, #042220);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px
}

.consent-banner[hidden] {
  display: none
}

.consent-banner:focus {
  outline: none
}

.consent-text {
  flex: 1 1 320px;
  margin: 0;
  font-size: .9rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, .85)
}

.consent-text strong {
  color: #fff
}

.consent-text a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px
}

.consent-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

/* Accept and reject get equal weight, so refusing is as easy as accepting */
.consent-btn {
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  min-width: 104px;
  min-height: 44px;
  padding: 8px 20px;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid #fff;
  transition: background .2s, color .2s
}

.consent-btn--accept {
  background: #fff;
  color: #0a1810
}

.consent-btn--reject {
  background: transparent;
  color: #fff
}

.consent-btn--accept:hover {
  background: rgba(255, 255, 255, .85)
}

.consent-btn--reject:hover {
  background: rgba(255, 255, 255, .12)
}

/* ── Google Maps click-to-load placeholder (contact section) ── */
.map-consent {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 24px 32px;
  text-align: center;
  background: rgba(255, 255, 255, .04)
}

.map-consent p {
  margin: 0;
  max-width: 380px;
  font-size: .9rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, .75)
}

.map-consent-btn {
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  min-height: 44px;
  padding: 10px 24px;
  border-radius: 10px;
  border: 2px solid #fff;
  background: #fff;
  color: #0a1810;
  cursor: pointer
}

.map-consent-link {
  color: #fff;
  font-size: .85rem;
  text-decoration: underline;
  text-underline-offset: 3px
}

/* ── Respect "reduce motion" (OS setting) ── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important
  }
}

/* ── Windows High Contrast / forced colours ── */
@media (forced-colors: active) {
  .consent-banner,
  .skip-link {
    border: 2px solid CanvasText
  }

  .consent-btn,
  .map-consent-btn {
    border: 2px solid ButtonText
  }
}

/* "Save $75" line on the quarterly report card: --gl on the tinted card
   measured 3.93:1 (axe) — a lighter green reaches 5.3:1 */
.report-saving {
  color: #4cb87a
}

/* ── Contrast fixes found by measuring real pixels (text over gradients and
      images, which axe can't judge) — each now ≥ 4.5:1 ── */
.stat-desc {
  color: rgba(255, 255, 255, .82)
}

.nav-lang {
  color: rgba(255, 255, 255, .82)
}

#stats .section-tag {
  color: #fff
}

/* Date labels sit on the satellite images: near-solid backgrounds */
.compare-label-before {
  background: rgba(15, 31, 22, .95)
}

.compare-label-after {
  background: #1e5535
}

/* Report-type chips (monthly / quarterly / custom): dark chip, same colours */
.report-period {
  background: rgba(10, 24, 16, .85) !important
}