/* Fonts loaded via wp_enqueue_style (functions.php) — keep this file local-cacheable. */ /* ═══════════════════════════════════════════════════════════ DESIGN SYSTEM — Church Archive Nigeria ═══════════════════════════════════════════════════════════ */ :root { --gold: #C9922A; --gold-light: #E8C068; --gold-pale: #FFF8EC; --dark: #0F0D0A; --dark-2: #1C1814; --mid: #3D3530; --muted: #6B5F52; --border: #E5DDD4; --bg: #FAF7F2; --white: #FFFFFF; --green: #1a6a2a; --blue: #1a3a7a; --red: #7a1a1a; --orange: #8a4a1a; --purple: #5a1a7a; /* Layout knobs — overridable by Header & Footer Builder dynamic CSS */ --container: 1200px; --nav-height: 68px; --nav-breakpoint: 992px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); font-family: 'Lora', Georgia, serif; color: var(--mid); line-height: 1.8; font-size: 15.5px; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { cursor: pointer; font-family: inherit; } /* Skip link */ .skip-link { position: absolute; top: -9999px; left: 16px; background: var(--gold); color: var(--dark); padding: 8px 16px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; z-index: 9999; border-radius: 0 0 4px 4px; transition: top .2s; } .skip-link:focus { top: 0; } /* ═══════════════════════════════════════════════════════════ NAVIGATION ═══════════════════════════════════════════════════════════ */ .nav { background: var(--dark); position: sticky; top: 0; z-index: 100; border-bottom: 2px solid rgba(201,146,42,.2); transition: box-shadow .2s; } .nav.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.4); } .nav-inner { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: var(--nav-height); } /* Desktop nav wrapper — visible above breakpoint, hidden on mobile. Header & Footer Builder injects matching @media block for the user-set breakpoint. */ #nav-desktop, .nav-desktop { display: flex; align-items: center; gap: 4px; } /* CRITICAL FIX: mobile drawer must NEVER render inline on desktop. v1.1.0 only hid this inside @media(max-width:768px), so on desktop the drawer's