/* ============================================================
   WordPress block bridge for Dutchman Tree Service.
   Maps core block markup (Navigation, Button, Site Logo, Group)
   onto the design system defined in tokens.css / site.css so the
   block theme renders like the original prototype.
   ============================================================ */

/* --- Fixed-header offset ---------------------------------------------------
   The header is position:fixed. Templates with a hero (front-page, page,
   single) already pad their first section. The blog index and any plain
   content need a top offset so content is not hidden behind the header. */
.site-header { --header-h: 80px; }
@media (max-width: 720px) { .site-header { --header-h: 72px; } }

body:not(.has-hero-overlay) .site-main {
	padding-top: var(--header-h);
}

/* --- Group blocks should not impose extra constraints on our containers --- */
.wp-block-group.container { max-width: 1320px; }

/* --- Site Logo block → header / footer logo ------------------------------ */
/* The Site Logo block is what actually renders the header mark, so its sizing
   lives here rather than in site.css (this file loads later and at higher
   specificity, so a rule there would be overridden). Reads --logo-h and
   --logo-drop from .site-header; see the note beside them in site.css. */
.header-logo.wp-block-site-logo { height: auto; width: auto; }
.header-logo.wp-block-site-logo img {
	height: var(--logo-h, 56px);
	width: auto;
	max-width: none;
	margin-bottom: calc(var(--logo-drop, 0px) * -1);
	position: relative;
	z-index: 2;
}
.footer-logo.wp-block-site-logo img { height: 64px; width: auto; }

/* --- Navigation block → match the prototype's .nav-link ------------------ */
.header-nav .wp-block-navigation__container { gap: 36px; align-items: center; }
.header-nav .wp-block-navigation-item__content {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-1);
	text-decoration: none;
	padding: 8px 0;
}
.header-nav .wp-block-navigation-item__content:hover { color: var(--brand-primary); }
.is-dark .header-nav .wp-block-navigation-item__content { color: var(--fg-on-dark); }
.is-dark .header-nav .wp-block-navigation-item__content:hover { color: var(--dts-rust-500); }

/* --- Hamburger button ----------------------------------------------------
   It has to read against two header states. Over a dark hero the header is
   transparent (.is-dark) so the icon must be light; once scrolled the header
   turns bone so it must be dark. It previously used `color: inherit`, which
   resolved to dark-on-dark and made the button effectively invisible. */
.header-nav .wp-block-navigation__responsive-container-open {
	color: var(--fg-1);
	/* Stated rather than inherited from core, so the button can never fall back
	   to a UA-default grey box if core's stylesheet is late or absent. */
	background: none;
	border: 0;
	/* 28px icon + 8px padding each side = a 44x44 target, Apple's documented
	   minimum. It was 36px, which is where the "had to tap it twice" came
	   from: near-misses on a small target inside a fixed header that site.js
	   is restyling during scroll. */
	padding: 8px;
	min-width: 44px;
	min-height: 44px;
	/* Hidden by default, shown only below 960px by the media query in site.css.
	   This used to say `display: flex` with no media query at all, which put it
	   at (0,2,0) -- the same specificity as core's own
	   `.wp-block-navigation__responsive-container-open:not(.always-shown)`
	   hide rule. Equal specificity means load order decides, this file loads
	   later, so the button won everywhere and desktop showed the hamburger
	   alongside the full inline menu. Defaulting to none rather than leaning on
	   core's media query also keeps the button hidden if core's stylesheet is
	   late or absent, which is the same reason the colours below are stated
	   here rather than inherited. */
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	/* Tells the engine this element will never be double-tap-zoomed, so it can
	   dispatch the tap immediately instead of waiting to see if a second one
	   is coming. */
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(184, 74, 24, 0.24);
}
/* Three bars, not core's two. The icon is core's own inline SVG and it draws
   exactly two rects, which reads as a list glyph rather than a menu. The markup
   comes from the block so it cannot be edited from the theme; drawing the icon
   here instead is the way to change it without a JS rewrite of core output.
   One element, three bars: the middle is the box itself and box-shadow adds the
   outer two. currentColor throughout, so the light/dark header logic above
   still applies untouched. */
.header-nav .wp-block-navigation__responsive-container-open svg { display: none; }
.header-nav .wp-block-navigation__responsive-container-open::before {
	content: "";
	width: 26px;
	height: 2px;
	background: currentColor;
	box-shadow: 0 -8px 0 currentColor, 0 8px 0 currentColor;
	border-radius: 2px;
}
/* Note: `.is-dark` alone, NOT `.is-dark:not(.is-scrolled)`. On overlay pages
   the header stays dark once scrolled too (`.is-dark.is-scrolled` is
   forest-900 at 96%), so gating on the scroll state would flip the icon back
   to dark-on-dark. This matches how the nav links are handled above. */
.site-header.is-dark .header-nav .wp-block-navigation__responsive-container-open {
	color: var(--fg-on-dark);
}

/* --- Mobile overlay drawer ------------------------------------------------
   The colours are also declared as block attributes on the Navigation block in
   parts/header.html (overlayBackgroundColor / overlayTextColor), which is the
   native mechanism. These rules are the belt to that pair of braces: core
   ships its own `.is-menu-open` background at equal specificity, so the
   overlay rendered white while the links kept the theme's near-white colour,
   leaving them invisible except momentarily on tap. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--dts-forest-900) !important;
	color: var(--fg-on-dark) !important;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--fg-on-dark) !important;
	font-size: 28px;
	padding: 14px 0;
}
.wp-block-navigation__responsive-container.is-menu-open a:hover,
.wp-block-navigation__responsive-container.is-menu-open a:focus,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a {
	color: var(--dts-rust-500) !important;
}
/* The close (X) sits on the dark overlay and needs the same treatment. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--fg-on-dark) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	fill: currentColor;
	width: 28px;
	height: 28px;
}

/* --- Button block → reuse the .btn look ----------------------------------
   The visible element is the inner link, so all styling targets
   .wp-block-button__link. Wrapper variant classes (dts-secondary / dts-ghost /
   dts-ghost-light / dts-arrow) are deliberately NOT named .btn* so the generic
   site.css .btn rules never apply to the wrapper (which caused a nested
   double-button). Default link styling is the primary green button. */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: var(--radius-md);
	padding: 18px 32px;
	border: 2px solid transparent;
	text-decoration: none;
	background: var(--brand-primary);
	color: var(--fg-on-dark);
	box-shadow: var(--shadow-cta);
	transition: transform var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.wp-block-button__link:hover { background: var(--brand-primary-hover); color: var(--fg-on-dark); }

.dts-secondary .wp-block-button__link { background: var(--brand-secondary); box-shadow: none; }
.dts-secondary .wp-block-button__link:hover { background: var(--brand-secondary-hover); }

.dts-ghost .wp-block-button__link { background: transparent; color: var(--brand-primary); border-color: var(--brand-primary); box-shadow: none; }
.dts-ghost .wp-block-button__link:hover { background: var(--brand-primary); color: var(--fg-on-dark); }

.dts-ghost-light .wp-block-button__link { background: transparent; color: var(--fg-on-dark); border-color: var(--fg-on-dark); box-shadow: none; }
.dts-ghost-light .wp-block-button__link:hover { background: var(--fg-on-dark); color: var(--dts-forest-900); }

.dts-arrow .wp-block-button__link::after { content: "→"; }

/* --- Page hero needs a dark backdrop so the light title is legible when no
   hero image is set (otherwise white-on-bone is invisible). --- */
.page-hero { background: var(--dts-forest-900); }

/* --- Footer grid items (groups wrapped around each column) --------------- */
.footer-grid > .footer-brand,
.footer-grid > .footer-col { min-width: 0; }
.footer-grid .footer-col p { margin: 0; }
.footer-grid .footer-col p a,
.footer-brand .footer-blurb { color: var(--dts-bone-50); }
.footer-brand .footer-blurb { color: rgba(250, 247, 240, 0.7); font-size: 14px; max-width: 320px; margin-top: 16px; }

/* --- Heading block default margin reset inside our sections -------------- */
.site-main .wp-block-heading { margin: 0 0 0.4em; }