/*
 * SBN Developer Notes.
 * Scope: global tokens, imported fonts, CSS variables, base typography, layout defaults.
 * Used by: every front-end template and most editor previews.
 * Edit risk: high; token or reset changes cascade across the whole site.
 * QA: home, membership, events, members, insights, contact, and mobile spacing.
 */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Instrument+Serif:ital@0;1&display=swap");

/* ==========================================================================
   ROOT TOKENS & DESIGN SYSTEM
   ========================================================================== */

:root {
    /* COLOUR PALETTE - PRIMARY */
    --sbn-navy: var(--wp--preset--color--navy, #0f1e3d);
    --sbn-gold: var(--wp--preset--color--gold, #c9a35a);
    --sbn-cream: var(--wp--preset--color--cream, #f5efe3);
    --navy: var(--sbn-navy);
    --gold: var(--sbn-gold);
    --cream: var(--sbn-cream);

    /* COLOUR PALETTE - SECONDARY (ACCENTS ~20% USAGE) */
    --sbn-estuary: var(--wp--preset--color--estuary, #2f6e86);
    --sbn-eucalypt: var(--wp--preset--color--eucalypt, #6f8a6a);
    --sbn-ink: var(--wp--preset--color--ink, #14213d);
    --sbn-paper: var(--wp--preset--color--paper, #faf6ec);
    --sbn-peel-clay: var(--wp--preset--color--peel-clay, #b4603d);
    --sbn-clay: var(--sbn-peel-clay);
    --sbn-peel: var(--sbn-peel-clay);
    --sbn-mist: var(--wp--preset--color--mist, #c3ccd2);
    --sbn-mist-light: var(--wp--custom--colors--mist-light, #e8edf0);
    --sbn-mist-soft: var(--wp--custom--colors--mist-soft, rgba(195, 204, 210, 0.55));
    --estuary: var(--sbn-estuary);
    --eucalypt: var(--sbn-eucalypt);
    --ink: var(--sbn-ink);
    --paper: var(--sbn-paper);
    --clay: var(--sbn-peel-clay);
    --mist: var(--sbn-mist);
    --sbn-surface: var(--wp--preset--color--surface, #fff);
    --sbn-gold-hover: var(--wp--custom--colors--gold-hover, #b8963f);
    --sbn-gold-soft: var(--wp--custom--colors--gold-soft, rgba(201, 163, 90, 0.58));
    --sbn-navy-hover: var(--wp--custom--colors--navy-hover, #1a3060);

    /* TYPOGRAPHY */
    --sbn-serif: var(--wp--preset--font-family--instrument, "Instrument Serif", Georgia, serif);
    --sbn-sans: var(--wp--preset--font-family--dmsans, "DM Sans", sans-serif);
    --serif: var(--sbn-serif);
    --sans: var(--sbn-sans);
    --sbn-eyebrow-letter-spacing: var(--wp--custom--typography--eyebrow-letter-spacing, 0.26em);
    --sbn-ui-letter-spacing: var(--wp--custom--typography--ui-letter-spacing, 0);

    /* LAYOUT & SPACING (8px base) */
    --sbn-max-width: var(--wp--custom--spacing--container, var(--wp--style--global--content-size, 1240px));
    --sbn-pad-desktop: var(--wp--custom--spacing--pad-desktop, 48px);
    --sbn-pad-mobile: var(--wp--custom--spacing--pad-mobile, 24px);
    --sbn-section-desktop: var(--wp--custom--spacing--section-desktop, 104px);
    --sbn-section-mobile: var(--wp--custom--spacing--section-mobile, 56px);
    --sbn-gutter: var(--wp--custom--spacing--gutter, 24px);
    --sbn-space-xs: var(--wp--custom--spacing--space-xs, 1rem);
    --sbn-space-sm: var(--wp--custom--spacing--space-sm, 1.5rem);
    --sbn-space-md: var(--wp--custom--spacing--space-md, 2.5rem);
    --sbn-space-lg: var(--wp--custom--spacing--space-lg, 4rem);
    --sbn-space-xl: var(--wp--custom--spacing--space-xl, 6rem);
    --sbn-space-2xl: var(--wp--custom--spacing--space-2-xl, 8rem);
    --sbn-section-space: var(--sbn-space-lg);
    --sbn-section-space-tight: var(--sbn-space-md);
    --sbn-inner-hero-space-top: var(--sbn-space-xl);
    --sbn-inner-hero-space-bottom: var(--sbn-space-lg);

    /* COMPONENT RADII */
    --sbn-radius-btn: var(--wp--custom--radii--button, 6px);
    --sbn-radius-card: var(--wp--custom--radii--card, 12px);
    --sbn-radius-card-lg: var(--wp--custom--radii--card-large, 14px);
    --sbn-radius-pill: var(--wp--custom--radii--pill, 100px);

    /* COMPONENT SIZING */
    --sbn-button-min-height: var(--wp--custom--components--button-min-height, 46px);
    --sbn-button-padding: var(--wp--custom--components--button-padding, 12px 28px);
    --sbn-button-padding-compact: var(--wp--custom--components--button-padding-compact, 10px 20px);
    --sbn-button-font-size: var(--wp--custom--components--button-font-size, 15px);
    --sbn-button-font-weight: var(--wp--custom--components--button-font-weight, 600);
    --sbn-control-min-height: var(--wp--custom--components--control-min-height, 48px);
    --sbn-control-padding: var(--wp--custom--components--control-padding, 12px 16px);
    --sbn-focus-ring: var(--wp--custom--shadows--focus, 0 0 0 3px rgba(201, 163, 90, 0.14));
    --sbn-transition-fast: var(--wp--custom--motion--fast, 0.18s ease);
    --sbn-transition-base: var(--wp--custom--motion--base, 0.24s ease);
    --sbn-transition-slow: var(--wp--custom--motion--slow, 0.7s ease);

    /* SHADOWS */
    --sbn-shadow-sm: var(--wp--custom--shadows--small, 0 1px 3px rgba(15, 30, 61, 0.06), 0 1px 2px rgba(15, 30, 61, 0.04));
    --sbn-shadow-md: var(--wp--custom--shadows--medium, 0 4px 12px rgba(15, 30, 61, 0.08), 0 2px 4px rgba(15, 30, 61, 0.04));
    --sbn-shadow-lg: var(--wp--custom--shadows--large, 0 16px 40px rgba(15, 30, 61, 0.12), 0 4px 12px rgba(15, 30, 61, 0.06));

    /* DYNAMIC EDGE (responsive padding) */
    --sbn-dynamic-edge: max(var(--sbn-pad-desktop), calc((100vw - var(--sbn-max-width)) / 2));
    --sbn-sticky-offset: 96px;
}

body.logged-in {
    --sbn-sticky-offset: 152px;
}

body.admin-bar {
    --sbn-sticky-offset: 128px;
}

body.admin-bar.logged-in {
    --sbn-sticky-offset: 184px;
}

/* Tablet breakpoint: 768-1239px */
@media (max-width: 1239px) {
    :root {
        --sbn-section-desktop: var(--sbn-space-xl);
        --sbn-section-space: var(--sbn-space-lg);
        --sbn-inner-hero-space-top: var(--sbn-space-lg);
        --sbn-inner-hero-space-bottom: var(--sbn-space-md);
    }
}

/* Mobile breakpoint: ≤767px */
@media (max-width: 767px) {
    :root {
        --sbn-dynamic-edge: var(--sbn-pad-mobile);
        --sbn-pad-desktop: 24px;
        --sbn-section-desktop: var(--sbn-section-mobile);
        --sbn-section-space: var(--sbn-space-md);
        --sbn-section-space-tight: var(--sbn-space-sm);
        --sbn-inner-hero-space-top: var(--sbn-space-md);
        --sbn-inner-hero-space-bottom: var(--sbn-space-md);
    }
}

/* ==========================================================================
   RESET & TYPOGRAPHY FUNDAMENTALS
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--sbn-sans);
    color: var(--sbn-ink);
    background: var(--sbn-paper);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sbn-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10000;
    transform: translateY(-140%);
    min-height: 44px;
    padding: 12px 16px;
    border-radius: var(--sbn-radius-btn);
    background: var(--sbn-navy);
    color: var(--sbn-cream) !important;
    font-family: var(--sbn-sans);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: transform var(--sbn-transition-fast);
}

.sbn-skip-link:focus,
.sbn-skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--sbn-gold);
    outline-offset: 3px;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--sbn-serif);
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

h1 {
    font-size: clamp(48px, 8vw, 84px);
}

h2 {
    font-size: clamp(36px, 5vw, 54px);
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 20px;
}

h5, h6 {
    font-size: 16px;
    font-weight: 600;
}

p {
    margin: 0;
}

/* Emphasis in headings */
em {
    font-style: italic;
    color: inherit;
}

/* ==========================================================================
   BLOCK RESETS & WORDPRESS OVERRIDES
   ========================================================================== */

main.wp-block-group,
header.wp-block-template-part,
footer.wp-block-template-part,
main.wp-block-group > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > * {
    margin-block-start: 0 !important;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--sbn-transition-base), background-color var(--sbn-transition-base);
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}

/* Focus states for keyboard accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--sbn-gold);
    outline-offset: 2px;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-tertiary:hover,
.btn-ghost:hover,
.btn-cta-primary:hover,
.btn-cta-ghost:hover,
.btn-footer-cta:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.wp-block-post-title a:hover {
    text-decoration: none;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

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

.sbn-section {
    padding: var(--sbn-section-space) var(--sbn-dynamic-edge);
    background: var(--sbn-paper);
}

html.sbn-reveal-ready .sbn-scroll-reveal:not(.revealed),
html.sbn-reveal-ready .sbn-scroll-reveal-stagger:not(.revealed) > * {
    opacity: 0;
    transform: translateY(24px);
    will-change: opacity, transform;
}

.sbn-scroll-reveal,
.sbn-scroll-reveal-stagger > * {
    transition: opacity var(--sbn-transition-slow), transform var(--sbn-transition-slow);
}

.sbn-scroll-reveal.revealed,
.sbn-scroll-reveal-stagger.revealed > * {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 767px) {
    .sbn-section {
        padding: var(--sbn-section-space) var(--sbn-dynamic-edge);
    }
}

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

    .sbn-scroll-reveal,
    .sbn-scroll-reveal-stagger > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}