/* ==========================================================================
   Base — Reset, cascade layers, body, global typography, focus styles
   ========================================================================== */

/* Establish cascade layers — prevents specificity wars between components */
@layer reset, base, components, utilities, overrides;

/* -------------------------------------------------------------------------- */
/* Reset                                                                        */
/* -------------------------------------------------------------------------- */

@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        scroll-behavior: smooth;
    }

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

    body {
        min-height: 100dvh;
        line-height: var(--leading-normal);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

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

    input, button, textarea, select {
        font: inherit;
    }

    p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
    }

    ul, ol { list-style: none; }

    a { color: inherit; text-decoration: none; }

    table { border-collapse: collapse; border-spacing: 0; }
}

/* -------------------------------------------------------------------------- */
/* Base                                                                         */
/* -------------------------------------------------------------------------- */

@layer base {
    body {
        font-family: var(--font-body);
        font-size: var(--text-base);
        font-weight: 400;
        color: var(--color-text-primary);
        background-color: var(--color-bg);
    }

    /* Headings */
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heading);
        font-weight: 700;
        line-height: var(--leading-tight);
        letter-spacing: var(--tracking-tight);
        color: var(--color-text-primary);
    }

    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-2xl); }
    h4 { font-size: var(--text-xl);  }
    h5 { font-size: var(--text-lg);  }
    h6 { font-size: var(--text-base);}

    p {
        color: var(--color-text-secondary);
        line-height: var(--leading-normal);
    }

    p + p { margin-top: var(--space-4); }

    a {
        color: var(--color-link);
        transition: color var(--transition-fast);
    }
    a:hover { color: var(--color-link-hover); }

    strong, b { font-weight: 600; }
    em, i     { font-style: italic; }

    small     { font-size: var(--text-sm); }

    code, pre {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
    }

    code {
        background: var(--color-vault-raised);
        padding: 0.1em 0.4em;
        border-radius: var(--radius-sm);
        color: var(--color-purple-light);
    }

    hr {
        border: none;
        border-top: 1px solid var(--color-border);
        margin: var(--space-8) 0;
    }

    /* --------------------------------------------------------------------------
       Global focus style — visible on all interactive elements
       Uses gold outline for maximum visibility on the dark theme
    -------------------------------------------------------------------------- */
    :focus-visible {
        outline: 2px solid var(--color-gold);
        outline-offset: 3px;
        border-radius: var(--radius-sm);
    }

    /* Remove focus ring for mouse interactions — keep for keyboard */
    :focus:not(:focus-visible) {
        outline: none;
    }

    /* --------------------------------------------------------------------------
       Skip link — accessible keyboard navigation
    -------------------------------------------------------------------------- */
    .skip-link {
        position: absolute;
        top: -100%;
        left: var(--space-4);
        padding: var(--space-2) var(--space-4);
        background: var(--color-gold);
        color: var(--color-obsidian);
        font-weight: 600;
        font-size: var(--text-sm);
        border-radius: 0 0 var(--radius-base) var(--radius-base);
        z-index: var(--z-toast);
        transition: top var(--transition-fast);
    }
    .skip-link:focus { top: 0; }

    /* --------------------------------------------------------------------------
       Container
    -------------------------------------------------------------------------- */
    .container {
        width: 100%;
        max-width: var(--container-xl);
        margin-inline: auto;
        padding-inline: var(--container-pad);
    }

    .container--wide   { max-width: var(--container-2xl); }
    .container--narrow { max-width: var(--container-md);  }

    /* --------------------------------------------------------------------------
       Selection
    -------------------------------------------------------------------------- */
    ::selection {
        background: var(--color-purple-muted);
        color: var(--color-parchment);
    }

    /* --------------------------------------------------------------------------
       Scrollbar (Webkit)
    -------------------------------------------------------------------------- */
    ::-webkit-scrollbar              { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track        { background: var(--color-vault); }
    ::-webkit-scrollbar-thumb        { background: var(--color-olive-deep); border-radius: var(--radius-full); }
    ::-webkit-scrollbar-thumb:hover  { background: var(--color-olive-mid); }
}

/* -------------------------------------------------------------------------- */
/* Hard overrides — outside @layer so they beat any unlayered old-theme CSS   */
/* -------------------------------------------------------------------------- */

/* Ensure the page background is always obsidian regardless of old-theme rules */
html,
body,
#page,
#wrapper,
.site,
.site-main,
#site-main,
#content,
.woocommerce-page,
.wp-site-blocks {
    background-color: var(--color-obsidian) !important;
}

/* WooCommerce injects .woocommerce-page class which sometimes carries white bg */
.woocommerce-page .site-main,
.woocommerce-page #main,
.woocommerce-page #primary {
    background-color: var(--color-obsidian) !important;
}

/* -------------------------------------------------------------------------- */
/* Fixed-header clearance — push main content below the entablature           */
/*                                                                              */
/* The header is position:fixed at z-index 40 with height --entablature-height  */
/* (84px) and the announcement strip adds another 26px below it.               */
/* All interior pages need padding-top to clear both layers.                   */
/* The homepage (.home) is excluded — its hero section deliberately fills the  */
/* full viewport including behind the header.                                  */
/* admin-bar: handled by html { margin-top: 32px } from WordPress core.        */
/* -------------------------------------------------------------------------- */
body:not(.home) main {
    padding-top: var(--entablature-height); /* 84px — just the header; strip hidden on interior pages */
}

/* Mobile: announcement strip is hidden, header shrinks to 60px */
@media (max-width: 767px) {
    body:not(.home) main {
        padding-top: 60px;
    }
}