/*
 * Studio DT — site chrome. Header, nav, footer baseline, archive grid, page variants.
 * Per-variant footer CSS lives in footer-large.css / footer-compact.css.
 */

/* === Top nav / header === */
.site-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    /* Horizontal edge inset matches the body grid gutter (--space-md); vertical padding is symmetric
       (10px top and bottom) and shared with the mobile nav so the hamburger breakpoint doesn't jump. */
    padding: calc(var(--space-md) / 2) var(--space-md);
    /* Real U8 Medium weight (replaces the old Regular + -webkit-text-stroke fake).
       Cascades to brand, menu, and toggle. */
    font-weight: var(--font-weight-medium);
    /* Shared nav size — identical on desktop and mobile so crossing the hamburger breakpoint
       doesn't flicker the font or the header height. */
    --nav-font: var(--font-size-tab);
    font-size: var(--nav-font);
    line-height: 1;   /* hug the glyphs so the 20px above/below the text reads symmetric (no 1.5 leading) */
}

.site-header__brand {
    text-decoration: none;
    white-space: nowrap;
}
.site-header__brand-text { white-space: nowrap; }

/* The seeded menu's first item is a redundant "home" link (CSS-class
   `site-header__brand-link`) duplicating the brand — hide it in both menus. */
.site-header__brand-link { display: none; }

.site-header__nav { flex: 1; min-width: 0; }   /* fill remaining header width so Contact can sit far right */
.site-header__nav .site-header__menu {
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
}
.site-header__menu a { text-decoration: none; }

/* Literal comma separators: after the brand, and between the left-group
   menu items (Projecten, Studio). Tuned to the seeded 4-item menu
   [home(hidden), Projecten, Studio, Contact]; Contact (:last-child) and the
   item before it (:nth-last-child(2)) get no comma. Revisit if the menu grows. */
.site-header__brand::after { content: ","; }
.site-header__menu li:not(:last-child):not(:nth-last-child(2))::after { content: ","; }
.site-header__menu li:last-child { margin-left: auto; }   /* Contact → far right */

/* Hamburger — hidden on desktop. Custom 3-bar icon (not the small ☰ glyph) drawn with
   currentColor, sized --space-sm (16px) tall so it reads proportional to the brand text,
   while staying within the brand's 18px line so the bar height/padding stay identical to
   the desktop comma-row. align-self:center vertically centers it against that text. */
.site-header__toggle {
    display: none;
    align-self: center;
    margin-inline-start: auto;       /* push to the right gutter, aligned like "Contact" */
    box-sizing: border-box;
    width: calc(var(--nav-font, var(--font-size-ui)) * 1.2);    /* tracks the nav font (own font-size is 0, so em can't) */
    height: calc(var(--nav-font, var(--font-size-ui)) * 0.8);   /* ~the brand text's ink height; scales with the nav font */
    padding: 0;
    border: 0;
    cursor: pointer;
    color: inherit;
    font-size: 0;                    /* hide the unicode hamburger fallback glyph */
    background-color: transparent;
    background-image:
        linear-gradient(currentColor 0 0),
        linear-gradient(currentColor 0 0),
        linear-gradient(currentColor 0 0);
    background-repeat: no-repeat;
    background-size: 100% calc(var(--border-width-default) + var(--border-width-hairline) / 2);   /* three bars, half a hairline thicker (2.5px) */
    background-position: left top, left center, left bottom;
}

/* === Nav swap to hamburger ===
   Collapse when EITHER the hero logo flips to its vertical/portrait layout (so the nav and
   the logo change together — same `orientation: portrait` as logo-explosion.css), OR, in
   landscape, when "Contact" comes within 100px of the left group. That landscape width =
   leftGroup(≈246) + Contact(≈53) + 100px gap + 2×gutter(40) ≈ 438px (at the 15px nav text).
   Keep the 438 in sync with --breakpoint-nav. */
@media (orientation: portrait), (max-width: 438px) {
    .site-header { padding: calc(var(--space-md) / 2); }   /* mobile: 10px inset all sides; font/vertical shared with desktop */
    .site-header__nav { display: none; }          /* hide desktop comma row */
    .site-header__brand::after { content: none; } /* no trailing comma on mobile */
    .site-header__toggle { display: inline-block; }
}

.site-mobile-menu[hidden] { display: none; }
.site-mobile-menu {
    position: fixed;
    inset: 10px 10px auto 10px;   /* full width minus a 10px gutter each side, 10px from top; hugs height */
    z-index: var(--z-overlay);
    background: var(--frost-bg);
    -webkit-backdrop-filter: var(--frost-blur);
    backdrop-filter: var(--frost-blur);
    display: flex;
    flex-direction: column;
    padding: var(--space-xl);     /* 32px around the links */
}
/* Close × — the same masked-SVG glyph as the projecten filter modal, pinned to the 10px corner. */
.site-mobile-menu__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 1.25rem; height: 1.25rem;
    border: 0; padding: 0; cursor: pointer;
    background-color: var(--color-text-default);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M3%203%2013%2013M13%203%203%2013'%20stroke='%23000'%20stroke-width='1.2'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M3%203%2013%2013M13%203%203%2013'%20stroke='%23000'%20stroke-width='1.2'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--motion-duration-hover) var(--motion-easing-default);
}
.site-mobile-menu__close:active { transform: translateY(1px); }
.site-mobile-menu__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--space-xl);
}
/* Links: the nav bar's look (medium weight, hover-underline, click-sink via base.css), a bit larger. */
.site-mobile-menu__list a {
    display: inline-block;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
}
.site-mobile-menu__list a:hover { text-decoration-line: underline; }
body.menu-open { overflow: hidden; }   /* scroll lock while overlay is open */

/* === Main-page custom sticky (JS toggles is-pinned / is-hidden; other pages static) === */
.site-header--sticky {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: transparent;
}
.site-header--sticky.is-hidden { transform: translateY(-100%); transition: transform var(--motion-duration-transition) var(--motion-easing-default); }
.site-header--sticky.is-pinned { transform: translateY(0);     transition: transform var(--motion-duration-transition) var(--motion-easing-default); }
@media (prefers-reduced-motion: reduce) {
    .site-header--sticky.is-hidden, .site-header--sticky.is-pinned { transition: none; }
}

/* === Single-project detail block — larger image on single-project views === */
body.single-project .studio-dt-detail__media { flex: 1.4; }

/* Projecten archive: full-width content on the nav's 20px gutter (not the capped 1280 container),
   so the grid/title/filters line up with the nav bar's leading + trailing edges. */
.site-main--archive-project {
    max-width: none;
    /* Defeat .site-main's margin-inline:auto: in the flex-column body, auto margins make the item
       shrink to its content, so empty results (a short <p>) collapse the width. margin:0 lets it
       stretch full-width, keeping the content on the nav's gutter whether or not there are results. */
    margin-inline: 0;
    padding-inline: var(--space-md);
}
/* The browse bar's margin-top owns the title→content gap; zero the title's bottom margin so the
   gap is identical whether the main is block (grid → sticky title works) or flex (no-results) —
   without this, the block↔flex margin-collapse difference jumps the filter row when results empty. */
.site-main--archive-project > .studio-dt-page-title { margin-bottom: 0; }
/* No-results: the main becomes a flex column ONLY when empty (grid + sticky title untouched); the
   message fills and centres the blank space between the filter bar and the footer. */
.site-main--archive-project:has(.projecten-no-results) {
    display: flex;
    flex-direction: column;
}
.projecten-no-results {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* Drop the footer's top margin in the no-results case so the message centres in the FULL gap
   down to the footer (the margin otherwise sits outside the main and biases the centre upward). */
.site-main--archive-project:has(.projecten-no-results) ~ .site-footer {
    margin-top: 0;
}

/* 404: flex column so the message fills and centres in the gap between the title and the footer.
   Footer margin-top dropped so it doesn't bias the visual centre upward. */
.site-main--404 {
    display: flex;
    flex-direction: column;
}
.not-found-message {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.site-main--404 ~ .site-footer { margin-top: 0; }

/* Single project: content + footer span full-width on the nav's gutter (like the archive), so the
   page lines up with the nav bar's leading/trailing edges (not the capped 1280 container). */
.site-main--single-project {
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--space-md);
}
body.single-project .site-footer__inner {
    max-width: none;
    padding-inline: var(--space-md);
}
@media (max-width: 800px) {
    .site-main--single-project,
    body.single-project .site-footer__inner { padding-inline: calc(var(--space-md) / 2); }   /* 10px — mobile nav gutter */
}

/* === Projecten archive grid === */
/* The archive (archive-project.php) lists ProjectItem cards in a .projecten-grid
   <ul>; the container/gutter come from .site-main. */
.projecten-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns-projecten), 1fr);
    gap: var(--grid-gap-projecten);
}
@media (max-width: 800px) {
    .projecten-grid { grid-template-columns: repeat(2, 1fr); }   /* 2 columns on mobile */
    .site-main--archive-project { padding-inline: calc(var(--space-md) / 2); }   /* 10px — align with the mobile nav gutter */
}
/* Archive thumbnails: a hair taller than square (matches the design reference), cover crop,
   and captions in full black (not muted grey). */
.projecten-grid .project-item__media { aspect-ratio: 864 / 878; }
.projecten-grid .project-item__media img { height: 100%; object-fit: cover; }
.projecten-grid .project-item__caption { color: var(--color-text-default); font-size: var(--font-size-body); }   /* +2px over the 14px caption */

.site-footer {
    margin-top: var(--space-section);
    /* Above the hero logo (and the front content) so scattered logo pieces pass behind
       the footer too; still below the sticky nav (--z-sticky 100). */
    position: relative;
    z-index: 20;
}

.site-footer__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--space-xl) var(--container-gutter);
}

/* Contact page — brand-yellow bar anchored to the bottom of the content, behind everything,
   bleeding toward the right page edge. Desktop only (hidden in portrait/mobile).
   isolation:isolate keeps the z-index:-1 layer above the body background but behind the
   page content. */
/* Drop the browser-default <figure> bottom margin (16px) so the card bottom meets the image and
   the wordmark below hugs it as intended. Scoped to contact to leave the studio gaps untouched. */
.is-contact .studio-dt-hero-image-text__media { margin: 0; }

/* Brand-yellow background shape, anchored to the page's bottom-right corner (40px up, 30px in from
   the page margins) and scrolling with the page — a decorative background behind all content.
   Anchored to the body (the page), not the centered content container. Desktop only. */
.is-contact { position: relative; }
.is-contact::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 40px;
    right: 30px;
    width: min(32%, 460px);
    aspect-ratio: 7.5 / 1;           /* logo yellow-bar proportion */
    background: var(--palette-yellow-500);
    pointer-events: none;
}
@media (orientation: portrait), (max-width: 800px) {
    .is-contact::after { display: none; }
}

/* Studio page — brand-green triangle (from the logo) in the pre-footer space, left-aligned to the
   content gutter, sitting 20px below the last block and 48px above the footer (the gap grows to fit
   it). Behind all content. Desktop only. */
.is-studio {
    --studio-shape-w: 140px;
    --studio-shape-h: calc(var(--studio-shape-w) * 931.828247 / 582.794678);   /* the triangle proportion */
}
.is-studio .site-main { position: relative; }
.is-studio .site-main::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: var(--container-gutter);
    bottom: 0;                  /* at the main's content bottom (a BFC, so the last block's margin counts) */
    width: var(--studio-shape-w);
    height: var(--studio-shape-h);
    background: url("../graphics/logo-green-triangle.svg") bottom left / contain no-repeat;
    pointer-events: none;
}
.is-studio .site-main > :last-child { margin-bottom: calc(20px + var(--studio-shape-h)); }   /* 20px above the shape */
.is-studio .site-footer { margin-top: 48px; }                                                /* 48px below the shape */
@media (orientation: portrait), (max-width: 800px) {
    .is-studio .site-main::after { display: none; }
    .is-studio .site-main > :last-child { margin-bottom: 120px; }       /* restore the default */
    .is-studio .site-footer { margin-top: var(--space-section); }
}