/* ==========================================================================
   Site chrome: logo, header, back-to-top control and footer

   Site header
   Static (non-sticky) and layered over the hero, as in the Figma landing
   page. Horizontal alignment comes from .container; Figma's 320px side
   spacing at 1920px is the 1280px container, not header padding.

   Breakpoint: below 70em the full navigation row no longer fits next to the
   logo, so it collapses into a menu panel. Above it, the header matches the
   Figma Navbar: logo · navigation · sun, distributed with space-between.
   ========================================================================== */

@layer components {
  .site-header {
    /* Menu open / close motion: slower than the base transition, with a
       slight overshoot. Zero under reduced motion (via the base token). */
    --menu-duration: calc(var(--transition-duration) * 1.5);
    --menu-ease: cubic-bezier(0.34, 1.56, 0.64, 1);

    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-header);
  }

  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--grid-gutter);
    padding-block: var(--site-header-padding);
  }

  /* Logo (header and footer): temporary text version, sized by the .text-h2
     style, until the official SVG asset is provided. */
  .logo {
    color: var(--color-text);
  }

  .logo__dot {
    color: var(--color-accent);
  }

  .site-nav__menu {
    display: flex;
  }

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

  /* ------------------------------------------------------------------------
     Menu toggle — only shown once JavaScript has initialised it
     (it then carries aria-expanded) and only in the collapsed layout.
     ------------------------------------------------------------------------ */
  .site-header__toggle {
    display: none;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-button);
    background: none;
    color: var(--color-text);
    cursor: pointer;
  }

  /* Burger icon (assets/icons/burgermenu1) while closed, close icon while
     open: both in the same spot, swapped with a quarter turn, a fade and a
     little bounce. */
  .site-header__toggle > img {
    grid-area: 1 / 1;
    transition:
      opacity var(--menu-duration) ease,
      rotate var(--menu-duration) var(--menu-ease),
      scale var(--menu-duration) var(--menu-ease);
  }

  .site-header__toggle-close {
    opacity: 0;
    rotate: -90deg;
    scale: 0.6;
  }

  .site-header__toggle[aria-expanded="true"] .site-header__toggle-open {
    opacity: 0;
    rotate: 90deg;
    scale: 0.6;
  }

  .site-header__toggle[aria-expanded="true"] .site-header__toggle-close {
    opacity: 1;
    rotate: 0deg;
    scale: 1;
  }

  /* ------------------------------------------------------------------------
     Collapsed layout: logo + menu toggle, navigation as a full-width panel.
     Without JavaScript the panel simply stays open.
     Opening and closing are eased rather than instant (on request): the
     panel and its background fade and slide in, the links follow one after
     another, and closing fades it all out. Where display can't be
     transitioned (older browsers) it simply switches, as before.
     ------------------------------------------------------------------------ */
  @media (width < 70em) {
    .site-header {
      transition: background-color var(--menu-duration) ease;
    }

    .site-header:has(.site-header__toggle[aria-expanded="true"]) {
      background-color: var(--color-bg);
    }

    .site-header__toggle[aria-expanded] {
      display: grid;
    }

    .site-nav {
      flex-basis: 100%;
    }

    /* Only once the script has closed the panel the first time
       (js/modules/site-nav.js), so page load doesn't show it closing. */
    .site-header[data-menu-motion] .site-nav {
      transition:
        opacity var(--menu-duration) ease,
        translate var(--menu-duration) var(--menu-ease),
        display var(--menu-duration);
      transition-behavior: allow-discrete;
    }

    .site-header__toggle[aria-expanded="false"] + .site-nav {
      display: none;
      opacity: 0;
      translate: 0 -0.75rem;
    }

    @starting-style {
      .site-header__toggle[aria-expanded="true"] + .site-nav {
        opacity: 0;
        translate: 0 -0.75rem;
      }
    }

    .site-nav__menu > li {
      transition:
        opacity var(--menu-duration) ease,
        translate var(--menu-duration) var(--menu-ease);
      transition-delay: calc(var(--menu-item, 0) * var(--transition-duration) / 5);
    }

    @starting-style {
      .site-nav__menu > li {
        opacity: 0;
        translate: 0 -0.5rem;
      }
    }

    .site-nav__menu > :nth-child(2) { --menu-item: 1; }
    .site-nav__menu > :nth-child(3) { --menu-item: 2; }
    .site-nav__menu > :nth-child(4) { --menu-item: 3; }
    .site-nav__menu > :nth-child(5) { --menu-item: 4; }

    .site-nav__menu {
      flex-direction: column;
      align-items: flex-start;
    }

    .site-nav__link {
      display: block;
      padding-block: 0.75rem;
    }

    .site-nav__cta {
      margin-block-start: var(--grid-gutter);
    }

    /* Decorative only until the theme switcher exists. */
    .site-header__sun {
      display: none;
    }
  }

  /* ------------------------------------------------------------------------
     Back to top (Figma "scrollup", 64 × 64; its visible square is 46px,
     inset 9px), in white. Bottom-right: the square sits 64px from the
     edges at desktop (Figma). Desktop only: tablet and mobile (the
     collapsed header) go without it.

     Sticky rather than fixed: its place in the flow is just above the
     footer (the negative margin keeps it out of the layout). It floats
     while the page scrolls and, at the end, the footer pushes it up, so it
     always stays outside the footer.

     Shown once the hero has scrolled away, hidden whenever it would cover
     the contact form (js/modules/back-to-top.js).
     ------------------------------------------------------------------------ */
  .back-to-top {
    --back-to-top-size: 4rem; /* 64 — the icon box */
    --back-to-top-offset: clamp(0.5rem, -0.4792rem + 4.3519vw, 3.4375rem); /* 8 → 55 */

    position: sticky;
    inset-block-end: var(--back-to-top-offset);
    z-index: var(--z-back-to-top);
    display: block;
    inline-size: fit-content;
    margin-block-start: calc(-1 * var(--back-to-top-size));
    margin-inline: auto var(--back-to-top-offset);
    translate: 0 calc(-1 * var(--back-to-top-lift, 0px)); /* rests above the Contact edge (JS) */
    border-radius: 1.5625rem; /* 25 — square radius 16 + inset 9, so the focus ring follows it */
    color: var(--color-white);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--transition-duration) ease,
      visibility 0s var(--transition-duration);
  }

  .back-to-top[data-visible] {
    opacity: 1;
    visibility: visible;
    transition:
      opacity var(--transition-duration) ease,
      visibility 0s;
  }

  /* Ring around the visible square rather than the 64px box. */
  .back-to-top:focus-visible {
    outline-offset: calc(var(--focus-outline-offset) - 9px);
  }

  /* The scrollup.svg asset used as a mask, so the icon takes the control's
     colour. */
  .back-to-top__icon {
    display: block;
    inline-size: var(--back-to-top-size);
    block-size: var(--back-to-top-size);
    background-color: currentColor;
    mask: url("../../assets/icons/scrollup.svg") no-repeat center / contain;
  }

  @media (width < 70em) {
    .back-to-top {
      display: none;
    }
  }

  /* ------------------------------------------------------------------------
     Full navigation row (Figma Navbar)
     ------------------------------------------------------------------------ */
  @media (width >= 70em) {
    .site-nav__menu {
      align-items: center;
      gap: 2.5rem; /* 40 */
      min-block-size: var(--site-header-row); /* Navbar content height */
    }
  }

  /* ------------------------------------------------------------------------
     Site footer (Figma: black band — the page background; logo at the start
     and copyright at the end of the page container, vertically centred).
     Lower than Figma's 148px on request: 114px at desktop, scaling with the
     section rhythm like the Contact padding above it.
     Logo and copyright share one row while they fit and wrap, start
     aligned, once they no longer do.
     ------------------------------------------------------------------------ */
  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--grid-gutter);
    min-block-size: calc(var(--section-space) * 114 / 96);
    padding-block: var(--grid-gutter);
  }

  /* Figma: a smaller logo instance than the header's (about 185 vs 221px
     wide at desktop, 5/6), so it scales with it. */
  .site-footer__logo {
    font-size: calc(var(--font-size-h2) * 5 / 6);
  }
}