/* ==========================================================================
   Component: Site header / nav
   Figma: "Mada BNPL" → Header (node 198:2590) + "Header Behavior" instance on
          pages. Logo · nav (Shopper/Business/About) · EN↔AR switcher ·
          "Apply Now" primary button.
   RTL: logical layout; nav reverses naturally; switcher uses logical spacing.
   ========================================================================== */

.mada-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	inline-size: 100%;
	background-color: var(--color-white);
	border-block-end: var(--border-width-thin) solid var(--color-neutral-150);
}

.mada-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-7);
	min-block-size: var(--space-16);          /* ~76px header height from Figma */
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	transition: min-block-size 0.22s ease, background-color 0.22s ease,
		box-shadow 0.22s ease, border-radius 0.22s ease;
}

/* ---- S3: scrolled state — DS "Header Behavior" (238:4406) ----------------
   "The header should have a glass effect with rounded corners when scrolling
   down." In the DS the Scrolling variant collapses the full-bleed bar into a
   floating pill inset to the content container, fully rounded, on a shadow.
   navigation.js adds .is-scrolled past the first 24px. */
/* MADA-2855 "extra space above the sticky header". The float was only half
   built: the header got 12px of top padding, but .mada-header__inner kept the
   base full-bleed geometry (max-inline-size: --container-max + --grid-margin of
   padding), so the glass ran edge to edge and the gap above it read as a strip
   of page showing through rather than as a floating pill. DS Type=Scrolling
   (238:4404) is a 1920x93 box holding the header at x=192 y=16 w=1536 — i.e.
   16 from the top and inset to the CONTENT CONTAINER. Insetting the pill is
   what makes the gap legible as intent; the numbers below are the DS's. */
.mada-header.is-scrolled {
	background-color: transparent;
	border-block-end-color: transparent;
	/* MADA-2855, as requested: flush with the top of the viewport, no gap above.
	   This is a deliberate deviation from DS Type=Scrolling, which draws the
	   pill 16 below the top edge (238:4404: header at y=16 in a 93-tall box). */
	padding-block: 0;                         /* was 16 — client asked for flush */
	padding-inline: var(--grid-margin);       /* DS: pill inset to the container */
}
.mada-header.is-scrolled .mada-header__inner {
	/* --container-max folds the inline padding into the cap (tokens.css S12),
	   so subtracting it twice leaves exactly the 1536 content column. */
	max-inline-size: calc(var(--container-max) - (var(--grid-margin) * 2));
	padding-inline: var(--space-7);           /* 24 — the pill's own padding */
	min-block-size: var(--space-14);          /* 56 — shorter than the 76 default */
	background-color: var(--glass-surface-light);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	border: var(--border-width-thin) solid var(--glass-border-light);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
	.mada-header__inner { transition: none; }
}

.mada-header__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}
.mada-header__logo img,
.mada-header__logo svg {
	block-size: var(--space-11);
	inline-size: auto;
	display: block;
}
.mada-header__logo .mada-logo {
	color: var(--color-black);          /* logomark renders via currentColor */
	display: inline-flex;
}

.mada-header__nav {
	display: none;                            /* shown ≥ tablet */
	align-items: center;
	margin-inline-start: var(--space-5);
}

/* wp_nav_menu outputs a <ul class="mada-header__menu"> */
.mada-header__menu {
	display: flex;
	align-items: center;
	gap: var(--space-7);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- Nav item states — DS "Header Comp" (229:383) ------------------------
   Round-3 feedback: "Some header states are missing ... ensure all header
   states are implemented correctly."  Measured from the component set
   (get_variable_defs on the real Header, 229:543, agrees):

     typography  English/Label/Small — SemiBold, Font/Size/sm 14,
                 Font/Line Height/xs 20, tracking 0   (was: Medium 16)
     padding     Spacing/4 12 inline · Spacing/2 4 block
     default     Text/secondary   #4B5563              (was: navy #071124)
     hover       Text/brand       #008E8C  = MintPay/60 (was: #00B2AF)
     focus       Bold + 1px Border/brand #00B2AF bottom border;
                 the LABEL COLOUR STAYS #4B5563        (was: teal + underline)

   The focus rule is a border-bottom, not text-decoration: that is what the DS
   draws, and it keeps round-2's "never a hover underline" principle intact —
   the line only ever appears on keyboard focus or an open dropdown.
   A transparent border in every other state stops the box shifting.

   Scope note: these are MENU ITEM states, so they are scoped to
   `.mada-header__menu`, NOT `.mada-header__nav`. The mobile panel's language
   pill and Apply Now button live in `.mada-header__panel-actions`, a sibling
   of the menu inside the same <nav> — scoping to the <nav> swept those two
   <a>s up as if they were nav items and overrode their padding, size, weight
   and colour (the active language segment ended up near-black on navy). */
.mada-header__menu a {
	color: var(--color-neutral-700);            /* Text/secondary #4B5563 */
	font-weight: var(--fw-semibold);
	font-size: var(--fs-sm);                    /* 14 at ≥640 */
	line-height: var(--lh-xs);                  /* 20 */
	text-decoration: none;
	padding-inline: var(--space-4);             /* 12 */
	padding-block: var(--space-2);              /* 4  */
	border-block-end: var(--border-width-thin) solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.mada-header__menu a:hover {
	color: var(--color-primary-hover);          /* #008E8C */
	text-decoration: none;
}
/* Focus + "this section is open/current" share the DS Focus treatment.
   TOP-LEVEL ONLY — note the `> li >`. These selectors were unscoped, so they
   also matched rows INSIDE a dropdown: `.mada-header__menu .current-menu-item
   > a` (0-2-1) outranked the dropdown's own `font-weight: var(--fw-regular)`
   on `.mada-header__submenu a` (0-1-1), so any row pointing at the current
   page rendered bold. On /support/ that was THREE rows at once — About Mada →
   "FAQs" plus Shopper → "Support" and Business → "Support", which all link to
   the same page — so the panels disagreed with the design and with each other.
   A dropdown list keeps ONE uniform weight, which is what the DS draws and
   what the hover rule below already assumed ("no bold jump inside the list").
   `aria-current` stays in the markup, so assistive tech still announces the
   current page; only the visual weight changes. The focus-visible OUTLINE rule
   further down stays unscoped, so dropdown rows keep their keyboard ring. */
.mada-header__menu > li > a:focus-visible,
.mada-header__menu > li > a[aria-current="page"],
.mada-header__menu > li.current-menu-ancestor > a,
.mada-header__menu > li.current-menu-item > a,
.mada-header__menu > li > a[aria-expanded="true"] {
	color: var(--color-neutral-700);
	font-weight: var(--fw-bold);
	border-block-end-color: var(--border-color-primary);  /* #00B2AF */
	text-decoration: none;
	outline: none;
}
/* Keyboard users still need a visible ring beyond the 1px rule. */
.mada-header__menu a:focus-visible {
	outline: var(--border-width-focus) solid var(--border-color-primary);
	outline-offset: 2px;
}
/* The panel actions are controls, not nav items — they keep their own focus
   ring rather than the menu's bottom-border treatment. */
.mada-header__panel-actions a:focus-visible {
	outline: var(--border-width-focus) solid var(--border-color-primary);
	outline-offset: 2px;
}

/* ---- Sub Menu — DS component set 230:810 --------------------------------
   Panel: Surface/primary #F9FAFB · 1px Border/default #E0E2E8 · radius 8 ·
   padding 4 inline / 4 top / 8 bottom · Box Shadow/shadow-base.
   Rows:  padding 8 · Paragraph/Small 14/20 Text/tertiary #6B7280.
   Lead:  the parent item's description, Paragraph/Tiny 12/16, same colour.
   Width is content-sized (min 260px). The DS draws the desktop variant at
   586.667px, but that is the sticker-sheet cell width — the tablet/mobile
   variants are viewport-width, i.e. the panel is "as wide as it needs to be",
   not a fixed 586.  Flagged in the round-3 notes. */
.mada-header__menu .menu-item-has-children { position: relative; }

.mada-header__submenu {
	list-style: none;
	margin: 0;
	padding-inline: var(--space-2);             /* 4 */
	padding-block: var(--space-2) var(--space-3); /* 4 / 8 */
	background-color: var(--color-neutral-50);  /* Surface/primary #F9FAFB */
	border: var(--border-width-thin) solid var(--color-neutral-200);
	border-radius: var(--radius-lg);            /* 8 */
	box-shadow: var(--shadow-base);
}
.mada-header__submenu-lead {
	padding: var(--space-3);                    /* 8 */
	font-size: var(--fs-xs);                    /* 12 at ≥640 */
	line-height: var(--lh-2xs);                 /* 16 */
	color: var(--color-neutral-600);            /* Text/tertiary #6B7280 */
}
.mada-header__submenu a {
	display: block;
	padding: var(--space-3);                    /* 8 */
	border-radius: var(--radius-base);
	border-block-end: 0;
	font-size: var(--fs-sm);                    /* 14 */
	line-height: var(--lh-xs);                  /* 20 */
	font-weight: var(--fw-regular);
	color: var(--color-neutral-600);            /* Text/tertiary #6B7280 */
	white-space: nowrap;
}
.mada-header__submenu a:hover,
.mada-header__submenu a:focus-visible {
	color: var(--color-primary-hover);
	background-color: var(--color-neutral-100);
	font-weight: var(--fw-regular);             /* no bold jump inside the list */
	border-block-end-color: transparent;
}

.mada-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-inline-start: auto;                /* push to inline-end (RTL-safe) */
}

/* Language switcher (EN ↔ AR) — Polylang outputs a raw <ul> of items */
.mada-header__support {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3);                     /* 8 */
	border-radius: var(--radius-xl);             /* 12 */
}
.mada-header__support img { inline-size: 24px; block-size: 24px; display: block; }

/* Pill language toggle — Figma 229:549: white rounded-full container
   (border Neutral/150, h32, p3); active language = navy pill (#002C45)
   Bold 12/16 white; inactive = Kufi Regular 12/16 #00588A.
   direction:ltr is deliberate — the EN frame (4133:17573) and the AR frame
   (4147:7258) both put "عربي" on the physical left, so this control is one of
   the few that must NOT mirror under RTL. */
.mada-lang-switcher {
	display: inline-flex;
	direction: ltr;
	align-items: center;
	block-size: 32px;
	padding: 3px;
	background-color: var(--color-white);
	border: var(--border-width-thin) solid var(--color-neutral-150);
	border-radius: var(--radius-full);
	font-size: var(--fs-xs);
	line-height: 16px;
}
.mada-lang-switcher__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 35px;
	padding: 4px 12px;
	border-radius: 30px;
	color: #00588A;                              /* TrustBlue/60 */
	text-decoration: none;
}
.mada-lang-switcher__opt[lang="ar"] { font-family: var(--font-ar); }
.mada-lang-switcher__opt.is-current {
	color: var(--color-white);
	background-color: #002C45;                   /* TrustBlue/80 */
	font-weight: var(--fw-bold);
}
.mada-lang-switcher__opt[lang="en"] { text-transform: uppercase; }

/* Header CTA — Figma 229:546: LiquidMint pill, VaultNavy Bold 12/16 label,
   px16 py8, 6px gap before a 14px diagonal arrow. Note this is NOT the teal
   primary button; the header uses the mint accent. */
.mada-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-block: var(--space-3);               /* 8 */
	padding-inline: var(--space-5);              /* 16 */
	border-radius: var(--radius-full);
	background-color: var(--color-liquid-mint);  /* #56E3D6 */
	color: var(--color-vault-navy);              /* #002D4E */
	font-weight: var(--fw-bold);
	font-size: var(--fs-xs);                     /* 12 */
	line-height: 16px;
	text-decoration: none;
	white-space: nowrap;
}
.mada-header__cta:hover,
.mada-header__cta:focus-visible {
	background-color: var(--color-liquid-mint-dark); /* #2ECFC0 */
	color: var(--color-vault-navy);
}

/* Mobile menu toggle (hidden ≥ tablet). Burger ⇄ X per the DS. */
.mada-header__toggle {
	display: inline-flex;
	background: transparent;
	border: 0;
	padding: var(--space-3);
	cursor: pointer;
	color: var(--color-text);
}
.mada-header__toggle-close { display: none; }
.mada-header.is-nav-open .mada-header__toggle-burger { display: none; }
.mada-header.is-nav-open .mada-header__toggle-close  { display: block; }

/* Language + Apply Now inside the open MOBILE panel only (see below). */
.mada-header__panel-actions { display: none; }

/* Mobile: nav opens as a dropdown panel under the header (toggled by JS).
   Figma boundary: the 1024 frame still uses the burger; inline nav starts
   at 1025 (Desktop). */
@media (max-width: 1024px) {
	.mada-header.is-nav-open .mada-header__nav {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-5);
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		margin-inline-start: 0;
		background-color: var(--color-white);
		padding-block: var(--space-7);
		padding-inline: var(--grid-margin);
		border-block-end: var(--border-width-thin) solid var(--color-neutral-150);
		box-shadow: var(--shadow-md);
	}
	.mada-header.is-nav-open .mada-header__menu {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-5);
		inline-size: 100%;
	}
}

@media (min-width: 1025px) {
	.mada-header__nav    { display: flex; }
	.mada-header__toggle { display: none; }

	/* Desktop Sub Menu — DS variants Size=Desktop (230:805/807/808): a plain
	   dropdown anchored under its nav item, no tab row (that belongs to the
	   tablet/mobile panel). Opens on hover, keyboard focus, or click. */
	.mada-header__menu .mada-header__submenu {
		position: absolute;
		inset-block-start: calc(100% + var(--space-4));   /* 12 below the item */
		inset-inline-start: 0;
		z-index: 110;
		min-inline-size: 260px;
		max-inline-size: 586px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
	}
	/* MADA-2877 "the navigation dropdowns are overlapping". These three
	   conditions used to be the WHOLE story, and nothing coordinated them:
	   :hover, :focus-within and .is-open are independent, so clicking Business
	   (which leaves .is-open AND :focus-within on it) and then hovering About
	   Mada opened BOTH — and since a panel is min 260 wide while the nav items
	   sit ~110 apart, two open panels must overlap. Measured 148px of overlap;
	   also reproducible with the keyboard (focus one item, hover another).
	   navigation.js already enforces one-at-a-time through openOnly(), so with
	   JS running that single .is-open state is made authoritative below. These
	   selectors stay as the no-JS fallback. */
	.mada-header__menu .menu-item-has-children:hover > .mada-header__submenu,
	.mada-header__menu .menu-item-has-children:focus-within > .mada-header__submenu,
	.mada-header__menu .menu-item-has-children.is-open > .mada-header__submenu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}
	/* JS active (navigation.js adds .is-nav-js and drives .is-open from hover,
	   focus AND click): anything not .is-open is closed, whatever :hover or
	   :focus-within say. 0-5-0 beats the 0-3-0 reveals above, and it can never
	   close the open one. */
	.mada-header.is-nav-js .mada-header__menu .menu-item-has-children:not(.is-open) > .mada-header__submenu {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
	}
	/* Bridge the 12px gap so the pointer can travel into the panel. */
	.mada-header__menu .menu-item-has-children > a::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		block-size: var(--space-4);
	}
	@media (prefers-reduced-motion: reduce) {
		.mada-header__menu .mada-header__submenu { transition: none; }
	}
}

/* ---- Tablet + mobile panel — DS Size=Tablet/Mobile (e.g. 230:4999) -------
   The open burger panel is NOT a stacked list: the three sections sit in a
   horizontal TAB ROW (Bold navy, active one carrying the teal Focus rule) and
   the active section's children list below it. navigation.js picks the active
   tab (current section, else the first with children) and swaps on click. */
@media (max-width: 1024px) {
	.mada-header.is-nav-open .mada-header__menu {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-7);                     /* 24 */
	}
	/* `display: contents` lifts the <a> and the child <ul> out of the <li> so
	   they become siblings in the tab-row flex container — that is what lets
	   the tabs sit on one line while the open section's links span the full
	   width beneath them (via `order` + `inline-size:100%` below). */
	.mada-header.is-nav-open .mada-header__menu > li { display: contents; }
	/* Scoped to the MENU, not the <nav> — the panel's language pill and Apply
	   Now button are siblings of the menu and must keep their own styling. */
	.mada-header.is-nav-open .mada-header__menu a {
		font-size: var(--fs-md);                 /* 14 mobile / 16 tablet */
		font-weight: var(--fw-bold);
		color: var(--color-black);               /* tabs are navy, not grey */
		padding-inline: 0;
	}
	.mada-header.is-nav-open .mada-header__menu a:hover {
		color: var(--color-primary-hover);
	}
	/* `> li >` for the same reason as the desktop rule above: unscoped, the
	   aria-current selector also marked dropdown rows, so the three rows that
	   point at /support/ each picked up the teal rule line inside the panel. */
	.mada-header.is-nav-open .mada-header__menu > .is-open > a,
	.mada-header.is-nav-open .mada-header__menu > li > a[aria-current="page"] {
		color: var(--color-black);
		border-block-end-color: var(--border-color-primary);
	}

	/* Children render full-width beneath the tab row; only the open tab's. */
	.mada-header.is-nav-open .mada-header__submenu {
		display: none;
		order: 99;                               /* always after the tab row */
		inline-size: 100%;
		background-color: transparent;
		border: 0;
		box-shadow: none;
		padding-inline: 0;
		padding-block: var(--space-5) 0;         /* 16 */
	}
	.mada-header.is-nav-open .mada-header__menu > .is-open > .mada-header__submenu {
		display: block;
	}
	.mada-header.is-nav-open .mada-header__submenu a {
		padding-inline: 0;
		padding-block: var(--space-4);           /* 12 — the DS row rhythm */
		font-weight: var(--fw-regular);
		color: var(--color-neutral-600);
		white-space: normal;
	}
	/* The DS descriptor row is DESKTOP-ONLY. Size=Desktop (e.g. 230:806) is
	   7 rows — a 32-tall descriptor then 6 links — while Size=Tablet/Mobile
	   (230:5001) is a 44-tall tab row then the same 6 links, with no
	   descriptor. It was showing at every width. */
	.mada-header__submenu-lead { display: none; }
}

/* Mobile bar — Figma 639/320 frames (4133:17907 / 4133:18024): logo + burger
   ONLY, 57px bar. Headset, language pill and Apply Now leave the bar (the
   last two reappear inside the open panel; support stays reachable from the
   page CTAs and FAQs). */
@media (max-width: 639px) {
	.mada-header__inner { min-block-size: 57px; }
	.mada-header__actions .mada-header__support,
	.mada-header__actions .mada-lang-switcher,
	.mada-header__actions .mada-header__cta { display: none; }
	.mada-header.is-nav-open .mada-header__panel-actions {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--space-5);
		padding-block-start: var(--space-3);
	}
	/* The DS draws both controls at Label/Small 12/16 (229:546 CTA, 229:549
	   language pill) and both already pin line-height:16px. The responsive
	   ramp drops --fs-xs to 10px below 640 — and this panel is the ONLY place
	   either control renders under 640, so the 12/16 pairing would break here
	   and nowhere else. Hold them at the DS size. */
	.mada-header__panel-actions .mada-lang-switcher,
	.mada-header__panel-actions .mada-header__cta {
		font-size: 12px;
	}
}

/* Skip link — visible on focus only */
.mada-skip-link {
	position: absolute;
	inset-inline-start: var(--space-3);
	inset-block-start: -100%;
	z-index: 200;
	padding: var(--space-3) var(--space-5);
	background-color: var(--color-cta);
	color: var(--color-text-on-dark);
	border-radius: var(--radius-base);
}
.mada-skip-link:focus {
	inset-block-start: var(--space-3);
}