/*
Theme Name: Gamma 1907
Theme URI: https://gamma1907.com
Author: Gamma Chapter of Alpha Phi Alpha Fraternity, Inc.
Description: Black and old-gold theme for the Gamma Chapter at Virginia Union University, built from the Gamma 1907 design: glowing seal header, gold dust, animated hero, Seven Jewels, timeline, Divine Nine colonnade and more. Works with the Gamma Site Kit plugin so events, lineage, alumni spotlights, poems, shop items and photos are edited from WP Admin without code.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gamma1907
*/

/* ---------- Design tokens ---------- */
:root {
	--g-black: #0B0B0B;
	--g-panel: #121110;
	--g-panel-2: #1C1A15;
	--g-gold: #D4AF5F;
	--g-gold-light: #F1D58F;
	--g-ivory: #F4EFE3;
	--g-muted: #B9B2A3;
	--g-line: rgba(212, 175, 95, .18);
	--g-serif: 'Playfair Display', Georgia, serif;
	--g-sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--g-black);
	color: var(--g-ivory);
	font-family: var(--g-sans);
	-webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
a { color: var(--g-gold); }
a:hover { color: var(--g-gold-light); }
:focus-visible { outline: 2px solid var(--g-gold-light); outline-offset: 3px; }
[hidden] { display: none !important; }
.g-root { min-height: 100vh; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Sticky header clears the WordPress admin bar when an editor is logged in. */
.admin-bar .g-root > header { top: 32px !important; }
@media (max-width: 782px) { .admin-bar .g-root > header { top: 46px !important; } }

/* Current page in the main menu. */
#site-nav a[aria-current="page"]:not(.btn) { color: var(--g-gold) !important; box-shadow: inset 0 -1px 0 var(--g-gold); }

/* Variant groups (Jewel picker, Divine Nine pillars, timeline): only the chosen one shows. */
.g-variants > [data-g-v] { scroll-margin-top: 96px; }

/* ---------- Generic pages (About, Contact, posts) ---------- */
.g-page { max-width: 860px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) 24px; }
.g-page__eyebrow { margin: 0 0 14px; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--g-gold); }
.g-page__title { margin: 0 0 28px; font-family: var(--g-serif); font-weight: 700; font-size: clamp(40px, 6vw, 72px); line-height: 1.05; color: var(--g-ivory); }
.g-page__rule { width: 140px; height: 2px; background: var(--g-gold); margin-bottom: 36px; }
.g-content { font-size: 18px; line-height: 1.75; color: #CFC8B8; }
.g-content h2, .g-content h3 { font-family: var(--g-serif); font-weight: 500; color: var(--g-ivory); line-height: 1.15; }
.g-content h2 { font-size: clamp(28px, 3.6vw, 40px); }
.g-content img { height: auto; border-radius: 4px; }
.g-content blockquote { margin: 28px 0; padding-left: 20px; border-left: 2px solid var(--g-gold); font-family: var(--g-serif); font-style: italic; font-size: 22px; color: var(--g-ivory); }
.g-content .wp-block-button__link, .g-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 14px 28px; border-radius: 999px; background: var(--g-gold); color: var(--g-black) !important; font-weight: 600; text-decoration: none; }
.g-list { display: grid; gap: 18px; }
.g-list article { border: 1px solid var(--g-line); border-radius: 4px; padding: 24px; background: var(--g-panel); }
.g-list h2 { margin: 0 0 8px; font-family: var(--g-serif); font-weight: 500; font-size: 26px; }
.g-list h2 a { color: var(--g-ivory); text-decoration: none; }
.g-pagination { margin-top: 32px; display: flex; gap: 12px; }

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

/* Keep the desktop menu on one line beside the seal; it wraps to the right on narrower screens. */
@media (min-width: 761px) {
	#site-nav { gap: 6px 20px !important; margin-left: auto; justify-content: flex-end; }
}
@media (min-width: 761px) and (max-width: 1180px) {
	.g-root > header a > span > span + span { display: none; }
	#site-nav { gap: 6px 16px !important; font-size: 13.5px !important; }
}