/*
Theme Name: Drive Tennessee Forward
Template: kadence
Description: Campaign child theme for Drive Tennessee Forward — premium-minimal design system (Space Grotesk + Inter, deep black, cyan accent).
Version: 1.3.2
Author: EO Nashville / LaunchTN
*/

/* ---------- Self-hosted fonts (no external CDN) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/space-grotesk-400.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/space-grotesk-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/space-grotesk-600.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-700.woff2') format('woff2');}


:root{
	--dtf-black:#0B0B0F;
	--dtf-panel:#17171C;
	--dtf-white:#FFFFFF;
	--dtf-cyan:#32BFEF;
	--dtf-cyan-dim:#1E9BC8;
	--dtf-link:#0E6E96;
	--dtf-muted:#B8B8C0;
	--dtf-cloud:#F4F3F0;
	--dtf-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
	--dtf-body:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--dtf-maxw:680px; /* ~68-72ch body measure — WCAG-friendly line length */
}

/* ---------- Base typography ---------- */
body,
.wp-site-blocks,
.entry-content{
	font-family:var(--dtf-body);
	letter-spacing:-0.006em;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
html{ scroll-behavior:smooth; }

.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3,
.entry-content h1,
.entry-content h2,
.entry-content h3{
	font-family:var(--dtf-display);
	font-weight:600;
	line-height:1.04;
	letter-spacing:-0.02em;
	text-wrap:balance;
}

.wp-site-blocks h1,.entry-content h1{ font-size:clamp(2.6rem,7vw,5.25rem); font-weight:700; }
.wp-site-blocks h2,.entry-content h2{ font-size:clamp(1.9rem,4.4vw,3.1rem); }
.wp-site-blocks h3,.entry-content h3{ font-size:clamp(1.3rem,2.4vw,1.7rem); }

.entry-content p{ font-size:clamp(1.02rem,1.25vw,1.18rem); line-height:1.65; }
.entry-content li{ font-size:clamp(1.02rem,1.25vw,1.18rem); line-height:1.6; }

/* ---------- Full-width campaign bands (generous rhythm) ---------- */
.entry-content .wp-block-group.alignfull{
	padding-top:clamp(56px,8vw,110px)!important;
	padding-bottom:clamp(56px,8vw,110px)!important;
}
.entry-content .wp-block-group.alignfull > *{
	max-width:var(--dtf-maxw);
	margin-left:auto;
	margin-right:auto;
}

/* Eyebrow label (EO NASHVILLE × LAUNCHTN) */
.entry-content p strong:first-child{ } /* no-op guard */
.dtf-eyebrow,
.entry-content p:has(> strong):first-child{
	font-family:var(--dtf-display);
	text-transform:uppercase;
	letter-spacing:0.28em;
	font-size:0.82rem!important;
	color:var(--dtf-cyan)!important;
}
/* The eyebrow text lives in a <strong> that inherits a dark bold color — force it cyan */
.dtf-eyebrow strong{ color:var(--dtf-cyan)!important; font-weight:600; }

/* ---------- Hero ---------- */
.entry-content .wp-block-group.alignfull:first-child{
	position:relative;
	overflow:hidden;
	background:
		radial-gradient(120% 90% at 50% -10%, rgba(50,191,239,0.16), transparent 60%),
		var(--dtf-black)!important;
}
.entry-content .wp-block-group.alignfull:first-child h1{
	margin:.15em 0 .1em;
}
.entry-content .wp-block-group.alignfull:first-child h2{
	color:var(--dtf-muted)!important;
	font-weight:500;
	max-width:16ch;
	margin-inline:auto;
}
/* Plate image: subtle float + shine sweep */
.entry-content .wp-block-image img{
	border-radius:10px;
	box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04);
}
.entry-content .wp-block-group.alignfull:first-child .wp-block-image{
	position:relative;
	animation:dtf-riseIn .9s cubic-bezier(.2,.7,.2,1) both;
}
.entry-content .wp-block-group.alignfull:first-child .wp-block-image::after{
	content:"";
	position:absolute; inset:0;
	background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 66%);
	transform:translateX(-120%);
	animation:dtf-shine 2.6s ease .7s 1;
	pointer-events:none; border-radius:10px;
}
@keyframes dtf-shine{ to{ transform:translateX(120%); } }
@keyframes dtf-riseIn{ from{ opacity:0; transform:translateY(18px) scale(.985); } }

/* ---------- Buttons ---------- */
.entry-content .wp-block-button__link{
	font-family:var(--dtf-display);
	font-weight:600;
	letter-spacing:.01em;
	padding:16px 34px!important;
	border-radius:6px;
	transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
	box-shadow:0 8px 24px -10px rgba(50,191,239,.7);
}
.entry-content .wp-block-button__link:hover{
	transform:translateY(-2px);
	filter:brightness(1.06);
	box-shadow:0 14px 30px -10px rgba(50,191,239,.85);
}
.entry-content .wp-block-button__link:focus-visible,
a:focus-visible, button:focus-visible{
	outline:3px solid var(--dtf-cyan);
	outline-offset:3px;
}

/* ---------- Progress bar (designed) ---------- */
.dtf-progress{ margin:28px auto 0; max-width:640px; }
.dtf-progress-track{
	position:relative;
	height:16px;
	background:rgba(11,11,15,.06);
	border:1px solid rgba(11,11,15,.14);
	border-radius:999px;
	overflow:hidden;
}
.dtf-progress-fill{
	display:block; height:100%;
	width:0%;
	background:linear-gradient(90deg,var(--dtf-cyan-dim),var(--dtf-cyan));
	border-radius:999px;
	box-shadow:0 0 14px rgba(50,191,239,.55);
	transition:width 1.1s cubic-bezier(.2,.7,.2,1);
}
.dtf-progress-label{
	margin-top:14px; text-align:center;
	font-size:1.05rem; color:var(--dtf-black);
}
.dtf-progress-label .dtf-count{
	font-family:var(--dtf-display);
	font-size:2.2rem; font-weight:700;
	color:var(--dtf-black);
	display:block; line-height:1.1;
}

/* On dark bands, invert progress text */
.wp-block-group[style*="background-color:#0B0B0F"] .dtf-progress-label,
.wp-block-group[style*="background-color:#17171C"] .dtf-progress-label{ color:var(--dtf-white); }

/* ---------- Founders band ---------- */
.dtf-founders h2{ font-size:clamp(1.9rem,4.4vw,3.1rem); }
.dtf-founders a{ transition:transform .18s ease, box-shadow .18s ease; }
.dtf-founders a:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(0,0,0,.6); }

/* ---------- Links in content (contrast-safe per band) ---------- */
/* Text links only (buttons & styled pills keep their own colors). */
/* Default (light/white bands): dark cyan, 5.1:1+ — WCAG AA */
.entry-content a:not(.wp-block-button__link):not([style*="background"]){ color:var(--dtf-link); text-underline-offset:3px; }
/* Dark-background bands: bright cyan, 9.2:1 — WCAG AA */
.wp-block-group[style*="background-color:#0B0B0F"] a:not(.wp-block-button__link):not([style*="background"]),
.wp-block-group[style*="background-color:#17171C"] a:not(.wp-block-button__link):not([style*="background"]){ color:var(--dtf-cyan); }

/* ---------- Footer credit ---------- */
.dtf-footer{ font-family:var(--dtf-body); }
.dtf-footer a{ text-decoration:none; }
.dtf-footer a:hover{ text-decoration:underline; }

/* ---------- Scroll reveal (enhancement only — content is ALWAYS visible) ----------
   Bands are visible by default. The reveal effect is applied only after the
   `js` class is added to <html> AND is self-healing (a timeout force-reveals),
   so content can never be stuck invisible. */
html.js .dtf-reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
html.js .dtf-reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
	html.js .dtf-reveal{ opacity:1!important; transform:none!important; transition:none; }
	.entry-content .wp-block-group.alignfull:first-child .wp-block-image{ animation:none; }
	.entry-content .wp-block-group.alignfull:first-child .wp-block-image::after{ animation:none; display:none; }
	html{ scroll-behavior:auto; }
}

/* ---------- Hide redundant page title on the homepage hero ---------- */
.home .entry-hero-container-inner .entry-header,
.home header.entry-header .entry-title,
.home .entry-hero{ display:none; }

/* ---------- Checkout polish ---------- */
.woocommerce form .form-row label{ font-weight:600; }
#dtf_election_field .wc_dtf_election, #dtf_election_field label{ line-height:1.5; }

/* ---------- Staggered hero tagline (signature treatment) ---------- */
/* Centered content column (balanced margins, no right-side dead space); text stays left-aligned. */
.entry-content .wp-block-group.alignfull:first-child{ text-align:left; }
.entry-content .wp-block-group.alignfull:first-child > *{ margin-left:auto; margin-right:auto; }
h2.dtf-tagline{
	display:block!important; max-width:none!important;
	margin:.3em 0 .1em; font-weight:500; color:var(--dtf-muted);
	font-size:clamp(1.5rem,3.2vw,2.4rem); line-height:1.12;
}
h2.dtf-tagline .l1,
h2.dtf-tagline .l2{ display:block; }
h2.dtf-tagline .l2{ padding-left:1.4em; color:var(--dtf-white); }
h2.dtf-tagline .l2::after{ content:""; display:block; width:60px; height:3px; margin-top:.4em; background:var(--dtf-cyan); }

/* ---------- Subpages (FAQ, policies, About, Thank You) ---------- */
.page:not(.home) .entry-hero-container-inner,
.page:not(.home) .entry-hero{ background:var(--dtf-black); }
.page:not(.home) .entry-hero .entry-title,
.page:not(.home) h1.entry-title,
.page:not(.home) .entry-hero-container-inner .entry-title{
	font-family:var(--dtf-display)!important; color:var(--dtf-white)!important;
	font-size:clamp(2rem,5vw,3.4rem)!important; letter-spacing:-0.02em;
}
.page:not(.home) .entry-content{ max-width:720px; margin-inline:auto; }
.page:not(.home) .entry-content > h2{
	margin-top:2em; padding-bottom:.35em; font-size:clamp(1.4rem,2.6vw,1.9rem);
	border-bottom:2px solid rgba(50,191,239,.35);
}
.page:not(.home) .entry-content > h2:first-child{ margin-top:.2em; }
.page:not(.home) .entry-content > p{ color:#2a2a30; }
.page:not(.home) .entry-content strong{ color:var(--dtf-black); }
/* build-note callouts (Privacy/Refund) get a visible flag */
.entry-content p[style*="fff8e1"]{ border-left:4px solid #d9a400; border-radius:4px; font-size:.92rem; }

/* ---------- Iteration 1 fixes ---------- */
/* Remove Kadence's default footer ("Powered by Kadence WP" — templated). Our <footer.dtf-footer> is canonical. */
.site-footer{ display:none!important; }

/* Force the brand wordmark visible at tablet widths (Kadence tablet header hid it) */
@media (min-width:600px) and (max-width:1023px){
	.site-header-item .site-branding,
	.site-branding,
	.site-title{ display:flex!important; visibility:visible!important; opacity:1!important; }
	.site-title a{ font-family:var(--dtf-display); font-weight:700; color:var(--dtf-black); }
}

/* Enforce the large progress count number */
.dtf-progress-label .dtf-count{ font-size:2.4rem!important; font-weight:700!important; display:block!important; line-height:1.05; margin-bottom:2px; }

/* Guarantee no horizontal overflow anywhere */
html,body{ overflow-x:hidden; max-width:100%; }
img,figure,.wp-block-image{ max-width:100%; height:auto; }

/* ---------- Cohesive dark header flowing into the hero (removes the light seam/gap) ---------- */
header.site-header,
.site-header-row-container,
.site-main-header-inner-wrap,
.site-header-main-section-left,
.site-header-main-section-right{ background-color:#0B0B0F !important; border-bottom:none !important; box-shadow:none !important; }

/* Brand + nav go light on the dark header */
.site-branding .site-title a,
.site-title a{ color:#FFFFFF !important; }
header.site-header a,
header.site-header .menu-container a,
header.site-header nav a,
header.site-header .header-menu-container a{ color:#E8E8ED !important; }
header.site-header a:hover,
header.site-header nav a:hover,
header.site-header .current-menu-item > a{ color:var(--dtf-cyan) !important; }

/* Mobile hamburger icon light on dark */
header.site-header .menu-toggle,
header.site-header .menu-toggle:focus,
header.site-header .menu-toggle .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle{ color:#FFFFFF !important; }
header.site-header .menu-toggle-icon,
header.site-header .menu-toggle-icon::before,
header.site-header .menu-toggle-icon::after{ background-color:#FFFFFF !important; }

/* Collapse the light gap above the hero so the black hero sits flush under the header (home only) */
.home #main,
.home main,
.home .content-container,
.home .site-content{ background-color:#0B0B0F !important; padding-top:0 !important; margin-top:0 !important; }
.home .entry-hero-container,
.home .entry-hero-container-inner,
.home .entry-hero{ display:none !important; padding:0 !important; margin:0 !important; height:0 !important; }
.home .content-area,
.home .entry-content{ padding-top:0 !important; margin-top:0 !important; }

/* ---------- Header/hero seam fixes (v1.1.1) ---------- */
/* Wordmark is a <p class="site-title">, not an <a> — target it directly */
.site-title,
.site-title a,
.site-branding .site-title{ color:#FFFFFF !important; }

/* The content <article class="content-bg"> carries a white bg + top padding that shows
   as a white bar above the full-bleed hero. Make the article seamless on the homepage. */
.home article.entry,
.home .entry.content-bg,
.home .content-bg,
.home .single-entry{ background-color:#0B0B0F !important; padding-top:0 !important; margin-top:0 !important; box-shadow:none !important; border:none !important; }
.home .entry-header,
.home article .entry-header{ display:none !important; }

/* ---------- Two-column hero (desktop): text left, plate right; stacks on mobile ---------- */
.dtf-hero-grid{
	max-width:1800px !important; width:100%; margin:0 auto !important;
	display:grid; grid-template-columns:1fr; gap:26px; align-items:center; text-align:left;
}
.dtf-hero-grid h1{ font-size:clamp(2.3rem,4.6vw,3.6rem); margin:.06em 0 .04em; }
.dtf-hero-grid .dtf-tagline{ max-width:none !important; margin-left:0 !important; margin-right:0 !important;
	font-size:clamp(1.3rem,2.4vw,1.95rem); }
.dtf-hero-sub{ color:var(--dtf-white); max-width:52ch; }
.dtf-hero-cta{ margin-top:22px; margin-bottom:0; }
.dtf-btn{ display:inline-block; font-family:var(--dtf-display); font-weight:600; letter-spacing:.01em;
	background:var(--dtf-cyan); color:var(--dtf-black); padding:16px 36px; border-radius:6px; text-decoration:none;
	box-shadow:0 8px 24px -10px rgba(50,191,239,.7); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.dtf-btn:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 14px 30px -10px rgba(50,191,239,.85); }
/* Light panel behind the plate.
   The plate carries a state-mandated 1/4" white border (PPS: no bleed), which
   is on the real plate and cannot be removed. Against the page's near-black
   that border became the highest-contrast edge in the hero, so the eye read
   "white frame around a plate" instead of "black plate" - flagged in review
   2026-08-27. Sitting the plate on a near-white panel makes the border read as
   what it is: the plate's own edge. The black field then dominates, which is
   the whole point of an all-black plate. */
.dtf-hero-media{ position:relative; background:var(--dtf-cloud);
	border-radius:10px; padding:clamp(18px,3vw,38px); }
.dtf-hero-media img{ width:100%; height:auto; display:block; animation:dtf-riseIn .9s cubic-bezier(.2,.7,.2,1) both; }
.dtf-hero-media .dtf-hero-cap{ color:#5B616B; }

/* The real-car photo in the white content section. Constrained and centred so
   it does not outgrow the 820px measure the section is built on. */
.dtf-oncar{ margin:34px auto 0; max-width:820px; }
.dtf-oncar img{ width:100%; height:auto; display:block; border-radius:8px; }
.dtf-oncar figcaption{ margin-top:10px; font-size:.85rem; color:#5B616B;
	font-style:italic; text-align:center; }
.dtf-hero-cap{ display:block; margin-top:8px; font-size:.8rem; color:#B8B8C0; font-style:italic; text-align:center; }
@media(min-width:920px){
	.dtf-hero-grid{ grid-template-columns:1.02fr 1fr; gap:clamp(40px,5vw,120px); padding:0 clamp(8px,2vw,40px); }
	.dtf-hero-cap{ text-align:left; }
}

/* Two-column hero fixes: white H1, visible button text */
.dtf-hero-text h1{ color:var(--dtf-white) !important; }
.entry-content a.dtf-btn, .dtf-btn{ color:var(--dtf-black) !important; }

/* Widen the HERO band's inner container so the two-column grid can use the full width
   (other bands keep the readable ~680px measure). */
.entry-content .wp-block-group.alignfull:first-child > .wp-block-group__inner-container{ max-width:1720px !important; }

/* ---------- Header: tri-star mark before wordmark + shorter bar ---------- */
.site-title{ display:inline-flex !important; align-items:center; }
.site-title::before{
	content:""; display:inline-block; flex:0 0 auto;
	width:1.4em; height:1.4em; margin-right:.48em;
	background:url(https://drivetnforward.org/wp-content/uploads/2026/07/header-tristar.png?v=2) center/contain no-repeat;
}
.site-main-header-inner-wrap, .site-header-row.site-header-focus-item{ min-height:56px !important; }

/* ---------- WooCommerce checkout: readable button text ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.wc-forward, .woocommerce-message a.button,
.woocommerce #respond input#submit, .woocommerce #place_order, .woocommerce button#place_order{
	color:#fff !important;
}

/* ---------- Shorter inner-page title hero (Checkout, FAQ, etc.) ---------- */
.entry-hero-container-inner{ min-height:120px !important; }
.entry-hero .entry-header{ padding-top:14px; padding-bottom:14px; }
/* ---------- WooCommerce added-to-cart notice: button beside text, no overlap ---------- */
.woocommerce-message{ display:flex !important; flex-direction:row-reverse; align-items:center;
	justify-content:space-between; gap:20px; flex-wrap:wrap; }
.woocommerce-message .button.wc-forward{ float:none !important; flex:0 0 auto; margin:0; }

/* ---------- Vertically center header items (explicit/bulletproof) ---------- */
.site-main-header-inner-wrap, .site-header-row-container-inner .site-header-row{ align-items:center !important; }
.site-header-main-section-left, .site-header-main-section-right,
.site-branding, .site-header-item, .header-navigation, .main-navigation{ align-items:center !important; }
.site-header-main-section-right{ align-self:center !important; }

/* ---------------------------------------------------------------------------
   Registrant block (checkout). The state's applicant row names the person who
   will register the plate, which is not reliably the payer. Collapsed by
   default behind the same-as-billing checkbox so the common case stays one
   glance; 44px targets and single-column stacking on small viewports.
   --------------------------------------------------------------------------- */
.dtf-registrant{ margin:32px 0 8px; padding:20px; border:1px solid rgba(255,255,255,.14); border-radius:6px; }
.dtf-registrant h3{ margin:0 0 6px; font-size:1.05rem; }
.dtf-registrant-help{ margin:0 0 14px; font-size:.9rem; opacity:.8; line-height:1.5; }
.dtf-registrant .dtf-registrant-toggle label{ display:flex; align-items:flex-start; gap:10px; font-weight:600; cursor:pointer; min-height:44px; }
.dtf-registrant .dtf-registrant-toggle input[type="checkbox"]{ width:22px; height:22px; margin-top:2px; flex:0 0 auto; }
.dtf-registrant-fields{ margin-top:14px; }
/* Subhead inside the revealed block. The fields appear only when the buyer
   unchecks same-as-billing, so they need a heading that says whose details
   these are and that they are required - the labels no longer say "optional". */
.dtf-registrant-subhead{ margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.12); font-size:.9rem; line-height:1.5; }
.dtf-registrant-subhead strong{ font-size:.98rem; }
.dtf-registrant-subhead span{ opacity:.8; }

.dtf-registrant-fields[hidden]{ display:none !important; }
.dtf-registrant-fields .form-row{ margin-bottom:12px; }
.dtf-registrant-fields input[type="text"]{ min-height:44px; }

/* Consent block (checkout): the policy is presented, not merely linked, so the
   text is a bordered scroll region above a short required checkbox. */
.dtf-consent{ margin:24px 0; }
.dtf-consent-policy{ max-height:180px; overflow-y:auto; padding:14px 16px; border:1px solid rgba(255,255,255,.18); border-radius:6px; font-size:.88rem; line-height:1.55; background:rgba(255,255,255,.03); }
.dtf-consent .form-row label{ display:flex; align-items:flex-start; gap:10px; min-height:44px; font-weight:600; cursor:pointer; }
.dtf-consent input[type="checkbox"]{ width:22px; height:22px; margin-top:2px; flex:0 0 auto; }
.dtf-consent-error{ display:block; margin-top:6px; color:#ff8080; font-size:.85rem; }

@media (max-width:600px){
  .dtf-registrant{ padding:16px; }
  .dtf-registrant-fields .form-row-first,
  .dtf-registrant-fields .form-row-last{ float:none; width:100%; }
  .dtf-consent-policy{ max-height:150px; }
}