/*
Theme Name: Dinnergroup
Theme URI: https://example.com/dinnergroup
Template: twentytwentyfive
Author: Generated with Claude Code
Author URI: https://claude.com/claude-code
Description: Child theme of Twenty Twenty-Five. Burgundy brand palette, DM Sans, a sticky header with a pill call-to-action, hero, service-card grid, subscribe band and policy-page template. Light and dark modes, reduced-motion aware.
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dinnergroup
Tags: blog, one-column, custom-colors, custom-menu, dark-mode-support, block-patterns, full-site-editing, accessibility-ready, translation-ready
*/

/* ---------------------------------------------------------------------------
   Design tokens.

   theme.json owns the palette the block editor sees; these mirror it for the
   handful of custom classes below that core blocks cannot express on their own.
   --------------------------------------------------------------------------- */

:root {
	--primary: #6b0f2a;
	--primary-dark: #4e0a1e;
	--primary-light: #8a1c3c;
	--surface: #f8f6f6;
	--surface-raised: #ffffff;
	--text: #241a1e;
	--text-muted: #3b3237;
	--accent: #a31840;
	--border: #e8e3e4;
	--focus: #a31840;
	--btn: #6b0f2a;
	--btn-hover: #4e0a1e;
	--radius: 12px;
	--radius-lg: 20px;

	color-scheme: light dark;
}

/* Dark mode.

   `html:root` outranks the `:root` that global styles emit, so these win no
   matter which stylesheet the browser resolves last. Redefining the preset
   variables (rather than only the local ones) carries the dark palette into
   every core block too. */
@media (prefers-color-scheme: dark) {
	html:root {
		--primary: #ffffff;
		--primary-dark: #e0e0e0;
		--primary-light: #f5f5f5;
		--surface: #292828;
		--surface-raised: #2d2d2d;
		--text: #f0edee;
		--text-muted: #d0c6c9;
		--accent: #ffffff;
		--border: #332a2d;
		--focus: #ffffff;
		/* Lift the button off the dark surface instead of sinking into it. */
		--btn: #8a1c3c;
		--btn-hover: #a31840;

		--wp--preset--color--base: #292828;
		--wp--preset--color--contrast: #f0edee;
		--wp--preset--color--accent-1: #8a1c3c;
		--wp--preset--color--accent-2: #a31840;
		--wp--preset--color--accent-3: #f5f5f5;
		--wp--preset--color--accent-4: #d0c6c9;
		--wp--preset--color--accent-5: #332a2d;
		--wp--preset--color--accent-6: #2d2d2d;
	}
}


/* ---------- Focus ---------- */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-radius: 4px;
}


/* ---------- Header ---------- */

/* The header template part is marked sticky in parts/header.html; these rules
   give it the surface, border and shadow-free seam of the original design. */
.dg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--surface-raised);
	border-bottom: 1px solid var(--border);
}

.admin-bar .dg-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.dg-header .wp-block-site-title a {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: var(--text);
	text-decoration: none;
	transition: color 0.2s;
}
.dg-header .wp-block-site-title a:hover {
	color: var(--primary);
}

.dg-header .wp-block-site-logo img {
	height: 36px;
	width: auto;
	transition: opacity 0.2s ease;
}
.dg-header .wp-block-site-logo img:hover {
	opacity: 0.85;
}

/* Navigation — core block markup, styled to match the original nav. */
.dg-header .wp-block-navigation {
	font-size: 0.92rem;
	font-weight: 500;
}
.dg-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--text-muted);
	text-decoration: none;
	transition: color 0.2s;
}
.dg-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--primary);
}
.dg-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	position: relative;
	color: var(--primary);
	font-weight: 600;
}
.dg-header .wp-block-navigation:not(.is-vertical) .current-menu-item > .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--primary);
	border-radius: 2px;
}

/* Submenu popover */
.dg-header .wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 220px;
	padding: 8px;
	background: var(--surface-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.dg-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 14px;
	border-radius: 8px;
	color: var(--text);
	font-size: 0.9rem;
	transition: background 0.15s, color 0.15s;
}
.dg-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--surface);
	color: var(--primary);
}
@media (prefers-color-scheme: dark) {
	.dg-header .wp-block-navigation .wp-block-navigation__submenu-container {
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	}
}

/* Overlay (mobile) menu — core handles the open/close, focus trap and aria. */
.dg-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 80px 24px 32px;
}
.dg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 14px 4px;
	font-size: 1rem;
}
.dg-header .wp-block-navigation__responsive-container-open,
.dg-header .wp-block-navigation__responsive-container-close {
	color: var(--text);
}

/* Core hides the hamburger at >=600px, so only restyle it below that — setting
   `display` unconditionally here would force it visible on desktop too. */
@media (max-width: 599px) {
	.dg-header .wp-block-navigation__responsive-container-open {
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 1px solid var(--border);
		border-radius: 10px;
		transition: background 0.2s;
	}
	.dg-header .wp-block-navigation__responsive-container-open:hover {
		background: var(--surface);
	}
}

/* Compact pill call-to-action in the header. */
.dg-header-cta .wp-block-button__link {
	padding: 9px 22px;
	font-size: 0.85rem;
}


/* ---------- Hero ---------- */

.dg-hero {
	padding: 100px 40px 90px;
	text-align: center;
	color: #fff;
	background-color: var(--btn);
	overflow: hidden;
}
.dg-hero :is(h1, h2, p) {
	color: #fff;
}
.dg-hero :is(h1, h2) {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	font-weight: 700;
	letter-spacing: -1.5px;
	line-height: 1.15;
	margin-bottom: 20px;
}
.dg-hero p {
	font-size: 1.1rem;
	opacity: 0.8;
	max-width: 520px;
	margin-inline: auto;
	line-height: 1.7;
}
.dg-hero a {
	color: inherit;
}

.dg-hero--short {
	padding: 50px 40px;
}
.dg-hero--short :is(h1, h2) {
	margin-bottom: 0;
}

.dg-hero .wp-block-post-title {
	color: #fff;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	font-weight: 700;
	letter-spacing: -1.5px;
	line-height: 1.15;
}


/* ---------- Section headers ---------- */

.dg-section-label {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--accent);
	margin-bottom: 12px;
}
.dg-section-heading {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 700;
	letter-spacing: -1px;
	color: var(--text);
}


/* ---------- Cards ---------- */

/* Used two ways: the columns in the services pattern, and the post groups in
   the blog, archive and search listings. */

/* post-template renders a <ul>; its items stretch to the row height, so making
   each one a flex container lets the card fill its cell and keeps a row of
   cards the same height. */
.wp-block-post-template > li {
	display: flex;
}
.wp-block-post-template > li > .dg-card {
	flex: 1;
}

.dg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Children stretch to the card width rather than being centred by the
	   auto margins a constrained layout would add. */
	align-items: stretch;
	text-align: left;
	gap: 16px;
	padding: 36px 32px;
	background: var(--surface-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	transition: transform 0.25s, border-color 0.25s;
}
.dg-card:hover {
	transform: translateY(-4px);
	border-color: var(--primary);
}

/* The title link is stretched over the whole card, so the card is one target
   without nesting interactive elements. */
.dg-card .wp-block-post-title a::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-lg);
}
.dg-card .wp-block-post-title {
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.3px;
	margin: 0;
}
.dg-card .wp-block-post-title a {
	color: var(--text);
	text-decoration: none;
}
.dg-card .wp-block-post-excerpt__excerpt,
.dg-card p {
	font-size: 0.92rem;
	color: var(--text-muted);
	line-height: 1.65;
	margin: 0;
}
.dg-card .wp-block-post-excerpt__more-text {
	display: none;
}

.dg-card .wp-block-post-featured-image {
	margin: 0;
}
.dg-card .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	border-radius: 12px;
}



/* ---------- Subscribe band ---------- */

.dg-subscribe {
	padding: 70px 40px;
	text-align: center;
	background: var(--surface-raised);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.dg-subscribe h2 {
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.5px;
	margin-bottom: 14px;
}
.dg-subscribe p {
	color: var(--text-muted);
	font-size: 0.95rem;
	line-height: 1.7;
	margin-bottom: 30px;
}
.dg-subscribe .wp-block-button__link,
.dg-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 36px;
	background: var(--btn);
	color: #fff;
	border-radius: 50px;
	font-weight: 600;
	font-size: 0.95rem;
	transition: background 0.2s, transform 0.2s;
}
.dg-subscribe .wp-block-button__link:hover,
.dg-btn .wp-block-button__link:hover {
	background: var(--btn-hover);
	transform: translateY(-2px);
}


/* ---------- Policy pages ---------- */

.dg-policy {
	max-width: 820px;
	margin-inline: auto;
	text-align: left;
}
.dg-policy .wp-block-post-content,
.dg-policy [name="termly-embed"],
.dg-policy-iframe {
	background: #fff;
	color: #241a1e;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 32px clamp(20px, 4vw, 48px);
	/* Reserve space so an embedded policy does not shift the page when its
	   script injects content. */
	min-height: 60vh;
}
.dg-policy-iframe {
	width: 100%;
	padding: 0;
	min-height: 80vh;
	border: none;
}
@media (prefers-color-scheme: dark) {
	.dg-policy .wp-block-post-content,
	.dg-policy [name="termly-embed"],
	.dg-policy-iframe {
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
		border-color: transparent;
	}
}


/* ---------- Footer ---------- */

.dg-footer {
	padding: 28px 30px 24px;
	text-align: center;
	border-top: 1px solid var(--border);
	color: var(--text-muted);
	font-size: 0.9rem;
}
.dg-footer .wp-block-navigation {
	justify-content: center;
	gap: 10px;
}
.dg-footer a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}
.dg-footer a:hover {
	color: var(--primary);
}

/* Separators between footer links: "+" for the site list, "|" elsewhere. */
.dg-footer .wp-block-navigation .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: '|';
	margin-right: 10px;
	opacity: 0.4;
}
.dg-footer .dg-pluslist .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: '+';
	opacity: 0.7;
}

.dg-footer .dg-smalllist {
	font-size: 0.8rem;
	opacity: 0.75;
}
.dg-footer-copyright {
	margin-top: 8px;
	font-size: 0.8rem;
	opacity: 0.7;
}


/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		animation-delay: 0ms !important;
	}
	.dg-card:hover,
	.dg-subscribe .wp-block-button__link:hover,
	.dg-btn .wp-block-button__link:hover {
		transform: none;
	}
}


/* ---------- Responsive ---------- */

@media (max-width: 768px) {
	.dg-hero {
		padding: 70px 24px 60px;
	}
	.dg-hero--short {
		padding: 40px 24px;
	}
	.dg-subscribe {
		padding: 50px 20px;
	}
	.dg-services .wp-block-post-template {
		grid-template-columns: 1fr;
	}
	.dg-footer .wp-block-navigation {
		flex-wrap: wrap;
		gap: 6px 12px;
	}
	/* A middle dot wraps more gracefully than a pipe. */
	.dg-footer .wp-block-navigation .wp-block-navigation-item + .wp-block-navigation-item::before {
		content: '·';
		margin-right: 12px;
		opacity: 0.5;
	}
	.dg-footer .dg-pluslist .wp-block-navigation-item + .wp-block-navigation-item::before {
		content: '+';
		opacity: 0.6;
	}
}