/*
 * Theme — Main CSS
 * Design tokens (CSS variables) + global base, typography and buttons.
 * Section-specific styles live in css/pages/{slug}.css.
 */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
    /* Palette */
    --color-dark:  #0e0e10;
    --color-light: #ffffff;

    /* Colors — overridden via Customizer inline CSS */
    --color-primary:   var(--color-dark);
    --color-secondary: var(--color-light);
    --color-accent:    var(--color-dark);
    --color-text:      var(--color-dark);
    --color-muted:     rgba(14, 14, 16, .4);
    --color-faint:     rgba(14, 14, 16, .28);
    --color-border:    rgba(14, 14, 16, .08);
    --color-bg:        var(--color-light);
    --color-bg-alt:    var(--color-dark);

    /* On dark sections */
    --color-on-dark:       var(--color-light);
    --color-on-dark-muted: rgba(255, 255, 255, .6);
    --color-on-dark-faint: rgba(255, 255, 255, .4);
    --color-grid-line:     rgba(255, 255, 255, .04);
    --grid-line:           rgba(14, 14, 16, .06);

    /* Typography */
    --font-body:    'Bootes Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Bootes Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-mono:    'Bootes Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --line-height:  1.4;
    --lh-tight:     .9;

    --fw-light:    300;
    --fw-regular:  400;
    --fw-book:     400; /* Book is not supplied — Regular */
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --fs-display-xl: 136px;
    --fs-display-l:  104px;
    --fs-display-m:  88px;
    --fs-h3:         56px;
    --fs-title:      24px;
    --fs-lead:       16px;
    --fs-body:       14px;
    --fs-small:      12px;

    /* Letter-spacing from design: -4% headings / -2% body */
    --ls-tight: -0.04em;
    --ls-base:  -0.02em;

    /* Layout — 1440 frame, 48px sides, 5 cols × 256 + 16 gap */
    --container-width:   1360px;
    --container-padding: 48px;
    --grid-gap:          16px;

    /* UI */
    --radius:      0;
    --radius-pill: 100000px;
    --transition:  0.2s ease;
    --shadow:      0 4px 12px rgba(14, 14, 16, .12);

    /* Header / Footer */
    --header-height: 72px;
    --header-bg:     var(--color-light);
    --footer-bg:     var(--color-dark);
    --footer-color:  var(--color-on-dark-muted);

    /* Z-indexes */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    400;
}

@media (max-width: 1023px) {
    :root {
        --fs-display-xl: 88px;
        --fs-display-l:  72px;
        --fs-display-m:  56px;
        --fs-h3:         40px;
        --fs-title:      20px;

        --container-padding: 32px;
    }
}

@media (max-width: 767px) {
    :root {
        --fs-display-xl: 56px;
        --fs-display-l:  48px;
        --fs-display-m:  40px;
        --fs-h3:         32px;
        --fs-title:      24px;

        --container-padding: 24px;
    }
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html {
    font-size: 16px;
    scroll-padding-top: var(--header-height);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family:      var(--font-body);
    font-size:        var(--fs-body);
    font-weight:      var(--fw-regular);
    line-height:      var(--line-height);
    letter-spacing:   var(--ls-base);
    color:            var(--color-text);
    background-color: var(--color-bg);
    display:          flex;
    flex-direction:   column;
    min-height:       100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family:    var(--font-heading);
    font-weight:    var(--fw-medium);
    line-height:    var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

a {
    color: inherit;
    transition: opacity var(--transition), color var(--transition);
}

::selection {
    background: var(--color-dark);
    color:      var(--color-light);
}

.site      { position: relative; display: flex; flex-direction: column; min-height: 100vh; }
.site-main { position: relative; flex: 1; }

/* Sections sit above the column guides (.grid-lines) of <main> */
.site-main > section { position: relative; z-index: 1; }

/* Wide screens: the container grows by 25% (1360 → 1700) so the side gutters stay reasonable */
@media (min-width: 1800px) {
    :root { --container-width: 1700px; }
}

.container {
    width:     100%;
    max-width: var(--container-width);
    padding:   0 var(--container-padding);
    margin:    0 auto;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* No overflow:hidden here — removing the page scrollbar would shift the header. The page is locked by Lenis + the overlay's own scroll. */

/* ── Typography ─────────────────────────────────────────────────────────── */
.t-display-xl,
.t-display-l,
.t-display-m {
    font-family:    var(--font-heading);
    font-weight:    var(--fw-medium);
    line-height:    var(--lh-tight);
    letter-spacing: var(--ls-tight);
}
.t-display-xl { font-size: var(--fs-display-xl); }
.t-display-l  { font-size: var(--fs-display-l); }
.t-display-m  { font-size: var(--fs-display-m); }

.t-h3 {
    font-family:    var(--font-heading);
    font-size:      var(--fs-h3);
    font-weight:    var(--fw-regular);
    line-height:    1;
    letter-spacing: var(--ls-base);
}

.t-title,
.t-lead {
    font-weight:    var(--fw-medium);
    line-height:    var(--line-height);
    letter-spacing: var(--ls-tight);
}
.t-title { font-size: var(--fs-title); }
.t-lead  { font-size: var(--fs-lead); }

.t-body,
.t-small {
    font-weight:    var(--fw-regular);
    line-height:    var(--line-height);
    letter-spacing: var(--ls-base);
}
.t-body  { font-size: var(--fs-body); }
.t-small { font-size: var(--fs-small); }

.t-mono {
    font-family:    var(--font-mono);
    font-size:      var(--fs-body);
    font-weight:    var(--fw-regular);
    line-height:    var(--line-height);
    letter-spacing: var(--ls-base);
}
.t-mono--bold {
    font-size:      var(--fs-lead);
    font-weight:    var(--fw-bold);
    letter-spacing: var(--ls-tight);
}
.t-mono--small { font-size: var(--fs-small); }

.t-muted { color: var(--color-muted); }
.t-faint { color: var(--color-faint); }

/* Link with a square marker and an arrow: ■ Explore initiatives → */
.link-arrow {
    display:         flex;
    align-items:     center;
    gap:             8px;
    color:           inherit;
    text-decoration: none;
}
.link-arrow::before {
    content:     '';
    flex:        0 0 6px;
    height:      6px;
    background:  currentColor;
}
.link-arrow__label { flex: 1; }
.link-arrow:hover  { opacity: .6; }

/* Tag with corner marks: [ About Boötes ] */
.tag {
    display:        inline-flex;
    align-items:    stretch;
    gap:            6px;
    margin:         0;
    font-family:    var(--font-mono);
    font-size:      var(--fs-body);
    line-height:    var(--line-height);
    letter-spacing: var(--ls-base);
}
.tag::before,
.tag::after {
    content:    '';
    flex:       0 0 2px;
    background: linear-gradient(currentColor 0 2px, transparent 2px calc(100% - 2px), currentColor calc(100% - 2px) 100%);
}

/* ── Dark sections ──────────────────────────────────────────────────────── */
.is-dark {
    --color-text:  var(--color-on-dark);
    --color-muted: var(--color-on-dark-muted);
    --color-faint: var(--color-on-dark-faint);
    --grid-line: rgba(255, 255, 255, .06);
    background-color: var(--color-dark);
    color: var(--color-text);
}

/* ── Grid lines (decorative column guides, 1440 frame) ─────────────────── */
.grid-lines {
    position:        absolute;
    top:             0;
    bottom:          0;
    left:            0;
    right:           0;
    z-index:         0;
    display:         flex;
    justify-content: space-between;
    width:           100%;
    max-width:       var(--container-width);
    margin:          0 auto;
    padding:         0 32px;
    pointer-events:  none;
}
.grid-lines span {
    flex:         0 0 16px;
    height:       100%;
    box-sizing:   border-box;
    border-left:  1px solid var(--grid-line);
    border-right: 1px solid var(--grid-line);
}

@media (max-width: 1023px) {
    .grid-lines { padding: 0 16px; }
    .grid-lines span:not(:first-child):not(:last-child) { display: none; }
}
@media (max-width: 767px) {
    .grid-lines { padding: 0 8px; }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    min-height:      32px;
    padding:         0 16px;
    box-sizing:      border-box;
    font-family:     var(--font-body);
    font-size:       var(--fs-body);
    font-weight:     var(--fw-regular);
    line-height:     var(--line-height);
    letter-spacing:  var(--ls-base);
    color:           var(--color-light);
    background:      var(--color-dark);
    border:          1px solid var(--color-dark);
    border-radius:   var(--radius);
    text-decoration: none;
    white-space:     nowrap;
    cursor:          pointer;
    transition:      background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover {
    background: transparent;
    color:      var(--color-dark);
}

.is-dark .btn {
    color:        var(--color-dark);
    background:   var(--color-light);
    border-color: var(--color-light);
}
.is-dark .btn:hover {
    background: transparent;
    color:      var(--color-light);
}

.btn--link {
    padding:    6px 0;
    color:      var(--color-text);
    background: transparent;
    border:     0;
    text-decoration: underline;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.btn--link:hover,
.is-dark .btn--link,
.is-dark .btn--link:hover {
    background: transparent;
    color:      var(--color-text);
}
.btn--link:hover { opacity: .6; }

/* Screen reader text — required by WordPress */
.screen-reader-text {
    clip:     rect(1px, 1px, 1px, 1px);
    height:   1px;
    overflow: hidden;
    position: absolute;
    width:    1px;
}
.screen-reader-text:focus {
    clip:       auto;
    height:     auto;
    left:       5px;
    top:        5px;
    padding:    15px 23px;
    background: #f1f1f1;
    color:      #21759b;
    display:    block;
    font-weight: 700;
    z-index:    100000;
}