/*
Theme Name: Shop Local Delmarva
Theme URI: https://shoplocaldelmarva.com
Author: Shop Local Delmarva
Description: The public marketing site for Shop Local Delmarva. Carries the design system, the page templates and the Customizer media slots. Member pages are rendered by the Shop Local Delmarva — Platform plugin, not by this theme. No page builder required.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: Proprietary
Text Domain: sld
*/

/* ==========================================================================
   1. TOKENS
   Every value the design brief locks. Nothing below this block invents a
   colour, a size or a spacing step — it all references a token.
   ========================================================================== */

:root{
  /* Colour */
  --sld-green:#2F4739;
  --sld-on-green:#FFFFFF;
  --sld-green-soft:#E9EFE9;
  --sld-ink:#1B211D;
  --sld-body:#4A544D;
  --sld-muted:#77817A;
  --sld-rule:#DCE1DC;
  --sld-rule-soft:#ECEFEB;
  --sld-paper:#F7F8F6;
  --sld-card:#FFFFFF;
  --sld-gold:#B4762A;          /* RECOGNITION ONLY. Never a button, never a link. */
  --sld-signal:#8C3A2E;        /* Form errors only. */

  /* Type */
  --sld-serif:"Newsreader",Iowan Old Style,Palatino,Georgia,serif;
  --sld-sans:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --sld-t1:48px;  /* page H1 — one per page */
  --sld-t2:30px;  /* section headline */
  --sld-t3:20px;  /* the recommendation quote, lead paragraphs */
  --sld-t4:17px;  /* body */
  --sld-t5:15px;  /* secondary, captions, labels */
  --sld-t6:12px;  /* eyebrows, categories, meta */

  /* Space — 8px base */
  --sld-1:8px;   --sld-2:16px;  --sld-3:24px;  --sld-4:32px;
  --sld-5:40px;  --sld-6:48px;  --sld-8:64px;  --sld-12:96px;

  /* Shape */
  --sld-radius:4px;
  --sld-shadow:0 1px 2px rgba(27,33,29,.05), 0 8px 24px rgba(27,33,29,.07);

  /* Measure */
  --sld-max:1200px;
  --sld-text:680px;
  --sld-gutter:20px;
}

@media (max-width:767px){
  :root{ --sld-t1:34px; --sld-t2:24px; --sld-t3:19px; --sld-12:56px; --sld-8:40px; }
}

/* ==========================================================================
   2. RESET
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--sld-paper);
  color:var(--sld-body);
  font-family:var(--sld-sans);
  font-size:var(--sld-t4);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--sld-ink);text-wrap:balance;line-height:1.18}
p{margin:0 0 var(--sld-2)}
p:last-child{margin-bottom:0}
a{color:var(--sld-green);text-underline-offset:2px}
ul,ol{margin:0;padding:0}
figure{margin:0}
:focus-visible{outline:3px solid var(--sld-green);outline-offset:2px;border-radius:2px}

/* Screen-reader only */
.sld-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sld-skip{position:absolute;left:-9999px;top:0;background:var(--sld-green);color:var(--sld-on-green);padding:var(--sld-2);z-index:200}
.sld-skip:focus{left:var(--sld-2);top:var(--sld-2)}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.sld-wrap{max-width:var(--sld-max);margin-inline:auto;padding-inline:var(--sld-gutter)}
.sld-text{max-width:var(--sld-text)}
.sld-section{padding-block:var(--sld-12)}
.sld-section--tight{padding-block:var(--sld-8)}
.sld-band{background:var(--sld-green-soft)}
.sld-band--ink{background:var(--sld-green);color:rgba(255,255,255,.88)}
.sld-band--ink h1,.sld-band--ink h2,.sld-band--ink h3{color:var(--sld-on-green)}
.sld-stack{display:flex;flex-direction:column;gap:var(--sld-3)}
.sld-stack--tight{gap:var(--sld-2)}
.sld-stack--loose{gap:var(--sld-6)}
.sld-row{display:flex;flex-wrap:wrap;gap:var(--sld-2)}
.sld-grid{display:grid;gap:var(--sld-4)}
.sld-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.sld-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.sld-hr{border:0;border-top:1px solid var(--sld-rule);margin-block:var(--sld-6)}

/* ==========================================================================
   4. TYPE
   ========================================================================== */

.sld-h1{font-family:var(--sld-serif);font-size:var(--sld-t1);font-weight:700;letter-spacing:-.015em}
.sld-h2{font-family:var(--sld-serif);font-size:var(--sld-t2);font-weight:700;letter-spacing:-.01em}
.sld-h3{font-family:var(--sld-sans);font-size:var(--sld-t4);font-weight:600}
.sld-lead{font-family:var(--sld-serif);font-size:var(--sld-t3);line-height:1.5;color:var(--sld-body)}
.sld-small{font-size:var(--sld-t5)}
.sld-eyebrow{
  font-size:var(--sld-t6);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sld-muted);
}
.sld-num{font-variant-numeric:tabular-nums}
.sld-prose > * + *{margin-top:var(--sld-2)}
.sld-prose h2{margin-top:var(--sld-6)}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.sld-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sld-1);
  min-height:48px;padding:12px var(--sld-3);
  font-family:var(--sld-sans);font-size:var(--sld-t4);font-weight:600;
  text-decoration:none;border-radius:var(--sld-radius);
  border:1px solid transparent;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.sld-btn--primary{background:var(--sld-green);color:var(--sld-on-green)}
.sld-btn--primary:hover{background:#25382C}
.sld-btn--secondary{background:transparent;color:var(--sld-green);border-color:var(--sld-green)}
.sld-btn--secondary:hover{background:var(--sld-green-soft)}
.sld-btn--onink{background:var(--sld-on-green);color:var(--sld-green)}
.sld-btn--onink:hover{background:#EDF1EC}
.sld-btn--text{padding-inline:0;min-height:auto;color:var(--sld-green);text-decoration:underline}
.sld-btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* ==========================================================================
   6. THE RECOMMENDATION CARD
   The component the whole site rests on. A name, a town, one sentence.
   No stars. No avatars. No score. No quote-mark graphics.
   ========================================================================== */

.sld-rec{
  background:var(--sld-card);
  border:1px solid var(--sld-rule);
  border-radius:var(--sld-radius);
  box-shadow:var(--sld-shadow);
  padding:var(--sld-3);
}
.sld-rec__biz{font-family:var(--sld-sans);font-size:var(--sld-t4);font-weight:600;color:var(--sld-ink)}
.sld-rec__biz a{color:inherit;text-decoration:none}
.sld-rec__biz a:hover{text-decoration:underline}
.sld-rec__cat{font-size:var(--sld-t5);color:var(--sld-muted);margin-top:2px}
.sld-rec__quote{
  margin-top:var(--sld-2);padding-top:var(--sld-2);
  border-top:1px solid var(--sld-rule-soft);
  font-family:var(--sld-serif);font-size:var(--sld-t3);line-height:1.45;color:var(--sld-ink);
}
.sld-rec__who{
  display:block;margin-top:var(--sld-1);
  font-family:var(--sld-sans);font-size:var(--sld-t5);color:var(--sld-muted);
}
/* Empty state — most members will have no quote for weeks. This must look
   intentional, not like something failed to load. */
.sld-rec--noquote .sld-rec__quote{
  border-top-style:dashed;color:var(--sld-muted);
  font-family:var(--sld-sans);font-size:var(--sld-t5);font-style:normal;
}
/* Prominence: bold and one size up, IN PLACE. No box, no border, no badge,
   no tint, no label, no reordering. Emphasis only. */
.sld-rec--prominent .sld-rec__biz{font-size:calc(var(--sld-t4) + 3px);font-weight:800}

.sld-actions{display:flex;gap:var(--sld-1);margin-top:var(--sld-3)}
.sld-actions a{
  flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;
  font-size:var(--sld-t5);font-weight:600;text-decoration:none;
  border:1px solid var(--sld-rule);border-radius:var(--sld-radius);color:var(--sld-green);
}
.sld-actions a:first-child{background:var(--sld-green);color:var(--sld-on-green);border-color:var(--sld-green)}

/* ==========================================================================
   7. PROOF / STAT BLOCK
   ========================================================================== */

.sld-stat{border-top:2px solid var(--sld-ink);padding-top:var(--sld-2)}
.sld-stat__fig{
  font-family:var(--sld-serif);font-size:var(--sld-t2);font-weight:700;
  color:var(--sld-ink);font-variant-numeric:tabular-nums;line-height:1.1;
}
.sld-stat__lab{font-size:var(--sld-t5);color:var(--sld-muted);margin-top:var(--sld-1)}

/* ==========================================================================
   8. STEPS
   ========================================================================== */

.sld-steps{list-style:none;counter-reset:s;display:grid;gap:var(--sld-3)}
.sld-steps li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;gap:var(--sld-2);align-items:start}
.sld-steps li::before{
  content:counter(s);
  font-family:var(--sld-serif);font-size:var(--sld-t2);font-weight:700;
  color:var(--sld-green);line-height:1;
}
.sld-steps__done{
  margin-top:var(--sld-3);font-family:var(--sld-serif);font-size:var(--sld-t2);
  font-weight:700;color:var(--sld-ink);letter-spacing:.02em;
}

/* ==========================================================================
   9. PRICE — one column, four rows. Not three pricing cards.
   ========================================================================== */

.sld-price{border-top:2px solid var(--sld-ink);max-width:var(--sld-text)}
.sld-price__row{
  display:flex;flex-wrap:wrap;gap:var(--sld-1) var(--sld-2);
  justify-content:space-between;align-items:baseline;
  padding-block:var(--sld-2);border-bottom:1px solid var(--sld-rule);
}
.sld-price__what{font-weight:600;color:var(--sld-ink)}
.sld-price__note{display:block;font-weight:400;font-size:var(--sld-t5);color:var(--sld-muted);margin-top:2px}
.sld-price__fig{font-family:var(--sld-serif);font-size:var(--sld-t3);font-weight:700;color:var(--sld-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.sld-price__addons{margin-top:var(--sld-4)}

/* ==========================================================================
   10. FIT — two columns, equal weight. The second is not a warning box.
   ========================================================================== */

.sld-fit{display:grid;gap:var(--sld-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.sld-fit ul{list-style:none;display:grid;gap:var(--sld-2);margin-top:var(--sld-2)}
.sld-fit li{padding-left:var(--sld-3);position:relative;color:var(--sld-body)}
.sld-fit li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--sld-muted)}

/* ==========================================================================
   11. FAQ — details/summary. No JS. Content crawlable and selectable.
   ========================================================================== */

.sld-faq{max-width:var(--sld-text);border-top:1px solid var(--sld-rule)}
.sld-faq details{border-bottom:1px solid var(--sld-rule)}
.sld-faq summary{
  cursor:pointer;list-style:none;padding-block:var(--sld-2);
  font-weight:600;color:var(--sld-ink);display:flex;gap:var(--sld-2);
  justify-content:space-between;align-items:baseline;min-height:44px;
}
.sld-faq summary::-webkit-details-marker{display:none}
.sld-faq summary::after{content:"+";font-family:var(--sld-serif);font-size:var(--sld-t3);color:var(--sld-green);line-height:1}
.sld-faq details[open] summary::after{content:"–"}
.sld-faq .sld-faq__a{padding-bottom:var(--sld-3);color:var(--sld-body)}

/* ==========================================================================
   12. RECOGNITION — gold lives here and nowhere else.
   Typographic. Not a seal, not a rosette, not a ribbon.
   ========================================================================== */

.sld-fav{font-size:var(--sld-t5);color:var(--sld-gold);font-weight:600;letter-spacing:.02em}
.sld-fav__years{font-variant-numeric:tabular-nums}
.sld-callout-month{
  border-left:3px solid var(--sld-gold);padding:var(--sld-1) 0 var(--sld-1) var(--sld-3);
}
.sld-callout-month .sld-eyebrow{color:var(--sld-gold)}

/* ==========================================================================
   13. MEDIA SLOTS
   Every image on the site sits in one of these. Empty ones render a labelled
   placeholder so the designer can see exactly what is missing and where.
   ========================================================================== */

.sld-media{
  position:relative;overflow:hidden;border-radius:var(--sld-radius);
  background:var(--sld-green-soft);
}
.sld-media img{width:100%;height:100%;object-fit:cover}
.sld-media--wide{aspect-ratio:16/9}
.sld-media--portrait{aspect-ratio:4/5}
.sld-media--square{aspect-ratio:1/1}
.sld-media--phone{aspect-ratio:9/16;max-width:280px}
.sld-media__empty{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--sld-1);
  padding:var(--sld-2);text-align:center;
  border:1px dashed var(--sld-green);border-radius:var(--sld-radius);
  color:var(--sld-green);
}
.sld-media__empty b{font-size:var(--sld-t5);font-weight:600}
.sld-media__empty span{font-size:var(--sld-t6);color:var(--sld-muted);letter-spacing:.04em;text-transform:uppercase}

/* ==========================================================================
   14. HEADER / FOOTER
   ========================================================================== */

.sld-header{
  position:sticky;top:0;z-index:100;
  background:var(--sld-card);border-bottom:1px solid var(--sld-rule);
}
.sld-header__in{display:flex;align-items:center;gap:var(--sld-3);min-height:72px}
.sld-logo{font-family:var(--sld-serif);font-size:var(--sld-t3);font-weight:700;color:var(--sld-ink);text-decoration:none;letter-spacing:-.01em}
.sld-logo img{max-height:40px;width:auto}
.sld-nav{margin-left:auto}
.sld-nav ul{display:flex;gap:var(--sld-3);list-style:none;align-items:center}
.sld-nav a{color:var(--sld-body);text-decoration:none;font-size:var(--sld-t5);font-weight:500}
.sld-nav a:hover,.sld-nav .current-menu-item > a{color:var(--sld-ink);text-decoration:underline}
.sld-header .sld-btn{min-height:44px;padding:10px var(--sld-2);font-size:var(--sld-t5)}

.sld-burger{
  display:none;margin-left:auto;background:none;border:1px solid var(--sld-rule);
  border-radius:var(--sld-radius);width:44px;height:44px;cursor:pointer;
  align-items:center;justify-content:center;
}
.sld-burger span{display:block;width:20px;height:2px;background:var(--sld-ink);position:relative}
.sld-burger span::before,.sld-burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--sld-ink)}
.sld-burger span::before{top:-6px} .sld-burger span::after{top:6px}

@media (max-width:900px){
  .sld-header__in{min-height:56px}
  .sld-burger{display:flex}
  .sld-nav{
    position:fixed;inset:56px 0 0;background:var(--sld-card);
    margin:0;padding:var(--sld-4) var(--sld-gutter);
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .15s ease,transform .15s ease,visibility .15s;
    overflow-y:auto;
  }
  .sld-nav[data-open="true"]{opacity:1;visibility:visible;transform:none}
  .sld-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .sld-nav li{border-bottom:1px solid var(--sld-rule-soft)}
  .sld-nav a{display:block;padding-block:var(--sld-2);font-size:var(--sld-t3);font-family:var(--sld-serif)}
  .sld-header__cta{display:none}
}

.sld-footer{background:var(--sld-ink);color:rgba(255,255,255,.72);padding-block:var(--sld-8) var(--sld-6);margin-top:var(--sld-12)}
.sld-footer a{color:rgba(255,255,255,.88)}
.sld-footer h2{color:#fff;font-size:var(--sld-t5);font-family:var(--sld-sans);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--sld-2)}
.sld-footer ul{list-style:none;display:grid;gap:var(--sld-1)}
.sld-footer__cols{display:grid;gap:var(--sld-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.sld-footer__legal{margin-top:var(--sld-8);padding-top:var(--sld-3);border-top:1px solid rgba(255,255,255,.14);font-size:var(--sld-t5);display:flex;flex-wrap:wrap;gap:var(--sld-1) var(--sld-3);justify-content:space-between}

/* ==========================================================================
   15. HERO — sized to what it holds. Never 100vh.
   ========================================================================== */

.sld-hero{padding-block:var(--sld-8) var(--sld-12)}
.sld-hero__h{max-width:16ch}
.sld-hero__sub{margin-top:var(--sld-3);max-width:52ch}
.sld-hero__cta{display:flex;flex-wrap:wrap;gap:var(--sld-2);margin-top:var(--sld-5)}

/* ==========================================================================
   16. MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   17. PRINT
   ========================================================================== */

@media print{
  .sld-header,.sld-footer,.sld-actions{display:none}
  body{background:#fff}
}