/* ============================================================
   SOSL / SLI / SLC — Multi-brand stylesheet
   Brands: site-sosl | site-slcoach | site-sli
   ============================================================ */

/* --- Reset & Base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'Lato', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #2a2318;
  background: #faf8f4;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', serif;
  line-height: 1.2;
  font-weight: 600;
}

h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; font-family: 'Lato', sans-serif; font-weight: 700; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.5rem; }
li { margin-bottom: 0.4rem; }

/* --- Brand colour tokens ----------------------------------- */

/* SOSL — warm gold */
.site-sosl {
  --brand: #b8922a;
  --brand-dark: #8a6a1a;
  --brand-light: #f5edd8;
  --hero-bg: #1c1409;
  --hero-fg: #f5edd8;
  /* Dark text on gold buttons passes WCAG AA (contrast ≈ 6:1) */
  --button-text: #2a2318;
}

/* Simple Living Coach — earth green */
.site-slcoach {
  --brand: #4a7c59;
  --brand-dark: #2e5238;
  --brand-light: #e8f0eb;
  --hero-bg: #0e1f14;
  --hero-fg: #e8f0eb;
  --button-text: #fff;
}

/* Servant Leader Institute — deep navy */
.site-sli {
  --brand: #2a4d7f;
  --brand-dark: #1a3360;
  --brand-light: #e4ecf7;
  --hero-bg: #0d1a2e;
  --hero-fg: #e4ecf7;
  --button-text: #fff;
}

/* Fallback for pages without brand class */
body:not(.site-sosl):not(.site-slcoach):not(.site-sli) {
  --brand: #b8922a;
  --brand-dark: #8a6a1a;
  --brand-light: #f5edd8;
  --hero-bg: #1c1409;
  --hero-fg: #f5edd8;
  --button-text: #2a2318;
}

/* --- Header ------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.875rem 2rem;
  background: rgba(250, 248, 244, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.brand img {
  height: 40px;
  width: auto;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.site-header nav a {
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #2a2318;
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.site-header nav a:hover {
  color: var(--brand);
  background: var(--brand-light);
}

/* --- Hero -------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 76vh;
  background: var(--hero-bg);
  color: var(--hero-fg);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
  gap: 1.25rem;
}

.hero-copy h1 {
  color: inherit;
  max-width: 20ch;
}

.hero-copy .lead {
  font-size: 1.1rem;
  opacity: 0.85;
  max-width: 40ch;
  margin-bottom: 0;
}

.hero-visual {
  background: var(--brand);
  opacity: 0.15;
  overflow: hidden;
  position: relative;
}

/* Hero variants with CSS background fallback */
.hero-path .hero-visual,
.hero-coach .hero-visual,
.hero-sli .hero-visual,
.hero-summit .hero-visual,
.hero-communication .hero-visual,
.hero-shop .hero-visual,
.hero-event .hero-visual,
.hero-community .hero-visual,
.hero-farm .hero-visual {
  opacity: 1;
}

/* Hero image element — used for LCP-critical visuals */
.hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* --- Eyebrow label ----------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.25rem;
}

/* --- Buttons ----------------------------------------------- */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.6rem;
  background: var(--brand);
  color: var(--button-text, #fff);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid var(--brand);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.button:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: translateY(-1px);
}

.button-secondary {
  background: transparent;
  color: var(--hero-fg, #fff);
  border-color: currentColor;
  opacity: 0.85;
}

.button-secondary:hover {
  background: rgba(255,255,255,0.1);
  opacity: 1;
}

.text-link {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--brand);
  text-decoration: none;
  letter-spacing: 0.03em;
}

.text-link:hover { text-decoration: underline; }

/* --- Sections ---------------------------------------------- */
.section-block {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) 2rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2.5rem 3.5rem;
  align-items: start;
}

.section-heading {
  position: sticky;
  top: 4.5rem;
}

.section-heading h2 {
  margin-bottom: 0.75rem;
}

.section-heading p {
  font-size: 0.95rem;
  opacity: 0.7;
}

.section-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Section image */
.section-image {
  margin-bottom: 2.25rem;
  margin-top: 0.5rem;
  border-radius: 12px;
  overflow: hidden;
}

.section-image img {
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.section-image-wide img { max-height: 580px; }
.section-image-natural img { max-height: 480px; }

.section-image figcaption {
  font-size: 0.8rem;
  color: #777;
  margin-top: 0.5rem;
  font-style: italic;
}

/* Two-column split layouts */
.split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 2rem;
}
.split-row > .split-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.split-row > .split-image {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}
.split-row > .split-image img {
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  max-height: 420px;
}
.split-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(16px, 2vw, 20px);
  font-style: italic;
  line-height: 1.6;
  color: #2a2318;
  border-left: 3px solid #b8922a;
  padding-left: 1.5rem;
  margin: 0;
}
@media (max-width: 900px) {
  .split-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .split-row > .split-image img { max-height: 360px; }
}

/* Section video */
.section-video .video-preview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.video-preview iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: 6px;
}

/* Section social */
.section-social .card-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

/* --- Card grid --------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  min-width: 0;
  width: 100%;
}

.card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: box-shadow 0.2s, transform 0.2s;
  min-width: 0;
}

.card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.card h3 {
  font-size: 1rem;
}

.card h3 a {
  text-decoration: none;
  color: inherit;
}

.card h3 a:hover { color: var(--brand); }

.card p {
  font-size: 0.9rem;
  color: #5a5040;
  flex: 1;
}

/* Social cards */
.section-social .card {
  align-items: center;
  text-align: center;
  padding: 1.25rem 1rem;
}

.section-social .card svg {
  width: 28px;
  height: 28px;
  fill: var(--brand);
}

.section-social .card a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}

.section-social .card span {
  font-size: 0.8rem;
  font-weight: 600;
}

/* --- Feature list ------------------------------------------ */
.feature-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.feature-list li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 0;
}

.feature-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: 700;
}

/* --- Note box ---------------------------------------------- */
.note-box {
  background: var(--brand-light);
  border-left: 3px solid var(--brand);
  padding: 1rem 1.25rem;
  border-radius: 0 6px 6px 0;
  font-style: italic;
  font-size: 0.95rem;
  color: #3a2e1a;
}

/* --- Form section ------------------------------------------ */
.form-section {
  background: var(--brand-light, #f5edd8);
  padding: clamp(3rem, 8vw, 6rem) 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: none;
}

.form-section > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}

.form-section h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.form-section p { font-size: 1rem; opacity: 0.8; }

.form-section form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

.form-section label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.form-section label span {
  color: #4a3e2a;
}

.form-section input,
.form-section select,
.form-section textarea {
  padding: 0.65rem 0.875rem;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #faf8f4;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.form-section input:focus,
.form-section select:focus,
.form-section textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}

/* Global focus ring for keyboard navigation */
:focus-visible {
  outline: 3px solid var(--brand, #b8922a);
  outline-offset: 2px;
  border-radius: 2px;
}

.check-label {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0.75rem !important;
}

.check-label input { width: auto; margin-top: 0.2rem; }

.check-label span { font-weight: 400 !important; font-size: 0.85rem !important; }

.hidden-field { display: none; }

.form-section .button {
  width: 100%;
  padding: 0.85rem;
  font-size: 1rem;
  margin-top: 0.25rem;
}

/* --- Footer ------------------------------------------------ */
.site-footer {
  background: #1c1409;
  color: rgba(255,255,255,0.7);
  padding: 2.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.site-footer strong { color: #fff; }

.site-footer a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--brand);
}

.site-footer .social-icons-bar {
  justify-content: center;
  margin: 0.75rem 0 0.25rem;
}
.site-footer .social-icon-btn {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}
.site-footer .social-icon-btn:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* --- Table / data ------------------------------------------ */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid rgba(0,0,0,0.08); }
th { font-weight: 700; background: var(--brand-light); }

/* --- Social icons ------------------------------------------ */
.social-icons-bar{display:flex;flex-wrap:wrap;gap:.875rem;margin:1.5rem 0}
.social-icon-btn{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;background:rgba(0,0,0,.06);color:#2a2318;text-decoration:none;transition:background .18s,transform .18s,color .18s}
.social-icon-btn svg{width:24px;height:24px;fill:currentColor;display:block}
.social-icon-btn:hover{transform:translateY(-2px)}
.social-icon-btn.si-youtube:hover{background:#FF0000;color:#fff}
.social-icon-btn.si-instagram:hover{background:#E1306C;color:#fff}
.social-icon-btn.si-facebook:hover{background:#1877F2;color:#fff}
.social-icon-btn.si-telegram:hover{background:#26A5E4;color:#fff}
.social-icon-btn.si-tiktok:hover{background:#010101;color:#fff}
.social-icon-btn.si-linkedin:hover{background:#0A66C2;color:#fff}
.social-icon-btn.si-twitter:hover{background:#000;color:#fff}

/* --- Utility ----------------------------------------------- */
main { min-height: 60vh; }

/* --- Responsive -------------------------------------------- */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-visual { display: none; }

  .hero-copy {
    padding: 3rem 1.5rem;
  }

  .section-block {
    grid-template-columns: 1fr;
    padding: 2.5rem 1.25rem;
  }

  .section-heading { position: static; }

  .form-section {
    grid-template-columns: 1fr;
    padding: 2.5rem 1.25rem;
  }
}

@media (max-width: 600px) {
  .site-header {
    flex-wrap: wrap;
    padding: 0.75rem 1.25rem;
  }

  .site-header nav {
    gap: 0;
  }

  .site-header nav a {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  h1 { font-size: 1.75rem; }
}

/* ── Testimonials carousel ──────────────────────────────────── */
.tcard{border-radius:14px;overflow:hidden;background:var(--surface,#f8f7f4);border:1.5px solid var(--border,#e7e2d8);transition:box-shadow .2s,transform .2s;cursor:pointer}
.tcard:hover{box-shadow:0 10px 36px rgba(0,0,0,.11);transform:translateY(-3px)}
.tcard-media{position:relative;aspect-ratio:9/16;background:#1c1917;overflow:hidden}
.tcard-media video{width:100%;height:100%;object-fit:cover;display:block}
.tcard-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .25s}
.tcard-play.hidden{opacity:0;pointer-events:none}
.tcard-play svg{width:56px;height:56px}
.tcard-info{padding:12px 15px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tcard-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;font-weight:600;color:var(--heading,#1c1917)}
.tcard-tag{font-family:'Lato',sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#78716c)}
.tcarousel-wrap{position:relative;display:flex;align-items:center;gap:10px;margin-top:32px}
.tcarousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:16px;padding:4px 2px 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex:1}
.tcarousel::-webkit-scrollbar{display:none}
.tcarousel .tcard{flex:0 0 240px;scroll-snap-align:start}
.tcar-btn{flex-shrink:0;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border,#e7e2d8);background:var(--surface,#f8f7f4);cursor:pointer;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s}
.tcar-btn:hover{background:var(--brand-dark,#6b4a2a);color:#fff;border-color:var(--brand-dark,#6b4a2a)}
.tcar-dots{display:flex;gap:7px;justify-content:center;margin-top:10px}
.tcar-dot{width:7px;height:7px;border-radius:50%;border:none;padding:0;background:var(--border,#e7e2d8);cursor:pointer;transition:background .2s}
.tcar-dot.active{background:var(--brand-dark,#6b4a2a)}
@media(min-width:600px){.tcarousel .tcard{flex:0 0 260px}}
@media(min-width:960px){.tcarousel .tcard{flex:0 0 280px}}

/* ── Nav dropdown ─────────────────────────────────────────────── */
.nav-dropdown{position:relative;display:inline-flex;align-items:center}
.nav-dd-btn{padding:.4rem .75rem;font-size:.875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:#2a2318;background:none;border:none;cursor:pointer;border-radius:4px;transition:color .15s,background .15s;display:flex;align-items:center;gap:3px;line-height:1;font-family:inherit}
.nav-dd-btn:hover,.nav-dropdown.open .nav-dd-btn{color:var(--brand);background:var(--brand-light)}
.nav-caret{font-size:.6em;transition:transform .2s;display:inline-block;line-height:1}
.nav-dropdown.open .nav-caret{transform:rotate(180deg)}
.nav-dd-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.10);min-width:168px;z-index:200;padding:5px}
.nav-dropdown.open .nav-dd-menu{display:block}
.nav-dd-menu a{display:block;padding:8px 12px;font-size:.82rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:#2a2318;text-decoration:none;border-radius:6px;transition:color .15s,background .15s}
.nav-dd-menu a:hover{color:var(--brand);background:var(--brand-light)}
/* ── Nav CTA ──────────────────────────────────────────────────── */
.nav-cta{flex-shrink:0;padding:.45rem 1.1rem;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--brand);color:#fff;border-radius:8px;text-decoration:none;transition:opacity .15s;white-space:nowrap;line-height:1}
.nav-cta:hover{opacity:.88;color:#fff}
/* ── Hamburger ────────────────────────────────────────────────── */
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:5px;border-radius:5px;flex-shrink:0}
.nav-hamburger span{display:block;width:22px;height:2px;background:#2a2318;border-radius:2px}
@media(max-width:720px){
  .site-header{flex-wrap:wrap;padding:.75rem 1.25rem}
  .nav-hamburger{display:flex;margin-left:auto}
  .site-header nav{display:none;width:100%;flex-direction:column;gap:0;border-top:1px solid rgba(0,0,0,.07);padding-top:6px;margin-top:6px;order:99}
  .site-header nav.nav-open{display:flex}
  .site-header nav a{font-size:.8rem;padding:.35rem .5rem}
  .nav-dropdown{display:block;width:100%}
  .nav-dd-btn{width:100%;justify-content:space-between;padding:.35rem .5rem;font-size:.8rem}
  .nav-dd-menu{position:static;box-shadow:none;border:none;border-radius:0;padding-left:10px;background:transparent;min-width:0;width:100%}
  .nav-cta{font-size:.72rem;padding:.4rem .9rem}
}