/*
 Theme Name:   DeezMuttz
 Theme URI:    https://joshbuilds.tech
 Description:  DeezMuttz — Texas Hold 'Em Dog Club. GeneratePress child theme for the Belton, TX daycare / boarding / training site. Vanilla CSS + vanilla JS, no frameworks.
 Author:       JoshBuilds.Tech
 Author URI:   https://joshbuilds.tech
 Template:     generatepress
 Version:      1.4.0
 Requires PHP: 7.4
 Text Domain:  deezmuttz
*/

/* ==========================================================================
   GLOBAL DESIGN SYSTEM ONLY.
   Rule: CSS lives here only if it is used on 2+ pages. Anything used on a
   single page belongs inline in that page's Custom HTML block.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
	/* Brand — extracted from the v5 redesign */
	--dm-black:        #0a0b0a;  /* primary   — page base */
	--dm-black-soft:   #12100b;  /* ink / card borders */
	/* Secondary surface. Still named "felt" because it is the same role in the
	   layout — the deep table colour every dark section sits on — but the ramp
	   is navy now, not green. Steps hold the original relative lightness
	   (deep 0.63x, dark 0.40x, light 1.40x of the base) so section depth,
	   button hover lift and gradient falloff all read the same as before. */
	--dm-felt:         #002d62;  /* secondary — navy */
	--dm-felt-deep:    #001d3d;
	--dm-felt-dark:    #001227;
	--dm-felt-light:   #00408a;
	--dm-gold:         #d9b866;  /* accent    — links, headings on dark */
	--dm-gold-deep:    #b98f3a;  /* accent    — buttons, small caps */
	--dm-gold-dark:    #7d5f1f;
	--dm-gold-light:   #e8cf8a;
	--dm-red:          #8c1a22;  /* card-suit red */
	--dm-red-dark:     #6d1218;
	--dm-red-deeper:   #4d0b10;
	--dm-cream:        #f2e9d5;  /* body text on dark / section base */
	--dm-cream-card:   #fbf5e6;  /* paper cards */

	/* Text on light surfaces (all AA-checked against --dm-cream-card).
	   Re-tinted from the old green cast to match the navy. Each value keeps its
	   HSL lightness and saturation and only moves hue, and because blue carries
	   far less luminance weight than green, every one of these got marginally
	   darker — contrast against the cream card went up, never down. */
	--dm-ink:          #141a20;
	--dm-ink-body:     #33363a;
	--dm-ink-muted:    #3f4347;
	--dm-ink-caption:  #53575b;
	--dm-ink-quiet:    #484c51;  /* inactive control text — AA at 15px */

	/* Text on dark surfaces */
	--dm-on-dark:            rgba(242, 233, 213, 0.88);
	--dm-on-dark-muted:      rgba(242, 233, 213, 0.74);
	--dm-on-dark-quiet:      rgba(242, 233, 213, 0.70);

	/* Type */
	--dm-font-display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
	--dm-font-ui:      'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--dm-font-marker:  'Permanent Marker', var(--dm-font-display);

	/* Rhythm */
	--dm-container:    1100px;
	--dm-container-wd: 1200px;
	--dm-gutter:       20px;
	--dm-section-y:    clamp(46px, 8vw, 72px);

	/* Surface */
	--dm-radius:       3px;
	--dm-border-ink:   2px solid var(--dm-black);
	--dm-border-gold:  2px solid var(--dm-gold-deep);
	--dm-shadow-card:  0 14px 30px rgba(0, 0, 0, 0.5);
	--dm-shadow-lift:  0 16px 36px rgba(0, 0, 0, 0.5);

	/* Motion — transform/opacity only */
	--dm-ease:         0.18s ease;

	/* Sticky masthead height, used for scroll offset and the drawer's top pad.
	   Dropping the 58px crest shortened the bar: the tallest thing in it is now
	   the brand name + tag stack at ~45px, plus 10px padding top and bottom.
	   Kept a few px generous so anchored headings clear the bar rather than
	   tucking under it. */
	--dm-header-h:     70px;
}


/* --------------------------------------------------------------------------
   2. BASE
   GeneratePress already ships a normalize layer; this is only what the
   DeezMuttz palette needs on top of it.
   -------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--dm-header-h);
}

body {
	background: var(--dm-black);
	color: var(--dm-cream);
	font-family: var(--dm-font-ui);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Override GeneratePress's centred 1200px page shell — every DeezMuttz
   section is full-bleed and manages its own inner max-width. */
body .site.grid-container,
body #page.grid-container {
	max-width: none;
	padding: 0;
}

.site-content,
.dm-site-content {
	display: block;
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Gutenberg leaves an empty paragraph behind whenever a block is deleted or a
   stray Enter is pressed after the last block. It renders as <p></p>, and its
   default ~1em margins show as a band of body-black between the final section
   and the footer rail. No page here ever wants a bare paragraph at the content
   root — every block is wrapped in .dmh / .dmd / .dmb / .dmt. */
.dm-site-content > p:empty { display: none; }

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--dm-gold);
	text-decoration: none;
	transition: color var(--dm-ease);
}

a:hover,
a:focus-visible {
	color: var(--dm-cream);
}

:focus-visible {
	outline: 3px solid var(--dm-gold);
	outline-offset: 2px;
}

/* Prevent iOS auto-zoom on any future form controls */
input,
select,
textarea,
button {
	font-family: inherit;
	font-size: 100%;
}


/* --------------------------------------------------------------------------
   3. ACCESSIBILITY UTILITIES
   -------------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed !important;
	top: 10px;
	left: 10px;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 20px;
	background: var(--dm-gold-deep);
	color: var(--dm-black);
	font-family: var(--dm-font-display);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: 0.06em;
}


/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.dm-container {
	width: 100%;
	max-width: var(--dm-container);
	margin-inline: auto;
}

.dm-container--wide { max-width: var(--dm-container-wd); }
.dm-container--text { max-width: 820px; }

.dm-section {
	position: relative;
	padding: var(--dm-section-y) var(--dm-gutter);
}

.dm-section--black { background: var(--dm-black); }
.dm-section--cream { background: var(--dm-cream); color: var(--dm-ink); }
.dm-section--red   { background: var(--dm-red-dark); }
.dm-section--felt  { background: var(--dm-felt); }

/* Poker-felt weave. Layered gradients are paint-only (no compositing cost
   from animation) but they are still expensive on low-end mobile GPUs, so
   the texture layers are desktop-only — see §12. */
.dm-section--felt {
	background-image:
		radial-gradient(ellipse 70% 54% at 50% 34%, rgba(242, 233, 213, 0.10) 0%, transparent 72%),
		radial-gradient(ellipse 118% 92% at 50% 40%, transparent 30%, rgba(0, 18, 39, 0.78) 100%);
}

/* Card-table rail: the cream/navy dashed stripe used between sections */
.dm-rail {
	height: 12px;
	background-color: var(--dm-cream);
	background-image: repeating-linear-gradient(90deg, #002146 0 24px, transparent 24px 48px);
	box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/* Full-bleed rail inside a padded section */
.dm-section > .dm-rail {
	margin-inline: calc(var(--dm-gutter) * -1);
}

/* Suit divider — ♠ ♥ ♦ ♣ between two hairlines */
.dm-suits {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.dm-suits::before,
.dm-suits::after {
	content: "";
	flex: 1;
	max-width: 180px;
	height: 1px;
	background: rgba(217, 184, 102, 0.45);
}

.dm-suits span {
	display: flex;
	gap: 9px;
	flex: none;
	font-size: 14px;
	line-height: 1;
	color: rgba(217, 184, 102, 0.8);
}


/* --------------------------------------------------------------------------
   5. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.dm-h1,
.dm-h2,
.dm-h3,
.dm-h4 {
	font-family: var(--dm-font-display);
	font-weight: 900;
	margin: 0;
	text-wrap: balance;
}

.dm-h1 {
	font-size: clamp(46px, 13vw, 118px);
	line-height: 0.84;
	color: var(--dm-cream);
}

.dm-h2 {
	font-size: clamp(30px, 7.5vw, 60px);
	line-height: 0.9;
}

.dm-h3 {
	font-size: clamp(22px, 4.4vw, 25px);
	line-height: 0.95;
	font-weight: 800;
}

.dm-h4 {
	font-size: 23px;
	line-height: 1;
	font-weight: 800;
}

/* Small-caps kicker above a heading */
.dm-kicker {
	font-family: var(--dm-font-display);
	font-weight: 700;
	font-size: clamp(13px, 3.2vw, 15px);
	letter-spacing: 0.26em;
	color: var(--dm-gold);
	margin: 0;
}

.dm-lede {
	font-size: clamp(17px, 4.4vw, 21px);
	line-height: 1.65;
	text-wrap: pretty;
	margin: 0;
}

.dm-text {
	font-size: 15px;
	line-height: 1.72;
	text-wrap: pretty;
	margin: 0;
}

.dm-text--sm {
	font-size: 14.5px;
	line-height: 1.7;
}

/* Eyebrow label inside paper cards */
.dm-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dm-red);
	margin: 0 0 5px;
}

/* Text-shadow "stacked plate" treatment on big display headings */
.dm-plate--red   { text-shadow: 0 5px 0 var(--dm-red-dark); }
.dm-plate--felt  { text-shadow: 0 5px 0 var(--dm-felt); }
.dm-plate--black { text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); }

.dm-on-dark       { color: var(--dm-on-dark); }
.dm-on-dark-muted { color: var(--dm-on-dark-muted); }
.dm-muted         { color: var(--dm-ink-muted); }
.dm-caption       { color: var(--dm-ink-caption); }


/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.dm-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 44px;              /* touch target */
	padding: 15px 26px;
	border: 0;
	border-radius: var(--dm-radius);
	font-family: var(--dm-font-display);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: 0.06em;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--dm-ease), color var(--dm-ease), transform var(--dm-ease);
}

.dm-btn:active { transform: translateY(2px); }

.dm-btn__sub {
	display: block;
	font-family: var(--dm-font-ui);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.78;
}

.dm-btn--gold {
	background: var(--dm-gold-deep);
	color: var(--dm-black);
	box-shadow: 0 5px 0 var(--dm-red-dark);
}

.dm-btn--gold:hover,
.dm-btn--gold:focus-visible {
	background: var(--dm-gold);
	color: var(--dm-black);
}

.dm-btn--red {
	background: var(--dm-red-dark);
	border: 1px solid var(--dm-gold-deep);
	color: var(--dm-cream);
	box-shadow: 0 5px 0 rgba(0, 0, 0, 0.5);
}

.dm-btn--red:hover,
.dm-btn--red:focus-visible {
	background: var(--dm-red);
	color: #fff;
}

.dm-btn--felt {
	background: var(--dm-felt);
	border: 1px solid var(--dm-gold-deep);
	color: var(--dm-cream);
	box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45);
}

.dm-btn--felt:hover,
.dm-btn--felt:focus-visible {
	background: var(--dm-felt-light);
	color: #fff;
}

.dm-btn--ghost {
	background: none;
	border: 2px solid var(--dm-red-dark);
	color: var(--dm-red-dark);
}

.dm-btn--ghost:hover,
.dm-btn--ghost:focus-visible {
	background: rgba(109, 18, 24, 0.09);
	color: var(--dm-red-dark);
}

.dm-btn--block { display: flex; width: 100%; }

/* The two portal CTAs, side by side. Used on all four pages. */
.dm-cta-pair {
	display: grid;
	gap: 10px;
	margin-top: 20px;
}

.dm-cta-pair--row {
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 12px;
}


/* --------------------------------------------------------------------------
   7. MASTHEAD
   Rendered by deezmuttz_masthead() on the `generate_header` hook — see
   functions.php. GeneratePress's own masthead is removed from that hook so
   third-party callbacks on it still fire.
   -------------------------------------------------------------------------- */
.dm-masthead {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(10, 11, 10, 0.96);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
}

/* The mockup centres the whole cluster — wordmark, nav and BOOK NOW sit
   together in the middle of the bar and wrap as one group. Mobile switches to
   space-between so the brand pins left and the hamburger pins right. */
.dm-masthead__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 18px;
	max-width: var(--dm-container-wd);
	margin-inline: auto;
	padding: 10px var(--dm-gutter);
}

.dm-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
	color: inherit;
}

.dm-brand:hover,
.dm-brand:focus-visible { color: inherit; }

/* One line, always. With the crest gone the brand block has the width to run
   the full club name unbroken, so wrapping is switched off outright and the
   size steps down at the two breakpoints instead. Big Shoulders Display is
   condensed enough that 23 characters still clear the BOOK NOW button and the
   hamburger on a 360px screen. */
.dm-brand__name {
	display: block;
	white-space: nowrap;
	font-family: var(--dm-font-display);
	font-weight: 900;
	font-size: 28px;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--dm-cream);
}

.dm-brand__tag {
	display: block;
	margin-top: 4px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--dm-gold-deep);
}

/* Wraps because this side now carries the nav plus three buttons; without it
   they would overflow the bar in the 769–1100px band rather than stacking. */
.dm-masthead__right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* Desktop nav (wp_nav_menu output) */
.dm-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dm-nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 6px 11px;
	font-family: var(--dm-font-display);
	font-weight: 800;
	font-size: clamp(15px, 2vw, 18px);
	letter-spacing: 0.07em;
	line-height: 1;
	color: var(--dm-on-dark-quiet);
	transition: background-color var(--dm-ease), color var(--dm-ease);
}

.dm-nav a:hover,
.dm-nav a:focus-visible {
	background: rgba(242, 233, 213, 0.07);
	color: var(--dm-cream);
}

.dm-nav .current-menu-item > a,
.dm-nav .current_page_item > a,
.dm-nav .is-current > a {
	color: var(--dm-gold);
}

/* BOOK NOW */
.dm-book {
	flex: none;
	padding: 8px 15px;
	background: var(--dm-gold-deep);
	color: var(--dm-black);
	border-radius: 2px;
	box-shadow: 0 3px 0 var(--dm-red-dark);
	font-size: clamp(14px, 2vw, 16px);
	letter-spacing: 0.08em;
}

.dm-book:hover,
.dm-book:focus-visible {
	background: var(--dm-gold);
	color: var(--dm-black);
}

.dm-book__sub {
	font-size: 9.5px;
	letter-spacing: 0.13em;
	opacity: 0.8;
}

/* Secondary masthead buttons — PARTNERS and FRANCHISE. Same geometry as
   .dm-book so the row sits on one baseline, but outlined instead of filled:
   BOOK NOW has to stay the loudest thing in the bar. */
.dm-mast-btn {
	flex: none;
	padding: 8px 15px;
	background: none;
	border: 2px solid var(--dm-gold-deep);
	border-radius: 2px;
	color: var(--dm-gold);
	font-size: clamp(14px, 2vw, 16px);
	letter-spacing: 0.08em;
}

.dm-mast-btn:hover,
.dm-mast-btn:focus-visible {
	background: var(--dm-gold-deep);
	border-color: var(--dm-gold-deep);
	color: var(--dm-black);
}

.dm-mast-btn__sub {
	font-size: 9.5px;
	letter-spacing: 0.13em;
	opacity: 0.75;
}

/* Hamburger — hidden with `display:none` on desktop rather than a JS class,
   so the header is correct on first paint with no script running. */
.dm-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 10px;
	background: none;
	border: 0;
	cursor: pointer;
}

.dm-burger span {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--dm-cream);
	transition: transform var(--dm-ease), opacity var(--dm-ease);
}

.dm-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dm-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dm-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer. Closed state is `display:none`, so nothing below the fold
   is painted or focusable until the user opens it. */
.dm-drawer {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 49;
	padding: calc(var(--dm-header-h) + 24px) var(--dm-gutter) 40px;
	background: var(--dm-felt-deep);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.dm-drawer.is-open { display: block; }

/* Close control, aligned to the same 420px column as the menu below it. */
.dm-drawer__top {
	display: flex;
	justify-content: flex-end;
	max-width: 420px;
	margin: 0 auto 14px;
}

.dm-drawer__close {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 15px;
	background: none;
	border: 2px solid rgba(185, 143, 58, 0.55);
	border-radius: 2px;
	cursor: pointer;
	font-family: var(--dm-font-display);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.16em;
	color: var(--dm-gold);
	transition: border-color var(--dm-ease), color var(--dm-ease);
}

.dm-drawer__close:hover,
.dm-drawer__close:focus-visible { border-color: var(--dm-gold); color: var(--dm-cream); }

/* Two crossed bars rather than a × glyph — matches the hamburger's line
   weight, and does not depend on the display font shipping that character. */
.dm-drawer__x {
	position: relative;
	width: 16px;
	height: 16px;
	flex: none;
}

.dm-drawer__x::before,
.dm-drawer__x::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: currentColor;
}

.dm-drawer__x::before { transform: rotate(45deg); }
.dm-drawer__x::after { transform: rotate(-45deg); }

/* Outlined gold, mirroring the masthead's .dm-mast-btn. It cannot reuse that
   class — .dm-mast-btn is display:none at this width. */
.dm-drawer__outline {
	background: none;
	border: 2px solid var(--dm-gold-deep);
	color: var(--dm-gold);
}

.dm-drawer__outline:hover,
.dm-drawer__outline:focus-visible {
	background: rgba(185, 143, 58, 0.14);
	color: var(--dm-cream);
}

.dm-drawer ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 420px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* Scoped to the list, not `.dm-drawer a`. That broader selector is (0,1,1) and
   was silently beating the (0,1,0) .dm-btn / .dm-drawer__phone rules on the
   footer links — repainting them as 30px menu rows. `ul a` matches both the
   fallback markup and a real assigned menu, and reaches neither button. */
.dm-drawer ul a {
	display: block;
	padding: 16px 18px;
	border-bottom: 1px solid rgba(185, 143, 58, 0.28);
	font-family: var(--dm-font-display);
	font-weight: 800;
	font-size: 30px;
	line-height: 1;
	letter-spacing: 0.05em;
	color: var(--dm-cream);
}

.dm-drawer ul a:hover,
.dm-drawer ul a:focus-visible { color: var(--dm-gold); }

.dm-drawer .current-menu-item > a,
.dm-drawer .current_page_item > a { color: var(--dm-gold); }

.dm-drawer__foot {
	max-width: 420px;
	margin: 26px auto 0;
	display: grid;
	gap: 10px;
}

.dm-drawer__phone {
	display: block;
	padding: 14px;
	background: var(--dm-felt);
	border-radius: var(--dm-radius);
	font-family: var(--dm-font-display);
	font-weight: 900;
	font-size: 26px;
	letter-spacing: 0.05em;
	text-align: center;
	color: var(--dm-cream);
}

body.dm-nav-open { overflow: hidden; }


/* --------------------------------------------------------------------------
   8. SITE FOOTER
   Rendered by deezmuttz_footer() on the `generate_footer` hook.
   -------------------------------------------------------------------------- */
.dm-footer {
	background: var(--dm-black);
	padding: 0 var(--dm-gutter) 40px;
}

.dm-footer > .dm-rail {
	margin: 0 calc(var(--dm-gutter) * -1) 46px;
}

.dm-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), max-content));
	justify-content: center;
	gap: 34px 80px;
	max-width: 1140px;
	margin-inline: auto;
}

.dm-footer h2 {
	margin: 0 0 14px;
	font-family: var(--dm-font-display);
	font-weight: 800;
	font-size: 17px;
	letter-spacing: 0.1em;
	color: var(--dm-gold-deep);
}

.dm-footer p,
.dm-footer address {
	margin: 0;
	font-size: 14.5px;
	font-style: normal;
	line-height: 1.9;
	color: var(--dm-on-dark-muted);
}

.dm-footer__plate {
	display: inline-block;
	margin-bottom: 14px;
	padding: 7px 14px;
	background: var(--dm-felt);
	border: 2px solid var(--dm-cream);
	border-radius: 4px;
	font-family: var(--dm-font-display);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.14em;
	color: var(--dm-cream);
	transform: rotate(-1.4deg);
}

.dm-footer ul {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dm-footer ul a {
	font-size: 14.5px;
	color: var(--dm-on-dark-muted);
}

.dm-footer ul a:hover,
.dm-footer ul a:focus-visible { color: var(--dm-gold); }

.dm-footer__bottom {
	max-width: 1140px;
	margin: 36px auto 0;
	padding-top: 18px;
	border-top: 1px solid rgba(242, 233, 213, 0.12);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 20px;
	font-size: 13px;
	color: rgba(242, 233, 213, 0.6);
}


/* --------------------------------------------------------------------------
   9. SHARED PAGE COMPONENTS  (each used on 2+ pages)
   -------------------------------------------------------------------------- */

/* 9a. Interior page hero — Daycare, Boarding, Training */
.dm-page-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(40px, 8vw, 56px) var(--dm-gutter) clamp(44px, 9vw, 60px);
	background: var(--dm-felt);
}

.dm-page-hero--felt {
	background-image: radial-gradient(ellipse 90% 80% at 22% 0%, var(--dm-felt-light), var(--dm-felt-deep) 74%);
}

.dm-page-hero--night {
	background: var(--dm-felt-dark);
	background-image: radial-gradient(circle at 82% 18%, rgba(217, 184, 102, 0.22), transparent 42%);
}

.dm-page-hero--red { background: var(--dm-red-dark); }

.dm-page-hero > .dm-container { position: relative; }

.dm-page-hero .dm-h1 { margin-top: 12px; }

/* 9b. Paper panel — the cream bordered card used across Daycare/Boarding/Training */
.dm-panel {
	background: var(--dm-cream-card);
	border: var(--dm-border-ink);
	padding: 24px 22px 26px;
	color: var(--dm-ink);
}

.dm-panel--felt {
	background: var(--dm-felt);
	border: var(--dm-border-gold);
	color: var(--dm-cream);
}

.dm-panel--red {
	background: var(--dm-red-dark);
	border: var(--dm-border-gold);
	color: var(--dm-cream);
}

.dm-panel--dark {
	background: var(--dm-felt-deep);
	border: 3px solid var(--dm-gold-deep);
	color: var(--dm-cream);
	padding: 30px 26px 32px;
}

.dm-panel > * + * { margin-top: 12px; }

.dm-panel .dm-h3,
.dm-panel .dm-h4 { color: var(--dm-black); }

.dm-panel--felt .dm-h3,
.dm-panel--red .dm-h3,
.dm-panel--dark .dm-h3,
.dm-panel--felt .dm-h4,
.dm-panel--red .dm-h4,
.dm-panel--dark .dm-h4 { color: var(--dm-cream); }

/* Order matters: the base rule must come FIRST. These selectors are all
   specificity (0,2,0), so if the base sat last it would win on the dark
   variants too and paint #3f4347 body text onto the navy felt — ~1.3:1. */
.dm-panel .dm-text { color: var(--dm-ink-muted); }

.dm-panel--felt .dm-text,
.dm-panel--red .dm-text,
.dm-panel--dark .dm-text { color: var(--dm-on-dark); }

/* 9c. Two-up / three-up grids */
.dm-grid {
	display: grid;
	gap: 20px;
	align-items: start;
}

.dm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.dm-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }

.dm-stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* 9d. Policy list inside a panel (Daycare + Boarding) */
.dm-policies {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 16px;
}

/* 9e. Rule-marker underline used under headings on paper */
.dm-mark {
	display: block;
	width: 132px;
	height: 4px;
	margin-top: 10px;
	background: var(--dm-felt);
	transform: rotate(-1.2deg);
}

.dm-mark--red { background: var(--dm-red); }
.dm-mark--gold { background: var(--dm-gold-deep); }

/* 9f. Left-rail note (Daycare "first visit" list, reusable) */
.dm-rail-note {
	border-left: 4px solid var(--dm-red);
	padding: 4px 0 4px 16px;
}

.dm-rail-note--felt { border-left-color: var(--dm-felt); }
.dm-rail-note--gold { border-left-color: var(--dm-gold-deep); }

.dm-rail-note h3 {
	margin: 0;
	font-family: var(--dm-font-display);
	font-weight: 800;
	font-size: 22px;
	line-height: 1;
	color: var(--dm-black);
}

.dm-rail-note p { margin: 6px 0 0; }

/* 9g. Phone link inside paper cards */
.dm-tel-inline {
	color: var(--dm-red);
	font-weight: 700;
	border-bottom: 1px solid rgba(140, 26, 34, 0.4);
}

.dm-tel-inline:hover,
.dm-tel-inline:focus-visible { color: var(--dm-red-dark); }


/* --------------------------------------------------------------------------
   10. EDITOR / BLOCK SAFETY
   Custom HTML blocks are dropped straight into the content flow, so strip the
   default block max-width that would otherwise cage full-bleed sections.
   -------------------------------------------------------------------------- */
.dm-page-content > .wp-block-html,
.dm-page-content > .entry-content > .wp-block-html {
	max-width: none;
	margin: 0;
}


/* --------------------------------------------------------------------------
   11. BLOG / ARCHIVE / SEARCH / 404
   Posts are not part of the 4-page brochure site, but single.php and
   archive.php must still be readable if a post is ever published.
   -------------------------------------------------------------------------- */
.dm-article-wrap {
	max-width: 820px;
	margin-inline: auto;
	padding: var(--dm-section-y) var(--dm-gutter);
}

.dm-article-wrap a { color: var(--dm-gold); }

.dm-archive-title {
	font-family: var(--dm-font-display);
	font-weight: 900;
	font-size: clamp(34px, 8vw, 60px);
	line-height: 0.9;
	color: var(--dm-cream);
	margin: 0 0 8px;
}

.dm-entry {
	padding: 28px 0;
	border-bottom: 1px solid rgba(242, 233, 213, 0.12);
}

.dm-entry:last-child { border-bottom: 0; }

.dm-entry__title {
	font-family: var(--dm-font-display);
	font-weight: 800;
	font-size: clamp(26px, 5vw, 38px);
	line-height: 0.95;
	margin: 0 0 6px;
}

.dm-entry__title a { color: var(--dm-cream); }
.dm-entry__title a:hover { color: var(--dm-gold); }

.dm-entry__meta {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dm-gold-deep);
	margin: 0 0 12px;
}

.dm-entry__content > * + * { margin-top: 1em; }

.dm-entry__content h2,
.dm-entry__content h3 {
	font-family: var(--dm-font-display);
	font-weight: 800;
	color: var(--dm-cream);
	line-height: 1;
	margin-top: 1.6em;
}

.dm-entry__content p,
.dm-entry__content li { color: var(--dm-on-dark); }

.dm-entry__content blockquote {
	margin: 1.4em 0;
	padding: 4px 0 4px 18px;
	border-left: 4px solid var(--dm-gold-deep);
	color: var(--dm-on-dark-muted);
}

.dm-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 28px;
}

.dm-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid rgba(185, 143, 58, 0.5);
	border-radius: var(--dm-radius);
	font-family: var(--dm-font-display);
	font-weight: 800;
	font-size: 18px;
	color: var(--dm-cream);
}

.dm-pagination .page-numbers.current,
.dm-pagination .page-numbers:hover {
	background: var(--dm-gold-deep);
	color: var(--dm-black);
}

.dm-search-form {
	display: flex;
	gap: 8px;
	margin-top: 20px;
}

.dm-search-form input[type="search"] {
	flex: 1 1 auto;
	min-height: 48px;
	padding: 10px 14px;
	background: var(--dm-felt-deep);
	border: 1px solid rgba(185, 143, 58, 0.5);
	border-radius: var(--dm-radius);
	color: var(--dm-cream);
	font-size: 16px;
}

.dm-search-form input[type="search"]::placeholder { color: rgba(242, 233, 213, 0.5); }


/* --------------------------------------------------------------------------
   12. RESPONSIVE + MOBILE PERFORMANCE GUARDS
   -------------------------------------------------------------------------- */

/* Desktop-only decorative layers. Scanlines, felt weave and backdrop-filter
   are pure decoration and are the most expensive things on the page to paint,
   so mobile never gets them. */
@media (min-width: 769px) {
	.dm-masthead { backdrop-filter: blur(10px); }

	/* Both use ::before so the overlay paints UNDER the section's children
	   (a positioned ::after would paint on top of the text). */
	.dm-scanlines::before,
	.dm-section--felt::before {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
	}

	.dm-scanlines::before {
		background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px);
	}

	.dm-scanlines > * { position: relative; }

	.dm-section--felt::before {
		background-image:
			repeating-linear-gradient(90deg, rgba(242, 233, 213, 0.02) 0 1px, transparent 1px 3px),
			repeating-linear-gradient(0deg,  rgba(0, 18, 39, 0.06)     0 1px, transparent 1px 3px),
			repeating-linear-gradient(45deg, rgba(0, 18, 39, 0.04)     0 1px, transparent 1px 5px);
	}

	.dm-section--felt > * { position: relative; }
}

@media (max-width: 768px) {
	:root { --dm-header-h: 72px; }

	.dm-masthead__inner { justify-content: space-between; flex-wrap: nowrap; }

	.dm-nav { display: none; }
	.dm-burger { display: flex; }

	.dm-brand__name { font-size: 20px; }
	.dm-brand__tag { display: none; }

	.dm-book { padding: 8px 12px; }
	.dm-book__sub { display: none; }

	/* Brand + BOOK NOW + hamburger already fill the bar at this width. Both
	   secondary buttons have their own entries in the drawer, so they go. */
	.dm-mast-btn { display: none; }

	.dm-footer__grid { justify-content: start; gap: 28px; }
}

@media (max-width: 400px) {
	:root { --dm-gutter: 16px; }

	.dm-brand__name { font-size: 16px; }
	.dm-book { padding: 8px 10px; font-size: 13px; }
	.dm-drawer ul a { font-size: 26px; }
}

/* Respect the OS "reduce motion" setting everywhere. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.dm-footer__plate,
	.dm-mark { transform: none; }
}