/*
Theme Name: DKD Advisory
Description: A custom block theme.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dkd-advisory
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

:root {
	--dkd-bg: var( --wp--preset--color--base );
	--dkd-primary: var( --wp--preset--color--primary );
	--dkd-ink: var( --wp--preset--color--ink );
	--dkd-ink-soft: var( --wp--preset--color--ink-soft );
	--dkd-accent: var( --wp--preset--color--accent );
	--dkd-beacon: var( --wp--preset--color--beacon );
	--dkd-on-primary: var( --wp--preset--color--on-primary );
	--dkd-border: var( --wp--preset--color--border );
	--dkd-surface: var( --wp--preset--color--surface );
}

/* === base === */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-feature-settings: "cv11"; }
.wp-site-blocks { overflow-x: clip; }

/* Tighten default WP root padding so full-bleed sections truly span edge to edge,
   while constrained content stays within 1280px via container padding. */
:where(.wp-site-blocks) > * { margin-block: 0; }

/* Remove the default block-gap margin between top-level page sections so the
   full-width colored bands (hero, tabs, testimonial, CTA) butt directly against
   each other with no light gap showing through. */
.entry-content.wp-block-post-content > * { margin-block: 0 !important; }

.dkd-divider { border: 0; border-top: 1px solid var(--dkd-border); margin: 0; }
.dkd-border-top { border-top: 1px solid var(--dkd-border); }

/* === typography === */
.dkd-serif { font-family: var( --wp--preset--font-family--serif ); }
.dkd-italic { font-family: var( --wp--preset--font-family--serif ); font-style: italic; }
.has-display-font-family { letter-spacing: -0.02em; }
.dkd-tight { line-height: 1.05; }

/* On-primary (dark) sections */
.dkd-on-dark, .dkd-on-dark :where(h1,h2,h3,h4,p,li,blockquote,a,span) { color: var(--dkd-on-primary); }
.dkd-on-dark .dkd-eyebrow { color: var(--dkd-beacon); }
.dkd-muted-light { color: color-mix(in srgb, var(--dkd-on-primary) 78%, transparent) !important; }

/* === eyebrow === */
.dkd-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--dkd-accent);
	margin-bottom: 0;
}

/* === header === */
.dkd-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--dkd-bg) 85%, transparent);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--dkd-border);
}
.dkd-header .wp-block-site-logo img,
.dkd-header img.dkd-logo { height: 56px; width: auto; }
.dkd-nav a {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--dkd-ink-soft);
	text-decoration: none;
	transition: color 180ms ease;
}
.dkd-nav a:hover { color: var(--dkd-ink); }
.dkd-nav .current-menu-item a,
.dkd-nav .current_page_item a {
	color: var(--dkd-ink);
	text-decoration: underline;
	text-underline-offset: 8px;
	text-decoration-color: var(--dkd-accent);
	text-decoration-thickness: 2px;
}
@media (min-width: 782px) {
	.dkd-header .wp-block-site-logo img,
	.dkd-header img.dkd-logo { height: 72px; }
}
/* --- header layout: top bar (CTA) + main row (logo + nav) --- */
.dkd-header .dkd-topbar { padding: 0; }
.dkd-header .dkd-topbar-cta .wp-element-button { display: block; text-align: center; }
/* Desktop: fold the CTA into the top-right of the main row instead of a separate bar. */
@media (min-width: 782px) {
	.dkd-header { position: sticky; }
	.dkd-header .dkd-topbar {
		position: absolute;
		top: 50%;
		right: max(2rem, calc((100% - var(--wp--style--global--wide-size, 1280px)) / 2 + 2rem));
		transform: translateY(-50%);
		z-index: 2;
	}
	/* Reserve space so the nav doesn't run under the absolutely-placed CTA. */
	.dkd-header .dkd-nav { margin-right: 12rem; }
}
/* Mobile: CTA becomes a full-width bar above the logo + hamburger row. */
@media (max-width: 781px) {
	.dkd-header .dkd-topbar {
		display: block;
		padding: 0.6rem 1rem;
		border-bottom: 1px solid var(--dkd-border);
	}
	.dkd-header .dkd-topbar-cta,
	.dkd-header .dkd-topbar-cta .wp-block-button { width: 100%; }
	.dkd-header .dkd-topbar-cta .wp-element-button { width: 100%; padding: 0.75rem 1rem; }
	/* Tighten the logo + hamburger row so the header is shorter. */
	.dkd-header .dkd-header-main {
		margin-top: 0 !important;
		padding-top: 0.5rem !important;
		padding-bottom: 0.5rem !important;
	}
}

/* === buttons === */
.wp-element-button, .wp-block-button__link {
	border-radius: 0;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 1rem 1.75rem;
	line-height: 1.1;
	transition: background-color 180ms ease, color 180ms ease;
}
/* Beacon (amber) primary CTA */
.dkd-btn-beacon .wp-element-button {
	background: var(--dkd-beacon);
	color: var(--dkd-primary);
}
.dkd-btn-beacon .wp-element-button:hover {
	background: var(--dkd-accent);
	color: var(--dkd-on-primary);
}
/* Solid navy */
.dkd-btn-primary .wp-element-button {
	background: var(--dkd-primary);
	color: var(--dkd-on-primary);
}
.dkd-btn-primary .wp-element-button:hover { background: var(--dkd-accent); color: var(--dkd-on-primary); }
/* Outline on dark */
.dkd-btn-outline .wp-element-button {
	background: transparent;
	color: var(--dkd-on-primary);
	border: 1px solid color-mix(in srgb, var(--dkd-on-primary) 32%, transparent);
}
.dkd-btn-outline .wp-element-button:hover {
	background: color-mix(in srgb, var(--dkd-on-primary) 10%, transparent);
}
.dkd-link-arrow a, a.dkd-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--dkd-accent);
	text-decoration: none;
}

/* === hero === */
.dkd-hero { position: relative; isolation: isolate; }
.dkd-hero .wp-block-cover__background { z-index: 1; }
.dkd-hero .wp-block-cover__image-background {
	z-index: 0;
	/* Match the reference: anchor top-left, scale 1.15 and shift up so less sky
	   shows and the lighthouse sits higher in frame. */
	object-fit: cover;
	object-position: left top;
	transform: translateY(-100px) scale(1.15);
	transform-origin: top left;
}
/* Directional gradient scrim: dark on the left, image visible on the right */
.dkd-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, var(--dkd-primary) 8%, color-mix(in srgb, var(--dkd-primary) 55%, transparent) 48%, transparent 80%);
	pointer-events: none;
}
.dkd-hero .wp-block-cover__inner-container { position: relative; z-index: 2; }
.dkd-hero h1 { max-width: 16ch; }
/* On larger screens, cap the hero height so it stays 720px instead of growing with the viewport. */
@media (min-width: 782px) {
	.dkd-hero { min-height: 720px !important; }
}
/* Keep the hero sub-paragraph flush-left instead of auto-centering, which the
   WordPress constrained layout does to any max-width child. */
.dkd-hero-sub { max-width: 38ch; margin-left: 0 !important; margin-right: auto !important; }

/* Inner page hero (solid primary) */
/* A touch more vertical padding so the hero sits a bit taller. */
.dkd-pagehero { padding-top: 5rem !important; padding-bottom: 5rem !important; }
/* Keep the heading flush-left like the eyebrow/sub-text instead of auto-centering. */
.dkd-pagehero h1 { max-width: 20ch; margin-left: 0 !important; margin-right: auto !important; }
.dkd-pagehero .dkd-hero-sub { max-width: 44ch; }

/* === stats === */
.dkd-stats { border-top: 1px solid var(--dkd-border); }
.dkd-stat-value {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--dkd-ink);
}
.dkd-stat-label {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.72rem;
	color: var(--dkd-ink-soft);
	line-height: 1.4;
}

/* === services-tabs === */
.dkd-tabs { display: grid; gap: 3rem; }
.dkd-tablist {
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--dkd-border);
}
.dkd-tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-left: 2px solid transparent;
	margin-left: -1px;
	text-align: left;
	padding: 1rem 1.25rem;
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--dkd-ink-soft);
	cursor: pointer;
	transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.dkd-tab:hover { color: var(--dkd-ink); }
.dkd-tab[aria-selected="true"] {
	border-left-color: var(--dkd-accent);
	color: var(--dkd-ink);
	background: var(--dkd-bg);
}
.dkd-tabpanel { display: none; }
.dkd-tabpanel.is-active { display: block; animation: dkd-fade 320ms ease both; }
.dkd-tabpanel img { width: 100%; height: 18rem; object-fit: cover; }
.dkd-tab-grid { display: grid; gap: 1.25rem 2rem; }
@keyframes dkd-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 782px) {
	.dkd-tabs { grid-template-columns: 4fr 8fr; gap: 3rem; }
	.dkd-tab-grid { grid-template-columns: 1fr 1fr; }
	.dkd-tabpanel img { height: 20rem; }
}

/* === sections === */
.dkd-section { padding-block: clamp(4rem, 3rem + 5vw, 7rem); }
.dkd-section-surface { background: var(--dkd-surface); }
.dkd-section-dark { background: var(--dkd-primary); }
.dkd-section-surface2 { background: var( --wp--preset--color--surface-2 ); }
.dkd-rule-list > * { border-top: 1px solid var(--dkd-border); padding-top: 1.25rem; }
.dkd-checklist { list-style: none; padding-left: 0; margin-left: 0; }
.dkd-checklist li {
	list-style: none;
	position: relative;
	padding-left: 1.85rem;
	color: var(--dkd-ink);
	line-height: 1.55;
}
.dkd-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45rem;
	width: 1rem;
	height: 0.55rem;
	border-left: 2px solid var(--dkd-accent);
	border-bottom: 2px solid var(--dkd-accent);
	transform: rotate(-45deg);
}
.dkd-img-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dkd-ratio-45 { aspect-ratio: 4 / 5; overflow: hidden; }
.dkd-ratio-1 { aspect-ratio: 1 / 1; overflow: hidden; }

/* === cards === */
.dkd-card {
	background: var(--dkd-bg);
	border: 1px solid var(--dkd-border);
	padding: 2rem;
	transition: border-color 180ms ease;
	height: 100%;
}
.dkd-card:hover { border-color: var(--dkd-accent); }
.dkd-card-link { text-decoration: none; }
.dkd-value-num {
	font-family: var( --wp--preset--font-family--display );
	font-size: 3rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--dkd-accent) 35%, transparent);
	line-height: 1;
}
.dkd-grid-lines {
	display: grid;
	gap: 1px;
	background: var(--dkd-border);
	border: 1px solid var(--dkd-border);
}
.dkd-grid-lines > * { background: var(--dkd-bg); }
.dkd-pill { border-left: 2px solid var(--dkd-accent); padding: 0.25rem 0 0.25rem 1rem; }

/* === quote === */
.dkd-quote {
	font-family: var( --wp--preset--font-family--serif );
	font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	line-height: 1.25;
	max-width: 56rem;
	font-weight: 400;
	border: 0;
	padding: 0;
	margin: 1.5rem 0 0 !important;
	text-align: left;
}
.dkd-quote-rule { width: 2.5rem; height: 1px; background: var(--dkd-beacon); }

/* === cta === */
.dkd-cta { background: var( --wp--preset--color--surface-2 ); }

/* === footer === */
.dkd-footer { background: var(--dkd-primary); }
.dkd-footer, .dkd-footer :where(h4,p,li,a,span) { color: var(--dkd-on-primary); }
.dkd-footer a { text-decoration: none; }
.dkd-footer a:hover { color: var(--dkd-beacon); }
.dkd-footer .dkd-foot-head {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.72rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--dkd-on-primary) 55%, transparent) !important;
}
.dkd-footer img { height: 64px; width: auto; filter: brightness(0) invert(1); }
.dkd-footer .dkd-foot-list { list-style: none; padding-left: 0; margin-left: 0; }
.dkd-footer .dkd-foot-list li { line-height: 1.5; }
.dkd-footer .wp-block-column { word-break: normal; overflow-wrap: anywhere; }
.dkd-footer-bar { border-top: 1px solid color-mix(in srgb, var(--dkd-on-primary) 12%, transparent); }
.dkd-footer-bar, .dkd-footer-bar :where(span) { color: color-mix(in srgb, var(--dkd-on-primary) 55%, transparent) !important; font-size: 0.78rem; }

/* === forms === */
.dkd-form-wrap { background: var(--dkd-surface); border: 1px solid var(--dkd-border); padding: clamp(1.75rem, 1rem + 3vw, 2.5rem); }
.dkd-contact-row { border-top: 1px solid var(--dkd-border); padding-top: 1.25rem; }
.dkd-contact-label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 600; color: var(--dkd-ink-soft); }
.wpforms-field-label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem !important; font-weight: 600 !important; color: var(--dkd-ink-soft) !important; }
.wpforms-container input, .wpforms-container textarea, .wpforms-container select {
	border-radius: 0 !important;
	border: 1px solid var(--dkd-border) !important;
	background: var(--dkd-bg) !important;
}
.wpforms-container button[type="submit"] {
	border-radius: 0 !important;
	background: var(--dkd-primary) !important;
	font-weight: 600 !important;
}
.wpforms-container button[type="submit"]:hover { background: var(--dkd-accent) !important; }

/* === motion === */
.dkd-reveal { opacity: 1; }
body.dkd-js .dkd-reveal { opacity: 0; transform: translateY(20px); }
body.dkd-js .dkd-reveal.dkd-in { opacity: 1; transform: none; transition: opacity 700ms ease, transform 700ms cubic-bezier(0.16,1,0.3,1); }
@media (prefers-reduced-motion: reduce) {
	body.dkd-js .dkd-reveal { opacity: 1 !important; transform: none !important; }
	.dkd-tabpanel.is-active { animation: none; }
	* { scroll-behavior: auto !important; }
}

/* === responsive === */
@media (max-width: 781px) {
	.dkd-hero::after { background: linear-gradient(180deg, color-mix(in srgb, var(--dkd-primary) 70%, transparent), var(--dkd-primary)); }
	.dkd-quote { max-width: none; }
}

/* --- mobile nav overlay --- */

/* Hamburger open button: mobile only */
@media (max-width: 781px) {
	.dkd-nav .wp-block-navigation__responsive-container-open {
		width: 44px !important;
		height: 44px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	.dkd-nav .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }
}
@media (min-width: 782px) {
	.dkd-nav .wp-block-navigation__responsive-container-open {
		display: none !important;
	}
}

/* Full-screen overlay */
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;
	z-index: 9999 !important;
	background-color: var(--dkd-primary) !important;
	color: var(--dkd-bg) !important;
	padding: 1.5rem !important;
	box-sizing: border-box !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

/* All inner wrappers: full-width vertical column */
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3rem !important;
}

/* The <ul> list: vertical column */
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

/* Each top-level <li>: column so the submenu expands below the row */
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: 100% !important;
	border-bottom: 1px solid rgba(255,255,255,0.12) !important;
	box-sizing: border-box !important;
}

/* Parent submenu item: link and arrow share one row; submenu spans below */
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 44px !important;
	align-items: center !important;
	column-gap: 0.75rem !important;
}
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content {
	grid-column: 1 !important;
	min-width: 0 !important;
}
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > button.wp-block-navigation-submenu__toggle {
	grid-column: 2 !important;
	grid-row: 1 !important;
}
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
	grid-column: 1 / -1 !important;
}

/* Clickable page link */
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block !important;
	flex: 1 1 auto !important;
	padding: 0.9rem 0 !important;
	font-size: 1.15rem !important;
	color: var(--dkd-bg) !important;
	white-space: normal !important;
	word-break: break-word !important;
	text-align: left !important;
	box-sizing: border-box !important;
}

/* Arrow toggle button: large tap target, pushed to the right */
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open button.wp-block-navigation-submenu__toggle {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: 44px !important;
	height: 44px !important;
	margin: 0 !important;
	align-self: center !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	cursor: pointer !important;
	color: var(--dkd-bg) !important;
}
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open button.wp-block-navigation-submenu__toggle svg {
	width: 18px !important;
	height: 18px !important;
	transition: transform 200ms ease;
}
/* Arrow rotates when the submenu is open */
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open button.wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Submenu container: hidden by default, expands below the row */
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	display: none !important;
	position: static !important;
	opacity: 1 !important;
	background: transparent !important;
	border: 0 !important;
	min-width: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	flex-basis: 100% !important;
}
/* Show the submenu when its toggle button has aria-expanded=true */
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open button.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: flex !important;
	flex-direction: column !important;
}

/* Sub-items: full-width, left-aligned, indented */
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	display: block !important;
	border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.dkd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 0.7rem 0 0.7rem 1.5rem !important;
	font-size: 1rem !important;
	color: var(--dkd-bg) !important;
	white-space: normal !important;
	word-break: break-word !important;
	text-align: left !important;
	opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
	.dkd-nav .wp-block-navigation__responsive-container.is-menu-open button.wp-block-navigation-submenu__toggle svg { transition: none; }
}