/*
Theme Name: Arkavee Child
Theme URI: https://arkavee.com
Description: Custom child theme for Arkavee Consulting, built on GeneratePress. Direction 1 ("The Architect") design system — structural, numbered, gold-accented, square corners.
Author: Arkavee Consulting
Template: generatepress
Version: 1.0.0
Text Domain: arkavee-child
*/

/* ==========================================================================
   1. DESIGN TOKENS — the single source of truth for the whole site.
   Every color, font, and spacing value used anywhere in the theme should
   reference one of these variables, not a hardcoded value. If a value here
   changes, it changes everywhere automatically.
   ========================================================================== */
:root {
	/* Brand colors */
	--av-navy: #0E2346;
	--av-navy-deep: #081730;
	--av-navy-darker: #050f22;
	--av-gold: #C8AA68;
	--av-gold-dark: #b3924f;
	--av-gold-text: #412402;
	--av-pillar-blue: #3A5FA1;
	--av-pillar-blue-muted: #5f7bad;
	--av-tint: #B8CCEB;
	--av-surface: #F2F2F2;
	--av-surface-alt: #F5F5F5;

	/* Text */
	--av-text-dark: #222222;
	--av-text-body: #333333;
	--av-text-muted: #666666;
	--av-text-faint: #999999;

	/* Typography */
	--av-font-heading: 'Archivo', sans-serif;
	--av-font-body: 'Inter', sans-serif;
	--av-font-logo: Georgia, serif;

	/* Spacing */
	--av-section-pad-y: 44px;
	--av-section-pad-y-mobile: 32px;
	--av-section-pad-x: 48px;
	--av-section-pad-x-mobile: 20px;
	--av-card-gap: 12px;

	/* Hero heights (see spec: hero = 100dvh minus nav height, interior heroes are fixed) */
	--av-nav-height: 68px;
	--av-hero-interior-height-desktop: 460px;
	--av-hero-interior-height-mobile: 340px;

	/* Radius — intentionally zero. Direction 1 uses square corners throughout. */
	--av-radius: 0px;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
body {
	font-family: var(--av-font-body);
	color: var(--av-text-body);
	background: #ffffff;
}
h1, h2, h3, .av-heading {
	font-family: var(--av-font-heading);
	font-weight: 700;
	color: var(--av-navy);
	letter-spacing: 0.5px;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
* { box-sizing: border-box; }

/* ==========================================================================
   3. LAYOUT UTILITIES
   ========================================================================== */
.av-full-bleed {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.av-section {
	padding: var(--av-section-pad-y) var(--av-section-pad-x);
}
.av-section--navy   { background: var(--av-navy); }
.av-section--white  { background: #ffffff; }
.av-section--surface{ background: var(--av-surface); }
.av-container {
	max-width: 1200px;
	margin: 0 auto;
}

@media (max-width: 768px) {
	.av-section {
		padding: var(--av-section-pad-y-mobile) var(--av-section-pad-x-mobile);
	}
}

/* ==========================================================================
   4. CORNER BRACKET MOTIF
   The signature Direction 1 accent — replaces the concentric-ring motif
   from the print brand. Applied to navy hero sections only.
   ========================================================================== */
.av-corner-brackets { position: relative; }
.av-corner-brackets::before,
.av-corner-brackets::after {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	border-color: var(--av-gold);
	border-style: solid;
	border-width: 0;
}
.av-corner-brackets::before {
	top: 16px; left: 16px;
	border-top-width: 2px;
	border-left-width: 2px;
}
.av-corner-brackets::after {
	bottom: 16px; right: 16px;
	border-bottom-width: 2px;
	border-right-width: 2px;
}

/* ==========================================================================
   5. HERO
   Homepage: 100dvh minus nav height (true full screen, header accounted for).
   Interior pages: fixed shorter height — see design system spec.
   ========================================================================== */
.av-hero {
	background: var(--av-navy);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 var(--av-section-pad-x);
}
.av-hero--home {
	height: calc(100dvh - var(--av-nav-height));
}
.av-hero--interior {
	height: var(--av-hero-interior-height-desktop);
}
.av-hero__breadcrumb {
	font-size: 11px;
	color: var(--av-tint);
	margin-bottom: 14px;
}
.av-hero__title {
	font-family: var(--av-font-heading);
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
	letter-spacing: 0.5px;
	margin: 0 0 12px;
}
.av-hero--home .av-hero__title  { font-size: clamp(28px, 4vw, 44px); }
.av-hero--interior .av-hero__title { font-size: clamp(22px, 3vw, 30px); }
.av-hero__rule {
	width: 44px; height: 3px;
	background: var(--av-gold);
	margin: 14px 0 18px;
}
.av-hero__subhead {
	font-size: 14px;
	color: var(--av-tint);
	line-height: 1.6;
	max-width: 480px;
	margin: 0 0 24px;
}

@media (max-width: 768px) {
	.av-hero--interior { height: var(--av-hero-interior-height-mobile); }
}

/* ==========================================================================
   6. BUTTONS
   Primary never changes. Secondary/disabled flip depending on background —
   see design system doc for the full context table.
   ========================================================================== */
.av-btn {
	display: inline-block;
	font-family: var(--av-font-body);
	font-size: 12px;
	font-weight: 500;
	padding: 9px 20px;
	border-radius: var(--av-radius);
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
	border: 1.5px solid transparent;
}
.av-btn--primary {
	background: var(--av-gold);
	color: var(--av-gold-text);
}
.av-btn--primary:hover { background: var(--av-gold-dark); }

.av-btn--secondary-light {
	background: transparent;
	border-color: var(--av-navy);
	color: var(--av-navy);
}
.av-btn--secondary-light:hover { background: #f5f5f5; }

.av-btn--secondary-dark {
	background: transparent;
	border-color: var(--av-tint);
	color: #ffffff;
}
.av-btn--secondary-dark:hover { background: rgba(255,255,255,0.1); }

.av-btn--on-gold {
	background: var(--av-navy);
	color: #ffffff;
}
.av-btn--on-gold:hover { background: #16305e; }

.av-btn--disabled {
	pointer-events: none;
	opacity: 0.5;
	border-color: #ccc;
	color: #aaa;
}

/* ==========================================================================
   7. CARDS
   ========================================================================== */
.av-card {
	background: #ffffff;
	border: 1px solid #eeeeee;
	border-top: 3px solid var(--av-gold);
	padding: 14px;
	transition: box-shadow 0.2s ease;
}
.av-card:hover { box-shadow: 0 4px 10px rgba(14,35,70,0.08); }
.av-card__index {
	font-size: 10px;
	color: var(--av-gold);
	font-weight: 500;
}
.av-card__title {
	font-size: 12px;
	color: var(--av-navy);
	font-weight: 500;
	margin-top: 6px;
}
.av-card__desc {
	font-size: 11px;
	color: var(--av-text-muted);
	margin-top: 4px;
	line-height: 1.5;
}
.av-card__detail {
	display: none;
	font-size: 11px;
	color: var(--av-text-muted);
	line-height: 1.5;
	margin-top: 8px;
}
.av-card__detail.is-open { display: block; }
.av-card__toggle-icon { color: var(--av-gold); font-size: 14px; }

.av-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--av-card-gap); }
.av-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--av-card-gap); }
.js-av-why-card:hover { background: #0E2346 !important; }
@media (max-width: 640px) {
	.av-grid-2, .av-grid-3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   8. FAQ ACCORDION
   ========================================================================== */
.av-faq__item { border-bottom: 1px solid #eeeeee; }
.av-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 14px 4px;
	cursor: pointer;
}
.av-faq__q-text { font-size: 12px; color: var(--av-text-body); transition: color 0.15s; }
.av-faq__q:hover .av-faq__q-text { color: var(--av-gold); }
.av-faq__icon { color: var(--av-gold); font-size: 16px; font-weight: 300; }
.av-faq__a {
	display: none;
	padding: 0 4px 14px 24px;
	font-size: 11px;
	color: var(--av-text-muted);
	line-height: 1.6;
}
.av-faq__a.is-open { display: block; }

/* ==========================================================================
   9. FIVE PILLARS SELECTOR (tabbed, interactive)
   ========================================================================== */
.av-pillar-tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.av-pillar-tab {
	border: 1px solid #dddddd;
	background: #ffffff;
	color: var(--av-navy);
	font-family: var(--av-font-heading);
	font-size: 11px;
	padding: 8px 14px;
	cursor: pointer;
	transition: all 0.15s ease;
}
.av-pillar-tab.is-active { background: var(--av-navy); color: #fff; border-color: var(--av-navy); }
.av-pillar-tab:hover:not(.is-active) { border-color: var(--av-gold); }
.av-pillar-panel { display: flex; gap: 20px; align-items: center; min-height: 80px; }
.av-pillar-panel__icon {
	width: 56px; height: 56px;
	background: var(--av-navy);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.av-pillar-panel__icon i { font-size: 26px; color: var(--av-gold); }

/* ==========================================================================
   10. STEPPER (Our Approach)
   ========================================================================== */
.av-stepper { display: flex; align-items: center; margin-bottom: 16px; }
.av-stepper__dot {
	width: 26px; height: 26px;
	border: 2px solid var(--av-pillar-blue);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; color: var(--av-navy);
	cursor: pointer;
	transition: all 0.15s ease;
	flex-shrink: 0;
}
.av-stepper__dot.is-active { background: var(--av-gold); border-color: var(--av-gold); color: var(--av-gold-text); }
.av-stepper__line { height: 1px; background: #dddddd; flex: 1; }

/* ==========================================================================
   11. HEADER / NAV / MEGA MENU
   ========================================================================== */
.av-header {
	background: var(--av-navy);
	padding: 14px var(--av-section-pad-x);
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 100;
}
.av-logo { display: flex; align-items: center; gap: 10px; flex: 1; }
.av-logo__wordmark { font-family: var(--av-font-logo); font-size: 18px; letter-spacing: 1px; }
.av-logo__arka { color: #ffffff; }
.av-logo__vee {
	background: linear-gradient(90deg, #8fc2f5, #cfe6fb);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.av-logo__sub { font-size: 8px; letter-spacing: 2.5px; color: var(--av-tint); margin-top: 2px; }

.av-nav { display: flex; align-items: center; gap: 24px; font-size: 12px; color: #fff; flex: 1; justify-content: center; }
.av-nav-item { position: relative; padding: 8px 0; cursor: pointer; }
.av-nav-item:hover .av-nav-item__label { color: var(--av-gold); }

.av-mega {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: #ffffff;
	box-shadow: 0 12px 28px rgba(0,0,0,0.18);
	border-top: 3px solid var(--av-gold);
	z-index: 10;
}
.av-nav-item:hover .av-mega { display: flex; }
.av-mega__col { padding: 20px; }
.av-mega__col a { display: block; font-size: 12px; color: var(--av-text-body); padding: 6px 0; }
.av-mega__col a:hover { color: var(--av-gold); }
.av-mega__col--cta { background: var(--av-navy); min-width: 200px; }

.av-header__cta { flex: 1; display: flex; justify-content: flex-end; }

/* Mobile nav toggle — hidden on desktop */
.av-nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; }
@media (max-width: 900px) {
	.av-nav, .av-header__cta { display: none; }
	.av-nav-toggle { display: block; }

	/* When JS adds .is-mobile-open to the header, nav + CTA stack below it as a full-width mobile panel */
	.av-header.is-mobile-open {
		flex-wrap: wrap;
	}
	.av-header.is-mobile-open .av-nav {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		order: 3;
		background: var(--av-navy);
		padding: 16px 20px 0;
		gap: 4px;
	}
	.av-header.is-mobile-open .av-nav .av-mega {
		display: none; /* mega menus stay collapsed on mobile; tapping the parent item just navigates */
	}
	.av-header.is-mobile-open .av-header__cta {
		display: flex;
		justify-content: flex-start;
		width: 100%;
		order: 4;
		background: var(--av-navy);
		padding: 12px 20px 16px;
	}
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.av-footer__statement { background: var(--av-navy-deep); padding: 32px var(--av-section-pad-x) 0; }
.av-footer__headline { font-family: var(--av-font-heading); font-size: 24px; color: #fff; margin-bottom: 6px; }
.av-footer__quicklinks { display: flex; gap: 20px; margin: 16px 0 28px; font-size: 12px; color: var(--av-gold); flex-wrap: wrap; }
.av-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 24px; border-top: 1px solid #1a3a6b; }
.av-footer__col-title { font-size: 11px; color: var(--av-gold); letter-spacing: 1px; margin-bottom: 12px; }
.av-footer__col a, .av-footer__col span { display: block; font-size: 11px; color: var(--av-pillar-blue-muted); line-height: 2.2; }
.av-footer__col a:hover { color: var(--av-tint); }
.av-footer__pillars { text-align: center; font-size: 10px; color: var(--av-pillar-blue-muted); letter-spacing: 1.5px; padding: 24px 0; border-top: 1px solid #1a3a6b; margin-top: 24px; }
.av-footer__bottom { background: var(--av-navy-darker); padding: 14px var(--av-section-pad-x); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.av-footer__bottom, .av-footer__bottom a { font-size: 10px; color: var(--av-pillar-blue-muted); }

@media (max-width: 900px) {
	.av-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.av-footer__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   13. STAT BAND (placeholder styling — real numbers required, see functions.php)
   ========================================================================== */
.av-stat-band { background: var(--av-gold); padding: 24px var(--av-section-pad-x); }
.av-stat-band__row { display: flex; justify-content: space-around; text-align: center; flex-wrap: wrap; gap: 12px; }
.av-stat-band__num { font-family: var(--av-font-heading); font-size: 20px; color: var(--av-gold-text); }
.av-stat-band__label { font-size: 10px; color: #5a3d13; }
.av-stat-band__note { font-size: 9px; color: #5a3d13; text-align: center; margin-top: 8px; font-style: italic; }

/* ==========================================================================
   15. RESOURCES / DOCS LAYOUT (3-column: topic tree / article / TOC)
   ========================================================================== */
.av-docs-sidebar, .av-docs-toc {
	position: sticky;
	top: calc(var(--av-nav-height) + 12px);
	max-height: calc(100vh - var(--av-nav-height) - 24px);
	overflow-y: auto;
}
.av-docs-article h2 {
	font-family: var(--av-font-heading);
	font-size: 18px;
	color: var(--av-navy);
	margin-top: 32px;
	margin-bottom: 12px;
}
.av-docs-article h3 {
	font-family: var(--av-font-heading);
	font-size: 15px;
	color: var(--av-navy);
	margin-top: 24px;
	margin-bottom: 10px;
}
.av-docs-article p { margin: 0 0 16px; }
.av-docs-article a { color: var(--av-pillar-blue); text-decoration: underline; }
.av-docs-article ul, .av-docs-article ol { margin: 0 0 16px; padding-left: 20px; }

@media (max-width: 900px) {
	.av-docs-layout { flex-direction: column; }
	.av-docs-sidebar, .av-docs-toc, .av-docs-article {
		width: 100% !important;
		position: static;
		max-height: none;
		border-right: none !important;
		border-left: none !important;
		border-bottom: 1px solid #eee;
	}
}

/* ==========================================================================
   16. "COMING SOON" / "PHASE 2" TAGS
   ========================================================================== */
.av-tag {
	display: inline-block;
	background: #dddddd;
	color: #777777;
	font-size: 9px;
	padding: 3px 8px;
	margin-left: 8px;
	letter-spacing: 0.5px;
}
.av-placeholder-card {
	border: 1px dashed #cccccc;
	padding: 16px;
	color: #aaaaaa;
	font-size: 10px;
	text-align: center;
}