/* ═══════════════════════════════════════════════════════════════════════════
   Plinthworks — Mega Navigation  (VMware-style light panel, dark variant)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   Header design tokens.

   Every size and shape in this file resolves through one of the variables
   below, so the whole header follows Appearance → Brand Colours instead of the
   literals that used to be scattered through the rules.

   ── Why these sit on :root ──────────────────────────────────────────────────
   The panel, the backdrop and the mobile drawer are all `position: fixed` and
   are matched by bare selectors (`.pw-mega-panel`, not
   `.wp-block-plinthworks-mega-nav .pw-mega-panel`), so they are not reliably
   inside the block's own subtree. Declaring on the block wrapper would leave
   them unstyled. :root reaches all of them.

   ── Why the theme's values arrive unitless ──────────────────────────────────
   `--mhm-hdr-*` come from the admin screen without a unit so they can be
   multiplied by --pw-hdr-scale here. A value carrying `px` cannot be. The unit
   is attached at the end of each calc().

   ── Shape is inherited, not configured ─────────────────────────────────────
   There are deliberately no header-specific radius or border-width controls.
   Buttons take the admin's button radius, surfaces take its card radius, and
   hairlines take its card border width — so squaring the site's cards squares
   the mega panel and the nav buttons along with them.

   Every fallback below is the literal this file used before the tokens
   existed, so the header still renders correctly with the theme absent.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	/* 1 on desktop; the admin's percentage once the mobile drawer takes over. */
	--pw-hdr-scale:     1;

	--pw-hdr-icon:      calc( var( --mhm-hdr-icon,     16 ) * var( --pw-hdr-scale ) * 1px );
	--pw-hdr-link:      calc( var( --mhm-hdr-link,     15 ) * var( --pw-hdr-scale ) * 1px );
	--pw-hdr-btn-py:    calc( var( --mhm-hdr-btn-py,   10 ) * var( --pw-hdr-scale ) * 1px );
	--pw-hdr-btn-px:    calc( var( --mhm-hdr-btn-px,   22 ) * var( --pw-hdr-scale ) * 1px );
	--pw-hdr-btn-font:  calc( var( --mhm-hdr-btn-font, 14 ) * var( --pw-hdr-scale ) * 1px );

	/* Icon geometry, all derived from one size. These ratios reproduce the
	   original 10×6 chevron, 12px caret, 22px hamburger bar and 44px tap
	   target exactly when the icon size is left at its default of 16. */
	--pw-hdr-chev-w:    calc( var( --pw-hdr-icon ) * 0.625 );
	--pw-hdr-chev-h:    calc( var( --pw-hdr-icon ) * 0.375 );
	--pw-hdr-bar-w:     calc( var( --pw-hdr-icon ) * 1.375 );
	--pw-hdr-bar-h:     calc( var( --pw-hdr-icon ) * 0.125 );
	--pw-hdr-tap:       calc( var( --pw-hdr-icon ) * 2.75 );

	/* Shape — from the Card shape settings, never set separately. */
	--pw-hdr-btn-radius:     var( --mhm-button-radius, 999px );
	--pw-hdr-surface-radius: var( --mhm-card-radius, 8px );
	--pw-hdr-border:         var( --mhm-card-border-width, 1px );
	/* Buttons carried a heavier 1.5px rule than the hairlines; keeping that
	   proportion means a border width of 0 still removes every one of them. */
	--pw-hdr-btn-border:     calc( var( --mhm-card-border-width, 1px ) * 1.5 );
	/* Small hover chips must not turn into pills when the buttons do, but must
	   still go square when the cards do — so they track card radius up to a
	   ceiling of the 4px they always had. */
	--pw-hdr-chip-radius:    min( var( --mhm-card-radius, 16px ), 4px );
}

@media ( max-width: 920px ) {
	:root {
		--pw-hdr-scale: calc( var( --mhm-hdr-scale, 100 ) / 100 );
	}
}

/* ── CSS variables — light panel (default) ─────────────────────────────────── */
.wp-block-plinthworks-mega-nav {
	--pw-nav-gap:               2.5rem;
	--pw-nav-link-px:           0.65rem;
	--pw-nav-link-py:           0.45rem;
	--pw-nav-link-size:         var( --pw-hdr-link );
	--pw-nav-link-weight:       500;
	--pw-nav-link-color:        inherit;
	--pw-nav-link-hover:        var( --wp--preset--color--surface-deep, #343877 );
	--pw-nav-active-color:      var( --wp--preset--color--surface-deep, #343877 );

	/* Panel */
	--pw-panel-bg:              #fff;
	--pw-panel-text:            #111827;
	--pw-panel-heading-color:   #111827;
	--pw-panel-link-color:      var( --wp--preset--color--surface-deep, #343877 );
	--pw-panel-link-hover:      var( --wp--preset--color--surface-deep, #343877 );
	--pw-panel-muted:           #6b7280;
	--pw-panel-border-top:      var( --wp--preset--color--accent, #EFC940 );
	--pw-panel-shadow:          0 8px 32px rgba( 0, 0, 0, 0.12 ),
	                            0 2px 8px  rgba( 0, 0, 0, 0.06 );
	--pw-panel-footer-border:   #e5e7eb;
	--pw-panel-footer-btn-bg:   #111827;
	--pw-panel-footer-btn-text: #fff;
	--pw-panel-padding:         2rem 2.5rem 1.5rem;
	--pw-panel-anim:            0.2s cubic-bezier( 0.4, 0, 0.2, 1 );
	--pw-caret-x:               50%;
	--pw-caret-size:            calc( var( --pw-hdr-icon ) * 0.75 );
}

/* ── Dark panel variant ─────────────────────────────────────────────────────── */
.wp-block-plinthworks-mega-nav.is-dark-panel {
	--pw-panel-bg:              #111827;
	--pw-panel-text:            #f1f5f9;
	--pw-panel-heading-color:   #f9fafb;
	--pw-panel-link-color:      #93c5fd;
	--pw-panel-link-hover:      #fff;
	--pw-panel-muted:           rgba( 255, 255, 255, 0.5 );
	--pw-panel-footer-border:   rgba( 255, 255, 255, 0.12 );
	--pw-panel-footer-btn-bg:   rgba( 255, 255, 255, 0.12 );
	--pw-panel-footer-btn-text: #fff;
	--pw-panel-shadow:          0 8px 32px rgba( 0, 0, 0, 0.45 );
}

/* ── Nav list ──────────────────────────────────────────────────────────────── */
.wp-block-plinthworks-mega-nav .pw-mega-nav__list {
	display:     flex;
	align-items: center;
	gap:         var( --pw-nav-gap );
	list-style:  none;
	margin:      0;
	padding:     0;
}

/* ── Nav item ──────────────────────────────────────────────────────────────── */
.wp-block-plinthworks-mega-nav .pw-mega-nav__item {
	position: static;
}

/* ── Nav link (plain items) ────────────────────────────────────────────────── */
.wp-block-plinthworks-mega-nav .pw-mega-nav__link {
	display:         inline-flex;
	align-items:     center;
	padding:         var( --pw-nav-link-py ) var( --pw-nav-link-px );
	font-size:       var( --pw-nav-link-size );
	font-weight:     var( --pw-nav-link-weight );
	color:           var( --pw-nav-link-color );
	text-decoration: none;
	border-radius:   var( --pw-hdr-chip-radius );
	transition:      color 0.15s ease;
	white-space:     nowrap;
}
.wp-block-plinthworks-mega-nav .pw-mega-nav__link:hover,
.wp-block-plinthworks-mega-nav .pw-mega-nav__link:focus-visible {
	color:   var( --pw-nav-link-hover );
	outline: none;
}

/* ── Trigger button (mega items) ───────────────────────────────────────────── */
.wp-block-plinthworks-mega-nav .pw-mega-nav__trigger {
	display:      inline-flex;
	align-items:  center;
	gap:          0.3rem;
	padding:      var( --pw-nav-link-py ) var( --pw-nav-link-px );
	font-size:    var( --pw-nav-link-size );
	font-weight:  var( --pw-nav-link-weight );
	color:        var( --pw-nav-link-color );
	background:   none;
	border:       none;
	border-radius: var( --pw-hdr-chip-radius );
	cursor:       pointer;
	white-space:  nowrap;
	transition:   color 0.15s ease;
}
.wp-block-plinthworks-mega-nav .pw-mega-nav__trigger:hover,
.wp-block-plinthworks-mega-nav .pw-mega-nav__trigger:focus-visible {
	color:   var( --pw-nav-link-hover );
	outline: none;
}
.wp-block-plinthworks-mega-nav .pw-mega-nav__trigger.is-open {
	color: var( --pw-nav-active-color );
}

/* Chevron — SVG when in DOM; ::after clip-path triangle as kses-safe fallback */
.wp-block-plinthworks-mega-nav .pw-mega-nav__chevron {
	flex-shrink: 0;
	transition:  transform var( --pw-panel-anim );
	/* save.js hardcodes width="14" height="14" on the SVG. Those attributes win
	   over nothing at all, so without this the chevron is the one part of the
	   header that ignores the icon size. 0.875 reproduces 14px at the default. */
	width:  calc( var( --pw-hdr-icon ) * 0.875 );
	height: calc( var( --pw-hdr-icon ) * 0.875 );
}
.wp-block-plinthworks-mega-nav .pw-mega-nav__trigger.is-open .pw-mega-nav__chevron {
	transform: rotate( 180deg );
}
.wp-block-plinthworks-mega-nav .pw-mega-nav__trigger::after {
	content:      '';
	display:      inline-block;
	width:        var( --pw-hdr-chev-w );
	height:       var( --pw-hdr-chev-h );
	background:   currentcolor;
	clip-path:    polygon( 0 0, 100% 0, 50% 100% );
	margin-left:  0.3rem;
	flex-shrink:  0;
	opacity:      0.6;
	transition:   transform var( --pw-panel-anim ), opacity var( --pw-panel-anim );
}
.wp-block-plinthworks-mega-nav .pw-mega-nav__trigger:hover::after,
.wp-block-plinthworks-mega-nav .pw-mega-nav__trigger:focus-visible::after {
	opacity: 1;
}
.wp-block-plinthworks-mega-nav .pw-mega-nav__trigger.is-open::after {
	transform: rotate( 180deg );
	opacity:   1;
}
/* Hide CSS fallback when SVG is already in DOM */
.wp-block-plinthworks-mega-nav .pw-mega-nav__trigger:has( .pw-mega-nav__chevron )::after {
	display: none;
}

/* ── Backdrop ──────────────────────────────────────────────────────────────── */
.pw-mega-backdrop {
	position:       fixed;
	inset:          0;
	top:            var( --pw-nav-bottom-fixed, 64px );
	z-index:        8900;
	background:     rgba( 0, 0, 0, 0.25 );
	opacity:        0;
	visibility:     hidden;
	transition:     opacity var( --pw-panel-anim ), visibility var( --pw-panel-anim );
	pointer-events: none;
}
.pw-mega-backdrop.is-active {
	opacity:        1;
	visibility:     visible;
	pointer-events: auto;
}

/* Full-viewport-width accent line at the panel's top edge.
   The panel itself sits at z-index 9000 and covers this line within its own
   bounds; in the left/right gutters the line shows through, so combined with
   the panel's own border-top it reads as a single continuous line spanning
   the full viewport — caret still pokes up from the panel as before. */
.pw-mega-backdrop::before {
	content:        '';
	position:       absolute;
	top:            0;
	left:           0;
	right:          0;
	height:         3px;
	background:     var( --pw-panel-border-top );
	pointer-events: none;
}

/* ── Mega panel ────────────────────────────────────────────────────────────── */
.pw-mega-panel {
	position:      fixed;
	top:           var( --pw-nav-bottom-fixed, 64px );
	left:          50%;
	width:         min( 960px, calc( 100vw - 2rem ) );
	z-index:       9000;
	background:    var( --pw-panel-bg );
	color:         var( --pw-panel-text );
	box-shadow:    var( --pw-panel-shadow );
	border-top:    3px solid var( --pw-panel-border-top );
	/* Only the bottom corners round — the panel hangs off the header bar. */
	border-radius: 0 0 var( --pw-hdr-surface-radius ) var( --pw-hdr-surface-radius );

	/* Closed */
	opacity:        0;
	visibility:     hidden;
	transform:      translateX( -50% ) translateY( -6px );
	transition:     opacity var( --pw-panel-anim ),
	                visibility var( --pw-panel-anim ),
	                transform var( --pw-panel-anim );
	pointer-events: none;
}
.pw-mega-panel[aria-hidden="true"] {
	display: none;
}
.pw-mega-panel.is-open {
	opacity:        1;
	visibility:     visible;
	transform:      translateX( -50% ) translateY( 0 );
	pointer-events: auto;
}

/* ── Triangle caret pointing up to the active trigger ──────────────────────── */
.pw-mega-panel::before {
	content:    '';
	position:   absolute;
	top:        calc( -1 * var( --pw-caret-size ) / 2 - 3px ); /* sits on top border */
	left:       var( --pw-caret-x, 50% );
	transform:  translateX( -50% ) rotate( 45deg );
	width:      var( --pw-caret-size );
	height:     var( --pw-caret-size );
	background: var( --pw-panel-bg );
	border-top: 3px solid var( --pw-panel-border-top );
	border-left: 3px solid var( --pw-panel-border-top );
	z-index:    1;
}

/* ── Panel inner content ────────────────────────────────────────────────────── */
.pw-mega-panel__inner {
	padding: var( --pw-panel-padding );
}

/* ── Column heading ─────────────────────────────────────────────────────────── */
.pw-mega-panel .pw-panel-col-heading {
	font-size:       0.6875rem;      /* 11px */
	font-weight:     700;
	text-transform:  uppercase;
	letter-spacing:  0.08em;
	color:           var( --pw-panel-muted );
	margin:          0 0 0.75rem;
	padding-bottom:  0.5rem;
	border-bottom:   var( --pw-hdr-border ) solid var( --pw-panel-footer-border );
}

/* ── Link list ──────────────────────────────────────────────────────────────── */
.pw-mega-panel .pw-panel-link-list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        0.125rem;
}
.pw-mega-panel .pw-panel-link-list__item a {
	display:         block;
	padding:         0.45rem 0.5rem;
	font-size:       0.9rem;
	font-weight:     400;
	color:           var( --pw-panel-link-color );
	text-decoration: none;
	border-radius:   var( --pw-hdr-chip-radius );
	transition:      background 0.12s ease, color 0.12s ease, padding-left 0.12s ease;
}
.pw-mega-panel .pw-panel-link-list__item a:hover {
	background:   rgba( 0, 0, 0, 0.04 );
	color:        var( --pw-panel-link-hover );
	padding-left: 0.9rem;
}
.is-dark-panel .pw-mega-panel .pw-panel-link-list__item a:hover {
	background: rgba( 255, 255, 255, 0.07 );
}

/* ── Featured / promo column ────────────────────────────────────────────────── */
.pw-mega-panel .pw-panel-featured {
	padding:       1.25rem 1.5rem;
	background:    #f8fafc;
	border-radius: var( --pw-hdr-surface-radius );
	height:        100%;
	box-sizing:    border-box;
}
.is-dark-panel .pw-mega-panel .pw-panel-featured {
	background: rgba( 255, 255, 255, 0.06 );
}
.pw-mega-panel .pw-panel-featured__eyebrow {
	font-size:      0.6875rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color:          var( --pw-panel-muted );
	margin:         0 0 0.5rem;
}
.pw-mega-panel .pw-panel-featured__heading {
	font-size:   1rem;
	font-weight: 700;
	line-height: 1.35;
	color:       var( --pw-panel-heading-color );
	margin:      0 0 0.6rem;
}
.pw-mega-panel .pw-panel-featured__body {
	font-size:   0.875rem;
	color:       var( --pw-panel-muted );
	line-height: 1.55;
	margin:      0 0 1rem;
}
.pw-mega-panel .pw-panel-featured__link {
	font-size:       0.875rem;
	font-weight:     600;
	color:           var( --pw-panel-link-color );
	text-decoration: none;
	display:         inline-flex;
	align-items:     center;
	gap:             0.3rem;
	transition:      color 0.15s ease;
}
.pw-mega-panel .pw-panel-featured__link:hover {
	color:           var( --wp--preset--color--surface-deep, #343877 );
	text-decoration: underline;
}

/* ── Footer bar ─────────────────────────────────────────────────────────────── */
.pw-mega-panel .pw-panel-footer-bar {
	border-top:  var( --pw-hdr-border ) solid var( --pw-panel-footer-border );
	margin-top:  1.25rem;
	padding-top: 1rem;
	display:     flex;
	align-items: center;
	gap:         0.75rem;
	flex-wrap:   wrap;
}
/* Pill buttons — same look as the mobile drawer buttons (solid + ghost). */
.pw-mega-panel .pw-panel-footer-bar__btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         var( --pw-hdr-btn-py ) var( --pw-hdr-btn-px );
	font-size:       var( --pw-hdr-btn-font );
	font-weight:     700;
	/* theme.json gives every ordinary button `line-height: 1`. Without it here
	   the label carries a ~1.5 line box, which made these buttons 6px taller
	   than a normal button despite having LESS padding. */
	line-height:     1;
	color:           var( --wp--preset--color--on-action, #333 );
	background:      var( --wp--preset--color--accent, #EFC940 );
	border:          var( --pw-hdr-btn-border ) solid var( --wp--preset--color--accent, #EFC940 );
	border-radius:   var( --pw-hdr-btn-radius );
	text-decoration: none;
	cursor:          pointer;
	transition:      filter 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.pw-mega-panel .pw-panel-footer-bar__btn:hover {
	filter: brightness( 1.08 );
}
.pw-mega-panel .pw-panel-footer-bar__btn--ghost {
	background:  transparent;
	color:       var( --wp--preset--color--surface-deep, #343877 );
}
.pw-mega-panel .pw-panel-footer-bar__btn--ghost:hover {
	filter: none;
	background: var( --wp--preset--color--accent, #EFC940 );
	color: var( --wp--preset--color--on-action, #333 );
}

/* ── Columns inside panel ───────────────────────────────────────────────────── */
.pw-mega-panel .wp-block-columns {
	gap:           1.5rem;
	align-items:   start;
	margin-bottom: 0;
}
.pw-mega-panel .wp-block-column {
	margin-bottom: 0;
}

/* ── Dark mode integration (JS-toggled [data-color-scheme="dark"] on <html>) ─── */
[data-color-scheme="dark"] .wp-block-plinthworks-mega-nav {
	--pw-nav-link-color:        rgba( 255, 255, 255, 0.82 );
	--pw-nav-link-hover:        #fff;
	--pw-nav-active-color:      var( --wp--preset--color--surface-deep, #343877 );

	--pw-panel-bg:              #111827;
	--pw-panel-text:            #f1f5f9;
	--pw-panel-heading-color:   #f9fafb;
	--pw-panel-link-color:      #93c5fd;
	--pw-panel-link-hover:      #fff;
	--pw-panel-muted:           rgba( 255, 255, 255, 0.5 );
	--pw-panel-border-top:      var( --wp--preset--color--accent, #EFC940 );
	--pw-panel-shadow:          0 8px 32px rgba( 0, 0, 0, 0.5 );
	--pw-panel-footer-border:   rgba( 255, 255, 255, 0.12 );
	--pw-panel-footer-btn-bg:   rgba( 255, 255, 255, 0.12 );
	--pw-panel-footer-btn-text: #fff;
}

[data-color-scheme="dark"] .pw-mega-panel .pw-panel-link-list__item a:hover {
	background: rgba( 255, 255, 255, 0.07 );
}

[data-color-scheme="dark"] .pw-mega-panel .pw-panel-featured {
	background: rgba( 255, 255, 255, 0.06 );
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	.pw-mega-panel,
	.pw-mega-backdrop,
	.pw-mega-nav__chevron { transition: none; }
}

/* ── Desktop only — hide on mobile ─────────────────────────────────────────── */
@media ( max-width: 767px ) {
	.wp-block-plinthworks-mega-nav { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   Block styles for panel-* + newsletter-signup (registered in theme PHP).
   Plain CSS-only variants, work anywhere the block is dropped — including
   panels inside the mega nav, the footer newsletter row, or standalone in
   a regular page.
   ═════════════════════════════════════════════════════════════════════════════ */

/* panel-link-list → "Arrow prefix" */
/*
 * stylelint no-descending-specificity: NOT reordered - doing so would
 * change rendering. Measured, not assumed.
 *
 * This rule is (0,3,1); stylelint wants it above
 *   .is-dark-panel .pw-mega-panel .pw-panel-link-list__item a:hover (L336, (0,4,1))
 *
 * Moving it up would jump it over these rules, which share a
 * declared property and are not outranked on specificity, so the
 * last-one-wins outcome would flip:
 *   L372 (0,2,0) [display, align-items, transition] .pw-mega-panel .pw-panel-featured__link
 *   L388 (0,2,0) [display, align-items] .pw-mega-panel .pw-panel-footer-bar
 *   L398 (0,2,0) [display, align-items, transition] .pw-mega-panel .pw-panel-footer-bar__btn
 *   L431 (0,2,0) [align-items] .pw-mega-panel .wp-block-columns
 *   ...and 2 more
 */
/* stylelint-disable-next-line no-descending-specificity */
.pw-panel-link-list.is-style-plinthworks-arrow-prefix .pw-panel-link-list__item a {
	display:         inline-flex;
	align-items:     center;
	padding-left:    0;
	transition:      padding-left 0.18s ease, color 0.18s ease;
}
.pw-panel-link-list.is-style-plinthworks-arrow-prefix .pw-panel-link-list__item a::before {
	content:       '→';
	display:       inline-block;
	margin-right:  0.5rem;
	opacity:       0;
	max-width:     0;
	overflow:      hidden;
	transform:     translateX( -4px );
	transition:    opacity 0.18s ease, max-width 0.18s ease, transform 0.18s ease;
}
.pw-panel-link-list.is-style-plinthworks-arrow-prefix .pw-panel-link-list__item a:hover::before,
.pw-panel-link-list.is-style-plinthworks-arrow-prefix .pw-panel-link-list__item a:focus-visible::before {
	opacity:    1;
	max-width:  1.2em;
	transform:  translateX( 0 );
}

/* panel-link-list → "Two columns" — best on lists with 6+ items */
.pw-panel-link-list.is-style-plinthworks-two-cols {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	column-gap:            1.5rem;
	row-gap:               0.125rem;
}
@media ( max-width: 600px ) {
	.pw-panel-link-list.is-style-plinthworks-two-cols { grid-template-columns: 1fr; }
}

/* panel-featured → "Minimal" — no card background, just text */
.pw-panel-featured.is-style-plinthworks-minimal {
	padding:        0;
	background:     none !important;
	border:         none !important;
	border-radius:  0;
}

/* panel-featured → "Accent border" — left accent stripe */
.pw-panel-featured.is-style-plinthworks-accent-border {
	border-left: 3px solid var( --pw-panel-border-top, var( --wp--preset--color--accent, #EFC940 ) );
	padding-left: 1.5rem;
	background:   none !important;
	border-radius: 0;
}

/* newsletter-signup → "Bordered card" */
.wp-block-plinthworks-newsletter-signup.is-style-plinthworks-bordered {
	padding:       1.4rem 1.6rem;
	border:        1px solid currentcolor;
	border-radius: var( --wp--custom--radius--medium, 10px );
	opacity:       1;
}
.wp-block-plinthworks-newsletter-signup.is-style-plinthworks-bordered .pw-newsletter__heading {
	color: inherit;
}

/* newsletter-signup → "Accent fill" — accent background card */
.wp-block-plinthworks-newsletter-signup.is-style-plinthworks-accent-bg {
	padding:       1.6rem 1.8rem;
	background:    var( --wp--preset--color--accent, #EFC940 );
	color:         #fff;
	border-radius: var( --wp--custom--radius--medium, 10px );
}
.wp-block-plinthworks-newsletter-signup.is-style-plinthworks-accent-bg .pw-newsletter__heading,
.wp-block-plinthworks-newsletter-signup.is-style-plinthworks-accent-bg .pw-newsletter__subheading {
	color: #fff;
}
.wp-block-plinthworks-newsletter-signup.is-style-plinthworks-accent-bg .pw-newsletter__input {
	background:   rgba( 255, 255, 255, 0.14 );
	border-color: rgba( 255, 255, 255, 0.22 );
	color:        #fff;
}
.wp-block-plinthworks-newsletter-signup.is-style-plinthworks-accent-bg .pw-newsletter__input::placeholder {
	color: rgba( 255, 255, 255, 0.6 );
}
.wp-block-plinthworks-newsletter-signup.is-style-plinthworks-accent-bg .pw-newsletter__btn {
	background: #fff;
	color:      var( --wp--preset--color--on-action, #333 );
}

/* ── Header call to action ─────────────────────────────────────────────────
   The CTA in the header bar is a core/button, so it already takes its colour
   and corner radius from the theme. Its SIZE came from the global button
   styles, which left it as the one control in the header that ignored the
   header sizing. Deliberately written without !important: the per-button
   appearance panel (inc/button-appearance.php) emits !important rules, so
   styling one particular button still overrides this baseline.
   ───────────────────────────────────────────────────────────────────────── */
.pw-header-cta .wp-block-button__link,
.pw-header-cta .wp-element-button {
	padding:     var( --pw-hdr-btn-py ) var( --pw-hdr-btn-px );
	font-size:   var( --pw-hdr-btn-font );
	line-height: 1;
}

/* ── Donate call to action ─────────────────────────────────────────────────
   Written as raw HTML in parts/header.html rather than a block, so it used to
   carry its whole appearance in a style attribute: a 999px pill with its own
   padding and font size, on a site whose buttons are square. It now shares the
   header button system with the panel and drawer buttons, so all three — and
   an ordinary button anywhere on the site — are the same size and shape.
   ───────────────────────────────────────────────────────────────────────── */
.mhm-donate-cta {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         var( --pw-hdr-btn-py ) var( --pw-hdr-btn-px );
	font-size:       var( --pw-hdr-btn-font );
	font-weight:     700;
	line-height:     1;
	color:           var( --wp--preset--color--on-action, #333 );
	background:      var( --wp--preset--color--accent, #EFC940 );
	border:          var( --pw-hdr-btn-border ) solid var( --wp--preset--color--accent, #EFC940 );
	border-radius:   var( --pw-hdr-btn-radius );
	text-decoration: none;
	white-space:     nowrap;
	transition:      filter 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.mhm-donate-cta:hover {
	filter: brightness( 1.08 );
}

/* ── Mobile navigation (core/navigation) — hide on desktop ─────────────────── */
.pw-header-mobile-nav {
	display: none !important;
}
@media ( max-width: 767px ) {
	.pw-header-mobile-nav {
		display: flex !important;
	}
	/* Also hide the desktop CTA pill on mobile */
	.pw-header-cta {
		display: none !important;
	}
}

/* ═════════════════════════════════════════════════════════════════════════════
   Automatic mobile drawer — derived server-side from the SAME mega-nav blocks
   (inc/mega-nav-mobile.php). Simple accordion, everything collapsed by default.
   Replaces the old hand-maintained .pw-header-mobile-nav duplicate.
   ═════════════════════════════════════════════════════════════════════════════ */

.pw-mega-mobile { display: none; }

@media ( max-width: 920px ) {
	/* The block now serves mobile itself (overrides the display:none above). */
	.wp-block-plinthworks-mega-nav { display: block; }
	.wp-block-plinthworks-mega-nav .pw-mega-nav__list,
	.wp-block-plinthworks-mega-nav .pw-mega-backdrop { display: none; }

	/* Retire the manual mobile nav duplicate for good. */
	.pw-header-mobile-nav { display: none !important; }

	.pw-mega-mobile { display: block; }

	/* The drawer is position:fixed, so ANY ancestor carrying backdrop-filter,
	   filter, transform or will-change becomes its containing block and the
	   drawer opens inside that box instead of the viewport. Sticky headers
	   commonly do exactly that. Rather than depend on the host theme getting
	   this right, the block clears it on whichever ancestor holds the drawer.
	   This is what kept the drawer from expanding on tablet widths. */
	:is( header, .wp-block-template-part, .wp-block-group ):has( .pw-mega-mobile__drawer ) {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		filter: none !important;
	}

	/* Hamburger */
	.pw-mega-mobile__toggle {
		position: relative; z-index: 100001;
		display: inline-flex; align-items: center; justify-content: center;
		width: var( --pw-hdr-tap ); height: var( --pw-hdr-tap ); padding: 0;
		background: transparent; border: 0; cursor: pointer;
		color: var( --wp--preset--color--contrast, #515266 );
	}
	/* The two outer bars are drawn with box-shadow, so their offset has to be
	   derived from the icon size too or they detach from the middle bar as
	   soon as the size moves off its default. */
	.pw-mega-mobile__bars {
		display: block; position: relative;
		width: var( --pw-hdr-bar-w ); height: var( --pw-hdr-bar-h );
		border-radius: var( --pw-hdr-bar-h );
		background: currentcolor;
		box-shadow:
			0 calc( -1 * var( --pw-hdr-icon ) * 0.4375 ) 0 currentcolor,
			0 calc(      var( --pw-hdr-icon ) * 0.4375 ) 0 currentcolor;
		transition: box-shadow .2s ease, transform .2s ease;
	}
	.pw-mega-mobile__toggle[aria-expanded="true"] .pw-mega-mobile__bars {
		transform: rotate( 45deg );
		box-shadow: none;
	}
	.pw-mega-mobile__toggle[aria-expanded="true"] .pw-mega-mobile__bars::after {
		content: ""; position: absolute; left: 0; top: 0;
		width: var( --pw-hdr-bar-w ); height: var( --pw-hdr-bar-h );
		border-radius: var( --pw-hdr-bar-h );
		background: currentcolor; transform: rotate( 90deg );
	}

	/* Drawer — opens BELOW the header (logo and toggle stay visible),
	   anchored to the nav's measured bottom edge like the desktop panels. */
	.pw-mega-mobile__drawer {
		position: fixed; left: 0; right: 0; bottom: 0;
		top: var( --pw-nav-bottom-fixed, 72px );
		z-index: 100000;
		background: var( --wp--preset--color--base, #FFF );
		border-top: var( --pw-hdr-border ) solid var( --wp--preset--color--base-3, #C8C8C8 );
		overflow-y: auto; -webkit-overflow-scrolling: touch;
		padding: 6px 0 40px;
		transform: translateZ( 0 );
	}
	.pw-mega-mobile__list { list-style: none; margin: 0; padding: 0; }
	.pw-mega-mobile__item { border-bottom: var( --pw-hdr-border ) solid var( --wp--preset--color--base-3, #C8C8C8 ); }

	.pw-mega-mobile__link,
	.pw-mega-mobile__sec {
		display: flex; align-items: center; justify-content: space-between;
		width: 100%; box-sizing: border-box;
		padding: 15px 22px; margin: 0;
		background: transparent; border: 0; cursor: pointer; text-align: left;
		font-family: inherit; font-size: 1.02rem; font-weight: 600;
		color: var( --wp--preset--color--contrast, #515266 ); text-decoration: none;
	}
	.pw-mega-mobile__sec::after {
		content: ""; display: inline-block;
		width: var( --pw-hdr-chev-w ); height: var( --pw-hdr-chev-h ); flex: none;
		background: currentcolor;
		clip-path: polygon( 0 0, 100% 0, 50% 100% );
		transition: transform .2s ease; margin-left: 12px;
	}
	.pw-mega-mobile__sec[aria-expanded="true"] { color: var( --wp--preset--color--surface-deep, #343877 ); }
	.pw-mega-mobile__sec[aria-expanded="true"]::after { transform: rotate( 180deg ); }

	.pw-mega-mobile__sub {
		list-style: none; margin: 0; padding: 4px 0 10px;
		background: var( --wp--preset--color--base-2, #F9F7F6 );
	}
	.pw-mega-mobile__sublink {
		display: block; padding: 11px 22px 11px 34px;
		font-size: .96rem; font-weight: 500; text-decoration: none;
		color: var( --wp--preset--color--contrast-2, #6F6F6F );
	}
	.pw-mega-mobile__sublink:hover,
	.pw-mega-mobile__sublink:focus-visible { color: var( --wp--preset--color--surface-deep, #343877 ); }

	@media ( prefers-reduced-motion: reduce ) {
		.pw-mega-mobile__bars, .pw-mega-mobile__sec::after { transition: none; }
	}
}

/* Drawer panel extras: featured cards + footer buttons, mirrored from desktop. */
@media ( max-width: 920px ) {
	.pw-mega-mobile__sublist { list-style: none; margin: 0; padding: 0; }

	.pw-mega-mobile__featured {
		display: block; margin: 10px 22px 14px;
		padding: 16px 18px;
		border-radius: var( --pw-hdr-surface-radius );
		background: var( --wp--preset--color--base, #FFF );
		border: var( --pw-hdr-border ) solid var( --wp--preset--color--base-3, #C8C8C8 );
		border-left: 3px solid var( --wp--preset--color--accent, #EFC940 );
	}
	.pw-mega-mobile__featured-eyebrow {
		display: block; font-size: .68rem; font-weight: 700;
		letter-spacing: .12em; text-transform: uppercase;
		color: var( --wp--preset--color--contrast-2, #6F6F6F ); margin-bottom: 6px;
	}
	.pw-mega-mobile__featured-heading {
		display: block; font-size: 1.05rem; line-height: 1.3;
		color: var( --wp--preset--color--contrast, #515266 ); margin-bottom: 6px;
	}
	.pw-mega-mobile__featured-body {
		margin: 0 0 10px; font-size: .88rem; line-height: 1.5;
		color: var( --wp--preset--color--contrast-2, #6F6F6F );
	}
	.pw-mega-mobile__featured-cta {
		display: inline-block; font-weight: 700; font-size: .9rem;
		color: var( --wp--preset--color--surface-deep, #343877 ); text-decoration: none;
	}

	.pw-mega-mobile__btns {
		display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 22px 16px;
	}
	.pw-mega-mobile__btn {
		display: inline-flex; align-items: center; justify-content: center;
		padding: var( --pw-hdr-btn-py ) var( --pw-hdr-btn-px );
		border-radius: var( --pw-hdr-btn-radius );
		background: var( --wp--preset--color--accent, #EFC940 );
		color: var( --wp--preset--color--on-action, #333 ); font-weight: 700; line-height: 1;
		font-size: var( --pw-hdr-btn-font ); text-decoration: none;
		border: var( --pw-hdr-btn-border ) solid var( --wp--preset--color--accent, #EFC940 );
	}
	.pw-mega-mobile__btn.is-ghost {
		background: transparent;
		color: var( --wp--preset--color--surface-deep, #343877 );
	}
}

/* Drawer: two-column titled link groups, mirroring the desktop panel columns. */
@media ( max-width: 920px ) {
	.pw-mega-mobile__overview {
		display: block; padding: 12px 22px 2px;
		font-weight: 700; font-size: .95rem; text-decoration: none;
		color: var( --wp--preset--color--surface-deep, #343877 );
	}
	.pw-mega-mobile__groups {
		display: grid; grid-template-columns: 1fr 1fr;
		gap: 6px 18px; padding: 12px 22px 4px;
	}
	.pw-mega-mobile__group-title {
		display: block; font-size: .68rem; font-weight: 700;
		letter-spacing: .12em; text-transform: uppercase;
		color: var( --wp--preset--color--contrast, #515266 );
		padding-bottom: 8px; margin-bottom: 4px;
		border-bottom: var( --pw-hdr-border ) solid var( --wp--preset--color--base-3, #C8C8C8 );
	}
	.pw-mega-mobile__group .pw-mega-mobile__sublink { padding: 9px 0; }
	.pw-mega-mobile__sublist--loose { padding: 4px 0 8px; }
	@media ( max-width: 360px ) {
		.pw-mega-mobile__groups { grid-template-columns: 1fr; }
	}
}

/* Drawer: light hairline divider between the two link-group columns
   (attached to the right column, like the desktop panel divider). */
@media ( max-width: 920px ) {
	.pw-mega-mobile__groups .pw-mega-mobile__group:nth-child( even ) {
		border-left:  var( --pw-hdr-border ) solid var( --wp--preset--color--base-3, #C8C8C8 );
		padding-left: 18px;
	}
	@media ( max-width: 360px ) {
		.pw-mega-mobile__groups .pw-mega-mobile__group:nth-child( even ) {
			border-left:  0;
			padding-left: 0;
		}
	}
}