/* ==========================================================================
   Canyon Controls — accessibility layer (WCAG 2.1 AA)
   Loaded after each page's inline <style>, so these rules win.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Contrast-corrected tokens
   The original palette failed AA for small text. These keep the same hues
   but land at >= 4.5:1 on the paper backgrounds.
   -------------------------------------------------------------------------- */
:root {
  /* was #86868b -> 3.3:1 on --paper-2. Now 5.8:1. */
  --mute: #5f5f65;
  /* Amber for TEXT. The decorative --amber (#c9a068) is 2.4:1 on white and is
     kept for strokes, icons and fills only. */
  --amber-ink: #8a6524;
  /* Amber for text on black. */
  --amber-ink-dark: #e6c28a;
  --focus: #0066cc;
  --focus-dark: #7fbfff;
}

/* Eyebrows, labels and step numbers are text, so they take --amber-ink. */
.eyebrow,
.prod-label,
.step-num,
.page-header .eyebrow,
.section-head .eyebrow {
  color: var(--amber-ink);
}
.wire-visual .tag.br {
  color: var(--amber-ink);
}

/* On dark backgrounds the light amber already passes; re-assert it because the
   rule above is more specific than the pages' inline overrides. */
.section--dark .eyebrow,
.eco .eyebrow,
.final .eyebrow,
.hero--dark .eyebrow,
.subnav .eyebrow {
  color: var(--amber-ink-dark);
}

/* Sierra's hero is dark; its eyebrow must stay light. */
.hero .eyebrow {
  color: var(--amber-ink);
}
.hero[style*="background:#0a0a0a"] .eyebrow,
body.theme-dark-hero .hero .eyebrow {
  color: var(--amber-ink-dark);
}

/* Secondary footer/caption text on tinted panels. */
.foot-bottom {
  color: var(--mute);
}

/* Configurator legacy tokens. --bronze (#c9a068) as text is 2.4:1 and
   --text-subtle (#86868b) is 3.6:1 on white; both fail AA for small text.
   --text-subtle is only ever used for text, so it can be redefined outright.
   --bronze is also used for fills, so only its text uses are overridden.
   --bronze-light stays as-is: it is only used on dark panels, where it passes. */
:root {
  --text-subtle: #5f5f65;
}
.cfg-progress-label,
.summary-eyebrow,
.results-header .eyebrow {
  color: var(--amber-ink);
}
/* White on --bronze is 2.4:1; the darker amber gives 5.1:1. */
.step.complete .step-number {
  background: var(--amber-ink);
}

/* Dark-section secondary text was as low as 4.1:1. Lift the faintest tiers. */
.eco-prod .eco-tag {
  color: rgba(245, 245, 247, 0.72);
}
.eco-footnote {
  color: rgba(245, 245, 247, 0.7);
}
.subnav-links {
  color: rgba(245, 245, 247, 0.82);
}

/* --------------------------------------------------------------------------
   2. Skip link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 999;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--ink, #1d1d1f);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: top 140ms ease;
}
.skip-link:focus {
  top: 12px;
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Visible focus for every interactive element
   The design removes default outlines in several places; this restores a
   consistent, high-contrast indicator that only shows for keyboard users.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* On black sections the blue ring is too dark to read. */
.section--dark a:focus-visible,
.section--dark button:focus-visible,
.eco a:focus-visible,
.final a:focus-visible,
.subnav a:focus-visible,
.subnav button:focus-visible,
.hero--dark a:focus-visible {
  outline-color: var(--focus-dark);
}

/* Some inline styles set `outline:none` on focus. Undo it for keyboard users. */
.adv-select:focus-visible,
.adv-input:focus-visible,
.adv-stepper input:focus-visible,
.proj-name-input:focus-visible,
.proj-room-name-edit:focus-visible {
  outline: 3px solid var(--focus) !important;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Links must not rely on colour alone (WCAG 1.4.1)
   Nav/button links are identifiable by position and shape; links sitting
   inside running prose get an underline on hover and focus.
   -------------------------------------------------------------------------- */
.chev:hover,
.chev:focus-visible,
.prod-link:hover,
.prod-link:focus-visible,
.foot ul a:hover,
.foot ul a:focus-visible,
.foot-bottom a:hover,
.foot-bottom a:focus-visible,
.pair a:hover,
.pair a:focus-visible {
  text-decoration: underline;
}
.doc-prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. Target size (WCAG 2.5.8) — 24px minimum, 44px on touch
   -------------------------------------------------------------------------- */
.nav-links a,
.subnav-links a,
.foot ul a,
.chip,
.zp {
  min-height: 24px;
}
@media (pointer: coarse) {
  .chip,
  .nav-toggle,
  .subnav-buy,
  .nav-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav-links a,
  .foot ul a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   6. Zone selector — rendered as real <button>s, styled to match the
   original <div> presentation.
   -------------------------------------------------------------------------- */
.zp {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid transparent;
}
/* The button's children are spans (buttons may only contain phrasing content),
   so re-establish the block layout the original divs had. */
.zp-body {
  display: block;
}
.zp-desc {
  display: block;
  font-size: 14px;
  color: var(--graphite);
  line-height: 1.45;
  font-weight: 400;
}
.zp[aria-pressed="true"] {
  background: #fff;
  border-color: var(--hairline);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
/* White on the decorative amber is only 2.4:1. The darker amber gives 5.1:1. */
.zp[aria-pressed="true"] .zp-num,
.zp.active .zp-num {
  background: var(--amber-ink);
  border-color: var(--amber-ink);
  color: #fff;
}

/* --------------------------------------------------------------------------
   6b. Reflow (WCAG 1.4.10) — no horizontal scrolling at 320 CSS px
   The hero glow is inset -10% of its stage, so on narrow viewports it extends
   past the document edge and forces a horizontal scrollbar. `overflow: clip`
   contains it without creating a scroll container (unlike `overflow: hidden`,
   which would also turn overflow-y into `auto`).
   -------------------------------------------------------------------------- */
.hero,
.section,
.colors,
.cards,
.specs,
.docs {
  overflow: clip;
}

/* The in-page section links are a non-wrapping flex row, so on a narrow screen
   they run past the viewport edge. Wrapping keeps them reachable — better than
   hiding them, which is what some pages did. */
.subnav-links {
  flex-wrap: wrap;
  row-gap: 8px;
}
@media (max-width: 720px) {
  .subnav-links {
    gap: 6px 16px;
  }
}

/* --------------------------------------------------------------------------
   7. Reduced motion (WCAG 2.3.3)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .cone {
    animation: none !important;
    opacity: 0.6 !important;
  }
  .prod-card:hover,
  .eco-prod:hover {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   8. Forced-colors / Windows high contrast
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .btn,
  .chip,
  .zp,
  .nav-cta,
  .subnav-buy {
    border: 1px solid ButtonText;
  }
  a:focus-visible,
  button:focus-visible {
    outline: 3px solid Highlight;
  }
}

/* --------------------------------------------------------------------------
   8b. Footer legal disclosure block
   Defined here so the pages with inline stylesheets pick it up too.
   -------------------------------------------------------------------------- */
/* Footer column headings are <h2> so the heading order never jumps h2 -> h4.
   The pages' inline styles target `.foot h4`, so restore that appearance. */
.foot h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 14px;
  max-width: none;
  line-height: 1.47;
  color: var(--ink, #1d1d1f);
}

.foot-legal {
  padding-top: 24px;
  border-top: 1px solid var(--hairline, rgba(0, 0, 0, 0.08));
  font-size: 12px;
  line-height: 1.6;
  color: var(--mute);
  text-align: left;
}
.foot-legal p {
  margin-bottom: 10px;
  max-width: 92ch;
}
.foot-legal p:last-child {
  margin-bottom: 0;
}
.foot-legal strong {
  color: var(--graphite, #6e6e73);
  font-weight: 600;
}
.foot-legal a {
  color: var(--mute);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.foot-legal a:hover,
.foot-legal a:focus-visible {
  color: var(--ink, #1d1d1f);
}
.foot-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 14px;
}
.foot-legal-links a {
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
}
.foot-legal-links a:hover,
.foot-legal-links a:focus-visible {
  text-decoration: underline;
}

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

/* --------------------------------------------------------------------------
   10. Documentation / spec-sheet block (product pages + downloads page)
   -------------------------------------------------------------------------- */
.docs {
  padding: 96px 0;
  background: var(--paper, #fbfbfd);
  text-align: center;
}
.docs--alt {
  background: var(--paper-2, #f5f5f7);
}
.doc-meta {
  margin-top: 14px;
  font: 12px/1.5 "SF Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.doc-frame {
  margin: 40px auto 0;
  max-width: 900px;
  border: 1px solid var(--hairline, rgba(0, 0, 0, 0.08));
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.07);
}
.doc-frame iframe,
.doc-frame object {
  display: block;
  width: 100%;
  height: 760px;
  border: 0;
}
@media (max-width: 820px) {
  .doc-frame iframe,
  .doc-frame object {
    height: 520px;
  }
  .docs {
    padding: 48px 0;
  }
}
.doc-fallback {
  padding: 40px 24px;
  color: var(--graphite, #6e6e73);
  font-size: 15px;
}
.doc-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.doc-sub {
  margin: 36px auto 0;
  font: 12px/1.5 "SF Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: center;
}
.doc-sub + .doc-actions {
  margin-top: 12px;
}
.doc-actions a[data-view][aria-current="true"] {
  box-shadow: inset 0 0 0 2px currentColor;
}
.doc-note {
  max-width: 62ch;
  margin: 28px auto 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
}

/* Full-bleed lifestyle figure used on product pages */
.life {
  margin: 0;
  background: #0a0a0a;
}
.life img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: cover;
}
.life figcaption {
  padding: 12px 16px 14px;
  text-align: center;
  font: 12px/1.5 "SF Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a1a1a6;
}

/* Made-in-USA badge in the footer legal block */
.foot-usa {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin: 0 0 22px;
  border: 1px solid var(--hairline, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
  background: #fff;
  color: var(--ink, #1d1d1f);
  max-width: 560px;
}
.foot-usa svg {
  width: 44px;
  height: 44px;
  flex: none;
  color: #1f3a6d;
}
.foot-usa-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.45;
}
.foot-usa-text strong {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.foot-usa-text span {
  color: var(--mute, #5f5f65);
}