/* ==========================================================================
   LifeCycle Coaching: site styles
   Design system: "Warm ground"

   HOW TO EDIT
   1. Colors, fonts, spacing and corners are all variables in :root below.
      Change a value there and it updates everywhere on the site.
   2. Sections below are labeled. Search for the label (for example
      "HERO" or "BENTO") to find the styles for that part of the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (edit these first)
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --sand: #F6EFE4;            /* page background */
  --cream: #FFFBF4;           /* cards and panels */
  --linen: #DCCFB8;           /* quiet tiles, dividers (ink text only) */
  --line-strong: #8C7F62;     /* control borders, not text */

  /* Text */
  --ink: #33361F;             /* headings and body text */
  --ink-muted: #5E5B44;       /* secondary text, on sand or cream only */
  --on-ink: #F6EFE4;          /* text on an ink fill */

  /* Brand and accents */
  --terracotta: #A94F2B;      /* primary buttons, lead tile, links */
  --on-terracotta: #FFF8EE;   /* text on terracotta */
  --terracotta-soft: #F3DCCB; /* highlights (ink text only) */
  --ochre: #E8C77E;           /* accent tile */
  --ochre-ink: #3D2C07;       /* text on ochre */
  --sage: #5E6B45;            /* secondary accent */
  --on-sage: #FFFBF4;         /* text on sage */

  /* Fonts (loaded from Google Fonts in each page's <head>) */
  --font-serif: "Young Serif", Georgia, serif;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type sizes */
  --text-display: clamp(2.5rem, 5vw + 1rem, 3.5rem); /* 40px to 56px */
  --text-h1: clamp(2rem, 2.5vw + 1rem, 2.5rem);      /* 32px to 40px */
  --text-h2: 1.75rem;   /* 28px */
  --text-h3: 1.25rem;   /* 20px */
  --text-lg: 1.1875rem; /* 19px */
  --text-body: 1.0625rem; /* 17px */
  --text-caption: 0.8125rem; /* 13px */

  /* Spacing (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-10: 40px;
  --space-16: 64px;

  /* Corners */
  --radius-sm: 8px;
  --radius-tile: 14px;
  --radius-pill: 9999px;

  /* Shadows and focus */
  --shadow-card: 0 1px 2px #33361F14, 0 8px 24px -8px #33361F24;
  --focus-ring: 0 0 0 2px var(--sand), 0 0 0 4px var(--terracotta);

  /* Layout */
  --content-max: 1120px;
  --text-max: 68ch;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.65;
}

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

h1, h2, h3 { margin: 0 0 var(--space-4); line-height: 1.15; }
h1, h2 { font-family: var(--font-serif); font-weight: 400; }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-family: var(--font-sans); font-size: var(--text-h3); font-weight: 600; line-height: 1.4; }

p { margin: 0 0 var(--space-4); max-width: var(--text-max); }

a { color: var(--terracotta); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

ul, ol { padding-left: 1.25em; margin: 0 0 var(--space-4); }
li { margin-bottom: var(--space-2); }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  background: var(--ink); color: var(--on-ink);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: 100;
}
.skip-link:focus { top: var(--space-4); }

/* --------------------------------------------------------------------------
   3. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section { padding: var(--space-16) 0; }
.section--cream { background: var(--cream); }

.eyebrow {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
}

.lead { font-size: var(--text-lg); line-height: 1.6; color: var(--ink-muted); }

.small { font-size: var(--text-caption); color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 12px var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 1rem; font-weight: 600;
  text-decoration: none; line-height: 1.2;
  border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--terracotta); color: var(--on-terracotta); }
.btn--primary:hover { background: var(--ink); color: var(--on-ink); }
.btn--secondary { background: var(--ink); color: var(--on-ink); }
.btn--secondary:hover { background: var(--terracotta); color: var(--on-terracotta); }
.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--on-ink); }
.btn--light { background: var(--cream); color: var(--ink); }
.btn--light:hover { background: var(--ink); color: var(--on-ink); }

.text-link { font-weight: 600; }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* --------------------------------------------------------------------------
   5. HEADER AND NAVIGATION
   -------------------------------------------------------------------------- */
.site-header { padding: var(--space-6) 0; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }

.brand { text-decoration: none; color: var(--ink); line-height: 1.2; }
.brand__name { display: block; font-family: var(--font-serif); font-size: 1.375rem; }
.brand__tagline { display: block; font-size: var(--text-caption); color: var(--ink-muted); }

.nav-toggle {
  display: none;
  background: none; border: 2px solid var(--ink); color: var(--ink);
  border-radius: var(--radius-pill); padding: 8px 16px;
  font: 600 0.9375rem var(--font-sans); cursor: pointer;
}

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-6); align-items: center; }
.site-nav li { margin: 0; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 500; padding: var(--space-1) 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--terracotta); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--terracotta); font-weight: 600; }

/* --------------------------------------------------------------------------
   5b. TAB BAR (sticky section links below the header)
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 64px; } /* keeps headings clear of the tab bar */

.tabbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--sand);
  border-top: 1px solid var(--linen);
  border-bottom: 1px solid var(--linen);
}
.tabbar ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--space-2);
  overflow-x: auto; scrollbar-width: none;
}
.tabbar ul::-webkit-scrollbar { display: none; }
.tabbar li { margin: 0; flex: 0 0 auto; }
.tabbar a {
  display: block; padding: var(--space-4);
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.9375rem;
  border-bottom: 2px solid transparent;
}
.tabbar a:hover { border-bottom-color: var(--linen); }
.tabbar a.is-active { border-bottom-color: var(--terracotta); font-weight: 600; }

.section-title { font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem); }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }

.card-sand { background: var(--sand); border-radius: var(--radius-tile); padding: var(--space-6); }
.card-sand h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.25rem; margin-bottom: var(--space-1); }
.card-sand p { margin: 0; font-size: 1rem; }
.tile--outline { background: var(--sand); color: var(--ink); border: 1px solid var(--linen); }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero { padding: var(--space-10) 0 var(--space-16); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-10); align-items: center; }
.hero h1 { font-size: var(--text-display); line-height: 1.07; letter-spacing: -0.01em; margin-bottom: var(--space-6); }
.hero .lead { margin-bottom: var(--space-10); }

.page-hero { padding: var(--space-10) 0 var(--space-10); }
.page-hero h1 { font-size: var(--text-display); line-height: 1.07; max-width: 16ch; }

/* --------------------------------------------------------------------------
   7. PHOTO SLOTS
   Placeholder shapes until real photos are added. See README.md.
   -------------------------------------------------------------------------- */
.photo {
  position: relative;
  border-radius: var(--radius-tile);
  overflow: hidden;
  background: var(--linen);
  aspect-ratio: 4 / 5;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--organic { border-radius: 58% 42% 50% 50% / 45% 55% 45% 55%; aspect-ratio: 1; background: var(--ochre); }
.photo--square { aspect-ratio: 1; }
.photo__label {
  position: absolute; inset: auto var(--space-4) var(--space-4) var(--space-4);
  font-size: var(--text-caption); color: var(--ink); text-align: center;
}

/* --------------------------------------------------------------------------
   8. LISTS OF SITUATIONS (Who this is for)
   -------------------------------------------------------------------------- */
.situations { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-2); margin: var(--space-6) 0; }
.situations li { background: var(--sand); border-radius: var(--radius-tile); padding: var(--space-6); margin: 0; }
.situations strong { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 1.25rem; margin-bottom: var(--space-1); }

/* --------------------------------------------------------------------------
   9. BENTO GRID (tiles for services and page teasers)
   -------------------------------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.tile { border-radius: var(--radius-tile); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.tile > :last-child { margin-bottom: 0; }
.tile h2, .tile h3 { margin-bottom: var(--space-2); }
.tile p { max-width: none; }
.tile .actions { margin-top: auto; padding-top: var(--space-4); }

.tile--span-2 { grid-column: span 2; }
.tile--span-3 { grid-column: span 3; }
.tile--span-4 { grid-column: span 4; }
.tile--tall { grid-row: span 2; }

.tile--terracotta { background: var(--terracotta); color: var(--on-terracotta); }
.tile--terracotta a:not(.btn) { color: var(--on-terracotta); }
.tile--ochre { background: var(--ochre); color: var(--ochre-ink); }
.tile--ochre a:not(.btn) { color: var(--ochre-ink); }
.tile--linen { background: var(--linen); color: var(--ink); }
.tile--linen a:not(.btn) { color: var(--ink); }
.tile--ink { background: var(--ink); color: var(--on-ink); }
.tile--ink a:not(.btn) { color: var(--on-ink); }
.tile--sage { background: var(--sage); color: var(--on-sage); }
.tile--sage a:not(.btn) { color: var(--on-sage); }
.tile--cream { background: var(--cream); color: var(--ink); border: 1px solid var(--linen); }

.tile__label { font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.tile__price { font-family: var(--font-serif); font-size: 2.5rem; line-height: 1; margin: var(--space-2) 0; }
.tile ul { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   10. STEPS (How coaching works)
   -------------------------------------------------------------------------- */
.steps { list-style: none; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: currentColor; margin-bottom: var(--space-2);
  font-family: var(--font-serif); font-size: 1.125rem;
}
/* Number color: dark number on a light circle for each tile color */
.steps .tile--terracotta::before { background: var(--on-terracotta); color: var(--terracotta); }
.steps .tile--ochre::before { background: var(--ochre-ink); color: var(--ochre); }
.steps .tile--linen::before { background: var(--ink); color: var(--linen); }
.steps .tile--sage::before { background: var(--on-sage); color: var(--sage); }

/* --------------------------------------------------------------------------
   11. TWO-COLUMN TEXT + MEDIA
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-10); align-items: start; }
.split--reverse { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

.callout { background: var(--terracotta-soft); color: var(--ink); border-radius: var(--radius-tile); padding: var(--space-6); }
.callout p:last-child { margin-bottom: 0; }

.credentials { list-style: none; padding: 0; margin: var(--space-6) 0; }
.credentials li { padding: var(--space-4) 0; border-top: 1px solid var(--linen); margin: 0; }
.credentials li:last-child { border-bottom: 1px solid var(--linen); }
.credentials strong { display: block; font-size: var(--text-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }

/* Placeholder text you still need to replace is highlighted */
.todo { background: var(--terracotta-soft); padding: 0 4px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   12. NEWSLETTER BAND
   -------------------------------------------------------------------------- */
.newsletter { background: var(--ink); color: var(--on-ink); border-radius: var(--radius-tile); padding: var(--space-10); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-10); align-items: center; }
.newsletter h2 { color: var(--on-ink); }
.newsletter p { color: var(--on-ink); }
.newsletter .small { color: var(--linen); margin: var(--space-2) 0 0; }

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { padding: var(--space-10) 0; border-top: 1px solid var(--linen); margin-top: var(--space-16); }
.site-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); font-size: 0.9375rem; color: var(--ink-muted); }
.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-6); padding: 0; margin: 0; }
.site-footer li { margin: 0; }
.site-footer a { color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   14. RESPONSIVE (tablet and phone)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--span-3, .tile--span-4 { grid-column: span 2; }
  .newsletter { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --space-16: 40px; }
  .container { padding: 0 var(--space-4); }
  .hero__grid, .split, .split--reverse { grid-template-columns: 1fr; }
  .hero__media { max-width: 320px; }
  .nav-toggle { display: inline-block; }
  .site-header .container { flex-wrap: wrap; }
  .site-nav { display: none; width: 100%; }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding-top: var(--space-4); }
  .newsletter { padding: var(--space-6); }
}

@media (max-width: 560px) {
  .bento, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .site-header .btn { padding: 10px 16px; font-size: 0.9375rem; }
  .tile--span-2, .tile--span-3, .tile--span-4 { grid-column: auto; }
  .tile--tall { grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}