/* ==========================================================================
   Utilities
   --------------------------------------------------------------------------
   Loaded last, so these win. Keep the list short: a utility that appears in one
   place should be a rule in 03-components.css or the generated section styles
   instead.
   ========================================================================== */

/* ==========================================================================
   Accent theming
   --------------------------------------------------------------------------
   The design is themeable: `accentColor` is an authored prop (default #C9A96E,
   with #9A7638, #7C8A5A and #2B2620 offered as alternatives) and the runtime
   applies it after render:

     applyTheme() {
       const accent = this.props.accentColor || '#C9A96E';
       rootEl.querySelectorAll('[data-accent-fg]')    .forEach(n => n.style.color       = accent);
       rootEl.querySelectorAll('[data-accent-bg]')    .forEach(n => n.style.background  = accent);
       rootEl.querySelectorAll('[data-accent-border]').forEach(n => n.style.borderColor = accent);
     }

   So the gold values written inline in the markup are PLACEHOLDERS — several
   are #D8B87A, #9A7638 or #D8BC85 in the source but all render as #C9A96E.
   Reproducing the inline values instead of the applied accent left roughly
   twenty elements the wrong shade. Only a computed-style diff against the live
   design surfaced this; it is invisible in the source.

   Driving all three from --cme-gold keeps the theme switchable from one token,
   exactly as the design intended.

   Loaded last, and each attribute doubled, so these beat the generated
   per-section rules that carry the placeholder colours.
   ========================================================================== */

[data-accent-fg][data-accent-fg] {
  color: var(--cme-gold);
}

[data-accent-bg][data-accent-bg] {
  background: var(--cme-gold);
}

[data-accent-border][data-accent-border] {
  border-color: var(--cme-gold);
}

/* Main content sits under the fixed header. Sections that open with a
   full-viewport hero manage their own spacing, so this is opt-in. */
.cme-main--offset {
  padding-top: clamp(96px, 12vw, 160px);
}

/* Anchor targets must clear the fixed header when jumped to, or the heading
   lands underneath it. */
[id] {
  scroll-margin-top: clamp(90px, 11vw, 150px);
}

.cme-u-hidden { display: none !important; }

/* Hidden visually, still read aloud. Distinct from .screen-reader-text only in
   that this one is a utility applied ad hoc. */
.cme-u-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Print: drop the fixed chrome and decorative layers, and expose link targets
   so a printed price list or contact page is actually useful. */
@media print {
  .cme-header,
  .cme-mobilenav,
  .cme-progress,
  .cme-grain,
  .cme-skip-link,
  .cme-lightbox {
    display: none !important;
  }

  .cme-page,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .85em;
    word-break: break-all;
  }
}