/*
Theme Name: Vine and Fig Living
Theme URI: https://vineandfigliving.com
Author: Vine and Fig Living
Description: Custom theme for Vine and Fig Living — sober living and recovery housing in the Dallas-Fort Worth area. Forest green palette, Poppins/Inter typography, five-page structure.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vine-and-fig
*/

/* ============================================================
   VINE & FIG LIVING — shared stylesheet
   Palette: warm white canvas, forest green primary,
   sage + soft gold accents, deep slate text.
   Type: Poppins (headings) / Inter (body)
   ============================================================ */

:root{
  /* Canvas & text */
  --canvas:      #F9F8F6;  /* Warm White */
  --canvas-alt:  #FDFBF7;  /* Soft Cream */
  --ink:         #2E332F;  /* Deep Slate — body copy */
  --ink-soft:    #5C635B;  /* Muted body text */
  --ink-head:    #253A29;  /* Headings — deep forest slate */

  /* Brand */
  --forest:      #355E3B;  /* Forest Green — primary */
  --forest-deep: #2A4B30;  /* Darkened for white text (AA) */
  --forest-dark: #26362A;  /* Footer / deep panels */
  --sage:        #7E9179;  /* Sage Green */
  --sage-light:  #C7D0BE;  /* Light sage */
  --gold:        #B8974E;  /* Soft Gold — accent only */
  --gold-soft:   #E7DCC2;  /* Gold tint */
  --linen:       #EAE6DD;  /* Soft Gray-Linen */
  --taupe:       #8C8B82;  /* Muted label gray */

  --line:        #E3DFD8;
  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 1px 2px rgba(46,51,47,.04), 0 8px 24px rgba(46,51,47,.06);

  --display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1140px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--forest-deep); }

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink-head);
  font-weight:600;
  line-height:1.22;
  letter-spacing:-.015em;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.15rem, 4.8vw, 3.3rem); }
h2{ font-size:clamp(1.7rem, 3.2vw, 2.4rem); }
h3{ font-size:1.2rem; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
section{ padding:clamp(56px, 8vw, 104px) 0; scroll-margin-top:90px; }

.eyebrow{
  font-family:var(--body);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--forest-deep);
  margin:0 0 14px;
}
.lede{ font-size:1.12rem; color:var(--ink-soft); max-width:62ch; }
.section-head{ max-width:64ch; margin-bottom:clamp(32px,4vw,52px); }
.center{ text-align:center; margin-inline:auto; }

/* skip link */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--body); font-size:.97rem; font-weight:600;
  padding:14px 26px; border-radius:var(--radius-sm);
  border:1.5px solid transparent; text-decoration:none; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--forest-deep); color:#fff; }
.btn-primary:hover{ background:#1F3A24; }
.btn-ghost{ background:transparent; color:var(--ink-head); border-color:var(--taupe); }
.btn-ghost:hover{ background:var(--linen); border-color:var(--ink-head); }
.btn-gold{ background:var(--gold); color:#231C08; }
.btn-gold:hover{ background:#A6863F; }
.btn-lg{ padding:17px 34px; font-size:1.02rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- Image placeholders ---------- */
.ph{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(53,94,59,.08) 0 2px, transparent 2px 12px),
    linear-gradient(150deg, var(--linen), var(--gold-soft));
  border:1px solid var(--line);
  display:grid; place-items:center; min-height:220px;
}
.ph span{
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#736E60; background:rgba(249,248,246,.85);
  padding:8px 14px; border-radius:99px; text-align:center; max-width:80%;
}
.ph-tall{ min-height:clamp(320px, 44vw, 500px); }
.ph-wide{ min-height:clamp(240px, 30vw, 340px); }

/* ---------- Utility bar ---------- */
.util{ background:var(--forest-dark); color:#E7E9E3; font-size:.82rem; }
.util .wrap{ display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; justify-content:space-between; padding-block:9px; }
.util a{ color:#E7E9E3; text-decoration:none; font-weight:600; }
.util a:hover{ text-decoration:underline; }
.util-status{ display:inline-flex; align-items:center; gap:9px; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--sage-light); box-shadow:0 0 0 3px rgba(199,208,190,.25); }

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(249,248,246,.93);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{ display:flex; align-items:center; gap:20px; padding-block:14px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; }
.brand svg{ flex:none; }
.brand-name{ font-family:var(--display); font-size:1.18rem; color:var(--ink-head); line-height:1.05; font-weight:600; letter-spacing:-.01em; }
.brand-sub{ display:block; font-family:var(--body); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); font-weight:700; margin-top:4px; }

nav.main{ display:flex; align-items:center; gap:28px; }
nav.main a{
  color:var(--ink); text-decoration:none; font-size:.94rem; font-weight:500;
  padding:6px 0; border-bottom:2px solid transparent;
}
nav.main a:hover{ color:var(--forest-deep); border-bottom-color:var(--sage); }
nav.main a[aria-current="page"]{ color:var(--forest-deep); border-bottom-color:var(--forest); font-weight:600; }

/* mobile menu — JS-free, uses <details> */
.mnav{ position:relative; display:none; }
.mnav > summary{
  list-style:none; cursor:pointer; width:46px; height:46px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; display:grid; place-items:center; color:var(--ink-head);
}
.mnav > summary::-webkit-details-marker{ display:none; }
.mnav-panel{
  position:absolute; right:0; top:calc(100% + 12px); z-index:60;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:10px; min-width:236px; display:grid; gap:2px;
}
.mnav-panel a{
  padding:12px 15px; border-radius:var(--radius-sm); text-decoration:none;
  color:var(--ink); font-weight:500; font-size:.97rem;
}
.mnav-panel a:hover{ background:var(--linen); color:var(--ink-head); }

/* ---------- Hero (home) ---------- */
.hero{ padding-top:clamp(48px,6vw,80px); padding-bottom:clamp(48px,6vw,88px); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center; }
.hero h1{ margin-bottom:.35em; }
.hero .lede{ font-size:1.18rem; }
.hero .btn-row{ margin-top:32px; }
.hero-note{ margin-top:18px; font-size:.88rem; color:var(--taupe); }

.badge{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--linen); border:1px solid #DCD6C9;
  padding:7px 15px 7px 11px; border-radius:99px;
  font-size:.8rem; font-weight:600; color:var(--ink-head); margin-bottom:24px;
}
.badge .dot{ background:var(--forest); box-shadow:0 0 0 3px rgba(53,94,59,.18); }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  background:linear-gradient(180deg, var(--canvas-alt), var(--canvas));
  border-bottom:1px solid var(--line);
  padding:clamp(44px,6vw,76px) 0 clamp(40px,5vw,64px);
}
.page-hero h1{ margin-bottom:.3em; }
.page-hero .lede{ font-size:1.15rem; }
.page-hero .inner{ max-width:66ch; }

/* ---------- Trust strip ---------- */
.trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--canvas-alt); padding:26px 0; }
.trust .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px 40px; }
.trust-item{ display:flex; align-items:baseline; gap:10px; font-size:.9rem; color:var(--ink-soft); }
.trust-num{ font-family:var(--display); font-size:1.6rem; color:var(--ink-head); font-weight:600; }
.trust-label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); font-weight:700; }

/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap:22px; }
.g2{ grid-template-columns:1fr 1fr; }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 28px; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.card h3{ margin-bottom:.45em; }
.card p{ color:var(--ink-soft); font-size:.96rem; }
.card .card-link{
  margin-top:auto; padding-top:18px; font-weight:600; font-size:.92rem;
  text-decoration:none; color:var(--forest-deep);
}
.card .card-link:hover{ text-decoration:underline; }

.card-forest{ border-top:3px solid var(--forest); }
.card-sage{ border-top:3px solid var(--sage); }
.card-gold{ border-top:3px solid var(--gold); }

.icon{
  width:44px; height:44px; border-radius:10px; display:grid; place-items:center;
  background:var(--linen); margin-bottom:18px; color:var(--forest-deep); flex:none;
}
.icon svg{ width:22px; height:22px; }

/* ---------- Bands ---------- */
.band-linen{ background:var(--canvas-alt); border-block:1px solid var(--line); }
.band-gold{ background:linear-gradient(180deg, #F5F0E2, #EFE8D6); }
.band-forest{ background:var(--forest-dark); color:#E4E8E1; }
.band-forest h2, .band-forest h3{ color:#fff; }
.band-forest p{ color:#CBD3C6; }
.band-forest .eyebrow{ color:var(--sage-light); }
.band-forest .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.42); }
.band-forest .btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

/* split section */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; }

.checks{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.checks li{ display:flex; gap:13px; align-items:flex-start; font-size:.98rem; }
.checks svg{ flex:none; margin-top:4px; color:var(--forest-deep); }
.band-forest .checks li{ color:#D9E0D5; }
.band-forest .checks svg{ color:var(--sage-light); }

/* ---------- Steps (real sequence only) ---------- */
.steps{ counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.step{ position:relative; padding-top:22px; border-top:2px solid var(--sage-light); }
.step::before{
  counter-increment:step; content:"0" counter(step);
  font-family:var(--display); font-size:.92rem; font-weight:700; color:var(--forest-deep);
  letter-spacing:.06em; display:block; margin-bottom:10px;
}
.step h3{ font-size:1.1rem; }
.step p{ color:var(--ink-soft); font-size:.95rem; margin:0; }

/* ---------- Value list (About) ---------- */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.value{
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--sage);
  border-radius:var(--radius-sm); padding:22px 24px;
}
.value h3{ font-size:1.05rem; margin-bottom:.35em; }
.value p{ color:var(--ink-soft); font-size:.94rem; margin:0; }

/* ---------- Quote ---------- */
.quote{ max-width:820px; margin-inline:auto; text-align:center; }
.quote blockquote{
  margin:0 0 26px; font-family:var(--display); font-weight:500;
  font-size:clamp(1.3rem,2.5vw,1.75rem);
  line-height:1.45; color:var(--ink-head);
}
.quote-mark{ font-family:var(--display); font-size:3rem; color:var(--gold); line-height:1; display:block; margin-bottom:4px; }
.quote cite{ font-style:normal; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); font-weight:700; }

/* ---------- FAQ / disclosure ---------- */
.faq{ max-width:820px; margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--line); padding:20px 0; }
.faq summary{
  cursor:pointer; list-style:none; font-family:var(--display); font-size:1.08rem;
  color:var(--ink-head); font-weight:600; display:flex; justify-content:space-between; gap:20px; align-items:center;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.5rem; color:var(--forest-deep); line-height:1; font-family:var(--body); }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:14px 0 0; color:var(--ink-soft); font-size:.97rem; max-width:70ch; }

/* ---------- Forms ---------- */
.form-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(26px,4vw,40px); box-shadow:var(--shadow);
}
.field{ display:grid; gap:7px; margin-bottom:18px; }
.field label{ font-size:.88rem; font-weight:600; color:var(--ink-head); }
.field .hint{ font-size:.8rem; color:var(--taupe); font-weight:400; }
.field input, .field textarea, .field select{
  font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--canvas-alt); border:1.5px solid var(--line);
  border-radius:var(--radius-sm); padding:13px 15px; width:100%;
  transition:border-color .18s ease, background .18s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--forest); background:#fff; outline:none;
}
.field textarea{ min-height:132px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.form-note{ font-size:.84rem; color:var(--taupe); margin-top:14px; }

/* ---------- Final CTA ---------- */
.cta-final{ background:var(--linen); border-radius:var(--radius); padding:clamp(38px,5vw,64px); text-align:center; }
.cta-final .lede{ margin-inline:auto; }

/* ---------- Contact details ---------- */
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:22px; }
.contact-list dt{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); font-weight:700; margin-bottom:5px; }
.contact-list dd{ margin:0; font-size:1.02rem; color:var(--ink); }
.contact-list dd a{ text-decoration:none; font-weight:600; }
.contact-list dd a:hover{ text-decoration:underline; }

/* ---------- Footer ---------- */
footer.site{ background:var(--forest-dark); color:#D3D8CF; padding-top:clamp(48px,6vw,76px); font-size:.92rem; }
footer.site h4{ color:#fff; font-family:var(--body); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:16px; }
footer.site a{ color:#D3D8CF; text-decoration:none; }
footer.site a:hover{ color:#fff; text-decoration:underline; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; }
.foot-list{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.foot-brand .brand-name{ color:#fff; }
.foot-brand .brand-sub{ color:#9EA79A; }
.verse{
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
  padding:30px 0; text-align:center;
}
.verse p{ font-family:var(--display); font-style:italic; font-weight:400; font-size:1.02rem; color:#E2E7DE; max-width:62ch; margin-inline:auto; }
.verse cite{ display:block; font-style:normal; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#9EA79A; margin-top:12px; font-family:var(--body); font-weight:700; }
.legal{ display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between; padding:24px 0 30px; font-size:.82rem; color:#9EA79A; }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero-grid,.split,.g4{ grid-template-columns:1fr; }
  .g4{ grid-template-columns:1fr 1fr; }
  .hero-media{ order:-1; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .values{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  nav.main{ display:none; }
  .mnav{ display:block; }
  .g3,.steps,.g2{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .g4,.values{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .btn-row .btn{ width:100%; }
  .trust .wrap{ justify-content:flex-start; }
  header.site .btn-primary{ padding:12px 18px; font-size:.9rem; }
  .util .wrap{ justify-content:center; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}