/* ========================================
   SIRE2 Base CSS
   ======================================== */

/*
 * Section spacing tokens used by the SIRE Blocks plugin.
 * Defined here because WP 7.x no longer exports top-level theme.json
 * `custom` values as CSS custom properties.
 */
:root {
	--wp--custom--spacing--section: 80px;
	--wp--custom--spacing--section-sm: 48px;
}

/*
 * Full-bleed (alignfull) sections stack flush.
 */
:where(main, .wp-block-post-content) > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* ========================================
   Site header
   ======================================== */

.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Sticky header */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

.site-header.has-surface-background-color {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background-color: rgba(255, 255, 255, 0.88) !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
	/* LCP/scroll: `contain: layout` isolates the header's layout so the
	   backdrop-blur repaints stay cheap. NOTE: do NOT use `paint` (or size)
	   containment here — `contain: paint` makes the sticky header a
	   containing block for fixed descendants, which traps the drawer
	   panel's `position: fixed; z-index: 100001` inside the header's
	   stacking context so the hero paints OVER the open drawer (white
	   empty-looking panel behind page content). `layout` alone does not
	   trap fixed descendants. Belt-and-braces: containment is also
	   dropped entirely while the drawer is open. */
	contain: layout;
}

/* While the drawer is open, drop containment so the fixed panel always
   resolves against the viewport and paints above page content. */
.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	contain: none;
}

/* Devices that cannot do backdrop-filter cheaply get the solid path. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header.has-surface-background-color {
		background-color: #fff !important;
	}
}

/*
 * Expand-at-top / shrink-on-scroll header.
 *
 * The header is tall while the page is at (or near) the top so the brand
 * logo can breathe, then compresses once the user scrolls past the
 * threshold. Default state is EXPANDED (matches "big on load" with no
 * flash); assets/js/header-shrink.js adds `.is-scrolled` past the
 * threshold. Without JS the header simply stays expanded.
 *
 * Logo is a wide wordmark (512×276 ≈ 1.86:1), so height ≈ width / 1.86.
 * Expanded: 115px wide ≈ 62px tall inside a ~88px bar (12px padding).
 * Compact:  88px wide ≈ 47px tall inside a ~63px bar (8px padding).
 * Ratio ~1.31x so the shrink reads as a settle, not a jump.
 * (Below ~80px the wordmark text turns to mush — don't go smaller.)
 */
.site-header {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

	/* Expanded (at top / default) */
	--sire-header-pad-y: 12px;
	--sire-header-min-h: 88px;
	--sire-header-logo-w: 115px;
	/* Compact overrides (applied via .is-scrolled) */
	--sire-header-pad-y-scrolled: 8px;
	--sire-header-min-h-scrolled: 0px;
	--sire-header-logo-w-scrolled: 88px;
	--sire-header-transition: 0.45s cubic-bezier(0.22, 1, 0.36, 1);

	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Tall state only matters once a logo image exists to fill it */
	min-height: var(--sire-header-min-h);
	padding-block: var(--sire-header-pad-y);
	transition:
		min-height var(--sire-header-transition),
		padding var(--sire-header-transition),
		box-shadow 0.3s ease;
}

.site-header:not(:has(.wp-block-site-logo img)) {
	min-height: var(--sire-header-min-h-scrolled);
	padding-block: var(--sire-header-pad-y-scrolled);
}

.site-header.is-scrolled {
	min-height: var(--sire-header-min-h-scrolled);
	padding-block: var(--sire-header-pad-y-scrolled);
}

/* Scale the site-logo image (width attr is just a hint; CSS wins) */
.site-header .wp-block-site-logo {
	margin: 0;
}

/*
 * Extra breathing room between the logo and the left edge of the
 * content column (the column itself already has the theme's global
 * side padding on top of this).
 */
.site-header__brand {
	padding-left: 20px;
}

.site-header .wp-block-site-logo img {
	width: var(--sire-header-logo-w);
	max-width: none;
	height: auto;
	transition: width var(--sire-header-transition);
}

.site-header.is-scrolled .wp-block-site-logo img {
	width: var(--sire-header-logo-w-scrolled);
}

/*
 * When a logo image is set, hide the text site-title (the logo's link
 * already goes home). With no logo, the site-logo block renders nothing
 * on the frontend, so the title stays visible.
 */
.site-header__brand:has(.wp-block-site-logo img) .wp-block-site-title {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header .wp-block-site-logo img {
		transition: none;
	}
}

/* Phones: single compact bar, no shrink animation.
 *
 * The expand/shrink transition is janky on phones (sticky + backdrop-blur
 * + logo resize fight the mobile compositor), so the phone header is always
 * the compact bar: the expanded vars point at their scrolled values, making
 * the .is-scrolled toggle a visual no-op, and transitions are killed
 * outright. header-shrink.js also pins .is-scrolled on <=782px. */
@media (max-width: 782px) {
	.site-header {
		--sire-header-pad-y: var(--sire-header-pad-y-scrolled);
		--sire-header-min-h: var(--sire-header-min-h-scrolled);
		--sire-header-logo-w: var(--sire-header-logo-w-scrolled);
	}

	.site-header,
	.site-header .wp-block-site-logo img {
		transition: none;
	}

	.site-header__brand {
		padding-left: 12px;
	}

	/* On phones the inline primary nav crowds the compact bar, so the slot
	   moves into the drawer instead (header-nav-move.js relocates the real
	   <nav> to the top of the panel and tags it .is-in-drawer). The moved
	   nav renders as drawer rows; anything still inline stays hidden.
	   Desktop/tablet are untouched. */
	.site-header .site-header__nav-primary:not(.is-in-drawer) {
		display: none;
	}

	/* Relocated NAV0 inside the drawer: a tinted quick-links strip, grouped
	   apart from the category list below.
	 *
	 * Why a strip, not card rows: NAV0 is about to hold 3 items (Home, Our
	 * Program, Online Test). Card rows + the old double margin made a lone
	 * Home read as a stranded object; melting them into plain rows would
	 * waste the quick-links vs categories distinction. So: one
	 * surface-alt tinted zone with tighter rows, a hairline divider, and a
	 * single section rhythm below — "quick links, then categories". */
	.site-header .site-header__nav-drawer .site-header__nav-primary.is-in-drawer {
		display: block;
		width: 100%;
		background-color: var(--wp--preset--color--surface-alt);
		border-radius: 12px;
		padding: 6px 8px;
		margin-bottom: 10px;
	}

	.site-header .site-header__nav-drawer .site-header__nav-primary.is-in-drawer .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.site-header .site-header__nav-drawer .site-header__nav-primary.is-in-drawer .wp-block-navigation-item {
		width: 100%;
		margin-bottom: 2px;
		border-radius: 8px;
		transition: background-color 0.25s ease;
	}

	.site-header .site-header__nav-drawer .site-header__nav-primary.is-in-drawer .wp-block-navigation-item:hover {
		background-color: var(--wp--preset--color--surface);
	}

	.site-header .site-header__nav-drawer .site-header__nav-primary.is-in-drawer .wp-block-navigation-item:last-child {
		margin-bottom: 0;
	}

	.site-header .site-header__nav-drawer .site-header__nav-primary.is-in-drawer .wp-block-navigation-item > a {
		font-size: 1rem;
		font-weight: 600;
		letter-spacing: -0.005em;
		text-transform: none;
		line-height: 1.4;
		color: var(--wp--preset--color--ink);
		display: flex;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		min-height: 48px;
		padding: 0 12px;
		text-align: left;
		text-decoration: none;
	}

	.site-header .site-header__nav-drawer .site-header__nav-primary.is-in-drawer .wp-block-navigation-item > a:hover {
		color: var(--wp--preset--color--accent);
	}

	/* Kill the desktop gold-underline bar on relocated rows. */
	.site-header .site-header__nav-drawer .site-header__nav-primary.is-in-drawer a:not(.wp-element-button)::after {
		display: none;
	}
}

/*
 * Kill scroll anchoring while the header height animates.
 *
 * When the sticky header shrinks, content below shifts up; the browser's
 * scroll-anchoring then adjusts scrollY to keep that content stable,
 * which can push scrollY back under the expand threshold and cause a
 * shrink/expand oscillation ("shaking") near the top of the page.
 */
html {
	overflow-anchor: none;
	/* Drawer scroll-lock shift fix: when the drawer opens, core flips html
	   to overflow:hidden, the 15px scrollbar vanishes, and centered content
	   jumps ~7px right (measured H1 603 -> 610px). `stable` reserves the
	   gutter in both states so content width never changes. */
	scrollbar-gutter: stable;
}

/*
 * Horizontal overflow guard.
 *
 * Page content (notably Stackable columns on /kursus_ielts_jogja/) can
 * render ~300px-wide un-stacked columns on phones, pushing scrollWidth
 * past the viewport: sideways scroll into empty space on load, sticky
 * header laid out at the overflow width (clipped CTA). The offenders heal
 * on scroll (their own JS restacks), so this is a containment band-aid,
 * not the root fix — audit Stackable responsive settings per page.
 *
 * `clip` (not `hidden`): no scroll container is created, so position:
 * sticky keeps working. Scoped to <=782px so desktop zoom/reflow
 * behaviour is untouched.
 */
@media (max-width: 782px) {
	html,
	body {
		overflow-x: clip;
	}

	/* Belt-and-braces: never let a column outgrow the viewport. */
	.wp-block-stackable-column,
	.stk-block-column {
		max-width: 100%;
	}
}

/* ========================================
   Desktop navigation
   ======================================== */

/* Nav links — uppercase small text with animated underline */
.site-header .wp-block-navigation a:not(.wp-element-button) {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	position: relative;
	transition: color 0.2s ease;
	padding-bottom: 2px;
	text-decoration: none !important;
}

/* Gold underline slides in on hover */
.site-header .wp-block-navigation a:not(.wp-element-button)::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--wp--preset--color--highlight);
	transition: width 0.25s ease;
}

.site-header .wp-block-navigation a:not(.wp-element-button):hover::after {
	width: 100%;
}

.site-header .wp-block-navigation a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--accent);
}

/* Active page — permanent gold underline */
.site-header .wp-block-navigation .current-menu-item > a::after,
.site-header .wp-block-navigation .current-menu-ancestor > a::after {
	width: 100%;
	background-color: var(--wp--preset--color--highlight);
}

.site-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--accent);
}

/* ========================================
   Desktop submenus (dropdowns)
   Only apply while the drawer is CLOSED.

   The `:has()` guard is load-bearing. `is-menu-open` is set on the PANEL,
   which is a descendant of the nav — so a plain `:not(.is-menu-open)` on the
   nav never matches anything and the guard is a no-op. Without a working
   guard these rules also style the submenus INSIDE the open panel, and since
   this selector is doubled (5 classes) its !important background/shadow beat
   the accordion rules (4 classes) — which painted each dropdown as a white
   floating card overlapping the menu.

   These belong to the DRAWER nav only — the primary nav is Home-only today,
   but stays submenu-capable if more items are added to it later.
   ======================================== */

@media (min-width: 783px) {

/* Parent item is the positioning context for its dropdown */
.site-header .site-header__nav-drawer:not(:has(.is-menu-open)) .wp-block-navigation .has-child {
	position: relative;
}

/* Chevron beside parent labels */
.site-header .site-header__nav-drawer:not(:has(.is-menu-open)) .wp-block-navigation .wp-block-navigation__submenu-icon {
	width: 0.55em;
	height: 0.55em;
	margin-left: 0.4em;
}

.site-header .site-header__nav-drawer:not(:has(.is-menu-open)) .wp-block-navigation .wp-block-navigation__submenu-icon svg {
	stroke: currentColor;
	stroke-width: 2;
}

/* Dropdown panel.
   Core applies min-width:200px + width:auto on hover via a 4-class selector,
   so this selector is doubled to win on specificity.

   !important IS required here: WP's global styles attach
   `.has-primary-background-color{background-color:…!important}` to this
   element (the navigation block passes its overlay colors down into the
   submenu container). Nothing outranks a competing !important declaration. */
.site-header .site-header__nav-drawer:not(:has(.is-menu-open)) .wp-block-navigation .has-child .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--ink) !important;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--medium);
	/* Literal shadow on purpose: theme.json shadow presets are NOT emitted as
	   CSS custom properties in this WP build (verified — --wp--preset--shadow--lg
	   resolves to an empty value), so var() here would silently do nothing. */
	box-shadow: 0 10px 32px rgba(27, 58, 92, 0.16), 0 2px 8px rgba(27, 58, 92, 0.08) !important;
	padding: var(--wp--preset--spacing--20) 0;
	/* Wider than core's 200px default: the legacy labels run up to ~60 chars
	   ("KONSULTASI Aplikasi Study Abroad & Scholarship Interview"), which wrap
	   to 3 lines at 240px. */
	min-width: 300px;
	max-width: 380px;
	left: 0;
	top: calc(100% + 10px);
}

/* Invisible bridge so the pointer can cross the 10px gap without closing */
.site-header .site-header__nav-drawer:not(:has(.is-menu-open)) .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	height: 10px;
	background: transparent;
}

/* Dropdown links — undo the uppercase top-level treatment.
   color/text-decoration need !important for the same reason as the panel:
   the inherited `.has-text-on-dark-color` rule is itself !important. */
.site-header .site-header__nav-drawer:not(:has(.is-menu-open)) .wp-block-navigation .wp-block-navigation__submenu-container a:not(.wp-element-button) {
	position: static;
	width: 100%;
	padding: 0.5rem var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
	line-height: 1.45;
	color: var(--wp--preset--color--ink) !important;
	text-decoration: none !important;
	white-space: normal;
	transition: color 0.15s ease, background-color 0.15s ease;
}

/* Kill the gold underline bar inside dropdowns */
.site-header .site-header__nav-drawer:not(:has(.is-menu-open)) .wp-block-navigation .wp-block-navigation__submenu-container a:not(.wp-element-button)::after {
	display: none;
}

.site-header .site-header__nav-drawer:not(:has(.is-menu-open)) .wp-block-navigation .wp-block-navigation__submenu-container a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--accent) !important;
	background-color: var(--wp--preset--color--surface-alt);
}

/* Dropdown rows fill the panel width so hover highlight spans edge to edge */
.site-header .site-header__nav-drawer:not(:has(.is-menu-open)) .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
}

/* Parent link stays highlighted while its dropdown is open */
.site-header .site-header__nav-drawer:not(:has(.is-menu-open)) .wp-block-navigation .has-child:hover > a:not(.wp-element-button),
.site-header .site-header__nav-drawer:not(:has(.is-menu-open)) .wp-block-navigation .has-child:focus-within > a:not(.wp-element-button) {
	color: var(--wp--preset--color--accent);
}

} /* end @media (min-width: 783px) — desktop submenus */

/* CTA button — lift on hover
   The CTA lives OUTSIDE the navigation block (its own buttons block) so it
   stays in the header bar on mobile instead of collapsing into the panel. */
.site-header__cta .wp-element-button {
	background-color: var(--wp--preset--color--accent);
	border-radius: 8px;
	color: var(--wp--preset--color--surface);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 10px 22px;
	text-transform: uppercase;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.site-header__cta .wp-element-button:hover {
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--surface);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(46, 134, 171, 0.35);
}

/* The buttons wrapper must not add its own vertical margin inside the header */
.site-header .site-header__cta,
.site-header .site-header__cta .wp-block-button {
	margin: 0;
}

/* ========================================
   Primary navigation (inline, desktop/tablet only)
   Home today. overlayMenu:"never" keeps it as plain inline links — no
   hamburger, no panel. Built so more items can be added in the Site Editor
   later without a code change; it stays submenu-capable.

   On phones (<=782px) header-nav-move.js relocates this <nav> into the
   drawer panel — one source, both layouts. If the primary nav is ever
   removed, the CTA still stands alone.
   ======================================== */

.site-header__nav-primary .wp-block-navigation__container {
	align-items: center;
}

/* ========================================
   Drawer navigation (ALL viewports)
   Modelled on the live production site (siregadjahmada.com): a full-height
   WHITE panel sliding in from the right over a dimmed backdrop, with large
   top-level links and collapsible groups.

   The accordion is a JOINT effort and the split matters:

   - Core provides the toggle WIRING. The nav carries
     submenuVisibility:"click", so core renders each parent label as a
     <button> (it no longer navigates) and wires it to its own
     actions.toggleMenuOnClick + aria-expanded state.
   - Core's own wiring is NOT sufficient inside an overlay. Its overlay
     stylesheet forces every submenu open (height:auto; opacity:1;
     visibility:visible) and its re-render rewrites aria-expanded and can
     leave every group sprung open. That is why assets/js/header-drawer.js
     exists: it owns the single source of truth, the `.is-submenu-open`
     class on the parent <li>, and mirrors it onto aria-expanded.

   So: this stylesheet keys off `.is-submenu-open` (NOT off core's
   aria-expanded), and the JS is load-bearing — do not remove it.
   ======================================== */

/* ---- Hamburger button: prominent pill trigger + X morph ----
   (Icon bars are drawn by the .sire-burger rules below.) */

.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container-open {
	overflow: hidden;
	position: relative;
	/* 44px pill: large touch target, reads as a deliberate control rather
	   than a stray icon next to the CTA. */
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface-alt) !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	padding: 0 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: 0 4px 12px rgba(27, 58, 92, 0.3);
}

/* (Old ::before/::after/span line rules removed — the icon is now the
   .sire-burger stack below. No stale selectors remain to fight it.) */

.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container-open:active {
	transform: scale(0.94);
}

/* Visible keyboard focus: accent outline ring. */
.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container-open:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Custom three-line hamburger, drawn as three stacked bars on an inner
   wrapper so centring is automatic (flex column, centred both axes) —
   no hand-computed pixel offsets to drift. WP's SVG is hidden; the middle
   bar is a real <i> element injected by the theme (see
   sire2_inject_burger_bars), so all three lines always exist regardless
   of what core renders inside the button. Bars: 20px wide, 2.5px thick,
   6px pitch — chunky with real air between lines. */
.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container-open {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container-open svg {
	display: none !important;
}

.site-header .site-header__nav-drawer .sire-burger {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5.5px;
	width: 20px;
	pointer-events: none;
}

.site-header .site-header__nav-drawer .sire-burger i {
	display: block;
	width: 20px;
	height: 2.5px;
	background-color: var(--wp--preset--color--ink);
	border-radius: 2px;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, background-color 0.25s ease;
}

.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container-open:hover .sire-burger i {
	background-color: var(--wp--preset--color--surface);
}

/* No other rules target the button's ::before/::after/span — the icon is
   solely the .sire-burger stack, so nothing stale can fight it. (If core
   ever adds a span inside the button, it renders unstyled inline text and
   stays invisible against the pill.) */

/* Morph to X when menu is open; pill fills primary so the open state
   reads clearly against the page. Top/bottom bars slide to centre and
   rotate into the X; the middle bar fades out. */
.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container-open[aria-expanded="true"] {
	background: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
}

.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container-open[aria-expanded="true"] .sire-burger i {
	background-color: var(--wp--preset--color--surface);
}

.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container-open[aria-expanded="true"] .sire-burger i:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container-open[aria-expanded="true"] .sire-burger i:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container-open[aria-expanded="true"] .sire-burger i:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* ---- Panel: slides in from the right ----
   The panel itself is TRANSPARENT and the white is painted on the inner
   wrapper instead. Reason: the panel is a stacking context (z-index 100001),
   so its `::before` scrim (z-index -1) paints ABOVE the panel's own
   background — a white panel background was being dimmed by its own backdrop
   (rendering #cccccc = white at 20% black). In-flow descendants paint after
   negative-z children, so the wrapper sits cleanly on top of the scrim.

   NOTE: `display` is deliberately NOT set on the closed state. Core hides it
   with `.hidden-by-default { display: none }`; forcing `display: flex` here
   kept the parked panel in layout, extending the document 360px wide and
   producing a horizontal scrollbar. */

.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container {
	/* Height of a top-level row. The label and the chevron both key off this so
	   they stay aligned: with `top: 50%` the chevron centred on the whole <li>,
	   so opening a group (45px -> 183px) pushed it 69px down, away from its own
	   label. Shared here so the two rules can never drift apart. */
	--sire-drawer-row: 60px;
	background-color: transparent !important;
	color: var(--wp--preset--color--ink) !important;
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	left: auto !important;
	bottom: 0 !important;
	/* 760px on desktop: the menu column reads near-centre rather than parked
	   on the far right edge. 88vw cap keeps phones unchanged (390px phone ->
	   343px). max-width tracks width so core's inline styles can't shrink it. */
	width: min(760px, 88vw) !important;
	max-width: 760px !important;
	height: 100vh !important;
	height: 100dvh !important;
	transform: translateX(100%);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	overflow: hidden;
	z-index: 100001 !important;
}

/* The white surface — painted above the scrim, below the content. */
.site-header .site-header__nav-drawer .wp-block-navigation__responsive-close,
.site-header .site-header__nav-drawer .wp-block-navigation__responsive-dialog {
	background-color: var(--wp--preset--color--surface) !important;
}

.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container.is-menu-open {
	transform: translateX(0);
	display: flex !important;
	flex-direction: column;
	/* The viewport dim is a huge spread shadow rather than a `::before` scrim.
	   The panel's own transform makes `position: fixed` resolve to the panel,
	   so a fixed ::before can only ever cover the panel itself — never the page
	   behind it. A spread shadow paints OUTSIDE the border box, so it dims the
	   page without touching the white panel. box-shadow never affects layout,
	   so it adds no scrollable overflow. */
	box-shadow:
		-8px 0 40px rgba(27, 58, 92, 0.18),
		0 0 0 100vmax rgba(0, 0, 0, 0.25);
}

/* The old `::before` viewport scrim is deliberately gone. Because the panel is
   transformed, `position: fixed` resolved against the panel, so that scrim
   covered the panel itself instead of the page — it was the thing dimming the
   white surface to #cccccc. The dim is now the spread shadow above. */
.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container::before {
	content: none;
}

/* ---- Close button ---- */

.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container-close {
	position: absolute !important;
	top: 16px !important;
	right: 18px !important;
	z-index: 10 !important;
	width: 32px !important;
	height: 32px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--surface-alt) !important;
	transition: background-color 0.2s ease;
}

.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container-close svg {
	fill: none !important;
	stroke: var(--wp--preset--color--ink) !important;
	stroke-width: 2;
	width: 15px !important;
	height: 15px !important;
}

.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container-close:hover {
	background: var(--wp--preset--color--border) !important;
}

/* ---- Content layout ---- */

/* The panel's flex chain MUST be allowed to shrink.
   Default `min-height: auto` on a flex item refuses to shrink below its
   content size, so the chain grew to 2003px inside a 900px panel and
   `overflow-y: auto` on the content never engaged — 21 of 36 links were
   clipped and completely unreachable. `min-height: 0` is the fix. */
.site-header .site-header__nav-drawer .wp-block-navigation__responsive-close,
.site-header .site-header__nav-drawer .wp-block-navigation__responsive-dialog {
	min-height: 0 !important;
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden;
}

.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container-content {
	flex: 1;
	display: flex !important;
	flex-direction: column !important;
	padding: 68px 24px 32px !important;
	overflow-y: auto;
	min-height: 0 !important;
	-webkit-overflow-scrolling: touch;
}

/* ---- Top-level links: large, like prod (24px) ---- */

.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	gap: 0 !important;
	width: 100%;
	align-items: stretch;
}

.site-header .site-header__nav-drawer .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	/* Airy card rows: hairline dividers replaced by breathing room.
	   margin (not padding) separates rows so the hover wash reads per-row
	   and the whole row stays clickable. */
	margin-bottom: 10px;
	border-bottom: none;
	border-radius: 12px;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.site-header .site-header__nav-drawer .wp-block-navigation__container > .wp-block-navigation-item:hover {
	background-color: var(--wp--preset--color--surface-alt);
}

.site-header .site-header__nav-drawer .wp-block-navigation__container > .wp-block-navigation-item:last-child {
	margin-bottom: 0;
}

/* The top-level label is an <a> in hover mode and a <button> in click mode
   (submenuVisibility:"click"), so match either.
   `width: 100%` + `box-sizing: border-box` is what makes the WHOLE row
   clickable. The parent <li> is `display: block`, so a `flex` value on the
   label does nothing — before this, only the has-child labels (which had an
   explicit width) filled the row, and "Contact Us" was clickable across just
   its 85px of text. */
.site-header .site-header__nav-drawer .wp-block-navigation__container > .wp-block-navigation-item > a,
.site-header .site-header__nav-drawer .wp-block-navigation__container > .wp-block-navigation-item > button.wp-block-navigation-item__content {
	font-size: 1.125rem !important;
	font-weight: 600;
	letter-spacing: -0.005em;
	text-transform: none;
	line-height: 1.4;
	padding: 0 !important;
	/* The row is a fixed height (shared with the chevron via
	   --sire-drawer-row) rather than text-height + padding. That keeps the
	   chevron aligned with the label whether the group is open or closed. */
	min-height: var(--sire-drawer-row);
	color: var(--wp--preset--color--ink) !important;
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	background: none;
	border: 0;
	font-family: inherit;
	cursor: pointer;
	/* Horizontal breathing room inside the row so text never kisses the edge. */
	padding: 0 16px !important;
	transition: color 0.25s ease, padding-left 0.25s ease;
}

.site-header .site-header__nav-drawer .wp-block-navigation__container > .wp-block-navigation-item > a:hover,
.site-header .site-header__nav-drawer .wp-block-navigation__container > .wp-block-navigation-item > button.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent) !important;
	padding-left: 22px !important;
}

/* A submenu parent is a plain block with the chevron absolutely positioned.
   The label button spans the FULL row width and the chevron is
   pointer-events:none, so clicking anywhere on the row — including over the
   chevron — toggles the group.
   Earlier this was a 2-column grid, but in click mode core renders the
   chevron as a decorative <span> rather than a <button>, so the grid left the
   second column as dead space that looked clickable but did nothing. */
.site-header .site-header__nav-drawer .wp-block-navigation__container > .has-child {
	position: relative;
	display: block !important;
}

.site-header .site-header__nav-drawer .wp-block-navigation__container > .has-child > a,
.site-header .site-header__nav-drawer .wp-block-navigation__container > .has-child > button.wp-block-navigation-item__content {
	flex: none;
	width: 100%;
}

/* ---- Chevron ----
   Core hides this in overlay mode and, in click mode, renders it as a
   decorative <span> (not a button) because the label already owns the toggle.
   So it is positioned as a non-interactive marker: the label spans the row and
   the chevron sits on top of it, pointer-events:none.

   `top: 0` + `height: var(--sire-drawer-row)` anchors it to the LABEL row, not
   to the whole <li>. With `top: 50%` it centred on the expanded <li>, so
   opening a group slid it 69px down the accordion. */

.site-header .site-header__nav-drawer .is-menu-open .wp-block-navigation__submenu-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: calc((var(--sire-drawer-row) - 32px) / 2);
	right: 12px;
	width: 32px !important;
	height: 32px !important;
	flex: none;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 50%;
	background-color: transparent !important;
	color: var(--wp--preset--color--ink) !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-header .site-header__nav-drawer .is-menu-open .wp-block-navigation-item:hover > .wp-block-navigation__submenu-icon {
	background-color: var(--wp--preset--color--surface-alt) !important;
	border-color: var(--wp--preset--color--accent) !important;
}

.site-header .site-header__nav-drawer .is-menu-open .wp-block-navigation__submenu-icon svg {
	width: 14px !important;
	height: 14px !important;
	stroke: currentColor;
	transition: transform 0.25s ease;
}

.site-header .site-header__nav-drawer .is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* ---- Accordion ----
   Collapsed unless the parent <li> carries `.is-submenu-open` (set by
   assets/js/header-drawer.js, which also keeps aria-expanded in sync).
   Core's overlay CSS forces every submenu open with !important-free but
   highly specific rules, so these are scoped to win. */
.site-header .site-header__nav-drawer .is-menu-open .wp-block-navigation__container > .has-child:not(.is-submenu-open) > .wp-block-navigation__submenu-container {
	display: none !important;
}

/* Expanded submenu — indented, smaller, muted */
.site-header .site-header__nav-drawer .is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0;
	position: static !important;
	min-width: 0 !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	overflow: visible !important;
	padding: 4px 0 12px 16px !important;
	margin: 0 !important;
	order: 3;
}

.site-header .site-header__nav-drawer .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
	border-bottom: none;
}

.site-header .site-header__nav-drawer .is-menu-open .wp-block-navigation__submenu-container a {
	font-size: 1rem !important;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.4;
	padding: 8px 0 8px 14px !important;
	/* Literal, not --wp--preset--color--text-muted (#6C757D): that token is only
	   4.69:1 on white and reads washed out. This is 7.5:1 (WCAG AAA). */
	color: #4A5568 !important;
	border-left: 2px solid var(--wp--preset--color--border);
	min-height: 0;
	/* Fill the row so the WHOLE width is clickable, matching the top level.
	   Without this each child was only as wide as its own text — "JAPANESE"
	   was clickable across 86px of a 297px row. */
	display: block;
	width: 100%;
	box-sizing: border-box;
	transition: color 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease;
}

.site-header .site-header__nav-drawer .is-menu-open .wp-block-navigation__submenu-container a:hover {
	/* accent-hover (5.84:1) rather than accent (3.78:1) — accent fails AA as text. */
	color: var(--wp--preset--color--accent-hover) !important;
	border-left-color: var(--wp--preset--color--accent);
	padding-left: 16px !important;
}

/* Staggered slide-in for TOP-LEVEL items only (children animate via the
   accordion, so they must not inherit the offset).
   Butter-smooth: overshoot easing (slight settle past rest, like iOS),
   longer travel for visibility, gentle per-item cascade. */
.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item {
	opacity: 0;
	transform: translateX(32px);
	animation: nav-slide-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { animation-delay: 0.08s; }
.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 0.14s; }
.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 0.2s; }
.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 0.26s; }
.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: 0.32s; }
.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6) { animation-delay: 0.38s; }

@keyframes nav-slide-in {
	from { opacity: 0; transform: translateX(32px); }
	to { opacity: 1; transform: translateX(0); }
}

/* Reduced motion: panel still slides (position change is essential), but
   stagger collapses to a short fade so nothing flies across the screen. */
@media (prefers-reduced-motion: reduce) {
	.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container {
		transition-duration: 0.15s;
	}
	.site-header .site-header__nav-drawer .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item {
		animation-duration: 0.15s;
		animation-delay: 0s !important;
		transform: none;
	}
}

/* ========================================
   Mobile-only adjustments (782px and below)
   ======================================== */
@media (max-width: 782px) {

/* ---- Header CTA: stays in the bar on mobile ----
   The CTA is a sibling of the nav, not inside it, so it never enters the
   slide-in panel. It keeps its compact desktop look next to the hamburger. */

.site-header__cta .wp-element-button {
	width: auto !important;
	margin: 0;
	padding: 9px 16px !important;
	font-size: 0.8125rem !important;
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--surface) !important;
	border-radius: 8px;
	white-space: nowrap;
}

.site-header__cta .wp-element-button:hover {
	background-color: var(--wp--preset--color--accent-hover) !important;
	color: var(--wp--preset--color--surface) !important;
	transform: translateY(-1px);
}

/* Keep the nav + CTA row from overflowing on small screens */
.site-header__actions {
	gap: 12px !important;
}

/* ---- Footer: stack columns vertically ---- */

.site-footer .wp-block-columns {
	flex-direction: column;
}

.site-footer .wp-block-column {
	flex-basis: 100% !important;
}

.site-footer .sire-footer-nav .wp-block-navigation-item {
	padding-left: 0;
}

.site-footer .sire-footer-nav .wp-block-navigation-item:hover {
	padding-left: 0.8em;
}

.site-footer .sire-footer-nav .wp-block-navigation-item::before {
	left: -0.8em;
}

.site-footer .sire-footer-nav .wp-block-navigation-item:hover::before {
	left: 0;
}
}


/* ========================================
   Site footer (all viewports)
   ======================================== */

/* ========================================
   Global spacing: gap between main content and footer
   ======================================== */

/* Every template wraps its content in <main class="wp-block-group">.
   Padding-bottom here guarantees breathing room above the footer on all pages,
   regardless of the footer template part's own (possibly DB-cached) padding. */
main.wp-block-group {
	padding-bottom: var(--wp--preset--spacing--80);
}

/* ---- Footer navigation blocks ----
   These are real wp:navigation blocks (Site-Editor editable). The rules below
   reproduce the previous <ul>/<li> look: flat items, gold arrow sliding in on
   hover. */

/* Footer nav: stack vertically, no bullets, tight gaps */
.site-footer .sire-footer-nav .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.site-footer .sire-footer-nav .wp-block-navigation-item {
	position: relative;
	padding-left: 0;
	border-radius: 4px;
	transition: padding-left 0.2s ease, background-color 0.2s ease;
}

.site-footer .sire-footer-nav .wp-block-navigation-item::before {
	content: "\2192";
	position: absolute;
	left: -1.2em;
	opacity: 0;
	color: var(--wp--preset--color--highlight);
	transition: opacity 0.2s ease, left 0.2s ease;
	font-size: 0.8em;
}

.site-footer .sire-footer-nav .wp-block-navigation-item:hover {
	padding-left: 1.2em;
	background-color: rgba(255, 255, 255, 0.05);
}

.site-footer .sire-footer-nav .wp-block-navigation-item:hover::before {
	opacity: 1;
	left: 0;
}

.site-footer .sire-footer-nav a {
	color: var(--wp--preset--color--text-on-dark);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-footer .sire-footer-nav a:hover {
	color: var(--wp--preset--color--highlight);
}

/* Footer contact address line (was a list item, now a paragraph) */
.site-footer .sire-footer-address {
	color: var(--wp--preset--color--text-on-dark);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Footer column headings */
.site-footer h4 {
	letter-spacing: 0.02em;
	transition: color 0.2s ease;
}

.site-footer h4:hover {
	color: var(--wp--preset--color--highlight);
}

/* Footer contact links (WA, email) */
.site-footer a[href^="https://wa.me/"],
.site-footer a[href^="mailto:"] {
	color: var(--wp--preset--color--highlight);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.site-footer a[href^="https://wa.me/"]:hover,
.site-footer a[href^="mailto:"]:hover {
	opacity: 0.85;
}

/* Footer bottom bar links */
.site-footer .wp-block-group > p a {
	transition: color 0.2s ease;
}

.site-footer .wp-block-group > p a:hover {
	color: var(--wp--preset--color--highlight);
}

/* Footer separator */
.site-footer .wp-block-separator.is-style-wide {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.15);
}

/* ========================================
   Related posts (single post pages)
   ======================================== */

.sire2-related-posts {
	margin-top: var(--wp--preset--spacing--90);
	padding-top: var(--wp--preset--spacing--70);
	border-top: 1px solid var(--wp--preset--color--border);
}

.sire2-related-posts__heading {
	margin-bottom: var(--wp--preset--spacing--50);
}

.sire2-related-posts__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--50);
}

.sire2-related-posts__card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--wp--preset--border-radius--medium);
	overflow: hidden;
	background: var(--wp--preset--gradient--green-gradient);
	/* Literal, NOT var(--wp--preset--shadow--lg): theme.json shadow presets
	   are not emitted as CSS custom properties in this WP build, so the var
	   resolved to nothing and `box-shadow` silently computed to `none`
	   (verified in-browser). Same gotcha as the desktop dropdown above. */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.sire2-related-posts__card:hover {
	/* Was the SAME (empty) shadow as the resting state, so the hover only moved
	   the card without deepening its shadow. */
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--highlight);
}

.sire2-related-posts__thumb {
	display: block;
	line-height: 0;
	overflow: hidden;
}

.sire2-related-posts__thumb img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 9;
	transition: transform 0.3s ease;
}

.sire2-related-posts__card:hover .sire2-related-posts__thumb img {
	transform: scale(1.05);
}

.sire2-related-posts__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.sire2-related-posts__title {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 0.6rem;
}

/* Single real anchor per card; the ::after overlay makes the whole card clickable. */
.sire2-related-posts__title a {
	color: var(--wp--preset--color--surface);
	text-decoration: none;
	transition: color 0.2s ease;
}

.sire2-related-posts__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sire2-related-posts__title a:hover {
	color: var(--wp--preset--color--highlight);
}

.sire2-related-posts__title a:focus-visible {
	outline: 2px solid var(--wp--preset--color--highlight);
	outline-offset: 2px;
}

.sire2-related-posts__excerpt {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-on-dark);
	opacity: 0.85;
	line-height: 1.6;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.sire2-related-posts__more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: auto;
	color: var(--wp--preset--color--highlight);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

@media (max-width: 600px) {
	.sire2-related-posts__grid {
		grid-template-columns: 1fr;
	}
}

/* ========================================
   Scroll-to-top button
   ======================================== */
.scroll-to-top {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 6px;
	color: var(--wp--preset--color--text-on-dark);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	padding: 6px 14px;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	vertical-align: middle;
}

.scroll-to-top:hover {
	background: rgba(255, 255, 255, 0.18);
	border-color: var(--wp--preset--color--highlight);
	color: var(--wp--preset--color--highlight);
}

.scroll-to-top svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s ease;
}

.scroll-to-top:hover svg {
	transform: translateY(-2px);
}

/* LCP: below-fold helpers never needed for first paint.
   content-visibility skips their rendering until scrolled near.
   NOTE: .site-footer is excluded — the footer template part renders inside
   a <footer class="wp-block-template-part"> wrapper and footer content-visibility
   caused rendering quirks, so only the footer-internal heavy bits + truly
   below-fold components are skipped. contain-intrinsic-size reserves space
   so no CLS when they render. */
.sire2-related-posts,
.scroll-to-top {
	content-visibility: auto;
	contain-intrinsic-size: auto 600px;
}