/*
Theme Name: D Hart Mobile Screening
Theme URI: https://www.dhartmobilescreening.com
Author: Front Page VIP
Author URI: https://frontpagevip.com
Description: Custom one-page WordPress theme for D Hart Mobile Screening — on-site drug, alcohol, and DNA specimen collection services. Converted from a static HTML design.
Version: 1.4
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: dhart-mobile-screening
*/

:root{
  --maroon: #7c1a2e;
  --maroon-deep: #4c0f1e;
  --gold: #c69a3f;
  --gold-soft: #e3c988;
  --navy: #3a0f16;
  --cream: #f6efe0;
  --paper: #fffcf6;
  --ink: #211a16;
  --ink-soft: #4a4038;
  --line: rgba(33,26,22,0.14);
  --shadow: rgba(76,15,30,0.16);
  --focus: #2f6fed;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --maroon: #b7405a;
    --maroon-deep: #7c1a2e;
    --gold: #d9b45f;
    --gold-soft: #e9cf8f;
    --navy: #1c0709;
    --cream: #1a1410;
    --paper: #14100d;
    --ink: #f3ead9;
    --ink-soft: #cbbca8;
    --line: rgba(243,234,217,0.16);
    --shadow: rgba(0,0,0,0.4);
  }
}
:root[data-theme="dark"]{
  --maroon: #b7405a;
  --maroon-deep: #7c1a2e;
  --gold: #d9b45f;
  --gold-soft: #e9cf8f;
  --navy: #1c0709;
  --cream: #1a1410;
  --paper: #14100d;
  --ink: #f3ead9;
  --ink-soft: #cbbca8;
  --line: rgba(243,234,217,0.16);
  --shadow: rgba(0,0,0,0.4);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Fraunces', Georgia, serif;
  color:var(--navy);
  margin:0;
  letter-spacing:-0.01em;
}
.script{
  font-family:'Caveat', cursive;
  font-weight:700;
}
a{color:inherit;}
button{font-family:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
.wide-x{overflow-x:auto;}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

/* ---------- NAV ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  max-width:1120px; margin:0 auto;
  gap:16px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand-mark{height:44px;width:auto;flex:none;}
nav.links{display:flex; align-items:center; gap:28px;}
nav.links a{
  text-decoration:none; color:var(--ink); font-weight:600; font-size:0.95rem;
  padding:6px 2px; border-bottom:2px solid transparent;
}
nav.links a.active, nav.links a:hover{border-bottom-color:var(--gold); color:var(--maroon);}
.nav-cta{
  display:flex; align-items:center; gap:14px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:3px; font-weight:700; font-size:0.95rem;
  text-decoration:none; cursor:pointer; border:2px solid transparent;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn-primary{background:var(--maroon); color:#fff; border-color:var(--maroon);}
.btn-primary:hover{background:var(--maroon-deep); border-color:var(--maroon-deep);}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--navy);}
.btn-ghost:hover{background:var(--navy); color:#fff;}
.btn-gold{background:var(--gold); color:var(--maroon-deep); border-color:var(--gold);}
.btn-gold:hover{filter:brightness(1.06);}
.btn:active{transform:translateY(1px);}
.phone-link{font-weight:700; color:var(--maroon); text-decoration:none; white-space:nowrap;}

.menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.menu-toggle svg{width:26px;height:26px;stroke:var(--navy);}

/* ---------- VIEWS ---------- */
.view{display:none;}
.view.active{display:block;}

/* ---------- HERO ---------- */
.hero{
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(198,154,63,0.16), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  padding:64px 0 56px;
  border-bottom:1px solid var(--line);
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;
}
.eyebrow-line{
  font-family:'Fraunces', serif; font-style:italic; font-weight:600; color:var(--navy);
  font-size:1.15rem; margin-bottom:14px;
}
.eyebrow-line .accent{color:var(--maroon);}
.hero h1{font-size:clamp(2.1rem, 4vw, 3.1rem); font-weight:700; line-height:1.08;}
.hero h1 em{font-style:normal; color:var(--maroon);}
.hero p.lede{
  margin-top:20px; font-size:1.1rem; color:var(--ink-soft); max-width:46ch;
}
.hero-actions{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
.hero-tags{display:flex; gap:18px; margin-top:34px; flex-wrap:wrap;}
.hero-tags span{
  font-size:0.82rem; font-weight:700; color:var(--maroon-deep);
  display:flex; align-items:center; gap:6px;
}
.hero-tags svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:2.4;}

.hero-art{position:relative;}
.badge-ring{
  position:absolute; top:-18px; right:8px; width:118px; height:118px;
}

/* ---------- BAND: ribbon statement ---------- */
.ribbon{
  background:linear-gradient(180deg, var(--maroon-deep), var(--maroon));
  color:#fff; padding:46px 0 40px; position:relative; overflow:hidden;
  border-top:3px solid var(--gold); border-bottom:3px solid var(--gold);
}
.ribbon .wrap{position:relative; z-index:1;}
.ribbon .kicker{color:var(--gold-soft); font-weight:700; letter-spacing:0.06em; font-size:0.92rem;}
.ribbon h2{color:#fff; font-size:clamp(1.5rem,2.6vw,2.1rem); margin-top:6px; max-width:56ch;}
.ribbon .script-line{color:var(--gold-soft); font-size:clamp(2.4rem,5vw,3.4rem); margin-top:10px; line-height:1;}

/* ---------- FEATURE ROW (dividers, not cards) ---------- */
.features{padding:56px 0; border-bottom:1px solid var(--line);}
.features-intro{max-width:66ch; color:var(--ink-soft); font-size:1.05rem; margin-bottom:36px;}
.feature-row{
  display:grid; grid-template-columns:repeat(3, 1fr);
}
.feature{
  padding:0 28px; border-left:1px solid var(--line);
}
.feature:first-child{border-left:none; padding-left:0;}
.feature .num{
  font-family:'Fraunces', serif; font-weight:700; color:var(--gold); font-size:0.95rem;
  display:block; margin-bottom:10px;
}
.feature h3{font-size:1.2rem; color:var(--maroon-deep); margin-bottom:8px;}
.feature p{color:var(--ink-soft); font-size:0.96rem; margin:0;}

/* ---------- MISSION ---------- */
.mission{
  padding:64px 0; background:var(--paper); border-bottom:1px solid var(--line);
  text-align:center;
}
.mission-inner{max-width:70ch; margin:0 auto;}
.mission .rule{
  width:64px; height:3px; background:var(--gold); margin:0 auto 22px;
}
.mission .script{font-size:clamp(2rem,4vw,2.6rem); color:var(--maroon); display:block; margin-bottom:18px;}
.mission p{color:var(--ink-soft); font-size:1.08rem; margin:0 0 16px; text-align:left;}
.mission p:last-child{margin-bottom:0;}
@media (min-width:640px){
  .mission p{text-align:center;}
}

/* ---------- SERVICES ---------- */
.services{padding:60px 0; background:var(--paper); border-bottom:1px solid var(--line);}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:30px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(1.6rem,2.6vw,2.1rem);}
.service-list{
  border-top:1px solid var(--line);
}
.service-item{
  display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:20px;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.service-item .icon{
  width:44px;height:44px; border-radius:50%; background:var(--maroon);
  display:flex; align-items:center; justify-content:center;
}
.service-item .icon svg{width:22px;height:22px;stroke:#fff; fill:none; stroke-width:2;}
.service-item h3{font-size:1.15rem; color:var(--navy); margin-bottom:2px;}
.service-item p{margin:0; color:var(--ink-soft); font-size:0.94rem;}
.service-item .note{
  font-size:0.8rem; font-weight:700; color:var(--gold); text-align:right; white-space:nowrap;
}
.after-hours{
  margin-top:24px; background:var(--navy); color:#fff; border-radius:4px;
  padding:22px 26px; display:flex; align-items:center; gap:18px;
}
.after-hours svg{width:34px;height:34px; stroke:var(--gold-soft); fill:none; stroke-width:1.6; flex:none;}
.after-hours h3{color:#fff; font-size:1.05rem; margin-bottom:4px;}
.after-hours p{margin:0; color:#cfd6e6; font-size:0.9rem;}

/* ---------- INDUSTRIES ---------- */
.industries{padding:56px 0;}
.industry-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.industry{
  background:var(--paper); padding:26px 16px; text-align:center;
}
.industry svg{width:28px;height:28px; stroke:var(--maroon); fill:none; stroke-width:1.8; margin:0 auto 10px;}
.industry span{font-size:0.84rem; font-weight:600; color:var(--navy);}

/* ---------- CTA BAND ---------- */
.cta-band{
  background:var(--navy); color:#fff; padding:40px 0; border-top:3px solid var(--gold);
}
.cta-grid{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.cta-grid .script{font-size:clamp(1.6rem,3vw,2.2rem); color:var(--gold-soft);}
.cta-grid p{margin:4px 0 0; color:#cfd6e6; font-size:0.92rem;}
.cta-contact{display:flex; gap:26px; flex-wrap:wrap; font-size:0.9rem;}
.cta-contact div{display:flex; align-items:center; gap:8px;}
.cta-contact svg{width:18px;height:18px; stroke:var(--gold-soft); fill:none; stroke-width:2;}
.cta-contact a{text-decoration:none; color:#fff;}

/* ---------- FOOTER ---------- */
footer.site{
  background:var(--maroon-deep); color:var(--gold-soft); padding:26px 0; text-align:center;
  font-size:0.86rem;
}
footer.site .tagline{font-weight:700; letter-spacing:0.03em; color:#fff; margin-bottom:6px;}
.footer-links{
  display:flex; justify-content:center; flex-wrap:wrap; gap:8px 20px;
  margin-top:16px; padding-top:14px; border-top:1px solid rgba(227,201,136,0.25);
}
.footer-links a{
  color:var(--gold-soft); text-decoration:none; font-size:0.82rem; font-weight:600;
}
.footer-links a:hover, .footer-links a.active{color:#fff; text-decoration:underline;}

/* ================= SCHEDULE PAGE ================= */
.schedule-hero{
  padding:48px 0 8px;
  background:linear-gradient(180deg, var(--paper), var(--cream));
  border-bottom:1px solid var(--line);
}
.schedule-hero h1{font-size:clamp(1.8rem,3.2vw,2.5rem);}
.schedule-hero p{color:var(--ink-soft); max-width:60ch; margin-top:12px; font-size:1.02rem;}

.schedule-wrap{padding:44px 0 80px;}
.schedule-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;
}
.panel{
  background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:28px;
}
.panel h2{font-size:1.3rem; margin-bottom:6px; color:var(--navy);}
.panel .sub{color:var(--ink-soft); font-size:0.9rem; margin-bottom:22px;}

/* form */
.field{margin-bottom:18px;}
.field label{display:block; font-size:0.84rem; font-weight:700; color:var(--navy); margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:3px;
  background:var(--cream); color:var(--ink); font-family:inherit; font-size:0.95rem;
}
.field textarea{resize:vertical; min-height:88px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.selection-summary{
  background:var(--cream); border:1px dashed var(--gold); border-radius:3px;
  padding:14px 16px; font-size:0.88rem; margin-bottom:20px; color:var(--ink-soft);
}
.selection-summary strong{color:var(--maroon-deep);}

.consent-field{margin-bottom:14px;}
.consent-label{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font-size:0.86rem; font-weight:400; color:var(--ink-soft); text-transform:none; letter-spacing:normal;
}
.consent-label input[type="checkbox"]{
  margin-top:3px; width:17px; height:17px; flex:none; accent-color:var(--maroon); cursor:pointer;
}
.consent-label a{color:var(--maroon); font-weight:600; text-decoration:underline;}

/* calendar */
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.cal-head h3{font-size:1.05rem; color:var(--navy); font-family:'Fraunces',serif;}
.cal-nav{display:flex; gap:6px;}
.cal-nav button{
  width:32px;height:32px; border-radius:50%; border:1px solid var(--line); background:var(--paper);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.cal-nav button svg{width:16px;height:16px; stroke:var(--navy); fill:none; stroke-width:2.2;}
.cal-nav button:disabled{opacity:0.35; cursor:not-allowed;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center;}
.cal-dow{font-size:0.72rem; font-weight:700; color:var(--ink-soft); padding-bottom:6px;}
.cal-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  border-radius:50%; font-size:0.88rem; cursor:pointer; border:1px solid transparent;
  color:var(--ink);
}
.cal-day.pad{visibility:hidden; cursor:default;}
.cal-day.disabled{color:var(--line); cursor:not-allowed;}
.cal-day:not(.disabled):not(.pad):hover{border-color:var(--gold);}
.cal-day.selected{background:var(--maroon); color:#fff; font-weight:700;}
.cal-day.today:not(.selected){border-color:var(--navy);}

.slots{margin-top:22px;}
.slots h4{font-size:0.85rem; color:var(--navy); margin-bottom:10px; font-weight:700;}
.slot-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.slot{
  padding:9px 6px; text-align:center; border:1px solid var(--line); border-radius:3px;
  background:var(--cream); font-size:0.85rem; cursor:pointer;
}
.slot:hover{border-color:var(--gold);}
.slot.selected{background:var(--maroon); color:#fff; border-color:var(--maroon);}
.slot-empty{color:var(--ink-soft); font-size:0.86rem;}

.confirm-box{
  display:none; margin-top:20px; background:var(--navy); color:#fff; border-radius:4px; padding:18px 20px;
  font-size:0.9rem;
}
.confirm-box.show{display:block;}
.confirm-box strong{color:var(--gold-soft);}

/* ================= GENERIC PAGE TEMPLATE (page.php) ================= */
.page-hero{
  padding:48px 0 32px;
  background:linear-gradient(180deg, var(--paper), var(--cream));
  border-bottom:1px solid var(--line);
}
.page-hero h1{font-size:clamp(1.8rem,3.2vw,2.5rem);}

.page-body{padding:44px 0 80px;}
.entry-content{max-width:74ch; font-size:1.05rem; color:var(--ink);}
.entry-content h2{font-size:clamp(1.4rem,2.4vw,1.8rem); margin:40px 0 14px;}
.entry-content h2:first-child{margin-top:0;}
.entry-content h3{font-size:1.2rem; color:var(--maroon-deep); margin:28px 0 10px;}
.entry-content p{margin:0 0 18px; color:var(--ink-soft); line-height:1.65;}
.entry-content a{color:var(--maroon); text-decoration:underline;}
.entry-content ul, .entry-content ol{margin:0 0 18px; padding-left:1.4em; color:var(--ink-soft);}
.entry-content li{margin-bottom:6px;}
.entry-content blockquote{
  margin:24px 0; padding:6px 0 6px 20px; border-left:3px solid var(--gold);
  font-family:'Fraunces', serif; font-style:italic; color:var(--navy);
}
.entry-content img{border-radius:4px; margin:20px 0;}
.entry-content figure{margin:20px 0;}
.entry-content figcaption{font-size:0.85rem; color:var(--ink-soft); margin-top:6px;}
.entry-content hr{border:none; border-top:1px solid var(--line); margin:32px 0;}
.entry-content table{width:100%; border-collapse:collapse; margin:0 0 20px;}
.entry-content th, .entry-content td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-art{order:-1; max-width:280px; margin:0 auto;}
  .feature-row{grid-template-columns:1fr; row-gap:24px;}
  .feature{border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:20px;}
  .feature:first-child{border-top:none; padding-top:0;}
  .industry-grid{grid-template-columns:repeat(2,1fr);}
  .schedule-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  nav.links{display:none;}
  .menu-toggle{display:block;}
  .nav-cta .phone-link span.label{display:none;}
}
@media (max-width:880px){
  nav.links.mobile-open{
    display:flex; position:absolute; top:100%; left:0; right:0; background:var(--paper);
    flex-direction:column; padding:18px 24px; border-bottom:1px solid var(--line); gap:16px;
    box-shadow:0 12px 24px var(--shadow);
  }
}
@media (max-width:520px){
  .slot-grid{grid-template-columns:repeat(2,1fr);}
  .cta-grid{flex-direction:column; align-items:flex-start;}
}