/*
 * Theme Name:  AIFolio Dark
 * Theme URI:   https://aifolio.co.uk
 * Description: Minimal dark WordPress theme for AIFolio. Provides Bootstrap 5.3 (CDN)
 *              with data-bs-theme="dark", the AIFolio electric-blue design tokens, and
 *              a "Landing Page" template that suppresses header/footer so the
 *              [aifolio_landing] shortcode renders full-width without theme chrome.
 *              Not a general-purpose theme — built specifically for AIFolio.co.uk.
 * Version:     0.1.0
 * Requires PHP: 8.1
 * Author:       AIFolio
 * Text Domain: aifolio-dark
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * DESIGN TOKENS — single source of truth for the whole site
 * Accent: signature gold (#D4AF37) — brand accent used site-wide (nav, CTAs,
 *         links, highlights). Supersedes the earlier electric-blue token so the
 *         marketing pages, legal pages and WooCommerce chrome share ONE accent.
 * Layer:  Bootstrap 5.3 color modes + CSS custom property layering.
 * Every page (landing, pricing, for-teams, legal, account) consumes these tokens
 * instead of re-declaring colours/spacing/radii — see landing.css / page-legal.php.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Design Tokens ──────────────────────────────────────────────────────────── */
/*
 * Applied on :root[data-bs-theme="dark"] so they override Bootstrap's own dark-mode
 * custom properties. The html element carries data-bs-theme="dark" (set by
 * functions.php body_class filter and the theme root attribute).
 * Source: https://getbootstrap.com/docs/5.3/customize/color-modes/
 */

:root,
[data-bs-theme="dark"] {
    /* ── Base surfaces ─────────────────────────────────────────────────── */
    --aif-base:           #0D0F14;   /* near-black — page background         */
    --aif-surface:        #161B24;   /* dark charcoal — card/panel bg        */
    --aif-surface-2:      #1E2535;   /* slightly lighter — inputs, secondary */
    --aif-border:         #2A3347;   /* subtle border/divider                */

    /* ── Text ──────────────────────────────────────────────────────────── */
    --aif-text:           #E8EAF0;   /* off-white primary text               */
    --aif-muted:          #7A8499;   /* muted/secondary text                 */

    /* ── Accent — signature gold (brand) ───────────────────────────────── */
    --aif-accent:         #D4AF37;   /* signature gold — CTAs, links, active  */
    --aif-accent-hover:   #E8C84A;   /* brighter gold on hover                */
    --aif-accent-rgb:     212, 175, 55; /* for rgba() alpha layering          */
    --aif-accent-soft:    rgba(212, 175, 55, 0.12); /* tint fills             */
    --aif-accent-glow:    rgba(212, 175, 55, 0.25); /* glow for hero elements */
    --aif-on-accent:      #0A0A0A;   /* text/icons ON a gold fill (WCAG-AA)   */

    /* ── Semantic colours ───────────────────────────────────────────────── */
    --aif-success:        #22C55E;   /* green  — completed status            */
    --aif-danger:         #EF4444;   /* red    — failed status, errors       */
    --aif-warning:        #F59E0B;   /* amber  — pending/processing          */

    /* ── Radii ─────────────────────────────────────────────────────────── */
    --aif-radius-sm:      6px;
    --aif-radius:         12px;
    --aif-radius-lg:      20px;
    --aif-radius-pill:    50px;

    /* ── Elevation / shadows ───────────────────────────────────────────── */
    --aif-shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.25);
    --aif-shadow:         0 8px 32px rgba(0, 0, 0, 0.35);
    --aif-shadow-lg:      0 12px 40px rgba(0, 0, 0, 0.45);

    /* ── Layout rhythm ─────────────────────────────────────────────────── */
    --aif-container:      1140px;    /* max content width (marketing)        */
    --aif-measure:        780px;     /* reading measure (legal / long-form)  */
    --aif-section-y:      5rem;      /* section vertical padding (marketing) */
    --aif-section-y-sm:   4rem;      /* tighter section padding              */

    /* ── Type scale ────────────────────────────────────────────────────── */
    --aif-fs-eyebrow:     0.8rem;
    --aif-fs-body:        1rem;
    --aif-fs-lead:        1.125rem;
    --aif-fs-h3:          1.2rem;
    --aif-fs-h2:          clamp(1.75rem, 4vw, 2.5rem);
    --aif-fs-h1:          clamp(2.25rem, 5vw, 3.5rem);
    --aif-fw-medium:      500;
    --aif-fw-semibold:    600;
    --aif-fw-bold:        700;
    --aif-fw-black:       800;

    /* ── Focus ring (keyboard accessibility) ───────────────────────────── */
    --aif-focus-ring:     0 0 0 0.2rem rgba(212, 175, 55, 0.4);

    /* ── Bootstrap 5.3 dark-mode root overrides ────────────────────────── */
    /* These map Bootstrap's built-in CSS variables to our custom tokens    */
    /* so every Bootstrap component automatically uses our palette.         */
    --bs-body-bg:          var(--aif-base);
    --bs-body-color:       var(--aif-text);
    --bs-card-bg:          var(--aif-surface);
    --bs-border-color:     var(--aif-border);
    --bs-link-color:       var(--aif-accent);
    --bs-link-hover-color: var(--aif-accent-hover);
    --bs-secondary-bg:     var(--aif-surface-2);
    --bs-tertiary-bg:      var(--aif-surface);
}

/* ── Global base overrides ──────────────────────────────────────────────────── */

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

html,
body {
    background-color: var(--aif-base);
    color:            var(--aif-text);
    font-family:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
                      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Scrollbar — dark themed (Chrome/Edge/Safari) */
::-webkit-scrollbar              { width: 8px; height: 8px; }
::-webkit-scrollbar-track        { background: var(--aif-base); }
::-webkit-scrollbar-thumb        { background: var(--aif-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: var(--aif-muted); }

/* ── Theme chrome (header / footer) ────────────────────────────────────────── */
/* header.php / footer.php now render the SAME .aif-topnav / .aif-landing-footer */
/* markup as the Landing Page template (see header.php / footer.php doc blocks). */
/* The .site-header / .site-title / .site-footer rules below are DEAD CSS left  */
/* over from the old bare-chrome markup -- header.php/footer.php no longer emit */
/* these class names. Left in place (not deleted) as this task is scoped to     */
/* header/footer/CSS-availability/offset/images; flagged as a follow-up cleanup.*/

.site-header {
    background-color: var(--aif-surface);
    border-bottom: 1px solid var(--aif-border);
    padding: 1rem 0;
}

.site-header .site-title a {
    color: var(--aif-text);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
}

.site-footer {
    background-color: var(--aif-surface);
    border-top: 1px solid var(--aif-border);
    color: var(--aif-muted);
    font-size: 0.875rem;
    padding: 2rem 0;
    text-align: center;
}

/* -- Fixed-top navbar offset for non-landing pages --------------------------- */
/* header.php header nav is fixed-top (position: fixed), so on internal
 * pages (index.php -> get_header()/get_footer()) page content would render
 * UNDER the fixed nav unless something pushes it down. The Landing Page
 * template already solves this itself: its FIRST section (.aif-hero) has
 * padding-top: 80px in landing.css -- scoped to .aif-hero, which only exists
 * on the landing markup, so it does not apply here.
 *
 * For every other page, #main-content (opened in header.php, closed in
 * footer.php) is the element directly below the fixed nav, so it gets the
 * same 80px offset here. Scoped to body:not(.aifolio-landing) -- the Landing
 * Page template adds the aifolio-landing body class via body_class() -- so
 * this rule can never double-pad the landing page. */
body:not(.aifolio-landing) #main-content {
    padding-top: 80px;
}

/* ── Utility classes ─────────────────────────────────────────────────────────── */

.aif-text-accent  { color: var(--aif-accent);  }
.aif-text-muted   { color: var(--aif-muted);   }
.aif-bg-surface   { background-color: var(--aif-surface);   }
.aif-bg-surface-2 { background-color: var(--aif-surface-2); }

/* Accent button overrides (complement Bootstrap .btn-primary in dark mode) */
/*
 * Primary button. Gold fill + near-black text keeps WCAG-AA contrast
 * (white-on-gold fails AA, so on-accent text is dark — see --aif-on-accent).
 */
.btn-aif-accent {
    background-color: var(--aif-accent);
    border-color:     var(--aif-accent);
    color:            var(--aif-on-accent);
    font-weight:      var(--aif-fw-semibold);
    transition:       background-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-aif-accent:hover,
.btn-aif-accent:focus {
    background-color: var(--aif-accent-hover);
    border-color:     var(--aif-accent-hover);
    box-shadow:       0 0 0 0.25rem var(--aif-accent-glow);
    color:            var(--aif-on-accent);
}

/* Shared keyboard-focus ring — one visible, on-brand focus style everywhere. */
.btn-aif-accent:focus-visible,
a.aif-nav-cta:focus-visible,
.aif-topnav .navbar-brand:focus-visible {
    outline:    none;
    box-shadow: var(--aif-focus-ring);
}

/* Glow ring utility */
.aif-glow {
    box-shadow: 0 0 20px var(--aif-accent-glow), 0 0 40px var(--aif-accent-glow);
}