/*
Theme Name:  South Island Gullah Geechee Project
Theme URI:   https://southislandgullahgeechee.org
Description: Custom theme for the South Island Gullah Geechee Project. Georgetown County, South Carolina.
Author:      KnowledgeMaven Media, LLC
Author URI:  https://knowledgemavenmedia.com
Version:     1.0.0
Text Domain: siggp
*/

/* ── TOKENS ───────────────────────────────────── */
:root {
  --bark:       #2C1F14;
  --sepia:      #5C3D1E;
  --warm-brown: #7A5230;
  --parchment:  #F2E8D5;
  --aged-paper: #E8D9BC;
  --cream:      #FAF5EC;
  --teal:       #4A7B82;
  --teal-dark:  #2F5A60;
  --teal-deep:  #1C3D42;
  --white:      #FFFFFF;
  --font-h:     'Playfair Display', Georgia, serif;
  --font-b:     'Lato', sans-serif;
}

/* ── RESET ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.75;
  color: #3d2b18;
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-dark); text-decoration: none; transition: color .2s; }
a:hover { color: var(--teal); }

h1,h2,h3,h4 {
  font-family: var(--font-h);
  font-weight: 700;
  line-height: 1.15;
  color: var(--bark);
  margin: 0 0 20px;
}
h1 { font-size: clamp(40px,7vw,72px); }
h2 { font-size: clamp(26px,4vw,44px); }
h3 { font-size: clamp(18px,2.5vw,24px); }
p  { margin-bottom: 16px; }

/* ── LAYOUT ───────────────────────────────────── */
.wrap      { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.wrap-sm   { max-width:  760px; margin: 0 auto; padding: 0 40px; }
section    { padding: 100px 40px; }

.two-col   { display:grid; grid-template-columns:60% 1fr; gap:64px; align-items:center; }
.two-col-r { display:grid; grid-template-columns:1fr 60%; gap:64px; align-items:center; }
.four-col  { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:48px; }
.three-col { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:48px; }

.divider { width:48px; height:2px; background:var(--teal); border:none; margin:24px 0; }
.divider-light  { background:rgba(242,232,213,.35); }
.divider-center { margin-left:auto; margin-right:auto; }
.eyebrow {
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--teal); display:block; margin-bottom:14px;
}

/* ── NAV ──────────────────────────────────────── */
#site-nav {
  position:fixed; top:0; left:0; right:0; z-index:9999;
  background:rgba(44,31,20,.93); backdrop-filter:blur(10px);
  height:64px; display:flex; align-items:center;
  justify-content:space-between; padding:0 40px;
}
.nav-logo {
  font-family:var(--font-h); color:var(--parchment);
  font-size:14px; letter-spacing:.08em; text-transform:uppercase; line-height:1.35;
}
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a {
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(242,232,213,.72); transition:color .2s;
}
.nav-links a:hover,
.nav-links .current-menu-item a { color:var(--parchment); }

/* Mobile hamburger */
.nav-toggle {
  display:none; background:none; border:none; cursor:pointer;
  flex-direction:column; gap:5px; padding:4px;
}
.nav-toggle span {
  display:block; width:24px; height:2px;
  background:var(--parchment); transition:all .25s;
}

/* ── BUTTONS ──────────────────────────────────── */
.btn, .btn-primary, .btn-outline, button[type=submit] {
  display:inline-block; font-family:var(--font-b);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  padding:14px 32px; border-radius:0; cursor:pointer;
  transition:background .2s, transform .15s, border-color .2s;
  text-decoration:none;
}
.btn-primary, button[type=submit] {
  background:var(--teal-dark); color:var(--parchment);
  border:2px solid var(--teal-dark);
}
.btn-primary:hover, button[type=submit]:hover {
  background:var(--teal-deep); color:var(--parchment); transform:translateY(-2px);
}
.btn-outline {
  background:transparent; color:var(--parchment);
  border:2px solid rgba(242,232,213,.65);
}
.btn-outline:hover { border-color:var(--parchment); transform:translateY(-2px); }
.btn-teal {
  background:var(--teal-dark); color:var(--parchment);
  border:2px solid var(--teal-dark); padding:12px 28px;
}
.btn-teal:hover { background:var(--teal-deep); color:var(--parchment); }

/* ── HERO ─────────────────────────────────────── */
#hero {
  min-height:100vh;
  background:
    linear-gradient(160deg,rgba(44,31,20,.58) 0%,rgba(44,31,20,.65) 55%,rgba(28,61,66,.52) 100%),
    url('images/hero.jpg') center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:120px 40px 80px; position:relative;
}
.hero-inner   { max-width:800px; }
.hero-eyebrow {
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(242,232,213,.65); margin-bottom:20px; display:block;
}
.hero-h1 {
  font-family:var(--font-h); font-weight:700;
  font-size:clamp(44px,8vw,80px); color:var(--white);
  line-height:1.05; letter-spacing:-.01em; margin-bottom:12px;
}
.hero-tagline {
  font-family:var(--font-h); font-style:italic;
  font-size:clamp(16px,2.2vw,24px);
  color:rgba(242,232,213,.85); margin-bottom:20px; display:block;
}
.hero-sub {
  font-size:18px; color:rgba(255,255,255,.85);
  max-width:540px; margin:0 auto 44px; line-height:1.75;
}
.btn-row { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.scroll-hint {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.35); animation:bounce 2.2s infinite;
}
@keyframes bounce {
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%    { transform:translateX(-50%) translateY(7px); }
}

/* ── TRUST STRIP ──────────────────────────────── */
#trust { background:var(--aged-paper); padding:22px 40px; text-align:center; }
.trust-text {
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#4a3820;
}
.trust-sep { margin:0 10px; color:#a8916e; }

/* ── WHAT IS ──────────────────────────────────── */
#what-is { background:var(--cream); }
.map-placeholder {
  width:100%; aspect-ratio:4/5; background:#d4c4a0;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#6b4e2a;
}

/* ── ABOUT ────────────────────────────────────── */
#about { background:var(--parchment); }
.about-quote {
  font-family:var(--font-h); font-style:italic;
  font-size:clamp(18px,2.5vw,26px); color:var(--teal-dark);
  border-left:3px solid var(--teal); padding-left:28px;
  margin-top:40px; line-height:1.55;
}

/* ── WHAT WE DO ───────────────────────────────── */
#what-we-do { background:var(--cream); }
.icon-box {
  background:var(--parchment); border:1px solid #c8b08a;
  padding:36px 24px; transition:border-color .2s, box-shadow .2s;
}
.icon-box:hover { border-color:var(--teal); box-shadow:0 6px 28px rgba(74,123,130,.14); }
.icon-num {
  font-family:var(--font-h); font-size:52px; font-weight:700;
  color:#d4bc95; line-height:1; margin-bottom:16px;
}
.icon-box h3 { font-size:17px; color:var(--teal-dark); margin-bottom:10px; }
.icon-box p  { font-size:14px; color:#5a3e22; margin:0; }

/* ── WHY IT MATTERS ───────────────────────────── */
#why { background:var(--aged-paper); }
.matters-list { list-style:none; margin-top:16px; }
.matters-list li {
  display:flex; align-items:flex-start; gap:16px;
  padding:16px 0; border-bottom:1px solid #c4a97a;
  font-size:16px; color:#3d2b18; line-height:1.6;
}
.matters-list li::before {
  content:''; flex-shrink:0; display:block;
  width:7px; height:7px; border-radius:50%;
  background:var(--teal); margin-top:9px;
}

/* ── FOUNDER ──────────────────────────────────── */
#founder { background:var(--cream); }
.founder-photo {
  width:100%; aspect-ratio:3/4; object-fit:cover;
  background:linear-gradient(145deg,#c4a97a,#8c6840);
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#f2e8d5;
}
.founder-bold {
  font-family:var(--font-h); font-style:italic;
  font-size:clamp(17px,2vw,22px); color:var(--teal-dark);
  border-top:2px solid var(--teal); padding-top:24px; margin-top:28px; line-height:1.5;
}

/* ── TESTIMONIAL ──────────────────────────────── */
#testimonial { background:var(--teal-deep); padding:100px 40px; text-align:center; }
.testimonial-text {
  font-family:var(--font-h); font-style:italic;
  font-size:clamp(18px,2.8vw,30px); color:rgba(242,232,213,.95);
  max-width:800px; margin:0 auto 24px; line-height:1.55;
}
.testimonial-attr {
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(242,232,213,.5); margin-top:20px;
}

/* ── BLOG ─────────────────────────────────────── */
#blog { background:var(--parchment); }
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:48px; }
.post-card {
  background:var(--cream); border:1px solid #c4a97a;
  overflow:hidden; transition:box-shadow .2s;
}
.post-card:hover { box-shadow:0 8px 36px rgba(92,61,30,.16); }
.post-thumb {
  width:100%; aspect-ratio:16/10; object-fit:cover;
  background:linear-gradient(135deg,#c4a97a,#8c6840);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#f2e8d5;
}
.post-thumb img { width:100%; height:100%; object-fit:cover; }
.post-body  { padding:24px; }
.post-tag   { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:10px; display:block; }
.post-title { font-family:var(--font-h); font-size:18px; line-height:1.35; color:var(--bark); margin-bottom:10px; display:block; }
.post-title:hover { color:var(--teal-dark); }
.post-excerpt { font-size:14px; color:#5a3e22; }

/* ── CTA ──────────────────────────────────────── */
#cta { background:var(--aged-paper); }
.cta-card {
  background:var(--cream); border:1px solid #c4a97a;
  padding:40px 32px; text-align:center; transition:box-shadow .2s;
}
.cta-card:hover { box-shadow:0 6px 28px rgba(92,61,30,.12); }
.cta-card h3 { color:var(--teal-dark); font-size:20px; margin-bottom:14px; }
.cta-card p  { font-size:14px; color:#5a3e22; margin-bottom:24px; }

/* ── EMAIL ────────────────────────────────────── */
#email { background:var(--bark); padding:80px 40px; text-align:center; }
#email h2 { color:var(--parchment); }
#email p  { color:rgba(242,232,213,.72); max-width:460px; margin:0 auto 32px; }
.email-form { display:flex; max-width:460px; margin:0 auto; }
.email-form input {
  flex:1; padding:14px 18px; font-family:var(--font-b); font-size:14px;
  background:rgba(242,232,213,.08); color:var(--parchment);
  border:1px solid rgba(242,232,213,.25); border-right:none; outline:none;
}
.email-form input::placeholder { color:rgba(242,232,213,.38); }
.email-form button {
  padding:14px 28px; background:var(--teal); color:var(--parchment);
  font-family:var(--font-b); font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; border:none; cursor:pointer;
  transition:background .2s;
}
.email-form button:hover { background:var(--teal-dark); }

/* ── CONTACT FORM ─────────────────────────────── */
#contact { background:var(--cream); }
.contact-form { max-width:600px; display:flex; flex-direction:column; gap:16px; margin-top:40px; }
.contact-form input,
.contact-form textarea,
.contact-form select {
  padding:14px 18px; font-family:var(--font-b); font-size:15px;
  background:var(--parchment); color:var(--bark);
  border:1px solid #c4a97a; border-radius:0; outline:none;
  transition:border-color .2s; width:100%;
}
.contact-form input:focus,
.contact-form textarea:focus { border-color:var(--teal); }
.contact-form textarea { min-height:140px; resize:vertical; }
.contact-form label { font-size:13px; letter-spacing:.06em; color:var(--sepia); margin-bottom:4px; display:block; }
.form-success {
  background:var(--teal-deep); color:var(--parchment);
  padding:16px 20px; font-size:14px; margin-top:16px; display:none;
}
.form-error { color:#c0392b; font-size:13px; margin-top:4px; display:none; }

/* ── FOOTER ───────────────────────────────────── */
#site-footer {
  background:var(--bark); color:rgba(242,232,213,.6);
  padding:60px 40px; text-align:center;
}
.footer-name { font-family:var(--font-h); font-size:22px; color:var(--parchment); margin-bottom:8px; }
.footer-loc  { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(242,232,213,.48); margin-bottom:20px; }
.footer-tag  { font-size:14px; max-width:440px; margin:0 auto 28px; color:rgba(242,232,213,.6); }
.footer-copy { font-size:12px; color:rgba(242,232,213,.28); margin-top:16px; }
#site-footer a { color:rgba(242,232,213,.55); }
#site-footer a:hover { color:var(--parchment); }

/* ── SINGLE POST / BLOG PAGE ──────────────────── */
.blog-header { background:var(--parchment); padding:80px 40px 60px; }
.blog-header h1 { font-size:clamp(28px,4vw,48px); }
.blog-meta { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-bottom:24px; display:block; }
.blog-content { max-width:740px; margin:0 auto; padding:60px 40px; }
.blog-content h2,
.blog-content h3 { margin-top:36px; }
.blog-content p  { font-size:17px; line-height:1.8; margin-bottom:20px; }
.blog-content img { margin:32px 0; border:1px solid #c4a97a; }
.blog-content blockquote {
  font-family:var(--font-h); font-style:italic;
  font-size:22px; color:var(--teal-dark);
  border-left:3px solid var(--teal); padding-left:24px;
  margin:32px 0; line-height:1.55;
}
.back-link { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-dark); display:inline-block; margin-bottom:32px; }
.back-link:hover { color:var(--teal); }

/* ── ACCESSIBILITY ────────────────────────────── */
.screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }

/* ── RESPONSIVE ───────────────────────────────── */
@media (max-width:1024px) {
  .two-col, .two-col-r { grid-template-columns:1fr; gap:40px; }
  .four-col { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  section { padding:64px 24px; }
  .wrap, .wrap-sm { padding:0 24px; }
  .hero-h1 { font-size:clamp(32px,9vw,48px) !important; }
  .hero-sub { font-size:16px; }
  .three-col, .post-grid { grid-template-columns:1fr; }
  .four-col { grid-template-columns:1fr; }
  .email-form { flex-direction:column; }
  .email-form input { border-right:1px solid rgba(242,232,213,.25); border-bottom:none; }
  #site-nav .nav-links { display:none; }
  #site-nav .nav-links.open {
    display:flex; flex-direction:column; gap:0;
    position:fixed; top:64px; left:0; right:0;
    background:rgba(44,31,20,.97); padding:16px 24px 24px;
  }
  #site-nav .nav-links.open li a { padding:12px 0; display:block; border-bottom:1px solid rgba(242,232,213,.1); }
  .nav-toggle { display:flex; }
  #trust { padding:16px 24px; }
}
@media (max-width:480px) {
  .btn-row { flex-direction:column; align-items:center; }
}