/* ==========================================================================
   Flamore — components
   --------------------------------------------------------------------------
   Shared building blocks + site chrome. BEM-lite, token-driven.

     surface-dark · button · icon-button · eyebrow · section · section-head
     panel · media-split · contact-list · photo-hero · cta-band
     site-header · site-nav · mobile-nav · site-footer
   ========================================================================== */

@layer components {
  html {
    scrollbar-gutter: stable;
  }

  /* No page scroll behind the open mobile menu. */
  html:has(.mobile-nav[open]) {
    overflow: hidden;
  }

  /* Component lists are structure, not prose — no bullets. */
  :is(.site-nav__list, .site-nav__sub, .mobile-nav__list, .mobile-nav__sub,
      .site-footer__links, .contact-list) {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* ----- surface-dark ---------------------------------------------------
     Re-points the semantic colours for everything inside a dark surface
     (footer, mobile menu, photo hero, CTA band). Components keep using
     --color-* and just work on both. */
  .surface-dark {
    --color-text:          var(--paper);
    --color-text-muted:    rgb(255 255 255 / 0.74);
    --color-text-subtle:   rgb(255 255 255 / 0.6);
    --color-border:        rgb(255 255 255 / 0.14);
    --color-border-strong: rgb(255 255 255 / 0.3);
    --color-accent:        var(--paper);
    --color-accent-hover:  var(--mist);
    --color-accent-fg:     var(--ink);
    --color-focus-ring:    var(--paper);
    --color-danger:        var(--ember-light);
    --color-success:       var(--moss-light);
    background-color: var(--color-bg-dark);
    color: var(--color-text);
  }

  /* ----- button ---------------------------------------------------------- */
  .button {
    --button-bg: var(--color-accent);
    --button-fg: var(--color-accent-fg);
    --button-bg-hover: var(--color-accent-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: 3rem;
    padding: 0.85em 2.1em;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background-color: var(--button-bg);
    color: var(--button-fg);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--duration-normal) var(--ease-standard),
      color var(--duration-normal) var(--ease-standard),
      transform var(--duration-normal) var(--ease-emphasized),
      box-shadow var(--duration-normal) var(--ease-standard);
  }

  .button:hover {
    background-color: var(--button-bg-hover);
    color: var(--button-fg);
    transform: translateY(-1px);
    box-shadow: var(--shadow-button);
  }

  .button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: none;
  }

  .button--light {
    --button-bg: var(--paper);
    --button-fg: var(--ink);
    --button-bg-hover: var(--mist);
  }

  .button--dark {
    --button-bg: var(--ink);
    --button-fg: var(--paper);
    --button-bg-hover: var(--black);
  }

  .button--accent {
    --button-bg: var(--color-flame);
    --button-fg: var(--ink);
    --button-bg-hover: var(--color-flame-hover);
  }

  /* Outline — secondary action next to a filled button (follows the surface). */
  .button--ghost {
    --button-bg: transparent;
    --button-fg: var(--color-text);
    --button-bg-hover: color-mix(in srgb, var(--color-text) 10%, transparent);
    border-color: var(--color-border-strong);
  }

  /* ----- icon-button: round, icon-only (label via Icon::tag) ------------ */
  .icon-button {
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: var(--radius-full);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
    --icon-size: 1.25rem;
  }

  .icon-button:hover {
    background-color: color-mix(in srgb, currentColor 10%, transparent);
    border-color: color-mix(in srgb, currentColor 40%, transparent);
  }

  /* ----- eyebrow: small label above a heading (a <p>, never a heading) -- */
  .eyebrow {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  /* ----- section + section-head ----------------------------------------- */
  .section {
    padding-block: var(--section-space);
  }

  .section-head {
    --stack-space: var(--space-4);
    max-inline-size: var(--container-narrow);
  }

  .section-head--center {
    margin-inline: auto;
    text-align: center;
  }

  .section-head__lead {
    font-size: var(--text-lg);
    font-weight: var(--font-light);
    color: var(--color-text-muted);
  }

  /* ----- panel: rounded mist area inside the page width ------------------ */
  .panel {
    padding: var(--section-space-sm) var(--container-gutter);
    border-radius: var(--radius-2xl);
    background-color: var(--color-bg-subtle);
  }

  /* ----- media-split: image beside text, stacks in narrow slots ---------- */
  .media-split {
    container-type: inline-size;
  }

  .media-split__grid {
    display: grid;
    gap: var(--space-7);
    align-items: center;
  }

  .media-split__media {
    margin: 0;
  }

  .media-split__media img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-xl);
  }

  @container (min-width: 48rem) {
    .media-split__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(var(--space-7), 6cqi, var(--space-9));
    }
  }

  /* ----- contact-list: icon + value rows (footer, contact block) --------- */
  .contact-list {
    display: grid;
    gap: var(--space-3);
  }

  .contact-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    --icon-size: 1.125rem;
  }

  .contact-list__item > .icon {
    box-sizing: content-box;
    padding: 0.55rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
  }

  .contact-list__item :is(a, address) {
    color: var(--color-text);
    font-style: normal;
    text-decoration: none;
  }

  .contact-list__item a:hover {
    text-decoration: underline;
  }

  /* ----- photo-hero ------------------------------------------------------ */
  .photo-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-block-size: max(36rem, 100svh);
    padding-block: calc(var(--header-height) + var(--space-7)) var(--space-9);
    overflow: hidden;
    text-align: center;
  }

  .photo-hero__media,
  .cta-band__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    margin: 0;
  }

  .photo-hero__media::after,
  .cta-band__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-overlay);
  }

  .photo-hero__media :is(picture, img),
  .cta-band__media :is(picture, img) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .photo-hero__media img {
    animation: photo-hero-settle 1.8s var(--ease-emphasized) both;
  }

  @keyframes photo-hero-settle {
    from { transform: scale(1.06); }
  }

  .photo-hero__content {
    --stack-space: var(--space-5);
    max-inline-size: 52rem;
  }

  .photo-hero__content .eyebrow {
    color: var(--color-text-muted);
  }

  .photo-hero__title {
    font-size: clamp(2rem, 1.2rem + 3.6vw, 4.25rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .photo-hero__lead {
    max-inline-size: 44rem;
    margin-inline: auto;
    font-size: var(--text-lg);
    font-weight: var(--font-light);
    color: var(--sand);
  }

  .photo-hero__actions {
    padding-block-start: var(--space-3);
  }

  .photo-hero__badge {
    position: absolute;
    inset-block-end: var(--space-5);
    inset-inline-end: var(--container-gutter);
    inline-size: clamp(5rem, 3.5rem + 5vw, 8.5rem);
    margin: 0;
  }

  .photo-hero__badge img {
    inline-size: 100%;
    block-size: auto;
    filter: var(--drop-shadow-badge);
  }

  /* ----- cta-band -------------------------------------------------------- */
  .cta-band {
    position: relative;
    isolation: isolate;
    padding-block: clamp(5rem, 3rem + 9vw, 10rem);
    overflow: hidden;
    text-align: center;
  }

  .cta-band__content {
    --center-max: 48rem;
    --stack-space: var(--space-5);
  }

  .cta-band__title {
    font-size: var(--text-4xl);
  }

  .cta-band__lead {
    font-size: var(--text-lg);
    font-weight: var(--font-light);
    color: var(--sand);
  }

  .cta-band .button {
    margin-block-start: var(--space-3);
  }

  /* ----- site-header ------------------------------------------------------
     Out of flow from the start (absolute), so switching to fixed via JS
     causes no layout shift. Non-hero pages pad <main> by the header height. */
  .site-header {
    --nav-pill-bg: var(--color-bg-subtle);
    --nav-pill-border: transparent;
    --button-bg: var(--ink);
    --button-fg: var(--paper);
    --button-bg-hover: var(--black);
    position: absolute;
    inset: 0 0 auto;
    z-index: 50;
    background-color: var(--color-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-header);
    transition:
      background-color var(--duration-slow) var(--ease-standard),
      color var(--duration-slow) var(--ease-standard),
      box-shadow var(--duration-slow) var(--ease-standard),
      translate var(--duration-slow) var(--ease-emphasized);
  }

  .site-header[data-sticky] {
    position: fixed;
  }

  .site-header[data-hidden] {
    translate: 0 -100%;
  }

  body:not(.has-hero) > main {
    padding-block-start: var(--header-height);
  }

  /* Over the photo hero, until scrolled: transparent, white type. */
  .has-hero .site-header:not([data-scrolled]) {
    --nav-pill-bg: rgb(255 255 255 / 0.08);
    --nav-pill-border: rgb(255 255 255 / 0.16);
    --color-focus-ring: var(--paper);
    --button-bg: var(--paper);
    --button-fg: var(--ink);
    --button-bg-hover: var(--mist);
    background-color: transparent;
    background-image: linear-gradient(rgb(var(--overlay-rgb) / 0.5), transparent);
    color: var(--paper);
    box-shadow: none;
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-block-size: var(--header-height);
  }

  .site-header__logo {
    flex: none;
    color: inherit;
    border-radius: var(--radius-sm);
  }

  .logo {
    display: block;
    inline-size: clamp(7.5rem, 6.5rem + 3vw, 10rem);
    block-size: auto;
    aspect-ratio: 789 / 230;
    color: inherit;
  }

  .site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* Header CTA follows the header state (light over photo, ink when solid). */
  .site-header .site-header__cta {
    --button-bg: inherit;
    --button-fg: inherit;
    --button-bg-hover: inherit;
    padding-inline: 1.5em;
  }

  .site-header__cta {
    display: none;
  }

  @media (min-width: 40rem) {
    .site-header__cta {
      display: inline-flex;
    }
  }

  @media (min-width: 64rem) {
    .site-header__call,
    .site-header__menu {
      display: none;
    }
  }

  /* ----- site-nav (desktop) ---------------------------------------------- */
  .site-nav {
    display: none;
  }

  @media (min-width: 64rem) {
    .site-nav {
      display: block;
    }
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.3rem;
    border: 1px solid var(--nav-pill-border);
    border-radius: var(--radius-full);
    background-color: var(--nav-pill-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background-color var(--duration-slow) var(--ease-standard);
  }

  .site-nav__item {
    position: relative;
    display: flex;
    align-items: center;
  }

  .site-nav__link {
    padding: 0.6rem 1.15rem;
    border-radius: var(--radius-full);
    color: inherit;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-standard);
  }

  .site-nav__link:hover,
  .site-nav__item.is-active > .site-nav__link {
    background-color: color-mix(in srgb, currentColor 11%, transparent);
    color: inherit;
  }

  .site-nav__item.is-active > .site-nav__link {
    font-weight: var(--font-semibold);
  }

  .site-nav__item--has-sub > .site-nav__link {
    padding-inline-end: 2.1rem;
  }

  .site-nav__toggle {
    position: absolute;
    inset-inline-end: 0.35rem;
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: inherit;
    cursor: pointer;
    --icon-size: 1rem;
  }

  .site-nav__toggle .icon {
    transition: rotate var(--duration-normal) var(--ease-standard);
  }

  .site-nav__toggle[aria-expanded="true"] .icon {
    rotate: 180deg;
  }

  .site-nav__sub {
    position: absolute;
    inset-block-start: calc(100% + 0.75rem);
    inset-inline-start: -0.3rem;
    min-inline-size: 16rem;
    padding: var(--space-2);
    border-radius: var(--radius-xl);
    background-color: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow-popover);
    opacity: 0;
    visibility: hidden;
    translate: 0 0.5rem;
    transition:
      opacity var(--duration-normal) var(--ease-standard),
      translate var(--duration-normal) var(--ease-emphasized),
      visibility 0s linear var(--duration-normal);
    --color-focus-ring: var(--ink);
  }

  /* Hover bridge across the gap between link and panel. */
  .site-nav__sub::before {
    content: "";
    position: absolute;
    inset: -0.85rem 0 100%;
  }

  .site-nav__toggle[aria-expanded="true"] + .site-nav__sub {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition-delay: 0s;
  }

  @media (hover: hover) {
    .site-nav__item--has-sub:hover > .site-nav__sub {
      opacity: 1;
      visibility: visible;
      translate: 0 0;
      transition-delay: 0s;
    }

    .site-nav__item--has-sub:hover > .site-nav__toggle .icon {
      rotate: 180deg;
    }
  }

  .site-nav__sub-link {
    display: block;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-md);
    color: inherit;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-standard);
  }

  .site-nav__sub-link:hover {
    background-color: var(--mist);
    color: inherit;
  }

  .site-nav__sub-link[aria-current] {
    font-weight: var(--font-semibold);
  }

  /* ----- mobile-nav: full-screen <dialog> -------------------------------- */
  .mobile-nav {
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: none;
    margin: 0;
    padding: 0 0 var(--space-7);
    border: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    translate: 0 -1rem;
    transition:
      opacity var(--duration-slow) var(--ease-standard),
      translate var(--duration-slow) var(--ease-emphasized),
      display var(--duration-slow) allow-discrete,
      overlay var(--duration-slow) allow-discrete;
  }

  .mobile-nav[open] {
    opacity: 1;
    translate: 0 0;
  }

  @starting-style {
    .mobile-nav[open] {
      opacity: 0;
      translate: 0 -1rem;
    }
  }

  .mobile-nav::backdrop {
    background: transparent;
  }

  @media (min-width: 64rem) {
    .mobile-nav {
      display: none;
    }
  }

  .mobile-nav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: var(--header-height);
  }

  .mobile-nav__body {
    padding-block-start: var(--space-6);
  }

  .mobile-nav__list > li {
    border-block-end: 1px solid var(--color-border);
  }

  .mobile-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-4);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
  }

  .mobile-nav__link::-webkit-details-marker {
    display: none;
  }

  .mobile-nav__link[aria-current] {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }

  .mobile-nav__link .icon {
    --icon-size: 1.5rem;
    transition: rotate var(--duration-normal) var(--ease-standard);
  }

  .mobile-nav__group[open] .mobile-nav__link .icon {
    rotate: 180deg;
  }

  .mobile-nav__sub {
    display: grid;
    gap: var(--space-1);
    padding: 0 0 var(--space-5) var(--space-4);
  }

  .mobile-nav__sub a {
    display: block;
    padding-block: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    text-decoration: none;
  }

  .mobile-nav__sub a:hover,
  .mobile-nav__sub a[aria-current] {
    color: var(--color-text);
  }

  .mobile-nav__foot {
    margin-block-start: var(--space-7);
  }

  .mobile-nav__foot .button {
    inline-size: 100%;
  }

  .mobile-nav__contact {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    text-decoration: none;
  }

  /* Staggered entrance of the menu rows. */
  .mobile-nav[open] :is(.mobile-nav__list > li, .mobile-nav__foot) {
    animation: mobile-nav-row var(--duration-slow) var(--ease-emphasized) both;
  }

  .mobile-nav__list > li:nth-child(2) { animation-delay: 40ms; }
  .mobile-nav__list > li:nth-child(3) { animation-delay: 80ms; }
  .mobile-nav__list > li:nth-child(4) { animation-delay: 120ms; }
  .mobile-nav__foot { animation-delay: 160ms; }

  @keyframes mobile-nav-row {
    from { opacity: 0; translate: 0 0.75rem; }
  }

  /* ----- site-footer ----------------------------------------------------- */
  .site-footer {
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) var(--space-6);
    font-size: var(--text-sm);
  }

  .site-footer__top {
    display: grid;
    gap: var(--space-8);
  }

  @media (min-width: 56rem) {
    .site-footer__top {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
      gap: var(--space-9);
    }
  }

  .site-footer__brand {
    --stack-space: var(--space-6);
    max-inline-size: 34rem;
  }

  .site-footer__logo {
    display: inline-block;
    color: var(--color-text);
    border-radius: var(--radius-sm);
  }

  .site-footer__logo .logo {
    inline-size: clamp(11rem, 9rem + 6vw, 16rem);
  }

  .site-footer__text {
    color: var(--color-text-muted);
  }

  .site-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: var(--space-7) var(--space-6);
    align-content: start;
  }

  .site-footer__heading {
    margin-block-end: var(--space-4);
    font-size: var(--text-base);
    color: var(--color-text);
  }

  .site-footer__links {
    display: grid;
    gap: var(--space-3);
  }

  .site-footer__links :is(a, button) {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .site-footer__links :is(a, button):hover {
    color: var(--color-text);
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    margin-block-start: var(--space-8);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border);
  }

  .site-footer__copy {
    color: var(--color-text-muted);
  }

  .site-footer__social {
    order: 3;
  }

  @media (min-width: 48rem) {
    .site-footer__bottom .attribution {
      margin-inline: auto;
    }
  }

  /* Agency mark: the SB Media logo file is navy — show it white here. */
  .site-footer .attribution__logo {
    filter: brightness(0) invert(1);
  }
}

/* ----- Cookie banner (engine, vanilla-cookieconsent) ----------------------
   Outside @layer on purpose: the library's own CSS is unlayered and loads
   after ours, so `html #cc-main` (one notch more specific) brings it into the
   brand — ink buttons, mist panels, the site's radii and fonts. */
html #cc-main {
  --cc-font-family: var(--font-sans);
  --cc-bg: var(--paper);
  --cc-primary-color: var(--ink);
  --cc-secondary-color: var(--stone);
  --cc-link-color: var(--ink);
  --cc-modal-border-radius: var(--radius-xl);
  --cc-btn-border-radius: var(--radius-md);
  --cc-btn-primary-bg: var(--ink);
  --cc-btn-primary-color: var(--paper);
  --cc-btn-primary-border-color: var(--ink);
  --cc-btn-primary-hover-bg: var(--zinc-700);
  --cc-btn-primary-hover-color: var(--paper);
  --cc-btn-primary-hover-border-color: var(--zinc-700);
  --cc-btn-secondary-bg: var(--mist);
  --cc-btn-secondary-color: var(--ink);
  --cc-btn-secondary-border-color: var(--mist);
  --cc-btn-secondary-hover-bg: var(--mist-strong);
  --cc-btn-secondary-hover-color: var(--ink);
  --cc-btn-secondary-hover-border-color: var(--mist-strong);
  --cc-separator-border-color: var(--mist);
  --cc-toggle-on-bg: var(--ink);
  --cc-toggle-off-bg: var(--stone);
  --cc-cookie-category-block-bg: var(--mist);
  --cc-cookie-category-block-border: var(--mist);
  --cc-cookie-category-block-hover-bg: var(--mist-strong);
  --cc-cookie-category-block-hover-border: var(--mist-strong);
  --cc-footer-bg: var(--mist);
  --cc-footer-border-color: var(--mist);
  --cc-footer-color: var(--stone);
  --cc-overlay-bg: rgb(35 35 35 / 0.6);
}