/* ============================================================
   Smith & Weidinger — base typography + sw-* component classes.

   Ported from the Astro build's @layer components block.

   NOTE ON @layer: the source wrapped these in Tailwind's
   `@layer components`. That wrapper is deliberately dropped here.
   Unlayered CSS beats layered CSS in the cascade, and Elementor
   ships its widget CSS unlayered — keeping @layer would let every
   Elementor default silently win. These rules stay unlayered.
   ============================================================ */

/* --- base --------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  background-color: var(--sw-background);
  color: var(--sw-foreground);
  font-family: var(--sw-font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background-color: color-mix(in oklab, var(--sw-primary) 25%, transparent); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--sw-ring) !important;
  outline-offset: 3px;
}

/* --- rhythm -------------------------------------------------- */
/* Section padding is weighted by role, not uniform: a pivotal
   section gets more air than a connective one. */
.sw-section       { padding-block: clamp(4.5rem, 8vw, 7.5rem); }
.sw-section-major { padding-block: clamp(5.5rem, 10vw, 10rem); }

/* Matches the source mockups: ~1426-1454px of content on a 1536 canvas.
   94rem - 2x2.5rem gutters = 1424px content at full width. */
.sw-shell { width: 100%; max-width: 94rem; margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 1024px) { .sw-shell { padding-inline: 2.5rem; } }

/* --- type ---------------------------------------------------- */
.sw-display {
  font-family: var(--sw-font-serif);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--sw-ink);
}
.sw-h2 {
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--sw-ink);
}
.sw-h3 {
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.2;
  color: var(--sw-ink);
}

/* Eyebrow uses copper-ink, never raw copper: at this size raw copper is
   4.20:1 on bone and fails AA for normal text. */
.sw-eyebrow {
  font-family: var(--sw-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sw-copper-ink);
}
.sw-lede {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.65;
  color: var(--sw-ink-muted);
}

/* The copper full stop that punctuates headlines in the mockups. */
.sw-dot { color: var(--sw-copper); }

/* --- on-forest inversions ------------------------------------ */
.sw-on-forest { background-color: var(--sw-forest-deep); }
.sw-on-forest .sw-display,
.sw-on-forest .sw-h2,
.sw-on-forest .sw-h3      { color: var(--sw-on-forest); }
.sw-on-forest .sw-eyebrow { color: var(--sw-copper-light); }
.sw-on-forest .sw-lede    { color: var(--sw-on-forest-muted); }

/* --- rules --------------------------------------------------- */
.sw-rule { display: block; width: 3.5rem; height: 2px; background: var(--sw-copper); border: 0; }
.sw-on-forest .sw-rule { background: var(--sw-copper-light); }

/* Elementor's kit ships `.elementor hr { background-color: transparent }` at
   (0,1,1), which out-ranks the bare `.sw-rule` above (0,1,0) and erases the
   copper from every rule inside the builder. `.sw-on-forest .sw-rule` (0,2,0)
   happened to clear it, which is why the dark bands kept their rule and every
   rule on bone silently rendered as 56x2px of nothing. Re-stated here at
   (0,2,0) / (0,3,0). The unprefixed rules above still serve the hand-written
   blog and 404 templates, which have no .elementor wrapper. */
.elementor .sw-rule { background: var(--sw-copper); }
.elementor .sw-on-forest .sw-rule { background: var(--sw-copper-light); }

/* --- buttons ------------------------------------------------- */
/* Scoped to real anchors/buttons on purpose. In the Astro source `.sw-btn` sat
   on the <a> itself; in Elementor the same class lands on the widget WRAPPER,
   so an unscoped rule would paint a second padded, bordered box around the real
   button. These serve hand-written markup (blog templates, 404); Elementor
   widgets are served by the .elementor block further down. */
a.sw-btn,
button.sw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  padding: 0.9375rem 1.75rem;
  border-radius: var(--sw-r-sm);
  font-family: var(--sw-font-sans);
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}
a.sw-btn-primary,
button.sw-btn-primary  { background: var(--sw-copper); color: #FFFFFF; }
a.sw-btn-primary:hover,
button.sw-btn-primary:hover { background: var(--sw-copper-ink); }
a.sw-btn-forest,
button.sw-btn-forest   { background: var(--sw-forest); color: var(--sw-bone); }
a.sw-btn-forest:hover,
button.sw-btn-forest:hover { background: var(--sw-forest-deep); }
a.sw-btn-outline,
button.sw-btn-outline  { background: transparent; color: var(--sw-ink); border-color: var(--sw-ink); }
a.sw-btn-outline:hover,
button.sw-btn-outline:hover { background: var(--sw-ink); color: var(--sw-bone); }
.sw-on-forest a.sw-btn-outline,
.sw-on-forest button.sw-btn-outline {
  color: var(--sw-on-forest);
  border-color: color-mix(in oklab, var(--sw-on-forest) 55%, transparent);
}
.sw-on-forest a.sw-btn-outline:hover,
.sw-on-forest button.sw-btn-outline:hover { background: var(--sw-on-forest); color: var(--sw-forest-deep); }

/* Copper-outlined CTA for dark panels. Fills with copper on hover rather than
   white — a white slab on the forest panel reads far heavier than the button
   deserves. copper-light on forest-deep is 6.14:1; white on copper is 4.54:1,
   so both states clear AA. */
a.sw-btn-outline-copper,
button.sw-btn-outline-copper {
  background: transparent;
  color: var(--sw-copper-light);
  border-color: var(--sw-copper);
}
a.sw-btn-outline-copper:hover,
button.sw-btn-outline-copper:hover {
  background: var(--sw-copper);
  color: #FFFFFF;
  border-color: var(--sw-copper);
}

/* --- link with arrow ----------------------------------------- */
.sw-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sw-font-sans); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sw-copper-ink); text-decoration: none;
}
/* Hover motion is gated to real pointers: on touch there is no hover to
   resolve, and the transform just fires on tap. */
@media (hover: hover) and (pointer: fine) {
  .sw-link svg { transition: transform .2s ease-out; }
  .sw-link:hover svg { transform: translateX(3px); }
}
.sw-on-forest .sw-link { color: var(--sw-copper-light); }

/* --- surfaces ------------------------------------------------ */
.sw-card {
  background: #FFFFFF;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-md);
}

/* --- motion -------------------------------------------------- */
/* Entrance only, once, on scroll. No hover-driven movement, no transform on
   anything the reader is trying to read. */
[data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   ELEMENTOR KIT OVERRIDES

   Elementor enqueues its kit CSS (base-desktop.css, post-*.css)
   AFTER the theme stylesheets, and styles widgets through
   selectors like `.elementor-widget-heading .elementor-heading-title`
   at specificity (0,2,0). A bare `.sw-h2` (0,1,0) therefore loses
   to Elementor's default palette and Roboto.

   Prefixing with `.elementor` (the page wrapper) lifts the brand
   rules to (0,3,0), which wins deterministically regardless of
   load order. The cleaner long-term fix is Elementor > Settings >
   General > Disable Default Colors + Disable Default Fonts, which
   stops the kit emitting these rules at all; this block means the
   brand holds either way.
   ============================================================ */

/* --- headings ------------------------------------------------ */
.elementor .sw-display .elementor-heading-title {
  font-family: var(--sw-font-serif);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--sw-ink);
}
.elementor .sw-h2 .elementor-heading-title {
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--sw-ink);
}
.elementor .sw-h3 .elementor-heading-title {
  font-family: var(--sw-font-serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.2;
  color: var(--sw-ink);
}
.elementor .sw-eyebrow .elementor-heading-title {
  font-family: var(--sw-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sw-copper-ink);
}
.elementor .sw-lede,
.elementor .sw-lede p {
  font-family: var(--sw-font-sans);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.65;
  color: var(--sw-ink-muted);
}
.elementor .sw-dot { color: var(--sw-copper); }

/* --- on-forest inversions ------------------------------------ */
.elementor .sw-on-forest .sw-display .elementor-heading-title,
.elementor .sw-on-forest .sw-h2 .elementor-heading-title,
.elementor .sw-on-forest .sw-h3 .elementor-heading-title { color: var(--sw-on-forest); }
.elementor .sw-on-forest .sw-eyebrow .elementor-heading-title { color: var(--sw-copper-light); }
.elementor .sw-on-forest .sw-lede,
.elementor .sw-on-forest .sw-lede p { color: var(--sw-on-forest-muted); }

/* A role class typed onto a RAW heading tag — `<h2 class="sw-eyebrow">` in a
   text editor, which is how the footer column heads are written — sits at
   (0,1,0) and loses to the kit's theme-style `.elementor-kit-N h2` (0,1,1)
   now that Site Settings carries a family for h1-h6. That would drag the
   eyebrow into the display serif. Re-stated at (0,2,0), which out-ranks the
   kit. The serif roles (sw-display/sw-h2/sw-h3) need no such boost: the kit
   declares the same family and weight they do. */
.elementor .sw-eyebrow {
  font-family: var(--sw-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sw-copper-ink);
}

/* --- builder defaults: headings that carry no sw-* class ------ */
/* The brand used to reach a heading two ways only: an sw-* class on the
   widget, or a section rule like `.elementor .sw-secthead h2`. Anything
   else fell through to hello-elementor's reset (`h1-h6 { font-family:
   inherit }`) and rendered in Inter, or — for a Heading widget — in the
   Elementor kit's global Primary font. These rules give every heading
   inside the builder the brand type by default, so nothing has to be
   classed by hand.

   Specificity is deliberately (0,2,1): above the kit's theme-style
   `.elementor-kit-N h2` (0,1,1), and a tie with the section rules in
   sections.css — which load later and therefore still win, leaving every
   existing section exactly as it was.

   `:not(:where([class*="sw-"]))` is the opt-out. `:where()` contributes
   no specificity, so the exclusion is free: a heading that already
   declares a brand role (`sw-eyebrow` on the footer column heads, for
   instance) keeps that role instead of being overwritten by the default.

   Families and weights are mirrored in Elementor's Site Settings ->
   Typography so the editor panel shows the same defaults; the sizes below
   are fluid and cannot be expressed there, so they live here alone. */
.elementor .elementor-widget :is(h1, h2, h3, h4, h5, h6):not(:where([class*="sw-"])) {
  font-family: var(--sw-font-serif);
  font-weight: 500;
  color: var(--sw-ink);
}
.elementor .elementor-widget h1:not(:where([class*="sw-"])) {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
}
.elementor .elementor-widget h2:not(:where([class*="sw-"])) {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.elementor .elementor-widget h3:not(:where([class*="sw-"])) {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.2;
}
.elementor .elementor-widget h4:not(:where([class*="sw-"])) {
  font-size: 1.25rem;
  line-height: 1.3;
}
/* h5/h6 step out of the serif: at this size Playfair reads as a mistake
   rather than a hierarchy, so they take the sans at semibold. */
.elementor .elementor-widget h5:not(:where([class*="sw-"])) {
  font-family: var(--sw-font-sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
}
.elementor .elementor-widget h6:not(:where([class*="sw-"])) {
  font-family: var(--sw-font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.4;
}
/* Same inversion the sw-* classes get on a forest band. Placed after the
   block above so the equal-specificity colour declaration wins. */
.elementor .sw-on-forest :is(h1, h2, h3, h4, h5, h6):not(:where([class*="sw-"])) {
  color: var(--sw-on-forest);
}

/* --- buttons -------------------------------------------------- */
/* Elementor's CSS Classes field lands on the widget WRAPPER, not the <a>,
   so the brand button styles are re-pointed at the anchor. */
.elementor .sw-btn .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  padding: 0.9375rem 1.75rem;
  border-radius: var(--sw-r-sm);
  font-family: var(--sw-font-sans);
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  background-image: none;
  transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}
.elementor .sw-btn-primary .elementor-button       { background-color: var(--sw-copper); color: #FFFFFF; }
.elementor .sw-btn-primary .elementor-button:hover { background-color: var(--sw-copper-ink); color: #FFFFFF; }

.elementor .sw-btn-forest .elementor-button        { background-color: var(--sw-forest); color: var(--sw-bone); }
.elementor .sw-btn-forest .elementor-button:hover  { background-color: var(--sw-forest-deep); color: var(--sw-bone); }

/* Outline defaults to the LIGHT ground (ink on bone). The dark-panel variant is
   the exception and is scoped to .sw-on-forest below — getting this backwards
   paints a near-invisible white-on-bone button in the header. */
.elementor .sw-btn-outline .elementor-button {
  background-color: transparent;
  color: var(--sw-ink);
  border-color: var(--sw-ink);
}
.elementor .sw-btn-outline .elementor-button:hover {
  background-color: var(--sw-ink);
  color: var(--sw-bone);
}
.elementor .sw-on-forest .sw-btn-outline .elementor-button {
  color: var(--sw-on-forest);
  border-color: color-mix(in oklab, var(--sw-on-forest) 55%, transparent);
}
.elementor .sw-on-forest .sw-btn-outline .elementor-button:hover {
  background-color: var(--sw-on-forest);
  color: var(--sw-forest-deep);
}

/* Copper-outlined CTA for dark panels: fills with copper on hover rather than
   white — a white slab on forest reads far heavier than the button deserves.
   copper-light on forest-deep is 6.14:1; white on copper is 4.54:1. */
.elementor .sw-btn-outline-copper .elementor-button {
  background-color: transparent;
  color: var(--sw-copper-light);
  border-color: var(--sw-copper);
}
.elementor .sw-btn-outline-copper .elementor-button:hover {
  background-color: var(--sw-copper);
  color: #FFFFFF;
  border-color: var(--sw-copper);
}
.elementor .sw-btn .elementor-button-icon svg { fill: currentColor; width: 1em; height: 1em; }

/* The phone button carries a number, not a label — uppercase tracking makes
   digits harder to read, so it opts out of the button's type treatment. */
.elementor .sw-btn-phone .elementor-button {
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
}

/* --- reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal].is-in { opacity: 1; transform: none; transition: none; }
  .sw-link svg { transition: none; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}