/* ==========================================================================
   Mrs. Leger's Littles — Clean Base Styles
   File: assets/css/custom.css
   ========================================================================== */

/* -------------------- Brand tokens -------------------- */
:root{
  /* colors */
  --brand:        #0b5e66;      /* primary teal from logo */
  --brand-dark:   #0a3f45;      /* deeper teal for headings/text */
  --accent:       #e87722;      /* orange accent from logo */
  --paper:        #ffffff;
  --ink:          #1f2a30;      /* body text */
  --muted-ink:    #617485;      /* secondary text */
  --brand-muted:  #e6f4f5;      /* light teal background wash */
  --border:       rgba(0,0,0,.10);

  /* rhythm */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 26px rgba(0,0,0,.12);
}

/* -------------------- Base / reset -------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body{
  margin: 0;
  color: var(--ink);
  background: #fff;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue",
        Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

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

h1,h2,h3,h4{
  margin: 0 0 .5rem 0;
  line-height: 1.2;
  color: var(--brand-dark);
  font-weight: 800;
}
p{ margin: 0 0 1rem 0; }

a{ color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); }
a:hover{ color: var(--accent); text-decoration-color: currentColor; }

/* -------------------- Layout helpers -------------------- */
.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}
.lead{ font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem); color: var(--muted-ink); }

/* ==========================================================================
   Header (Centered Logo + Nav)
   ========================================================================== */
.site-header{
  width: 100%;
  background: linear-gradient(90deg, #ffffff 0%, #f7fafb 100%);
  border-bottom: 1px solid var(--border);
}

/* Centered logo block */
.header-centered{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .8rem 0 .5rem;
}
.brand-center{
  height: 76px; width: auto;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
@media (max-width: 900px){ .brand-center{ height: 68px; } }
@media (max-width: 600px){ .brand-center{ height: 58px; border-radius: var(--radius-sm); } }

/* Navigation include (_includes/nav.html) */
.site-nav{
  display: flex;
  justify-content: center;
  padding: .6rem 0;
  border-top: 1px solid rgba(0,0,0,.05);
}
.nav-links{
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 1.25rem;
}
.nav-links a{
  text-decoration: none;
  color: var(--brand-dark);
  font-weight: 600;
  transition: color .2s ease;
}
.nav-links a:hover{ color: var(--accent); }

/* Mobile toggle (from nav.html) */
.nav-toggle{ display:none; }
.nav-icon{ display:none; }
@media (max-width: 760px){
  .nav-icon{
    display:inline-block;
    font-size:1.6rem; cursor:pointer; padding:.2rem .5rem; user-select:none;
    color: var(--brand-dark);
  }
  .nav-links{
    display:none; flex-direction:column; gap:.6rem;
    position:absolute; right:1rem; top:3.25rem;
    background: var(--paper);
    border:1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .9rem 1.1rem;
    box-shadow: var(--shadow);
    z-index: 50;
  }
  .nav-toggle:checked + .nav-icon + .nav-links{ display:flex; }
}

/* === Text header (brand name + tagline) === */
.header-text{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding: .85rem 0 .6rem;
}
.brand-text{
  font-weight: 900;
  letter-spacing: .2px;
  text-decoration: none;
  color: var(--brand-dark);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}
.brand-tagline{
  color: var(--muted-ink);
  font-weight: 600;
  font-size: clamp(.9rem, .85rem + .2vw, 1rem);
}
@media (max-width: 720px){
  .header-text{ flex-direction: column; align-items: flex-start; gap:.25rem; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.button{
  display:inline-block;
  background: var(--brand);
  color:#fff; text-decoration:none;
  font-weight:700;
  padding:.6rem 1rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 70%, #0000);
  transition: transform .1s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover{ background: color-mix(in srgb, var(--brand) 85%, white); box-shadow: var(--shadow); transform: translateY(-1px); }
.button.secondary{ background:#fff; color:var(--brand-dark); border:1px solid var(--border); }
.button.secondary:hover{ color: var(--brand); }

/* ==========================================================================
   Optional full-width hero
   ========================================================================== */
.hero-band{
  display:block; width:100%; overflow:hidden;
  border-radius: var(--radius);
  margin: clamp(1.25rem, 3vw, 2rem) 0;
  border: 1px solid var(--border);
  background: var(--brand-muted);
}
.hero-band img{
  width:100%; height:auto; display:block;
  aspect-ratio: 16 / 5;
  object-fit: cover; object-position: center 45%;
  filter: saturate(.98) contrast(1.02);
}
@media (max-width: 768px){ .hero-band img{ aspect-ratio: 16 / 7; object-position: center 38%; } }

/* ==========================================================================
   Index logo banner
   ========================================================================== */
.logo-banner{
  background-image: var(--logo-img);
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
  width: 100%;
  min-height: clamp(240px, 36vw, 480px);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  margin: clamp(16px, 3vw, 28px) 0;
  filter: saturate(.98) contrast(1.02);
}
/* Optional full-bleed */
.edge-to-edge{
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  width: 100vw;
  border-left: 0; border-right: 0; border-radius: 0;
}

/* ==========================================================================
   Image utilities
   ========================================================================== */
.site-main img{ display:block; max-width:100%; height:auto; }
.img-soft{
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.img-muted{ filter: saturate(.88) contrast(.98) brightness(1.02); }
.img-small{ max-width: 520px; margin: .5rem auto 1.25rem; }
.img-thumb{ max-width: 220px; margin: .25rem auto 1rem; }

/* ==========================================================================
   Content niceties
   ========================================================================== */
.hero{ padding: 1.25rem 0 0; }
.cta-row{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin: .75rem 0 0; }
.small{ color: var(--muted-ink); font-size: .95rem; }

/* Blockquotes (markdown) */
blockquote, .markdown-body blockquote{
  margin: 1rem auto;
  padding: .75rem 1rem;
  border-left: 4px solid var(--accent);
  background: #fff;
  border-radius: 8px;
  color: var(--muted-ink);
  max-width: 760px;
}

/* Tables */
table{ border-collapse: collapse; width: 100%; }
td, th{ border: 1px solid var(--border); padding: .5rem .6rem; }
th{ background: #f8fbfc; text-align: left; }

/* Footer */
.site-footer{
  color: var(--muted-ink);
  border-top: 1px solid var(--border);
  padding: 1rem 0;
  margin-top: 2rem;
  font-size: .95rem;
}

/* ================== Testimonials Carousel ================== */
.testimonials{ margin: clamp(16px, 3vw, 28px) 0; }
.testimonials-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:.75rem;
}
.testimonials-head h2{ margin:0; }
.testimonials-track{
  display:flex; gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom:.5rem;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.testimonial-card{
  flex: 0 0 84%;
  max-width:84%;
  scroll-snap-align:start;
  background: var(--paper);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:1rem;
  box-shadow: var(--shadow);
}
@media (min-width: 720px){ .testimonial-card{ flex-basis:46%; max-width:46%; } }
@media (min-width: 1024px){ .testimonial-card{ flex-basis:32%; max-width:32%; } }
.testimonial-quote{
  font-family: Georgia, "Times New Roman", serif;
  font-size:1.05rem;
  color: var(--ink);
  margin:0 0 .5rem 0;
}
.testimonial-cite{ margin:0; font-weight:600; color: var(--brand-dark); }
.testimonial-cite .muted{ color: var(--muted-ink); font-weight:500; }
.testimonials--compact .testimonials-head{ margin-bottom:.25rem; }
.testimonials--compact .testimonial-card{ padding:.85rem; }
.testimonials--compact .testimonial-quote{ font-size:1rem; }
.testimonials--compact .testimonial-cite{ font-size:.95rem; }

/* --- About hero --- */
.about-hero{
  background: linear-gradient(90deg, #f9fbfc 0%, #f1f9fa 100%);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 3rem);
  margin: clamp(1rem, 3vw, 2rem) 0;
}
.about-hero__content{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}
.about-hero__text{ max-width: 680px; display:flex; flex-direction:column; gap:.75rem; }
.about-hero__photo{ display:flex; justify-content:center; align-items:center; }
.about-headshot{
  width: 100%; max-width: 340px; height: auto;
  border-radius: 18px; box-shadow: 0 10px 26px rgba(0,0,0,.15); object-fit: cover;
}

/* Sections */
.about-section{ margin: clamp(1.25rem, 3vw, 2rem) 0; }
.feature-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.feature-card{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.feature-card h3{ margin-bottom:.35rem; }

/* Checklist */
.checklist{ list-style:none; margin: .75rem 0 0; padding:0; }
.checklist li{ padding-left: 1.6rem; position:relative; margin-bottom:.5rem; }
.checklist li::before{ content:"✓"; position:absolute; left:.25rem; color: var(--brand); font-weight:800; }

/* Bio cards */
.bio-cards{ display:grid; gap:1rem; grid-template-columns: repeat(3, 1fr); }
.bio-card{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.bio-card h3{ margin-bottom:.35rem; }

/* Responsive */
@media (max-width: 900px){
  .about-hero__content{ grid-template-columns: 1fr; text-align: center; }
  .about-hero__photo{ order: -1; margin-bottom: 1rem; }
  .about-headshot{ max-width: 280px; border-radius: 50%; }
}

/* Alternating section backgrounds + divider */
.about-section:nth-of-type(odd){ background: var(--paper); }
.about-section:nth-of-type(even){ background: #f8fafb; }
.about-section{
  padding: clamp(1.5rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.about-section h2{
  position: relative; margin-bottom: 1rem;
}
.about-section h2::after{
  content:""; display:block; width: 60px; height: 3px; background: var(--brand);
  margin-top: .35rem; border-radius: 2px;
}

/* --- Headshot overlay (kept in case used later) --- */
.about-hero__bg{
  position: absolute; right: -4%; bottom: 0;
  width: min(420px, 45%); height: auto;
  opacity: .22; filter: saturate(1.1) contrast(1.05);
  pointer-events: none; z-index: 1; border-radius: 50% 50% 0 0;
}

/* Two-column “Why I Teach” layout (text + blockquote) */
.two-col{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}
@media (max-width: 900px){
  .two-col{ grid-template-columns: 1fr; text-align: center; }
}

/* Pull Quote styling */
.pull-quote{
  position: relative;
  margin: 1.25rem 0 0;
  padding: 1.25rem 1.25rem 1.25rem 1.15rem;
  border-left: 6px solid var(--brand);
  background: linear-gradient(180deg, rgba(10,30,51,.06), rgba(10,30,51,.02));
  border-radius: 12px;
}
.pull-quote p{ margin: 0; font-size: clamp(1rem, 1.8vw, 1.125rem); line-height: 1.6; }
.pull-quote__mark{
  position: absolute; left: -0.5rem; top: -0.8rem;
  font-size: clamp(2.5rem, 6vw, 3.5rem); line-height: 1;
  transform: translateX(-100%); opacity: .2; font-weight: 700;
}
.pull-quote cite{
  display: block; margin-top: 0.4rem; font-style: normal; font-size: 0.95em;
  opacity: 0.8; color: var(--muted-ink);
}
@media (max-width: 720px){
  .pull-quote{ margin-top:1rem; }
  .pull-quote__mark{ display:none; }
}

/* ===== Scoped enhancements for Services page ===== */
.services-page .services-hero{ padding-top: 1rem; padding-bottom: .5rem; }
.services-page .services-hero .lead{ max-width: 65ch; }

/* grids */
.services-page .onboarding-cards,
.services-page .service-cards{
  display: grid; gap: clamp(0.9rem, 2vw, 1.25rem); grid-template-columns: 1fr;
}
@media (min-width: 760px){
  .services-page .onboarding-cards{ grid-template-columns: repeat(3, 1fr); }
  .services-page .service-cards{   grid-template-columns: repeat(3, 1fr); }
}
.services-page .onboarding-card,
.services-page .service-card{
  background: linear-gradient(180deg, rgba(10,30,51,.06), rgba(10,30,51,.02));
  border: 1px solid rgba(60,79,99,.18);
  border-radius: 16px; padding: clamp(1rem, 2.2vw, 1.25rem);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.services-page .service-card__head{ display:flex; flex-direction:column; gap:.15rem; margin-bottom:.5rem; }
.services-page .service-card__head h3{ margin:0; }
.services-page .price{ font-weight:700; color: var(--brand); }
.services-page .price span{ font-size: clamp(1.15rem, 2.2vw, 1.35rem); }
.services-page .subprice{ font-size:.9rem; opacity:.8; }
.services-page .bullets{ margin:.5rem 0 0 1.2rem; }
.services-page .bullets li{ margin:.25rem 0; }
.services-page .service-card__cta{ margin-top:.75rem; }

/* pricing table */
.services-page .pricing-table-wrap{ overflow-x:auto; }
.services-page .pricing-table{
  width:100%; border-collapse:collapse; font-size: clamp(.96rem, 1.6vw, 1rem);
}
.services-page .pricing-table th,
.services-page .pricing-table td{
  text-align:left; padding:.75rem; border-bottom:1px solid rgba(60,79,99,.18);
}
.services-page .pricing-table thead th{ background: rgba(10,30,51,.06); font-weight:700; }

/* FAQ accordion */
.services-page .faq{
  border:1px solid rgba(60,79,99,.18); border-radius:12px;
  padding:.75rem 1rem; background: rgba(10,30,51,.03); margin:.6rem 0;
}
.services-page .faq summary{ cursor:pointer; font-weight:600; list-style:none; }
.services-page .faq summary::-webkit-details-marker{ display:none; }
.services-page .faq summary:after{ content:"▸"; float:right; transform:translateY(1px); opacity:.7; }
.services-page .faq[open] summary:after{ content:"▾"; }
.services-page .faq__content{ margin-top:.5rem; }

/* CTAs */
.services-page .cta-row{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.75rem; }
.services-page .button.inline{
  display:inline-block; padding:.45rem .8rem; border-radius:.6rem;
  border:1px solid var(--brand); background: var(--brand);
  color:#fff; text-decoration:none; font-weight:600;
}

/* Quote band */
.services-page .reading-quote{ margin-top:1rem; }
.services-page .reading-quote__block{
  position:relative; padding:1.25rem 1.25rem 1rem 1.15rem;
  border-left:6px solid var(--brand);
  background: linear-gradient(180deg, rgba(10,30,51,.06), rgba(10,30,51,.02));
  border-radius:12px;
}
.services-page .reading-quote__mark{
  position:absolute; left:-0.5rem; top:-0.8rem;
  font-size:clamp(2.5rem,6vw,3.5rem); line-height:1;
  transform:translateX(-100%); opacity:.18; font-weight:700;
}
.services-page .reading-quote__block p{ margin:0; font-size:clamp(1rem,1.8vw,1.125rem); line-height:1.6; }
.services-page .reading-quote__block cite{
  display:block; margin-top:.4rem; font-style:normal; font-size:.95em; opacity:.8; color: var(--muted-ink);
}
@media (max-width:720px){ .services-page .reading-quote__mark{ display:none; } }

/* Photo strip */
.services-page .photo-strip h2{ margin-bottom:.6rem; }
.services-page .photo-grid{ display:grid; gap:clamp(.6rem, 2vw, 1rem); grid-template-columns:1fr; }
@media (min-width:760px){ .services-page .photo-grid{ grid-template-columns: repeat(3, 1fr); } }
.services-page .photo img{
  width:100%; height:auto; display:block; border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.services-page .photo figcaption{ font-size:.95rem; opacity:.85; margin-top:.35rem; }

/* ===== Contact page ===== */
.contact{ max-width: 860px; margin: clamp(1rem, 3vw, 2rem) auto; }
.contact-info{
  display:grid; grid-template-columns:1fr; gap:.25rem 1rem; margin:.5rem 0 1rem; color: var(--brand-dark);
}
.contact-info a{ font-weight:700; }
.contact-card{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  padding: clamp(1rem, 3vw, 1.5rem);
}
.form-row{ display:grid; grid-template-columns:1fr; gap:.9rem; margin-bottom:.9rem; }
@media (min-width:640px){ .form-row{ grid-template-columns:1fr 1fr; } }
.form-field{ display:flex; flex-direction:column; gap:.4rem; }
.form-field label{ font-weight:700; color: var(--brand-dark); }
.form-field input,
.form-field textarea{
  width:100%; padding:.65rem .75rem; border:1px solid var(--border); border-radius:10px;
  background:#fff; font:inherit; color:var(--ink); outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field textarea{ resize:vertical; }
.form-field input:focus,
.form-field textarea:focus{
  border-color: color-mix(in srgb, var(--brand) 60%, #0000);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, #0000);
}
.contact-card .button{ margin-top:.5rem; }
.page-contact .site-footer{ margin-top: 2rem; }

.services-page .icon-row{
  display:flex;
  align-items:center;
  gap:.6rem 1rem;
  flex-wrap:wrap;
  margin:.25rem 0 0;
}
.services-page .icon-item{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-weight:600;
  color: var(--brand-dark);
}

/* Connect Banner refinements */
.connect-banner {
  --bg: color-mix(in srgb, var(--brand) 10%, var(--paper));
  background: radial-gradient(1200px 400px at 15% 0%, var(--bg), var(--paper));
  border-top: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
  padding: clamp(1.75rem, 2.5vw, 2.5rem) 0;
  margin-top: 2.5rem;
}

.connect-banner .wrapper { max-width: 1100px; }

.connect-banner__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem 2rem;
}

.connect-banner h2 {
  margin: 0 0 .4rem;
  color: var(--ink);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  line-height: 1.2;
}

.connect-banner .lede {
  margin: 0;
  color: var(--muted-ink, #617485);
  max-width: 62ch;
}

/* Facebook button – brand-aligned hybrid */
.button.button--fb {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .65rem .9rem;
  border-radius: .65rem;
  background: linear-gradient(0deg, var(--brand), color-mix(in srgb, var(--brand) 88%, white));
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--brand) 40%, black);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--brand) 25%, transparent);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}

.button.button--fb:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 35%, transparent);
}

.button.button--fb .icon-fb {
  width: 1em;
  height: 1em;
  fill: #1877f2; /* Facebook blue for recognition */
  opacity: 0.9;
  flex: 0 0 auto;
  transition: opacity .2s ease;
}

.button.button--fb:hover .icon-fb {
  opacity: 1;
}