/*
 * Chiggle Academy — site header.
 *
 * The custom header is rendered via wp_body_open (see inc/hooks-header.php).
 * Astra's default <header id="masthead"> is hidden completely. This file
 * also contains the base .ca-btn button system used across the site.
 *
 * Reference: mockup/chiggle_academy_mockup.html `.site-header`.
 */

/* ─────────────────────────────────────────────────────────────
 * Suppress Astra's default header
 * ───────────────────────────────────────────────────────────── */
#masthead,
.site-header.ast-primary-header-bar,
.ast-above-header,
.ast-below-header {
	display: none !important;
}

/* ─────────────────────────────────────────────────────────────
 * Custom header
 * ───────────────────────────────────────────────────────────── */
.ca-header {
	background: var(--navy);
	height: 68px;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: var(--shadow-sm);
}

.ca-header-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	height: 100%;
	padding: 0 var(--container-padding);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* WP admin bar offset */
body.admin-bar .ca-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .ca-header { top: 46px; }
}

/* Brand */
.ca-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	flex-shrink: 0;
}
.ca-brand-logo {
	width: 38px;
	height: 38px;
	display: block;
}
.ca-brand-wordmark {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: white;
	white-space: nowrap;
	letter-spacing: -0.01em;
}
.ca-brand-wordmark span {
	color: var(--gold);
}

/* Primary nav */
.ca-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}
.ca-nav-list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ca-nav-list li {
	margin: 0;
}
.ca-nav-list a {
	display: block;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.75);  /* a11y: 0.55 → 0.75 on navy (4.30 borderline → 7.0) */
	text-decoration: none;
	padding: 8px 16px;
	border-radius: 8px;
	transition: color 0.2s, background-color 0.2s;
	white-space: nowrap;
}
.ca-nav-list a:hover,
.ca-nav-list a:focus-visible {
	color: white;
	background: rgba(255, 255, 255, 0.06);
}
.ca-nav-list .current-menu-item > a,
.ca-nav-list .current_page_item > a {
	color: var(--gold);
}

/* Dropdown — "Resources" → Templates / AI Prompts.
 * Hover-to-open on desktop with focus-within fallback for keyboard;
 * click toggles aria-expanded on tap-only devices (handled in
 * inline JS at the bottom of inc/hooks-header.php). */
.ca-nav-has-dropdown {
	position: relative;
}
.ca-nav-dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: 0;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.75);  /* a11y: 0.55 → 0.75 on navy (4.30 → 7.0) */
	padding: 8px 14px 8px 16px;
	border-radius: 8px;
	cursor: pointer;
	transition: color 0.2s, background-color 0.2s;
	white-space: nowrap;
}
.ca-nav-dropdown-toggle:focus-visible,
.ca-nav-has-dropdown[data-open="true"] .ca-nav-dropdown-toggle {
	color: white;
	background: rgba(255, 255, 255, 0.06);
	outline: none;
}
@media (hover: hover) and (pointer: fine) {
	.ca-nav-dropdown-toggle:hover,
	.ca-nav-has-dropdown:hover .ca-nav-dropdown-toggle {
		color: white;
		background: rgba(255, 255, 255, 0.06);
		outline: none;
	}
}
.ca-nav-chevron {
	transition: transform 0.2s ease;
	opacity: 0.7;
}
.ca-nav-has-dropdown[data-open="true"] .ca-nav-chevron {
	transform: rotate(180deg);
	opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
	.ca-nav-has-dropdown:hover .ca-nav-chevron {
		transform: rotate(180deg);
		opacity: 1;
	}
}
.ca-nav-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 280px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(18, 43, 105, 0.18), 0 2px 6px rgba(18, 43, 105, 0.08);
	z-index: 1000;
}
/* Transparent bridge so the mouse can cross from the toggle into the
 * panel without the parent `<li>` losing :hover. Visually keeps a 6px
 * gap above the panel but the bridge captures pointer events. */
.ca-nav-dropdown::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	height: 8px;
	background: transparent;
}
/* Open state — keyboard focus or operator-set `data-open` always works.
 * `:hover` is gated to fine-pointer devices via @media (hover: hover) so
 * touch devices don't get sticky-hover keeping the dropdown open after
 * the user taps it closed. */
.ca-nav-has-dropdown:focus-within .ca-nav-dropdown,
.ca-nav-has-dropdown[data-open="true"] .ca-nav-dropdown {
	display: block;
}
@media (hover: hover) and (pointer: fine) {
	.ca-nav-has-dropdown:hover .ca-nav-dropdown {
		display: block;
	}
}
.ca-nav-dropdown li {
	margin: 0;
}
.ca-nav-dropdown a {
	display: block;
	padding: 10px 14px;
	color: var(--navy);
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 500;
	text-decoration: none;
	border-radius: 8px;
	transition: background-color 0.15s ease;
	white-space: normal;
}
.ca-nav-dropdown a:hover,
.ca-nav-dropdown a:focus-visible {
	background: var(--gold-pale);
	outline: none;
}
.ca-nav-dropdown-title {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--navy);
	letter-spacing: -0.005em;
	line-height: 1.3;
}
.ca-nav-dropdown-meta {
	display: block;
	margin-top: 2px;
	font-size: 0.72rem;
	color: rgba(45, 45, 45, 0.65);
	font-weight: 500;
}

/* Action area (right side) */
.ca-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* User avatar pill (logged-in state) */
.ca-user {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	padding: 4px 12px 4px 4px;
	border-radius: 12px;
	transition: background-color 0.2s;
}
.ca-user:hover,
.ca-user:focus-visible {
	background: rgba(255, 255, 255, 0.06);
}
.ca-user-avatar {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--gold), var(--gold-light));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 0.8rem;
	color: var(--navy);
	overflow: hidden;
}
/* When the user has uploaded a real photo, render it via <img>. The
 * img sits inside the same 34×34 rounded square — object-fit:cover
 * crops the photo to fill the square without distortion. */
.ca-user-avatar.ca-user-avatar-img {
	background: var(--navy-deep);
	object-fit: cover;
	display: block;
	padding: 0;
}
.ca-user-name {
	font-size: 0.82rem;
	font-weight: 600;
	color: white;
}

/* Sign Out icon button — sits right of avatar (v0.11.5). Operator
 * feedback: previously the only Sign Out path was via Dashboard or
 * footer. Now exposed in the header for one-click logout. Square
 * 34×34 to match avatar dimensions; icon-only on desktop, same in
 * the mobile drawer with a text label appended via header markup. */
.ca-signout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
	margin-left: 4px;
}
.ca-signout:hover,
.ca-signout:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	color: white;
	outline: 0;
}
.ca-signout svg {
	display: block;
}
/* Mobile drawer sign-out — hidden by default; the desktop logout is the
 * .ca-signout icon in the header actions. Shown inside the drawer at mobile
 * width (see the @media block below). */
.ca-nav-signout {
	display: none;
}

/* ─────────────────────────────────────────────────────────────
 * Button system (used throughout the site)
 *
 * !important on text-decoration: Astra's .entry-content a rule has
 * higher specificity (0,1,1) than .ca-btn (0,1,0) and re-underlines
 * every <a class="ca-btn">. !important is the cleanest override
 * because buttons must NEVER be underlined regardless of context.
 * ───────────────────────────────────────────────────────────── */
.ca-btn,
a.ca-btn,
button.ca-btn {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.82rem;
	padding: 10px 24px;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
	text-decoration: none !important;
	letter-spacing: 0.01em;
	white-space: nowrap;
	line-height: 1;
	box-sizing: border-box; /* v0.9.84: without this, .ca-btn-block (width:100%) overflows
	                          parent content area by padding+border (~50px on a 303px column). */
}
.ca-btn:hover,
a.ca-btn:hover,
button.ca-btn:hover {
	text-decoration: none !important;
}
.ca-btn:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* Size variants */
.ca-btn-sm { padding: 7px 16px; font-size: 0.75rem; border-radius: 8px; }
.ca-btn-lg { padding: 14px 36px; font-size: 0.92rem; border-radius: 12px; }
.ca-btn-xl { padding: 16px 44px; font-size: 1rem; border-radius: 14px; font-weight: 700; }
.ca-btn-block { width: 100%; justify-content: center; }

/* Colour variants — :hover rules below are qualified `a.ca-btn-*:hover`
 * (specificity 0,2,1) so they beat global.css's `a:hover { color: var(--gold) }`
 * (0,1,1). Without that qualifier the generic anchor-hover rule wins and
 * the button text recolours to gold on hover — invisible on .ca-btn-gold's
 * gold-hover background. Surfaced by the v0.11.73 axe scan on the lesson
 * page; fixed v0.11.76. */
.ca-btn-gold {
	background: var(--gold);
	color: var(--navy);
}
.ca-btn-gold:hover,
a.ca-btn-gold:hover,
button.ca-btn-gold:hover {
	background: var(--gold-hover);
	color: var(--navy);                 /* preserve from .ca-btn-gold */
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}
.ca-btn-navy {
	background: var(--navy);
	color: white;
}
.ca-btn-navy:hover,
a.ca-btn-navy:hover,
button.ca-btn-navy:hover {
	background: var(--navy-light);
	color: white;                       /* preserve from .ca-btn-navy */
}
/* Outline variants — qualify with a./button. so the border rule beats
 * the base `a.ca-btn { border: none }` chain above. Without the
 * qualifier, .ca-btn-outline-* sits at (0,1,0) and loses to (0,1,1),
 * which is why "Get Started" rendered as borderless plain text in
 * v0.9.83. Fixed v0.9.84. */
.ca-btn-outline-white,
a.ca-btn-outline-white,
button.ca-btn-outline-white {
	background: transparent;
	color: white;
	border: 1.5px solid rgba(255, 255, 255, 0.25);
}
.ca-btn-outline-white:hover,
a.ca-btn-outline-white:hover,
button.ca-btn-outline-white:hover {
	border-color: white;
	background: rgba(255, 255, 255, 0.06);
	color: white;                       /* preserve — see .ca-btn-gold:hover comment */
}
.ca-btn-outline-navy,
a.ca-btn-outline-navy,
button.ca-btn-outline-navy {
	background: transparent;
	color: var(--navy);
	border: 1.5px solid var(--gray-200);
}
.ca-btn-outline-navy:hover,
a.ca-btn-outline-navy:hover,
button.ca-btn-outline-navy:hover {
	border-color: var(--navy);
	color: var(--navy);                 /* preserve — see .ca-btn-gold:hover comment */
}

/* ─────────────────────────────────────────────────────────────
 * Icon base
 * ───────────────────────────────────────────────────────────── */
.ca-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	color: currentColor;
}

/* ─────────────────────────────────────────────────────────────
 * Mobile burger
 * ───────────────────────────────────────────────────────────── */
.ca-burger {
	display: none;
	flex-direction: column;
	gap: 4px;
	width: 32px;
	height: 32px;
	padding: 7px 6px;
	background: transparent;
	border: 0;
	cursor: pointer;
	border-radius: 6px;
}
.ca-burger span {
	display: block;
	height: 2px;
	background: white;
	border-radius: 1px;
	transition: transform 0.2s;
}
.ca-burger:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* ─────────────────────────────────────────────────────────────
 * Responsive — drawer below 900px
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.ca-header-inner {
		padding: 0 20px;
		gap: 12px;
	}
	.ca-brand-wordmark {
		font-size: 0.95rem;
	}
	/* ─────────────────────────────────────────────────────────────
	 * Side-drawer pattern (v0.9.71) — anchored to the right where
	 * the burger icon lives. 85vw wide, capped at 360px. Slides in
	 * via translateX; scrim (separate element below) dims the
	 * remaining 15% of the viewport and is tappable to close.
	 *
	 * Visibility transition trick: visibility is delayed by 0.3s
	 * when closing so the slide-out animation is visible, then the
	 * element becomes truly hidden. When opening, visibility flips
	 * immediately so the slide-in starts visible.
	 * ───────────────────────────────────────────────────────────── */
	.ca-nav {
		position: fixed;
		top: 68px;
		right: 0;
		left: auto;
		bottom: 0;
		width: 85vw;
		max-width: 360px;
		background: var(--navy-deep);
		padding: 12px 20px 20px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		flex: none;
		z-index: 1001;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
		            visibility 0s linear 0.3s;
		box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
	}
	.ca-nav[data-open="true"] {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
		            visibility 0s linear 0s;
	}

	/* Scrim — covers the rest of the viewport below the header. Click
	 * passes through to the body so auth.js's outside-click handler
	 * fires the close path. (pointer-events stays auto so iOS
	 * registers the tap; the click target is .ca-nav-scrim itself,
	 * which is outside .ca-nav, so the handler closes the drawer.) */
	.ca-nav-scrim {
		position: fixed;
		top: 68px;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 1000;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
		cursor: pointer;
	}
	body[data-ca-nav-open="true"] .ca-nav-scrim {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s ease, visibility 0s linear 0s;
	}
	/* Lock body scroll while the drawer is open */
	body[data-ca-nav-open="true"] {
		overflow: hidden;
	}
	.ca-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.ca-nav-list a {
		padding: 12px 16px;
		font-size: 0.9rem;
	}
	/* Mobile dropdown — inline instead of absolute-positioned. The
	 * toggle button reads like a normal nav item; the panel expands
	 * below it inside the burger drawer. Hover triggers don't fire
	 * on touch, so the panel is shown when the parent <li> carries
	 * `[data-open="true"]` (set by inline JS in hooks-header.php). */
	.ca-nav-dropdown-toggle {
		width: 100%;
		justify-content: space-between;
		padding: 12px 16px;
		font-size: 0.9rem;
	}
	.ca-nav-dropdown {
		position: static;
		display: none;
		background: rgba(255, 255, 255, 0.04);
		border: 0;
		box-shadow: none;
		margin: 4px 0 8px;
		padding: 4px;
		min-width: 0;
	}
	.ca-nav-has-dropdown[data-open="true"] .ca-nav-dropdown {
		display: block;
	}
	.ca-nav-dropdown a {
		color: rgba(255, 255, 255, 0.85);
	}
	.ca-nav-dropdown-title { color: white; }
	.ca-nav-dropdown-meta  { color: rgba(255, 255, 255, 0.75); }  /* a11y: 0.6 → 0.75 */
	.ca-nav-dropdown a:hover,
	.ca-nav-dropdown a:focus-visible {
		background: rgba(255, 255, 255, 0.08);
	}
	.ca-burger {
		display: inline-flex;
	}
	.ca-user-name {
		display: none;
	}
	/* Hide the "Get Started" / secondary CTA, leave Sign In + burger */
	.ca-header-actions .ca-btn-gold:not(:first-child) {
		display: none;
	}
	/* v0.13.42 — drop the header sign-out icon on mobile so the burger owns
	 * the top-right slot (the main-menu button); logout moves to the foot of
	 * the drawer (.ca-nav-signout) instead. */
	.ca-header-actions .ca-signout {
		display: none;
	}
	.ca-nav-signout {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 10px 0 0;
		padding: 14px 16px 4px;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		color: rgba(255, 255, 255, 0.85);
		font-size: 0.9rem;
		font-weight: 600;
		text-decoration: none;
	}
	.ca-nav-signout:hover,
	.ca-nav-signout:focus-visible {
		color: white;
	}
	.ca-nav-signout svg {
		flex: none;
	}
}

@media (max-width: 480px) {
	.ca-brand-wordmark { display: none; }
	.ca-header-inner { padding: 0 14px; }
}