/* =============================================================================
 * Awareness That Heals — Interim Header + Social Topbar
 *
 * Styles for the alternate header composition:
 *   parts/topbar-social.html  + parts/header-interim.html
 *
 * Adapted from the ATH_Interim_Header_Handoff doc to the project's existing
 * token system. The handoff doc references --wp--preset--color--* slugs
 * directly; those still resolve correctly because the HH alt palette is the
 * active brand (see brand-active.css + functions.php data-brand="hh"). For
 * mode-aware surfaces we use the semantic --color-* tokens from
 * brand-tokens-hh.css so light/dark cycling works alongside the default
 * header.
 *
 * Scoped to .ath-topbar / .ath-header--interim so it can ship site-wide
 * without leaking onto the default header.
 * =========================================================================== */

/* =============================================================================
 * KAJABI-MIRROR HEADER (parts/topbar-nav.html + parts/header-kajabi.html)
 *
 * Per the 2026-05-22 ATH+HH meeting (Fathom 148967376): for the staging
 * interim experience, mirror the live awarenessthatheals.org Kajabi site
 * header rather than show the redesigned header-interim. Two parts:
 *
 *   topbar-nav     — dark teal band, centered nav (wp:navigation, user
 *                    configures items in Site Editor on first edit)
 *   header-kajabi  — white row: logo left, socials + search right
 * =========================================================================== */

/* Top nav bar — dark teal background, centered nav with white text. */
.ath-topbar--nav {
	padding: 10px 32px;
	border-bottom: 0;
}
.ath-topbar--nav .wp-block-navigation {
	font-family: var(--wp--preset--font-family--body-sans);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
}
.ath-topbar--nav .wp-block-navigation-item__content {
	color: #fff;
	padding-block: 6px;
}
.ath-topbar--nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--sage-light);
}
.ath-topbar--nav .wp-block-navigation__submenu-icon {
	color: inherit;
}
/* Submenu dropdown — keep readable against deep-teal overlay */
.ath-topbar--nav .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--deep-teal);
	border-color: rgba(255, 255, 255, 0.1);
}

/* Header — Kajabi mirror.
 * No outer-element overrides currently — kajabi inherits the
 * .ath-header base (bg, border-bottom, padding, gap). Kajabi-specific
 * styles for the right cluster, substack, and search live below
 * under .ath-header-kajabi__* BEM selectors. */
.ath-header--kajabi .ath-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	flex-shrink: 0;
}
.ath-header--kajabi .ath-logo__mark svg {
	width: 44px;
	height: 30px;
}
.ath-header--kajabi .ath-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
.ath-header--kajabi .ath-logo__wordmark {
	font-family: var(--wp--preset--font-family--heading-serif);
	font-size: 1.0625rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--deep-teal);
	text-transform: uppercase;
}
.ath-header--kajabi .ath-logo__tagline {
	font-family: var(--wp--preset--font-family--heading-serif);
	font-style: italic;
	font-size: 0.75rem;
	color: var(--wp--preset--color--teal-muted);
	margin-top: 2px;
}

.ath-header-kajabi__right {
	gap: 16px;
	flex-wrap: nowrap;
}
.ath-header-kajabi__right .wp-block-social-links {
	gap: 12px;
	margin: 0;
	padding: 0;
}
.ath-header-kajabi__right .wp-block-social-link {
	margin: 0;
	background: transparent;
	color: var(--wp--preset--color--deep-teal);
}
.ath-header-kajabi__right .wp-block-social-link:hover {
	color: var(--wp--preset--color--teal-mid);
}
.ath-header-kajabi__right .wp-block-social-link svg {
	width: 20px;
	height: 20px;
}

.ath-header-kajabi__substack {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--deep-teal);
	text-decoration: none;
	transition: color 180ms ease;
}
.ath-header-kajabi__substack:hover {
	color: var(--wp--preset--color--teal-mid);
}

/* core/search block — tighten to header-row height */
.ath-header-kajabi__search {
	margin: 0;
}
.ath-header-kajabi__search .wp-block-search__inside-wrapper {
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: 4px 4px 4px 14px;
	background: var(--wp--preset--color--off-white);
}
.ath-header-kajabi__search .wp-block-search__input {
	border: 0;
	background: transparent;
	font-size: 0.875rem;
	padding: 4px 0;
	min-width: 180px;
}
.ath-header-kajabi__search .wp-block-search__button {
	padding: 4px 8px;
	background: transparent;
	color: var(--wp--preset--color--deep-teal);
	border: 0;
}

/* =============================================================================
 * Original interim header parts (topbar-social + header-interim)
 * =========================================================================== */

/* -----------------------------------------------------------------------------
 * TOPBAR — social bar
 *
 * parts/topbar-social.html:
 *   <section class="ath-topbar ath-topbar--social">  flex space-between
 *     <div class="ath-topbar__leading">              flex left cluster
 *       <p class="ath-topbar__tagline">              "Find Robert where..."
 *       <ul class="wp-block-social-links">           FB, IG, LI, YT
 *       <a class="ath-topbar__substack">             SVG, not in core/social-link
 *     <div class="wp-block-buttons">                 Donate button (sage)
 *       <div class="wp-block-button ath-topbar__donate">
 *
 * Padding + max-width live on the outer .ath-topbar so they apply uniformly
 * even if a different child layout drops in later (e.g. tagline-only variant).
 * -------------------------------------------------------------------------- */
.ath-topbar {
	font-family: var(--wp--preset--font-family--body-sans);
	border-bottom: 0.5px solid var(--color-border-subtle);
	padding: 12px 32px;
}
.ath-topbar--social {
	gap: 24px;
}
.ath-topbar__leading {
	gap: 18px;
	flex-wrap: nowrap;
}
.ath-topbar__tagline {
	font-family: var(--wp--preset--font-family--heading-serif);
	font-style: italic;
	font-size: 0.95rem;
	color: var(--wp--preset--color--deep-teal);
	margin: 0;
	white-space: nowrap;
}

/* core/social-links — visually tighten the WP defaults (16px gap, 36px
 * icon canvas) so the cluster matches the topbar's compact density. */
.ath-topbar .wp-block-social-links {
	gap: 14px;
	margin: 0;
	padding: 0;
}
.ath-topbar .wp-block-social-link {
	margin: 0;
	background: transparent;
	color: var(--wp--preset--color--deep-teal);
}
.ath-topbar .wp-block-social-link:hover {
	color: var(--wp--preset--color--teal-mid);
}
.ath-topbar .wp-block-social-link a {
	padding: 0;
	color: inherit;
}
.ath-topbar .wp-block-social-link svg {
	width: 20px;
	height: 20px;
}

/* Substack — manual <a> beside the core block, sized to match. */
.ath-topbar__substack {
	color: var(--wp--preset--color--deep-teal);
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	transition: color 180ms ease;
}
.ath-topbar__substack:hover {
	color: var(--wp--preset--color--teal-mid);
}
.ath-topbar__substack svg {
	width: 20px;
	height: 20px;
}

/* Donate button — core/buttons + core/button block. Override the default
 * font-size + padding so the button doesn't dwarf the icon row. Sage bg
 * comes from the block's backgroundColor attribute. */
.ath-topbar .wp-block-buttons {
	margin: 0;
}
.ath-topbar__donate .wp-block-button__link {
	font-family: var(--wp--preset--font-family--body-sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 8px 18px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	line-height: 1.2;
}
.ath-topbar__donate .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--sage-light) !important;
}

/* -----------------------------------------------------------------------------
 * INTERIM HEADER — logo + nav + utilities
 * -------------------------------------------------------------------------- */
/* .ath-header base — applies to both .ath-header--interim and
 * .ath-header--kajabi (and any future header variants). The class
 * sits on the wrapping <header> element from parts/header-interim.html
 * and parts/header-kajabi.html.
 *
 * Reserved for header-specific surface styling only (bg, border,
 * padding, gap). Layout sizing (max-width, mx-auto) is intentionally
 * NOT here — apply via .ath-container or Tailwind max-w-page on the
 * markup, so a full-bleed-bg-with-constrained-content composition
 * stays a clean parent/child split rather than a coupling baked into
 * this selector. */
.ath-header {
	background: var(--color-bg-surface, #fff);
	border-bottom: 0.5px solid var(--color-border-subtle, #E8E2D6);
	padding: 14px 22px;
	gap: 24px;
}

/* Logo lockup */
.ath-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	flex-shrink: 0;
}
.ath-logo__mark { display: inline-flex; }
.ath-logo__mark svg {
	width: 30px;
	height: 30px;
}
.ath-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}
.ath-logo__wordmark {
	font-family: var(--wp--preset--font-family--heading-serif);
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--deep-teal);
	text-transform: uppercase;
}
.ath-logo__tagline {
	font-family: var(--wp--preset--font-family--heading-serif);
	font-style: italic;
	font-size: 0.625rem;
	color: var(--wp--preset--color--teal-muted);
	margin-top: 3px;
}

/* Cluster: nav + utilities */
.ath-header__cluster {
	gap: 11px;
	flex-wrap: nowrap;
}

/* Primary nav — wp:navigation */
.ath-nav {
	font-family: var(--wp--preset--font-family--body-sans);
	font-size: 0.6875rem;
}
.ath-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--teal-mid);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.ath-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--deep-teal);
}

/* Offsite items (AI Companion, Membership) — sage dot indicator + divider */
.ath-nav-item--offsite > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--deep-teal);
	font-weight: 500;
}
.ath-nav-item--offsite > .wp-block-navigation-item__content::after {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--sage);
	margin-left: 5px;
	vertical-align: 0.2em;
}
.ath-nav-item--offsite-first > .wp-block-navigation-item__content {
	border-left: 0.5px solid var(--wp--preset--color--teal-soft);
	padding-left: 11px;
	margin-left: 0;
}
.ath-nav-item--offsite-muted > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--teal-muted);
	font-weight: 400;
}

/* Utilities cluster */
.ath-header__utilities {
	display: flex;
	align-items: center;
	gap: 11px;
}
.ath-icon-button {
	background: none;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--teal-mid);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
}
.ath-icon-button:hover {
	color: var(--wp--preset--color--deep-teal);
}
.ath-icon-button svg {
	width: 15px;
	height: 15px;
}
.ath-icon-button:focus-visible {
	outline: 2px solid var(--color-focus-ring, var(--wp--preset--color--teal-mid));
	outline-offset: 3px;
	border-radius: 2px;
}

.ath-login-button {
	font-family: var(--wp--preset--font-family--body-sans);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	background: var(--wp--preset--color--deep-teal);
	padding: 6px 13px;
	border-radius: 4px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 180ms ease;
}
.ath-login-button:hover {
	background: var(--wp--preset--color--teal-mid);
	color: #fff;
}

/* Theme toggle — show one icon at a time, keyed to <html data-theme="…">
 * written by assets/js/header.js. Default state (no attribute) shows sun. */
.ath-theme-toggle .ath-icon-moon { display: none; }
:root[data-theme="dark"] .ath-theme-toggle .ath-icon-sun { display: none; }
:root[data-theme="dark"] .ath-theme-toggle .ath-icon-moon { display: inline-flex; }

/* -----------------------------------------------------------------------------
 * RESPONSIVE — collapse tagline before the nav crowds it, then drop the
 * topbar tagline at the existing header.html hamburger breakpoint.
 * -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
	.ath-logo__tagline { display: none; }
}
@media (max-width: 900px) {
	.ath-topbar__tagline { display: none; }
}