/*
Theme Name: Southern Anchor Starter
Author: Southern Anchor
Description: Code-first classic starter theme for Southern Anchor.
Version: 1.0.0
*/

/* --- Southern Anchor: Home Offers section --- */
.sa-container{
  width: min(1100px, calc(100% - 2rem));
  margin-inline: auto;
}
.sa-section{
  padding: 4rem 0;
}
.sa-section__header{
  margin-bottom: 2rem;
}
.sa-kicker{
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
  opacity: .75;
  margin: 0 0 .5rem;
}
.sa-h2{
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 .75rem;
}
.sa-lead{
  max-width: 60ch;
  margin: 0;
  opacity: .9;
}
.sa-grid{
  display: grid;
  gap: 1rem;
}
.sa-grid--3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sa-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 1.25rem;
}
.sa-h3{
  margin: 0 0 .5rem;
  font-size: 1.1rem;
}
.sa-cta{
  margin-top: 1.75rem;
}
.sa-btn{
  display: inline-block;
  padding: .85rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.15);
  text-decoration: none;
}
@media (max-width: 900px){
  .sa-grid--3{ grid-template-columns: 1fr; }
}

/* =========================================================
   Southern Anchor – Section system + Offers styling
   ========================================================= */

:root{
  --sa-container: 1100px;
  --sa-radius: 16px;
  --sa-border: rgba(0,0,0,.10);
  --sa-muted: rgba(0,0,0,.70);
  --sa-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* Container + section spacing */
.sa-container{
  width: min(var(--sa-container), calc(100% - 2rem));
  margin-inline: auto;
}

.sa-section{
  padding: clamp(3rem, 4vw, 5rem) 0;
}

/* Header spacing */
.sa-section__header{
  margin-bottom: 1.75rem;
  max-width: 70ch;
}

.sa-kicker{
  margin: 0 0 .5rem;
  font-size: .85rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--sa-muted);
}

.sa-h2{
  margin: 0 0 .75rem;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  line-height: 1.15;
}

.sa-lead{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--sa-muted);
}

/* Grid */
.sa-grid{
  display: grid;
  gap: 1rem;
}

.sa-grid--3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px){
  .sa-grid--3{ grid-template-columns: 1fr; }
}

/* Offers section specific */
.sa-offers{
  border-top: 1px solid rgba(0,0,0,.06);
}

.sa-offers .sa-card{
  background: #fff;
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius);
  padding: 1.25rem 1.25rem 1.35rem;
  box-shadow: var(--sa-shadow);
}

.sa-offers .sa-h3{
  margin: 0 0 .5rem;
  font-size: 1.05rem;
  line-height: 1.2;
}

.sa-offers .sa-card p{
  margin: 0;
  color: var(--sa-muted);
  line-height: 1.55;
}

/* CTA */
.sa-cta{
  margin-top: 1.75rem;
}

.sa-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  text-decoration: none;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease;
}

.sa-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}

/* =========================================================
   Southern Anchor – Warm "southern comfort" polish
   (subtle, neutral, not overwhelming)
   ========================================================= */

/* Warm band behind the Offers section */
.sa-offers{
  background: #fbf7f1; /* warm off-white */
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  position: relative;
}

/* Ultra-subtle linen texture (barely visible) */
.sa-offers::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .10; /* keep it subtle */
  background-image:
    radial-gradient(rgba(0,0,0,.12) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.08) 1px, transparent 1px);
  background-size: 14px 14px, 18px 18px;
  background-position: 0 0, 6px 8px;
}

/* Ensure content sits above texture */
.sa-offers .sa-container{
  position: relative;
  z-index: 1;
}

/* Warm up the cards slightly */
.sa-offers .sa-card{
  background: rgba(255,255,255,.90);
  border-color: rgba(60,40,20,.14);
  box-shadow: 0 12px 26px rgba(30,20,10,.08);
}

/* Make kicker slightly warmer, still subtle */
.sa-offers .sa-kicker{
  color: rgba(60,40,20,.65);
}

/* Improve spacing between hero and offers (gentle separation) */
.sa-offers{
  padding-top: clamp(3.25rem, 4.5vw, 5.25rem);
  padding-bottom: clamp(3.25rem, 4.5vw, 5.25rem);
}

/* Soft fade divider under hero (only if hero uses .sa-hero) */
.sa-hero{
  position: relative;
}

.sa-hero::after{
  content: "";
  display: block;
  height: 36px;
  margin-top: 2.5rem;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.04));
  opacity: .25;
}

/* =========================================================
   Southern Anchor – Darker, calmer offers band
   ========================================================= */

.sa-offers{
  background: #f1ede6; /* warm parchment, darker than white */
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
  position: relative;
}

/* Remove noticeable texture – keep it universal */
.sa-offers::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.02),
    rgba(0,0,0,.04)
  );
  opacity: .35;
}

/* Keep content clean above background */
.sa-offers .sa-container{
  position: relative;
  z-index: 1;
}

/* Cards stay lighter so text is the focal point */
.sa-offers .sa-card{
  background: #fafafa;
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

/* Slightly deepen kicker color */
.sa-offers .sa-kicker{
  color: rgba(40,30,20,.65);
}

/* =========================================================
   Global background comfort (very subtle)
   ========================================================= */

body{
  background-color: #f8f6f2; /* warm neutral, not gray */
}

/* How It Works – calm and professional */
.sa-how-it-works{
  background: transparent;
}

.sa-how-it-works .sa-card{
  background: #fafafa;
}

/* Pricing preview – calm, confident, warm-neutral */
.sa-pricing-preview{
  background: transparent;
}

.sa-pricing-box{
  max-width: 720px;
  margin-inline: auto;
  padding: 1.75rem;
}

.sa-price{
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin-bottom: .5rem;
}

.sa-price__currency{
  font-size: 1.25rem;
  opacity: .8;
}

.sa-price__amount{
  font-size: clamp(2.4rem, 4.2vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
}

.sa-price__unit{
  font-size: 1rem;
  opacity: .75;
}

.sa-price__note{
  margin: 0 0 1rem;
  color: rgba(40,30,20,.7);
}

.sa-list{
  margin: 0;
  padding-left: 1.1rem;
  color: rgba(40,30,20,.82);
}

.sa-list li{
  margin: .35rem 0;
}

/* =========================================================
   Pricing preview – card sizing + readability
   ========================================================= */

.sa-pricing-box{
  max-width: 860px;          /* bigger than before */
  padding: 2.25rem;          /* more breathing room */
  border-radius: 18px;
}

.sa-price{
  justify-content: center;   /* center the price line */
}

.sa-price__amount{
  font-size: clamp(2.75rem, 4.8vw, 3.4rem);
}

.sa-price__note{
  text-align: center;
  margin-top: .25rem;
  margin-bottom: 1.25rem;
}

/* Put bullets in a nice readable list */
.sa-pricing-preview .sa-list{
  max-width: 560px;
  margin: 0.75rem auto 0;
  padding-left: 1.15rem;
  text-align: left;
}

.sa-pricing-preview .sa-list li{
  margin: .45rem 0;
}

/* =========================================================
   Alternating calm section bands (same palette)
   ========================================================= */

.sa-how-it-works{
  background: transparent;
}

.sa-pricing-preview{
  background: #f1ede6; /* same warm parchment as offers */
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* =========================================================
   Final CTA – calm, southern-comfort close
   ========================================================= */

.sa-final-cta{
  background: #eae3d8; /* slightly deeper warm band */
  border-top: 1px solid rgba(0,0,0,.06);
  padding-top: clamp(3rem, 4.5vw, 5rem);
  padding-bottom: clamp(3rem, 4.5vw, 5rem);
}

.sa-final-cta__inner{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 2rem;
  align-items: center;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 2rem;
}

.sa-final-cta__actions{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: stretch;
}

.sa-btn--primary{
  background: #111;
  color: #fff;
  border: 1px solid #111;
}

.sa-btn--ghost{
  background: transparent;
  border: 1px solid rgba(0,0,0,.25);
}

@media (max-width: 860px){
  .sa-final-cta__inner{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Southern Anchor – Unified palette (based on Final CTA look)
   ========================================================= */

/* Global parchment background */
body{
  background: #eae3d8; /* matches Final CTA palette */
}

/* Default section band look */
.sa-section{
  background: #eae3d8;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Give inner containers a soft "paper" panel where needed */
.sa-section .sa-container{
  position: relative;
}

/* Cards: keep light + clean for readability */
.sa-card{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  border-radius: 16px;
}

/* Kicker: warm, subtle */
.sa-kicker{
  color: rgba(40,30,20,.62);
}

/* --- Section-specific tweaks (keep consistent, not identical) --- */

/* Hero should feel slightly lighter so it "opens" the page */
.sa-hero{
  background: rgba(255,255,255,.35);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Offers: remove old texture and keep it clean */
.sa-offers::before{
  content: none !important;
}

/* Pricing preview: keep same band as everything, just spacing */
.sa-pricing-preview{
  background: #eae3d8;
}

/* How it works: same unified band */
.sa-how-it-works{
  background: #eae3d8;
}

/* Final CTA: keep its special "panel inside a band" look */
.sa-final-cta{
  background: #eae3d8;
}

/* The inner CTA panel stays slightly brighter for focus */
.sa-final-cta__inner{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
}

/* Buttons keep contrast */
.sa-btn--primary{
  background: #111;
  color: #fff;
  border: 1px solid #111;
}

.sa-btn--ghost{
  background: transparent;
  border: 1px solid rgba(0,0,0,.25);
}

/* =========================================================
   Palette polish – remove section borders for smoother flow
   ========================================================= */
.sa-section{
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* =========================================================
   Palette polish – hero band uses same parchment family
   ========================================================= */
.sa-hero{
  background: #f1ede6 !important; /* lighter parchment, same family */
}

/* =========================================================
   Hero band color – hard unify (kills gradients/overlays)
   ========================================================= */

/* Match the rest of the page exactly */
.sa-hero,
.sa-hero *{
  background-color: transparent;
}

/* Force hero band to the same parchment as other sections */
.sa-hero{
  background: #eae3d8 !important;
}

/* If your hero has an inner wrapper with its own bg/gradient, force it too */
.sa-hero .sa-container,
.sa-hero .sa-hero__inner,
.sa-hero .sa-hero__wrap{
  background: transparent !important;
}

/* Remove any ::before/::after overlays that might be tinting the hero */
.sa-hero::before,
.sa-hero::after{
  content: none !important;
  display: none !important;
}

/* =========================================================
   Southern Anchor – Alternating band system (Hero white)
   Pattern:
   1) Hero: White
   2) Off-white
   3) Cream
   4) Off-white
   5) Cream ...
   ========================================================= */

/* 1) Undo the prior "wipe all hero backgrounds" rule that affected buttons */
.sa-hero,
.sa-hero *{
  background-color: unset !important;
}

/* 2) Brand band colors */
:root{
  --sa-band-white: #ffffff;
  --sa-band-offwhite: #f7f4ee;
  --sa-band-cream: #eae3d8;
  --sa-band-border: rgba(0,0,0,.06);
}

/* 3) Stripe borders back on (subtle separators) */
.sa-section{
  border-top: 1px solid var(--sa-band-border);
  border-bottom: 1px solid var(--sa-band-border);
}

/* 4) Hero is always white */
.sa-hero{
  background: var(--sa-band-white) !important;
}

/* 5) Alternating bands for the rest of sections in DOM order
      (Assumes all sections use .sa-section and are siblings) */
.sa-section:nth-of-type(2){ background: var(--sa-band-offwhite) !important; }
.sa-section:nth-of-type(3){ background: var(--sa-band-cream) !important; }
.sa-section:nth-of-type(4){ background: var(--sa-band-offwhite) !important; }
.sa-section:nth-of-type(5){ background: var(--sa-band-cream) !important; }
.sa-section:nth-of-type(6){ background: var(--sa-band-offwhite) !important; }
.sa-section:nth-of-type(7){ background: var(--sa-band-cream) !important; }

/* 6) Keep cards readable (paper look) */
.sa-card{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

/* 7) Button colors restored */
.sa-btn{
  background: transparent;
  color: #111;
  border: 1px solid rgba(0,0,0,.25);
}

.sa-btn--primary{
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
}

.sa-btn--ghost{
  background: transparent !important;
  color: #111 !important;
  border-color: rgba(0,0,0,.25) !important;
}

/* =========================================================
   Southern Anchor – Band System v1 (CLEAN RESET)
   Goal: White → Cream → White → Cream…
   Hero (white), Offers (cream), How (white), Pricing (cream)
   ========================================================= */

:root{
  --sa-white: #ffffff;
  --sa-cream: #eae3d8;
  --sa-divider: rgba(0,0,0,.06);
}

/* Base page background */
body{ background: var(--sa-white); }

/* Make container transparent so bands are full-width */
.sa-container{ background: transparent !important; }

/* Default: sections are white */
.sa-section{ background: var(--sa-white); }

/* Alternating bands (explicit by section class) */
.sa-hero{ background: var(--sa-white); }
.sa-offers{ background: var(--sa-cream); }
.sa-how-it-works{ background: var(--sa-white); }
.sa-pricing-preview{ background: var(--sa-cream); }
.sa-final-cta{ background: var(--sa-white); }

/* Subtle separators (optional, keep it classy) */
.sa-section + .sa-section{
  border-top: 1px solid var(--sa-divider);
}

/* =========================================================
   Band System v1.1 (Correct)
   - Cards always white
   - Only full-width section bands alternate
   ========================================================= */

/* Ensure the overall page wrapper isn't painting everything cream */
.sa-main{
  background: var(--sa-white) !important;
}

/* Full-width bands belong to the SECTION, not the container */
.sa-section,
.sa-hero,
.sa-offers,
.sa-how-it-works,
.sa-pricing-preview,
.sa-final-cta{
  background: var(--sa-white) !important;
}

/* Alternate bands (Hero starts white, Offers starts cream) */
.sa-offers{ background: var(--sa-cream) !important; }
.sa-pricing-preview{ background: var(--sa-cream) !important; }

/* Inner container should never paint band color */
.sa-container{
  background: transparent !important;
}

/* Cards/boxes ALWAYS white */
.sa-card,
.sa-pricing-box{
  background: #fff !important;
}

/* Optional subtle separators */
.sa-section + .sa-section{
  border-top: 1px solid var(--sa-divider) !important;
}


/* =========================================================
   Southern Anchor – FINAL OVERRIDE (bands + cards)
   This block wins over any earlier CSS.
   ========================================================= */

/* Keep the overall page neutral */
body,
main.sa-main{
  background: #ffffff !important;
}

/* Full-width section bands */
main.sa-main > section.sa-section{
  background: #ffffff !important;
}

/* Alternate bands: Offers + Pricing = cream */
main.sa-main > section.sa-section.sa-offers,
main.sa-main > section.sa-section.sa-pricing-preview{
  background: #eae3d8 !important;
}

/* White sections explicitly */
main.sa-main > section.sa-section.sa-hero,
main.sa-main > section.sa-section.sa-how-it-works,
main.sa-main > section.sa-section.sa-final-cta{
  background: #ffffff !important;
}

/* Ensure inner wrapper does NOT create boxed panels */
main.sa-main > section.sa-section .sa-container{
  background: transparent !important;
}

/* Cards MUST stay white */
main.sa-main .sa-card,
main.sa-main .sa-pricing-box,
main.sa-main .sa-card * ,
main.sa-main .sa-pricing-box *{
  background-color: transparent;
}

main.sa-main .sa-card,
main.sa-main .sa-pricing-box{
  background: #ffffff !important;
}

/* Optional separators */
main.sa-main > section.sa-section + section.sa-section{
  border-top: 1px solid rgba(0,0,0,.06) !important;
}


/* ===== Southern Anchor: Band + Card Final Overrides (palette + borders) ===== */
:root{
  --sa-band-cream: #E7E5DF;   /* matches the “second photo” */
  --sa-band-white: #FFFFFF;
  --sa-card-bg:    #FFFFFF;
  --sa-card-border:#DEDAD3;  /* subtle warm-gray border */
}

/* Only the full-width bands get background color */
main.sa-main > section.sa-section{
  background: var(--sa-band-white) !important;
}

/* Cream bands (adjust this list if you want different sections cream) */
main.sa-main > section.sa-section.sa-offers,
main.sa-main > section.sa-section.sa-pricing-preview{
  background: var(--sa-band-cream) !important;
}

/* Containers must never create “boxed panels” */
.sa-container{
  background: transparent !important;
}

/* Cards/boxes always white + borders back */
.sa-card,
.sa-pricing-box{
  background: var(--sa-card-bg) !important;
  border: 1px solid var(--sa-card-border) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.06) !important;
}


/* ===== Southern Anchor FINAL Palette Lock ===== */
:root{
  --sa-band-white: #FFFFFF;
  --sa-band-cream: #F1EEE7;   /* approved warm cream */
  --sa-card-bg:    #FFFFFF;
  --sa-card-border:#DDD6CB;   /* warm, subtle border */
}

/* Full-width bands ONLY */
main.sa-main > section.sa-section{
  background: var(--sa-band-white) !important;
}

/* Cream sections */
main.sa-main > section.sa-section.sa-offers,
main.sa-main > section.sa-section.sa-pricing-preview{
  background: var(--sa-band-cream) !important;
}

/* Containers must stay invisible */
.sa-container{
  background: transparent !important;
}

/* Cards always white with borders */
.sa-card,
.sa-pricing-box{
  background: var(--sa-card-bg) !important;
  border: 1px solid var(--sa-card-border) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.06) !important;
}


/* ===== Header polish: big left title + top nav ===== */
.sa-header{
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.sa-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 18px 0;
}

/* Bigger, left “Southern Anchor” */
.sa-logo{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration: none;
  color: inherit;
  line-height: 1;
  white-space: nowrap;
}

/* Menu layout */
.sa-nav__menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.sa-nav__menu a{
  text-decoration: none;
  color: inherit;
  opacity: .85;
  padding: 6px 2px;
}

.sa-nav__menu a:hover{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Mobile: keep it clean */
@media (max-width: 820px){
  .sa-header__inner{
    flex-wrap: wrap;
    justify-content: center;
  }
  .sa-nav__menu{
    flex-wrap: wrap;
    justify-content: center;
  }
}


/* ===== About page layout ===== */
.sa-eyebrow{
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  opacity: .75;
  margin: 0 0 10px;
}

.sa-h1{ font-size: clamp(30px, 3.4vw, 52px); line-height: 1.05; margin: 0 0 12px; }
.sa-h2{ font-size: clamp(22px, 2.4vw, 34px); line-height: 1.15; margin: 0 0 12px; }
.sa-h3{ font-size: 18px; margin: 0 0 10px; }
.sa-lead{ font-size: 18px; line-height: 1.6; opacity: .92; margin: 0; max-width: 70ch; }
.sa-p{ font-size: 16px; line-height: 1.7; margin: 0 0 14px; }
.sa-muted{ opacity: .8; }

.sa-grid-2{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: start;
}

.sa-cards-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.sa-list{
  margin: 0;
  padding-left: 18px;
  line-height: 1.75;
}

.sa-cta-card{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.sa-cta-actions{ flex: 0 0 auto; }

@media (max-width: 900px){
  .sa-grid-2{ grid-template-columns: 1fr; }
  .sa-cards-3{ grid-template-columns: 1fr; }
  .sa-cta-card{ flex-direction: column; align-items: flex-start; }
}


/* === About page layout restore (matches original screenshots) === */
.sa-about-story-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2rem;
  align-items:start;
}
.sa-about-sidebox{
  max-width: 520px;
  justify-self:end;
}
.sa-about-values-grid{
  margin-top: 1.25rem;
}

@media (max-width: 900px){
  .sa-about-story-grid{
    grid-template-columns: 1fr;
  }
  .sa-about-sidebox{
    max-width: 100%;
    justify-self:stretch;
  }
}