/*
Theme Name:   DOFH Theme
Theme URI:    https://discoveroldflorida.com
Description:  Discover Old Florida child theme for Kadence. Brand tokens and light customization only — heavy lifting stays in Kadence + the block editor.
Author:       Discover Old Florida
Template:     kadence
Version:      0.9.2
Requires PHP: 8.2
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  dofh-theme
*/

/* ===========================================================================
 * RUGGED OLD FLORIDA — the brand system (site-wide, 2026-07-18).
 * Graduated from the trial; the old cream/sage/teal palette is RETIRED.
 * Canonical tokens are --dof2-*. The legacy --dofh-* names are kept as thin
 * ALIASES so the hundreds of existing component references resolve to the new
 * palette without a mass rename — their old VALUES are gone.
 *
 * PALETTE (measured WCAG ratios; all pairs used as text are AA):
 *   Foundation: bone #FAF5EC (base) · oyster #DDD6CA (surfaces/borders) ·
 *     river-navy #1C2B3A (THE anchor: text + dark bands) · dock-gray #6E6A61.
 *   Warmth: sunset-burn #D96C2C (DECORATIVE pop only — fails as text/fill) ·
 *     burn-deep #B4551E (its AA heir: CTAs, eyebrows, date badges) ·
 *     sun-amber #E9A83E · palmetto-tan #C4A876 · live-oak #33523F.
 *   navy/bone 13.28 · navy/oyster 9.99 · navy-soft #34414C /bone 9.64 /oyster 7.25
 *   burn-deep/bone 4.54 · bone/burn-deep 4.54 · amber/navy 6.96 · oak/bone 7.99
 *   amber+amber-ink 6.01 · tan+tan-ink 5.80 · footer-muted #9AA6B2 /navy 5.82.
 * HARD RULES (carried over, re-pointed): 60/30/10 (bone/oyster/navy dominate;
 *   burn+amber ≤10%). sunset-burn is DECORATIVE only — text/CTAs use burn-deep.
 *   burn-deep FAILS on oyster (3.42) → small text/links on oyster stay navy.
 *   Text on a fill = same-family ink (below), never black/white (except the
 *   sanctioned bone-on-navy / bone-on-burn-deep / bone-on-oak dark combos).
 *   Display type is Fraunces; body/UI stays the system sans.
 * ======================================================================== */
:root {
	/* Canonical system tokens */
	--dof2-bone: #FAF5EC;       /* page base + light text on dark */
	--dof2-oyster: #DDD6CA;     /* weathered surfaces, borders, alt sections */
	--dof2-navy: #1C2B3A;       /* THE anchor — text + dark bands */
	--dof2-navy-soft: #34414C;  /* body/secondary text (AA on bone + oyster) */
	--dof2-dock: #6E6A61;       /* muted secondary on bone */
	--dof2-burn: #D96C2C;       /* decorative pop only (accents, rules) */
	--dof2-burn-deep: #B4551E;  /* AA CTA/eyebrow/badge text (bone 4.54) */
	--dof2-amber: #E9A83E;      /* highlights; heading accent on navy (6.96) */
	--dof2-amber-ink: #4A2E0C;  /* ink on amber (6.01) */
	--dof2-tan: #C4A876;        /* warm mid-neutral fill */
	--dof2-tan-ink: #3B2E17;    /* ink on tan (5.80) */
	--dof2-oak: #33523F;        /* nature/supporting green (on bone 7.99) */
	--dof2-footer-muted: #9AA6B2; /* muted copyright/tagline on navy (5.82) */

	/* Legacy --dofh-* names → aliases onto the new system (old values retired) */
	--dofh-cream: var(--dof2-bone);
	--dofh-cypress: var(--dof2-oyster);
	--dofh-forest: var(--dof2-navy);
	--dofh-forest-soft: var(--dof2-navy-soft);
	--dofh-sage: var(--dof2-tan);        /* sage fills → tan; restaurant pill → oak (below) */
	--dofh-turquoise: var(--dof2-amber);
	--dofh-teal-deep: var(--dof2-navy);  /* dark band/fills → navy */
	--dofh-teal-ink: var(--dof2-navy);   /* links → navy (burn fails on oyster) */
	--dofh-coral: var(--dof2-burn);
	--dofh-orange: var(--dof2-amber);
	--dofh-sand: var(--dof2-tan);
	--dofh-coral-deep: var(--dof2-burn-deep);
	--dofh-sage-deep: var(--dof2-oak);
	--dofh-sage-ink: var(--dof2-oak);
	--dofh-turq-ink: var(--dof2-navy);
	--dofh-sand-ink: var(--dof2-tan-ink);
	--dofh-coral-ink: var(--dof2-bone);
	--dofh-orange-ink: var(--dof2-amber-ink);
	--dofh-green: var(--dof2-navy);
	--dofh-green-soft: var(--dof2-navy-soft);
	--dofh-bg: var(--dof2-bone);

	--dofh-radius: 14px;
	--dofh-space: clamp(3rem, 7vw, 5.5rem);
}

/* ---------------------------------------------------------------------------
 * Display type — Fraunces (variable) on all titles + section heads, site-wide.
 * Body/UI keeps the system sans. Loaded via inc/rugged.php (preconnect+swap).
 * ------------------------------------------------------------------------- */
h1, h2, h3,
.entry-title, .wp-block-post-title, .wp-block-heading, .dofh-profile-h2 {
	font-family: 'Fraunces', 'Georgia', serif;
}
h1, .entry-title, .wp-block-post-title, .dofh-profile-head h1 {
	font-weight: 800;
	font-variation-settings: 'opsz' 120, 'wght' 800, 'SOFT' 40, 'WONK' 1;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.dofh-hero h1 { font-variation-settings: 'opsz' 144, 'wght' 800, 'SOFT' 40, 'WONK' 1; }
h2, .dofh-section h2, .dofh-band h2, .dofh-notes h2, .wp-block-heading {
	font-weight: 700;
	font-variation-settings: 'opsz' 100, 'wght' 700, 'SOFT' 40, 'WONK' 1;
	letter-spacing: -0.005em;
	text-wrap: balance;
}
h3, .dofh-card-body h3, .dofh-event h3 {
	font-weight: 700;
	font-variation-settings: 'opsz' 60, 'wght' 700, 'SOFT' 20, 'WONK' 0;
}

body {
	background-color: var(--dofh-cream);
}

/* Links on light surfaces (rule 3) — buttons/nav opt out via their own colors.
   (Footer links are sage-deep — see footer block.) */
.entry-content a:not(.wp-block-button__link) {
	color: var(--dofh-teal-ink);
}

/* Buttons — consistent rounded, tokens only */
.dofh-btn-primary .wp-block-button__link,
.dofh-btn-ghost .wp-block-button__link,
.dofh-btn-coral .wp-block-button__link,
.dofh-btn-sage .wp-block-button__link,
.dofh-btn-band-cta .wp-block-button__link {
	border-radius: var(--dofh-radius);
	padding: 0.85rem 1.9rem;
	font-weight: 600;
	transition: filter 120ms ease;
}
.dofh-btn-primary .wp-block-button__link {
	background: var(--dof2-burn-deep); /* bone on burn-deep 4.54 AA */
	color: var(--dof2-bone);
}
.dofh-btn-ghost .wp-block-button__link {
	background: transparent;
	color: var(--dofh-forest);
	border: 2px solid var(--dofh-forest); /* small element — rule 1 compliant */
}
.dofh-btn-coral .wp-block-button__link {
	background: var(--dofh-coral-deep); /* cream on coral-deep 4.54:1 AA */
	color: var(--dofh-cream);
}
.dofh-btn-sage .wp-block-button__link {
	background: var(--dofh-sage-deep); /* cream on sage-deep 6.29:1 AA */
	color: var(--dofh-cream);
}
/* App-band CTA — burn-deep + bone (4.54 AA). The old sub-AA sage exception is retired. */
.dofh-btn-band-cta .wp-block-button__link {
	background: var(--dof2-burn-deep);
	color: var(--dof2-bone);
}
.dofh-btn-primary .wp-block-button__link:hover,
.dofh-btn-ghost .wp-block-button__link:hover,
.dofh-btn-coral .wp-block-button__link:hover,
.dofh-btn-sage .wp-block-button__link:hover,
.dofh-btn-band-cta .wp-block-button__link:hover {
	filter: brightness(1.10);
}

/* ---------------------------------------------------------------------------
 * Home page sections
 * ------------------------------------------------------------------------- */

/* 1 — Hero: full-bleed rotating imagery (WOW pass, 2026-07-16).
 * .dofh-hero-media is a SWAPPABLE MEDIA CONTAINER — a muted autoplay loop
 * <video> drops in as a single .dofh-hero-slide with zero JS changes
 * (see CLAUDE.md "Hero media"). Crossfade + Ken Burns run in CSS; JS
 * (dofh-motion.js) only toggles .is-active every ~7s.
 * Legibility: forest-tinted scrim, bottom-weighted (text lives in the
 * strong half) + soft text-shadow. Fallback bg = the old sand wash, so
 * a broken image never leaves cream-on-cream text. */
.dofh-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--dofh-sand) 0%, var(--dofh-teal-deep) 100%);
	padding: calc(var(--dofh-space) * 1.35) 1.25rem calc(var(--dofh-space) * 1.5);
	min-height: clamp(480px, 68vh, 720px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.dofh-hero-media,
.dofh-hero-media .dofh-hero-slide {
	position: absolute;
	inset: 0;
}
.dofh-hero-media .dofh-hero-slide {
	opacity: 0;
	transition: opacity 1400ms ease;
	background-size: cover;
	background-position: center;
}
.dofh-hero-media .dofh-hero-slide.is-active {
	opacity: 1;
	animation: dofh-kenburns 9s ease-out forwards;
}
/* video slides (future swap) still fill the frame */
.dofh-hero-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@keyframes dofh-kenburns {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.07) translate3d(0.6%, -0.8%, 0); }
}
/* Uniform warm grade across all hero slides (subtle warmth + contrast lift). */
.dofh-hero-media { filter: saturate(1.07) contrast(1.05); }
.dofh-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(217, 108, 44, 0.16) 0%, rgba(233, 168, 62, 0.10) 42%, rgba(28, 43, 58, 0.06) 100%);
	mix-blend-mode: soft-light;
}
.dofh-hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(28, 43, 58, 0.12) 0%,
		rgba(28, 43, 58, 0.44) 45%,
		rgba(28, 43, 58, 0.82) 100%
	);
}
.dofh-hero .dofh-inner {
	position: relative; /* floats above media + scrim */
	padding-top: clamp(4rem, 16vh, 10rem); /* push copy into the strong scrim */
}
.dofh-hero h1 {
	color: var(--dofh-cream);
	font-size: clamp(2.6rem, 6.5vw, 4.6rem);
	line-height: 1.06;
	margin: 0 auto 1rem;
	max-width: 16ch;
	text-shadow: 0 2px 28px rgba(28, 43, 58, 0.55);
}
.dofh-hero .dofh-hero-sub {
	color: var(--dofh-cream);
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	max-width: 52ch;
	margin: 0 auto 2rem;
	text-shadow: 0 1px 18px rgba(28, 43, 58, 0.6);
}
/* Ghost CTA floats on imagery: cream outline instead of forest */
.dofh-hero .dofh-btn-ghost .wp-block-button__link {
	color: var(--dofh-cream);
	border-color: var(--dofh-cream);
	text-shadow: 0 1px 12px rgba(28, 43, 58, 0.5);
}
/* Hero's own tide-line into the intro below */
.dofh-hero-wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	line-height: 0;
}
.dofh-hero-wave svg { display: block; width: 100%; height: clamp(36px, 6vw, 72px); }
@media (prefers-reduced-motion: reduce) {
	.dofh-hero-media .dofh-hero-slide { animation: none; transition: none; }
}

/* 2 — Intro strip (cream) */
.dofh-intro {
	padding: var(--dofh-space) 1.25rem;
	text-align: center;
}
.dofh-intro p {
	max-width: 62ch;
	margin: 0 auto;
	font-size: 1.125rem;
	color: var(--dofh-forest-soft);
}

/* 3 — App promo band: teal-deep (NOT forest — rule 1), cream text 4.62:1 AA */
.dofh-band {
	background-color: var(--dofh-teal-deep); /* → navy */
	background-image:
		url(assets/img/grain-light.svg),
		repeating-linear-gradient(0deg, rgba(250, 245, 236, 0.022) 0 1px, transparent 1px 7px);
	background-size: 160px 160px, auto;
	color: var(--dofh-cream);
	padding: var(--dofh-space) 1.25rem;
}
.dofh-band h2, .dofh-band h3 { color: var(--dofh-cream); }
.dofh-band h3 { font-size: 1.15rem; }
.dofh-band p { color: var(--dofh-cream); }
.dofh-badge {
	display: inline-block;
	border: 1.5px solid var(--dofh-sand); /* sand border = decorative (rule 2) */
	color: var(--dofh-cream);             /* text stays cream 4.62:1 */
	border-radius: var(--dofh-radius);
	padding: 0.6rem 1.4rem;
	font-size: 0.95rem;
	margin: 0 0.4rem 0.5rem 0;
}

/* Section rhythm: cream ↔ cypress alternation (60% foundation at work) */
.dofh-alt { background: var(--dofh-cypress); }

/* 4 — Cards: white on either surface, cypress border */
.dofh-card {
	background: #fff;
	border: 1px solid var(--dofh-cypress);
	border-radius: var(--dofh-radius);
	overflow: hidden;
	height: 100%;
}
.dofh-card-img {
	aspect-ratio: 4 / 3; /* reserved space: zero layout shift when photos land */
	background: var(--dofh-sand);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dofh-sand-ink); /* 6.50:1 on sand */
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.dofh-card-body { padding: 1.1rem 1.25rem 1.35rem; }
.dofh-card-body h3 { margin: 0 0 0.4rem; font-size: 1.2rem; }

/* Partner brand-logo chip — letterboxed on cream, consistent size, corner
   overlay on the card image (works over a photo OR the sand placeholder). */
.dofh-card-img { position: relative; }
.dofh-card-logo {
	position: absolute;
	right: 0.6rem;
	bottom: 0.6rem;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0.3rem;
	background: var(--dofh-cream);
	border: 1px solid var(--dofh-cypress);
	border-radius: var(--dofh-radius);
	box-shadow: 0 1px 5px rgba(28, 43, 58, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
}
.dofh-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* Partner profile: brand logo beside the name (same cream chip treatment). */
.dofh-profile-title { display: flex; align-items: center; gap: 0.9rem; }
.dofh-profile-title h1 { margin: 0; }
.dofh-profile-logo {
	flex: 0 0 auto;
	width: 4rem;
	height: 4rem;
	padding: 0.35rem;
	background: var(--dofh-cream);
	border: 1px solid var(--dofh-cypress);
	border-radius: var(--dofh-radius);
	display: flex;
	align-items: center;
	justify-content: center;
}
.dofh-profile-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* ---- Sponsorship layer (slot-driven, quiet, subordinate to type pills) ---- */
/* "Managed by …" credit chip — same cream/cypress logo-chip family, deliberately
   lighter than the type pill so it reads as a subordinate credit, not a tag. */
.dofh-managed-chip {
	display: inline-block;
	background: var(--dofh-cream);
	border: 1px solid var(--dofh-cypress);
	border-radius: 999px;
	padding: 0.15rem 0.6rem;
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap; /* size to content, one line always — never orphan "Getaways" */
	color: var(--dofh-teal-ink);
	text-decoration: none;
}
a.dofh-managed-chip:hover { border-color: var(--dofh-teal-ink); }
.dofh-managed-row { padding: 0 1rem 0.75rem; }

/* Stay-page header credit — one quiet line under the heading. */
.dofh-stay-credit {
	margin: -0.5rem 0 1.75rem;
	font-size: 0.95rem;
	color: var(--dofh-forest-soft);
	font-style: italic;
}
.dofh-stay-credit a { font-style: normal; font-weight: 600; }

/* Type pills: pop FILL + same-family ink text (rules 2+5), one pop per card */
.dofh-tag {
	display: inline-block;
	border-radius: 999px;
	padding: 0.2rem 0.8rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	background: var(--dofh-cypress); /* neutral default */
	color: var(--dofh-forest);
}
.dofh-tag--sage      { background: var(--dof2-oak);       color: var(--dof2-bone); }    /* restaurant → oak 7.99 */
.dofh-tag--turquoise { background: var(--dof2-navy);      color: var(--dof2-bone); }    /* lodging → navy 13.28 */
.dofh-tag--sand      { background: var(--dof2-tan);       color: var(--dof2-tan-ink); } /* outfitter → tan 5.80 */
.dofh-tag--coral     { background: var(--dof2-burn-deep); color: var(--dof2-bone); }    /* bar → burn-deep 4.54 */

/* Section shells */
.dofh-section { padding: var(--dofh-space) 1.25rem; }
.dofh-section h2, .dofh-band h2 {
	text-align: center;
	font-size: clamp(1.7rem, 3.5vw, 2.4rem);
	margin: 0 0 0.5rem;
}
.dofh-section-sub {
	text-align: center;
	color: var(--dofh-forest-soft);
	margin: 0 auto 2.5rem;
	max-width: 55ch;
}

/* 5 — Event rows: coral date badge (the coral pop; nothing else coral here) */
.dofh-event {
	display: flex;
	gap: 1.1rem;
	align-items: center;
	background: #fff;
	border: 1px solid var(--dofh-cypress);
	border-radius: var(--dofh-radius);
	padding: 1rem 1.25rem;
}
.dofh-date {
	flex: 0 0 auto;
	width: 3.6rem;
	height: 3.6rem;
	background: var(--dofh-coral-deep);
	color: var(--dofh-cream); /* 4.54:1 AA */
	border-radius: var(--dofh-radius);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.05;
}
.dofh-date .d { font-size: 1.3rem; font-weight: 700; }
.dofh-date .m { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
.dofh-event h3 { margin: 0 0 0.15rem; font-size: 1.1rem; }
.dofh-event p { margin: 0; color: var(--dofh-forest-soft); font-size: 0.95rem; }

/* 6 — Field Notes: sage-deep family for section cohesion (6.29 cream / 4.53 cypress) */
.dofh-notes h2 { color: var(--dofh-sage-deep); }
.dofh-notes .wp-block-post-title { font-size: 1.2rem; margin: 0.25rem 0; }
.dofh-notes .wp-block-post-title a { color: var(--dofh-sage-deep); text-decoration: none; }
.dofh-notes .wp-block-post-excerpt a { color: var(--dofh-sage-deep); }
.dofh-notes .wp-block-query { margin-bottom: 2.75rem; } /* button breathes between cards and section edge */
.dofh-notes .wp-block-post-title a:hover { text-decoration: underline; }
.dofh-notes .wp-block-post-date { color: var(--dofh-forest-soft); font-size: 0.85rem; }
.dofh-notes li {
	background: #fff;
	border: 1px solid var(--dofh-cypress);
	border-radius: var(--dofh-radius);
	padding: 1.4rem 1.5rem;
}

/* Constrain inner content of full-width sections */
.dofh-inner { max-width: 1120px; margin: 0 auto; }

/* Responsive grids for placeholder cards / event rows (mobile-first auto-stack) */
.dofh-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.5rem;
}
.dofh-events-list {
	display: grid;
	gap: 1rem;
	max-width: 760px;
	margin: 0 auto;
}

/* Footer: stays light (rule 1); ONE quiet family — sage-deep headings + links,
   no green-vs-teal tension (sage-deep on cream 6.29:1 AA) */
/* Footer — clean river-navy, color-popped. amber headings (6.96), bone links
   (13.28) w/ amber hover, muted copyright/tagline (5.82). */
.site-footer {
	background-color: var(--dof2-navy);
	color: var(--dof2-footer-muted);
}
.site-footer .widget-title,
.site-footer h2, .site-footer h3, .site-footer h4 { color: var(--dof2-amber); }
.site-footer a { color: var(--dof2-bone); }
.site-footer a:hover { color: var(--dof2-amber); }
/* Logo on a small cream rounded tile so the dark art reads on navy. */
.dofh-footer-logo-wrap {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.65rem 0.85rem;
	background: var(--dof2-bone);
	border-radius: 18px;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38);
	line-height: 0;
}
.site-footer img.dofh-footer-logo { display: block; max-width: 150px; height: auto; }

/* ---------------------------------------------------------------------------
 * 7 — Supabase-driven components (read layer, 2026-07-14)
 * ------------------------------------------------------------------------- */

/* Card photos: fill the reserved 4:3 box (zero layout shift either way) */
.dofh-card-img--photo { background: var(--dofh-cypress); }
.dofh-card-img--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dofh-card-link { text-decoration: none; color: inherit; display: block; }
.dofh-card-link h3 { color: var(--dofh-forest); }
.dofh-card-link:hover h3 { color: var(--dof2-burn-deep); text-decoration: underline; }

/* Extra tag families for live partner types (pop fills + same-family ink,
   rules 2+5; teal-deep and coral-deep fills take cream per rule 5 exceptions) */
.dofh-tag--orange     { background: var(--dofh-orange);     color: var(--dofh-orange-ink); }
.dofh-tag--teal       { background: var(--dofh-teal-deep);  color: var(--dofh-cream); }
.dofh-tag--coral-deep { background: var(--dofh-coral-deep); color: var(--dofh-cream); }

/* Spec chips (Stay cards, lodging CTA row): quiet neutrals, not pops */
.dofh-chips { padding: 0 1.25rem 0.5rem; }
.dofh-chip {
	display: inline-block;
	background: var(--dofh-cream);
	border: 1px solid var(--dofh-cypress);
	border-radius: 999px;
	padding: 0.15rem 0.7rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--dofh-forest-soft);
	margin: 0 0.35rem 0.35rem 0;
}

/* Inline CTA link styled as the primary button (teal-deep fill, cream text) */
.dofh-cta-link {
	display: inline-block;
	background: var(--dof2-burn-deep);
	color: var(--dof2-bone) !important;
	border-radius: var(--dofh-radius);
	padding: 0.55rem 1.3rem;
	font-weight: 600;
	text-decoration: none;
}
.dofh-cta-link:hover { opacity: 0.9; }
.dofh-card-cta-row { padding: 0 1.25rem 1.25rem; }

/* Explore map */
.dofh-explore-map {
	height: min(70vh, 620px);
	border: 1px solid var(--dofh-cypress);
	border-radius: var(--dofh-radius);
	z-index: 0; /* stay under the sticky header */
}
.dofh-map-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: center;
	margin: 0 0 1rem;
	font-size: 0.95rem;
	color: var(--dofh-forest);
}
.dofh-map-filters select {
	margin-left: 0.4rem;
	border: 1px solid var(--dofh-cypress);
	border-radius: var(--dofh-radius);
	padding: 0.35rem 0.6rem;
	background: #fff;
	color: var(--dofh-forest-soft);
}
.dofh-map-count { color: var(--dofh-forest-soft); font-size: 0.85rem; }

/* Partner index: text alternative to the map (keyboard/SR route + SEO links) */
.dofh-map-list { margin: 1.5rem 0 0; }
.dofh-map-list-title { font-size: 1.15rem; margin: 0 0 0.6rem; }
.dofh-partner-index {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 0.4rem 1.5rem;
}
.dofh-partner-index li { line-height: 1.35; }
.dofh-partner-index a { font-weight: 600; }
.dofh-partner-index-meta { color: var(--dofh-forest-soft); font-size: 0.85rem; }
/* Keyboard-focusable map pins get a visible focus ring */
.dofh-explore-map path.leaflet-interactive:focus-visible {
	outline: 3px solid var(--dofh-teal-ink);
	outline-offset: 2px;
}

.dofh-pop { font-size: 0.9rem; }
.dofh-pop strong { display: block; font-size: 1rem; color: var(--dofh-forest); }
.dofh-pop .dofh-pop-type { display: block; color: var(--dofh-forest-soft); margin: 0.1rem 0 0.3rem; }
.dofh-pop a { color: var(--dofh-teal-ink); font-weight: 600; }
.dofh-pop-thumb {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: calc(var(--dofh-radius) - 6px);
	margin-bottom: 0.4rem;
}

/* Partner profile */
.dofh-profile-head h1 { margin: 0.25rem 0 0.5rem; }
.dofh-profile-back a { color: var(--dofh-teal-ink); text-decoration: none; font-size: 0.9rem; }
.dofh-profile-back a:hover { text-decoration: underline; }
.dofh-profile-meta { display: flex; align-items: center; gap: 0.75rem; margin: 0; }
.dofh-profile-area { color: var(--dofh-forest-soft); font-size: 0.95rem; }
.dofh-profile-photos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.75rem;
	padding: 0 1.25rem;
}
.dofh-profile-photos img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--dofh-radius);
	border: 1px solid var(--dofh-cypress);
}
.dofh-profile-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 781px) { .dofh-profile-cols { grid-template-columns: 1fr; } }
.dofh-profile-desc { font-size: 1.05rem; }
.dofh-profile-book { margin: 1.5rem 0; }
.dofh-profile-book .dofh-chip { margin-left: 0.5rem; }
.dofh-profile-h2 { font-size: 1.4rem; margin: 2.25rem 0 1rem; }
.dofh-reviews { display: grid; gap: 1rem; }
.dofh-review {
	background: #fff;
	border: 1px solid var(--dofh-cypress);
	border-radius: var(--dofh-radius);
	padding: 1.1rem 1.25rem;
}
.dofh-review-stars { color: var(--dofh-coral-deep); letter-spacing: 0.1em; }
.dofh-review p { margin: 0.4rem 0 0; }
.dofh-review-date { color: var(--dofh-forest-soft); font-size: 0.82rem; }
.dofh-hours { width: 100%; font-size: 0.9rem; border-collapse: collapse; }
.dofh-hours th { text-align: left; font-weight: 600; color: var(--dofh-forest); padding: 0.15rem 0.5rem 0.15rem 0; }
.dofh-hours td { color: var(--dofh-forest-soft); }
.dofh-event-when { font-weight: 600; color: var(--dofh-forest); }

/* ---------------------------------------------------------------------------
 * /style-guide page primitives (visual reference + regression check)
 * ------------------------------------------------------------------------- */
.dofh-swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1rem;
	margin: 1.5rem 0 2.5rem;
}
.dofh-swatch {
	border: 1px solid var(--dofh-cypress);
	border-radius: var(--dofh-radius);
	overflow: hidden;
	background: #fff;
}
.dofh-swatch .chip { height: 72px; }
.dofh-swatch .meta {
	padding: 0.5rem 0.75rem;
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--dofh-forest-soft);
}
.dofh-swatch .meta strong { display: block; color: var(--dofh-forest); }

/* ---------------------------------------------------------------------------
 * WOW pass (2026-07-16): motion system, wave dividers, section richness.
 * All movement is transform/opacity only and fully disabled under
 * prefers-reduced-motion (the reveal classes are added by JS, which also
 * checks the media query — belt and suspenders).
 * ------------------------------------------------------------------------- */

/* Scroll reveals: JS tags .dofh-reveal then flips .is-revealed on intersect */
.dofh-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 600ms ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dofh-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* Card + event hover states: lift, shadow, photo breathe, springy buttons */
.dofh-card {
	transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 250ms ease;
}
.dofh-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 36px rgba(28, 43, 58, 0.14);
}
.dofh-card-img--photo { overflow: hidden; }
.dofh-card-img--photo img { transition: transform 400ms ease; }
.dofh-card:hover .dofh-card-img--photo img { transform: scale(1.05); }
.dofh-event {
	transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 250ms ease;
}
.dofh-event:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(28, 43, 58, 0.12);
}
.dofh-btn-primary .wp-block-button__link,
.dofh-btn-ghost .wp-block-button__link,
.dofh-btn-coral .wp-block-button__link,
.dofh-btn-sage .wp-block-button__link,
.dofh-btn-band-cta .wp-block-button__link,
.dofh-cta-link {
	transition: filter 120ms ease, transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dofh-btn-primary .wp-block-button__link:hover,
.dofh-btn-ghost .wp-block-button__link:hover,
.dofh-btn-coral .wp-block-button__link:hover,
.dofh-btn-sage .wp-block-button__link:hover,
.dofh-btn-band-cta .wp-block-button__link:hover,
.dofh-cta-link:hover {
	transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
	.dofh-reveal { opacity: 1; transform: none; transition: none; }
	.dofh-card, .dofh-event,
	.dofh-card-img--photo img,
	.wp-block-button__link, .dofh-cta-link { transition: none !important; }
	.dofh-card:hover, .dofh-event:hover,
	.wp-block-button__link:hover { transform: none !important; }
	.dofh-card:hover .dofh-card-img--photo img { transform: none !important; }
}

/* Wave dividers (tide lines): svg fill = the section ABOVE, wrapper bg = the
 * section BELOW; drop the divider between two full-width groups. Colors are
 * inline hex in the block markup (board never edits these wp:html blocks). */
.dofh-wave { line-height: 0; margin-top: -1px; }
.dofh-wave svg { display: block; width: 100%; height: clamp(30px, 5vw, 60px); }
/* Wave dividers carry the OLD inline hexes in the block markup (wrapper bg =
   section below, svg fill = section above). Attribute selectors remap each to
   the new palette — robust to divider order, no DB edit needed. */
.dofh-wave[style*="#2F7E74"] { background: var(--dof2-navy) !important; }
.dofh-wave[style*="#E2D4C9"] { background: var(--dof2-oyster) !important; }
.dofh-wave[style*="#FBFAF9"] { background: var(--dof2-bone) !important; }
.dofh-hero-wave svg[fill="#FBFAF9"] path,
.dofh-wave svg[fill="#FBFAF9"] path { fill: var(--dof2-bone); }
.dofh-wave svg[fill="#2F7E74"] path { fill: var(--dof2-navy); }
.dofh-wave svg[fill="#E2D4C9"] path { fill: var(--dof2-oyster); }
/* The divider into the navy footer bridges oyster → navy. */
.dofh-notes + .dofh-wave-wrap .dofh-wave { background: var(--dof2-navy) !important; }

/* Section eyebrows: coral caps-label (coral-deep on cream 4.54:1 AA). On
 * cypress/teal surfaces coral-deep fails as bare text (3.27:1 on cypress),
 * so those get a cream pill behind the same coral — legal everywhere. */
.dofh-eyebrow {
	display: block;
	width: fit-content;
	margin: 0 auto 0.6rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dofh-coral-deep);
}
.dofh-alt .dofh-eyebrow,
.dofh-band .dofh-eyebrow {
	background: var(--dofh-cream);
	padding: 0.28rem 0.95rem;
	border-radius: 999px;
}
/* Band eyebrow: sun-amber caps on navy (6.96), no pill. */
.dofh-band .dofh-eyebrow {
	background: transparent;
	padding: 0;
	color: var(--dof2-amber);
}

/* Photo-forward spotlight cards: taller image, chips row under the pill */
.dofh-grid--spotlight .dofh-card-img { aspect-ratio: 3 / 2; }
.dofh-card-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

/* Events empty state ("the tide's coming in") */
.dofh-events-empty {
	text-align: center;
	color: var(--dofh-forest-soft);
	background: #fff;
	border: 1px dashed var(--dofh-cypress);
	border-radius: var(--dofh-radius);
	padding: 2rem 1.5rem;
	max-width: 560px;
	margin: 0 auto;
}
.dofh-events-empty .dofh-events-empty-mark { color: var(--dofh-turquoise); font-size: 1.6rem; display: block; }

/* App band: floating cream app-icon tile (logo on cream — its native home).
 * Gentle bob; decorative only, hidden from AT, sits beside the copy. */
.dofh-band-art {
	display: flex;
	justify-content: center;
	margin: 0 0 1.5rem;
}
.dofh-band-tile {
	width: 108px;
	height: 108px;
	background: var(--dofh-cream);
	border-radius: 26px;
	box-shadow: 0 18px 40px rgba(28, 43, 58, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: dofh-bob 5s ease-in-out infinite;
}
.dofh-band-tile img { width: 82%; height: auto; display: block; }
@keyframes dofh-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
	.dofh-band-tile { animation: none; }
}

/* Map glow-up: brand teardrop pins (divIcon) + card-styled popups */
.dofh-pin { background: none; border: none; }
.dofh-pin svg { display: block; filter: drop-shadow(0 3px 4px rgba(28, 43, 58, 0.35)); }
.dofh-pin:focus-visible {
	outline: 3px solid var(--dofh-teal-ink);
	outline-offset: 2px;
	border-radius: 6px;
}
.dofh-explore-map .leaflet-popup-content-wrapper {
	border-radius: var(--dofh-radius);
	border: 1px solid var(--dofh-cypress);
	box-shadow: 0 14px 34px rgba(28, 43, 58, 0.18);
}
.dofh-explore-map .leaflet-popup-content { margin: 0.9rem 1rem; }
.dofh-explore-map .leaflet-container { font-family: inherit; }

/* Clean navy footer: thin burn accent rule; the sun/tide motif is retired. */
.site-footer { position: relative; border-top: 3px solid var(--dof2-burn); }

/* Mobile: hero breathes a little less */
@media (max-width: 781px) {
	.dofh-hero { padding-top: 3.5rem; min-height: 76vh; }
	.dofh-hero .dofh-inner { padding-top: clamp(3rem, 20vh, 8rem); }
}
/* Wave divider wrapper groups: kill root block-gap on BOTH sides so tides
 * touch their sections (Kadence adds margin between root blocks) */
.dofh-wave-wrap,
.dofh-wave-wrap + * { margin-block-start: 0 !important; }
.dofh-wave-wrap { margin-block-end: 0 !important; line-height: 0; }
.entry-content > * + .dofh-wave-wrap { margin-top: 0 !important; }
/* Kadence gives root groups margin-bottom: 32px — zero it on any section
 * that a wave-wrap follows, or a stripe of page background shows through */
.entry-content > *:has(+ .dofh-wave-wrap) { margin-block-end: 0 !important; }

/* ── Public event-submission form (/events) ─────────────────────────────── */
.dofh-eventform-wrap { max-width: 640px; margin: 1.5rem auto 0; }
.dofh-eventform { display: flex; flex-direction: column; gap: 1rem; }
.dofh-field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.95rem; color: var(--dofh-forest); }
.dofh-field > span { font-weight: 600; }
.dofh-req { color: var(--dofh-coral-deep); }
.dofh-field input,
.dofh-field textarea {
	border: 1px solid var(--dofh-cypress);
	border-radius: var(--dofh-radius);
	padding: 0.6rem 0.75rem;
	font: inherit;
	color: var(--dofh-forest-soft);
	background: #fff;
	width: 100%;
}
.dofh-field input:focus,
.dofh-field textarea:focus { outline: none; border-color: var(--dofh-teal-deep); }
.dofh-field input:disabled,
.dofh-field textarea:disabled { background: var(--dofh-cypress); opacity: 0.6; cursor: not-allowed; }
.dofh-field-row { display: flex; gap: 1rem; }
.dofh-field-row .dofh-field { flex: 1; }
@media (max-width: 560px) { .dofh-field-row { flex-direction: column; } }
/* Honeypot: off-screen, never shown to humans */
.dofh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dofh-eventform-submit {
	align-self: flex-start;
	background: var(--dof2-burn-deep);
	color: var(--dof2-bone);
	border: none;
	border-radius: var(--dofh-radius);
	padding: 0.7rem 1.4rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 150ms ease;
}
.dofh-eventform-submit:hover { opacity: 0.9; }
.dofh-eventform-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.dofh-form-fine { font-size: 0.8rem; color: var(--dofh-forest-soft); }
.dofh-form-flash { border-radius: var(--dofh-radius); padding: 0.75rem 1rem; font-size: 0.9rem; margin-bottom: 1rem; }
.dofh-form-flash--ok { background: #E4EDDF; color: var(--dof2-oak); }        /* success — oak 7.22 */
.dofh-form-flash--err { background: #FDF4EF; color: var(--dof2-burn-deep); } /* alert — burn-deep 4.55 */
.dofh-form-flash--soon { background: var(--dof2-tan); color: var(--dof2-tan-ink); } /* 5.80 */
.dofh-form-flash a { color: inherit; text-decoration: underline; }

/* Event photo thumbnail (admin-uploaded, shown on /events) */
.dofh-event-photo {
	flex: 0 0 auto;
	width: 84px;
	height: 84px;
	border-radius: var(--dofh-radius);
	overflow: hidden;
	border: 1px solid var(--dofh-cypress);
}
.dofh-event-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* New brand logo is square — cap the header logo height so it doesn't tower */
.custom-logo, .site-branding a.brand img { max-height: 96px; width: auto; }

/* ── Email capture (footer bar · inline card · 60% slide-in) ───────────────
   Elegant, never obnoxious. Shared form primitives, then per-placement skins. */
.dofh-signup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dofh-signup-form { display: flex; flex-direction: column; gap: 0.6rem; }
.dofh-signup-fields { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dofh-signup input[type="text"],
.dofh-signup input[type="email"] {
	flex: 1 1 12rem;
	min-width: 0;
	border: 1px solid var(--dof2-oyster);
	border-radius: var(--dofh-radius);
	padding: 0.6rem 0.8rem;
	font: inherit;
	color: var(--dof2-navy);
	background: #fff;
}
.dofh-signup input:focus { outline: none; border-color: var(--dof2-burn-deep); }
.dofh-signup-submit {
	flex: 0 0 auto;
	background: var(--dof2-burn-deep); /* bone 4.54 */
	color: var(--dof2-bone);
	border: none;
	border-radius: var(--dofh-radius);
	padding: 0.6rem 1.4rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 150ms ease;
}
.dofh-signup-submit:hover { opacity: 0.9; }
.dofh-signup-submit:disabled { opacity: 0.6; cursor: default; }
.dofh-signup-pitch { margin: 0; font-size: 1rem; }
.dofh-signup-fine { margin: 0; font-size: 0.75rem; opacity: 0.8; }
.dofh-signup-status { margin: 0; font-size: 0.85rem; min-height: 0; }
.dofh-signup-status:empty { display: none; }
.dofh-signup-status.is-ok { color: var(--dof2-oak); font-weight: 600; }
.dofh-signup-status.is-err { color: var(--dof2-burn-deep); }
.dofh-signup-status.is-pending { color: var(--dof2-dock); }

/* A — Footer bar: a quiet navy strip that reads as the footer's final row. */
.dofh-signup-footerbar { background: var(--dof2-navy); border-top: 1px solid rgba(250,245,236,0.12); }
.dofh-signup--footer {
	max-width: 1120px;
	margin: 0 auto;
	padding: 1.1rem 1.25rem 1.3rem;
	display: flex;
	align-items: center;
	gap: 1rem 1.5rem;
	flex-wrap: wrap;
}
.dofh-signup--footer .dofh-signup-form { flex: 1 1 340px; gap: 0.45rem; }
.dofh-signup--footer .dofh-signup-copy { flex: 0 1 auto; }
.dofh-signup--footer .dofh-signup-pitch { color: var(--dof2-bone); font-family: 'Fraunces', serif; font-size: 1.05rem; }
.dofh-signup--footer .dofh-signup-fine { color: var(--dof2-footer-muted); }
.dofh-signup--footer .dofh-signup-status { color: var(--dof2-amber); }
.dofh-signup--footer .dofh-signup-status.is-ok { color: var(--dof2-amber); }

/* B — Inline card: warm oyster card at the end of posts + the Events page. */
.dofh-signup--inline {
	margin: 2.5rem auto 0;
	max-width: 640px;
	background: var(--dof2-oyster);
	border-radius: var(--dofh-radius);
	padding: 1.5rem 1.6rem;
	color: var(--dof2-navy);
}
.dofh-signup--inline .dofh-signup-pitch { font-family: 'Fraunces', serif; font-size: 1.2rem; color: var(--dof2-navy); margin-bottom: 0.2rem; }
.dofh-signup--inline .dofh-signup-fine { color: var(--dof2-navy-soft); }

/* C — Slide-in: small bottom-right card. No overlay, no scroll-lock. */
.dofh-slidein {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 60;
	width: min(340px, calc(100vw - 2rem));
	background: var(--dof2-bone);
	border: 1px solid var(--dof2-oyster);
	border-radius: var(--dofh-radius);
	box-shadow: 0 18px 44px rgba(28,43,58,0.28);
	padding: 1.15rem 1.2rem 1.1rem;
	color: var(--dof2-navy);
	transform: translateY(140%);
	opacity: 0;
	transition: transform 420ms cubic-bezier(0.16,1,0.3,1), opacity 300ms ease;
}
.dofh-slidein.is-in { transform: translateY(0); opacity: 1; }
.dofh-slidein .dofh-signup-pitch { font-family: 'Fraunces', serif; font-size: 1.05rem; padding-right: 1.5rem; }
.dofh-slidein .dofh-signup-fine { color: var(--dof2-navy-soft); }
.dofh-slidein .dofh-signup-fields { flex-direction: column; }
/* Column layout: flex-basis must not become row-height — size inputs to content. */
.dofh-slidein .dofh-signup-fields > input,
.dofh-slidein .dofh-signup-fields > button { flex: 0 0 auto; width: 100%; }
.dofh-slidein-close {
	position: absolute;
	top: 0.4rem;
	right: 0.55rem;
	background: none;
	border: none;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--dof2-navy-soft);
	cursor: pointer;
	padding: 0.2rem 0.4rem;
}
.dofh-slidein-close:hover { color: var(--dof2-burn-deep); }
@media (prefers-reduced-motion: reduce) {
	.dofh-slidein { transition: opacity 200ms ease; transform: none; }
}
@media (max-width: 560px) {
	.dofh-signup--footer .dofh-signup-fields { flex-direction: column; }
	.dofh-signup--footer .dofh-signup-fields > input,
	.dofh-signup--footer .dofh-signup-submit { flex: 0 0 auto; width: 100%; }
	.dofh-slidein { right: 1rem; left: 1rem; bottom: 1rem; width: auto; }
}

/* --------------------------------------------------------------------------
 * Become-a-Partner nav CTA (appended to primary/mobile menu via
 * wp_nav_menu_items). A burn-deep pill so it reads as an action, not a page.
 * ------------------------------------------------------------------------ */
.dofh-nav-cta > a {
	background: var(--dof2-burn-deep);
	color: var(--dof2-bone) !important;
	border-radius: 999px;
	padding: 0.4rem 0.95rem !important;
	font-weight: 600;
}
.dofh-nav-cta > a:hover,
.dofh-nav-cta > a:focus { opacity: 0.9; color: var(--dof2-bone) !important; }