/* ==========================================================================
   Healthwise360 — Header / primary navigation
   Child theme: healthwise360-child  •  Parent: Kadence
   Tokens from Master Website Build Specification v2 §13
   Accessibility target: WCAG 2.2 AA (§14.1)
   --------------------------------------------------------------------------
   Load path: /assets/css/header.css

   MVP STATE: the saved-comparison control is present in the markup but
   hidden — see §4b. Saved comparisons are Phase 2 (§8.3).

   Selectors marked [VERIFY] should be confirmed against the rendered DOM
   of your Kadence version before this goes to staging.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens (§13.2, §13.4)
   Spec §5.3 compliance: these now alias the theme.json palette (the single
   source of truth) instead of hardcoding hex. Change a colour once in
   theme.json's settings.color.palette and it cascades here automatically —
   no more per-file duplication / drift.
   -------------------------------------------------------------------------- */

:root {
	--hw-navy-950: var(--wp--preset--color--navy);            /* primary text, headings */
	--hw-navy-800: var(--wp--preset--color--navy-secondary);  /* secondary headings, dark surfaces */
	--hw-teal-700: var(--wp--preset--color--trust-teal);      /* verified/current accents (no longer the primary CTA — see cta-orange) */
	--hw-teal-100: var(--wp--preset--color--trust-teal-surface); /* information / verification surface */
	--hw-warm-white: var(--wp--preset--color--warm-white);    /* primary page background */
	--hw-grey-100: var(--wp--preset--color--soft-grey);       /* data surfaces */
	--hw-grey-300: var(--wp--preset--color--grey-border);     /* borders, inactive controls */
	--hw-grey-muted: var(--wp--preset--color--grey-muted);    /* teks nav di bilah terang — 4,8:1 di atas warm-white */
	--hw-link-blue: var(--wp--preset--color--link-blue);      /* links and focus indicator */
	--hw-cta: var(--wp--preset--color--cta-orange-strong);    /* primary conversion actions */

	--hw-space-1: 4px;
	--hw-space-2: 8px;
	--hw-space-3: 12px;
	--hw-space-4: 16px;
	--hw-space-5: 24px;

	--hw-radius-sm: 6px;

	/* Header height, used for scroll-padding so a sticky header cannot
	   obscure a focused element (WCAG 2.2 SC 2.4.11). Update if the
	   header row height changes. */
	--hw-header-height: 88px;
}

/* --------------------------------------------------------------------------
   2. Header shell
   Calm, evidence-led: flat surface, single hairline rule, no drop shadow.
   §13.4 — "Do not make regulatory facts look like promotional cards."
   -------------------------------------------------------------------------- */

/* Revisi klien (Agustus 2026): bilah header dibalik dari teal gelap ke
   permukaan terang, mengikuti referensi desain yang dikirim klien.

   Header terang tidak lagi bertabrakan dengan hero teal seperti dulu — yang
   memisahkan keduanya sekarang justru perbedaan terang/gelap, bukan dua nada
   teal yang kontrasnya cuma 1,30:1. Hairline di bawah bilah tetap dipakai
   supaya batasnya terbaca saat halaman di-scroll ke seksi yang juga terang.

   Prefiks html:root dipakai karena CSS Customizer Kadence terbukti menang atas
   berkas ini — warna link nav sempat jadi oranye karena Customizer menunjuk
   slot palette2. Lihat bagian 0 di style.css untuk pola yang sama. */
html:root #masthead,
html:root .site-header-wrap {
	background-color: var(--hw-warm-white);
	box-shadow: none;
}

html:root .site-header-row-container-inner {
	border-bottom: 1px solid var(--hw-grey-300);
}

/* Nama situs: Kadence merendernya sebagai teks, bukan gambar. */
html:root .site-branding .site-title,
html:root .site-branding .site-title a {
	color: var(--hw-navy-950);
	font-weight: 700;
}

html:root .site-branding .site-description {
	color: var(--hw-grey-muted);
}

/* Logo: cap the height so the header stays quiet and predictable. */
.site-header-main-section-left .site-branding img,
.site-branding .custom-logo {
	max-height: 40px;
	width: auto;
}

/* --------------------------------------------------------------------------
   3. Primary navigation
   -------------------------------------------------------------------------- */

/* Nav di bilah terang: abu-abu sedang, bukan navy penuh. Referensi klien
   memakai nav yang sengaja mundur satu tingkat dari logo, supaya logo dan
   tombol CTA yang memimpin. grey-muted (#6B7280) memberi 4,8:1 di atas
   warm-white — lolos AA untuk teks normal, jadi "lebih redup" di sini masih
   terbaca, bukan sekadar abu-abu dekoratif. */
html:root .header-navigation .header-menu-container > ul > li > a {
	color: var(--hw-grey-muted);
	font-weight: 500;
	letter-spacing: 0.01em;
	padding-inline: var(--hw-space-4);
	/* 44px is comfortably past the 24px AA floor (SC 2.5.8) and gives a
	   forgiving pointer target on hybrid touch laptops. */
	min-height: 44px;
	display: flex;
	align-items: center;
}

html:root .header-navigation .header-menu-container > ul > li > a:hover {
	color: var(--hw-teal-700);
}

/* Current page: colour AND a 2px rule. Never colour alone (SC 1.4.1).
   WordPress adds aria-current="page" to the matching item, which covers
   the non-visual half of the same requirement. */
html:root .header-navigation .header-menu-container > ul > li.current-menu-item > a,
html:root .header-navigation .header-menu-container > ul > li.current-menu-ancestor > a,
html:root .header-navigation .header-menu-container > ul > li > a[aria-current="page"] {
	color: var(--hw-teal-700);
	box-shadow: inset 0 -2px 0 0 var(--hw-teal-700);
}

/* --------------------------------------------------------------------------
   3b. Desktop Dropdown (Sub-menu)
   Floating style, no harsh borders, matching design tokens.
   -------------------------------------------------------------------------- */

/* Dropdown Container */
.header-navigation .header-menu-container ul ul.sub-menu {
    background-color: var(--hw-warm-white);
    border: none;
    box-shadow: 0 4px 16px rgba(13, 16, 25, 0.08); /* Soft shadow, diturunkan dari navy teks #0D1019 */
    border-radius: var(--hw-radius-sm);
    padding: var(--hw-space-2) 0;
}

/* Dropdown Items */
.header-navigation .header-menu-container ul ul.sub-menu li {
    border-bottom: none; /* Removes the Kadence default divider */
}

/* Dropdown Links */
.header-navigation .header-menu-container ul ul.sub-menu li a {
    color: var(--hw-navy-950);
    padding-top: var(--hw-space-3);
    padding-bottom: var(--hw-space-3);
    font-size: 15px; /* Slightly smaller than top-level */
    font-weight: 400;
    transition: color 0.2s ease;
}

/* Dropdown Hover State */
.header-navigation .header-menu-container ul ul.sub-menu li a:hover {
    color: var(--hw-teal-700);
    background-color: transparent; /* Removes the harsh gray block */
}

/* Current active item in dropdown */
.header-navigation .header-menu-container ul ul.sub-menu li.current-menu-item > a {
    color: var(--hw-teal-700);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   4. Header utilities — search toggle and saved comparison
   -------------------------------------------------------------------------- */

html:root .search-toggle-open,          /* [VERIFY] Kadence search toggle */
html:root .menu-toggle-open {           /* [VERIFY] Kadence hamburger */
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--hw-navy-950);
	background: transparent;
	border: 0;
	border-radius: var(--hw-radius-sm);
}

html:root .search-toggle-open:hover,
html:root .menu-toggle-open:hover {
	color: var(--hw-teal-700);
	background-color: rgba(13, 16, 25, 0.06);
}

/* --------------------------------------------------------------------------
   4a. CTA pill di ujung kanan header (revisi klien)

   Referensi klien memakai oranye brand #EE7C2C untuk tombol ini. Warna itu
   hanya 2,78:1 di atas putih dan 2,94:1 dengan teks putih di atasnya —
   gagal SC 1.4.3 (4,5:1) maupun SC 1.4.11 (3:1), jadi tidak dipakai apa
   adanya. cta-orange-strong (#C0580F) memberi 4,9:1 dengan teks putih: mata
   membacanya sebagai oranye yang sama, tapi lolos AA. Lihat CLAUDE.md §6b.

   Dipakai dengan menambahkan kelas hw-header-cta pada item menu terakhir
   (Menu > item > CSS Classes), atau pada tombol di HTML element Customizer.
   -------------------------------------------------------------------------- */

html:root .hw-header-cta > a,
html:root a.hw-header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding-inline: var(--hw-space-5);
	border-radius: 999px;
	background-color: var(--hw-cta);
	color: var(--wp--preset--color--white);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
}

html:root .hw-header-cta > a:hover,
html:root a.hw-header-cta:hover {
	background-color: var(--hw-navy-950);
	color: var(--wp--preset--color--white);
}

/* Item CTA tidak memakai garis bawah "halaman aktif" — bentuk pill sudah
   membedakannya, dan garis di dalam pill terbaca sebagai cacat render. */
html:root .hw-header-cta > a[aria-current="page"] {
	box-shadow: none;
	color: var(--wp--preset--color--white);
}

html:root .hw-saved-compare {
	display: inline-flex;
	align-items: center;
	gap: var(--hw-space-2);
	min-height: 44px;
	padding-inline: var(--hw-space-3);
	border: 1px solid var(--hw-grey-300);
	border-radius: var(--hw-radius-sm);
	color: var(--hw-navy-950);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	background-color: transparent;
}

html:root .hw-saved-compare:hover {
	border-color: var(--hw-teal-700);
	color: var(--hw-teal-700);
	background-color: rgba(13, 16, 25, 0.04);
}

.hw-saved-compare__icon {
	width: 20px;
	height: 20px;
	flex: none;
}

/* Count badge. The plugin writes the value into [data-hw-saved-count] and
   sets data-hw-saved-state="filled" on the link. Until the compare tray
   ships, the link renders in its empty state and the badge stays hidden —
   no hardcoded number in markup. */
.hw-saved-compare__count {
	display: none;
	min-width: 20px;
	padding-inline: var(--hw-space-1);
	border-radius: 999px;
	background-color: var(--hw-teal-700);
	color: var(--wp--preset--color--white);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	line-height: 20px;
	text-align: center;
}

.hw-saved-compare[data-hw-saved-state="filled"] .hw-saved-compare__count {
	display: inline-block;
}

/* --------------------------------------------------------------------------
   4b. PHASE 2 KILL SWITCH — saved comparison
   Cross-device saved comparisons are Phase 2 (§8.3). The markup stays in the
   Customizer HTML element so the header structure is final, but the control
   is removed from the page for the MVP.

   display:none — deliberately, not visibility:hidden, opacity:0, or an
   off-screen clip. Those three leave the link in the tab order and in the
   accessibility tree: a keyboard user would tab to an invisible control and
   a screen reader would announce a feature that does not exist. That is a
   worse failure than the dead link we are avoiding, and it breaches SC 2.4.7
   (focus must be visible) and SC 2.4.3 (meaningful focus order).

   TO ENABLE IN PHASE 2: delete this block. Nothing else changes — the
   styling in §4 and the drawer rule in §5 are already in place.
   -------------------------------------------------------------------------- */

.hw-saved-compare {
	display: none !important;
}

/* --------------------------------------------------------------------------
   5. Mobile drawer
   -------------------------------------------------------------------------- */

#mobile-drawer .drawer-inner {            /* [VERIFY] */
	background-color: var(--hw-warm-white);
	color: var(--hw-navy-950);
}

#mobile-drawer .drawer-inner .menu-item > a {
	color: var(--hw-navy-950);
	min-height: 48px;
	display: flex;
	align-items: center;
	padding-block: var(--hw-space-3);
	border-bottom: 1px solid var(--hw-grey-300);
	font-size: 17px;
}

#mobile-drawer .drawer-inner .sub-menu .menu-item > a {
    font-size: 15px; /* Lebih kecil dari parent (17px) namun tetap aksesibel */
    min-height: 44px; /* Sedikit lebih rapat namun tetap memenuhi standar target sentuh */
    padding-left: var(--hw-space-5); /* Memberikan indentasi ke dalam */
    font-weight: 400; /* Memastikan ketebalannya normal */
    color: var(--hw-navy-800); /* Sedikit lebih redup dari parent-nya */
}

/* Memastikan item yang sedang aktif di sub-menu tetap menonjol */
#mobile-drawer .drawer-inner .sub-menu .menu-item > a[aria-current="page"] {
    color: var(--hw-teal-700);
    font-weight: 500;
}

#mobile-drawer .hw-saved-compare {
	margin-top: var(--hw-space-5);
	width: 100%;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   6. Accessibility (§14.1 — WCAG 2.2 AA)
   -------------------------------------------------------------------------- */

/* SC 2.4.7 Focus Visible + SC 1.4.11 Non-text Contrast.

   Bilah header kembali terang setelah revisi klien, jadi cincin fokus putih
   yang dipakai versi gelap sekarang tidak terlihat sama sekali di atasnya.
   Link blue memberi ~5,6:1 di atas warm white dan dipakai di kedua tempat —
   header dan drawer — sehingga fokus terlihat sama di mana pun. */
#masthead a:focus-visible,
#masthead button:focus-visible,
#masthead input:focus-visible {
	outline: 3px solid var(--hw-link-blue);
	outline-offset: 2px;
	border-radius: var(--hw-radius-sm);
}

#mobile-drawer a:focus-visible,
#mobile-drawer button:focus-visible,
#mobile-drawer input:focus-visible {
	outline: 3px solid var(--hw-link-blue);
	outline-offset: 2px;
	border-radius: var(--hw-radius-sm);
}

/* Kadence and some resets suppress the default ring. Only suppress it for
   pointer interaction — never for keyboard. */
#masthead a:focus:not(:focus-visible),
#masthead button:focus:not(:focus-visible) {
	outline: none;
}

/* SC 2.4.11 Focus Not Obscured (Minimum).
   A sticky header will cover the focused element when a keyboard user tabs
   or when an in-page anchor is followed. scroll-padding-top reserves the
   header's height. Only needed if you enable Kadence's sticky header —
   harmless if you don't. */
html {
	scroll-padding-top: calc(var(--hw-header-height) + var(--hw-space-4));
}

/* SC 2.4.1 Bypass Blocks. Kadence ships a skip link; make sure it becomes
   visible on focus rather than staying off-screen. */
.skip-link:focus {
	position: fixed;
	top: var(--hw-space-4);
	left: var(--hw-space-4);
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: var(--hw-space-3) var(--hw-space-4);
	background-color: var(--hw-navy-950);
	color: var(--hw-warm-white);
	border-radius: var(--hw-radius-sm);
	font-size: 16px;
	text-decoration: underline;
}

/* SC 2.3.3 is AAA, but honouring reduced motion costs nothing and the
   drawer transition is the only motion in the header. */
@media (prefers-reduced-motion: reduce) {
	#mobile-drawer .drawer-inner,
	#mobile-drawer .drawer-overlay,
	.search-toggle-open,
	.menu-toggle-open {
		transition: none !important;
		animation: none !important;
	}
}

/* SC 1.4.10 Reflow — the header must not force horizontal scrolling at
   320 CSS px. Inert at MVP while §4b hides the control; it takes effect
   when the kill switch is removed in Phase 2. */
@media (max-width: 400px) {
	.hw-saved-compare__label {
		display: none;
	}
}