/* =========================================================
   Mark Devlin Training — shared stylesheet
   Loaded by every page. Edit colors/fonts here once,
   it updates the whole site.
   ========================================================= */

:root{
  --blue: #114b70;
  --green: #2dd075;
  --ivory: #f6f2e9;
  --mint: #d7f3e0;
  --rose: #e888c2;
  --rose-deep: #c25a9a;
  --ink: #10281f;
  --ink-soft: #3a4f47;
  --paper: #fbfaf6;
  --max: 1180px;

  /* the % of page width text is allowed to occupy, left-aligned */
  --text-col-width: 55%;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Work Sans', sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; max-height:10%; display:block; }
a{ color:inherit; }

h1,h2,h3{
  font-family:'Fraunces', serif;
  line-height:1.1;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

:focus-visible{
  outline: 3px solid var(--rose-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================
   THE 55% TEXT RULE
   Every block of body copy on every page sits inside
   .content-col, which caps its width and left-aligns it,
   leaving the right side of the page clear for imagery.
   ========================================================= */
.content-col{
  max-width: var(--text-col-width);
  margin-left: 0;
  margin-right: auto;
}

@media (max-width: 760px){
  /* On small screens there's no room to split text/image,
     so ordinary body text is allowed the full width. */
  .content-col{ max-width: 100%; }

  /* The hero identity is a special case: it becomes a solid card
     sitting below the image, so it keeps its own narrower width
     instead of stretching edge-to-edge over the picture. */
  .hero{
    min-height: auto;
    max-height: 20vh;
    padding-bottom: clamp(1.5rem, 6vw, 2.5rem);
  }
  .hero .identity{
    max-width: 92%;
    width: auto;
    margin: 1.75rem auto 0;
    background: var(--blue);
    border-radius: 16px;
    padding: 1.5rem clamp(1.1rem, 6vw, 2rem) 1.75rem;
    box-shadow: 0 10px 30px rgba(6,20,17,.25);
  }
}

/* ---------- HERO (used on every page) ---------- */
.hero{
  position:relative;
  min-height: 70vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding: clamp(1.25rem, 4vw, 3rem) clamp(1.25rem, 6vw, 4rem) clamp(2.5rem, 6vw, 4rem);
}

/* The shared background picture sits on this layer.
   Swap the background-image url in each page's inline style,
   or centralize it here once you have the final filename. */
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Optional per-page image layered on top of the shared background,
   e.g. a photo relevant to that page's content.
   Kept on the right side so it never competes with the text column. */
.hero-overlay{
  position:left;
  z-index:1;
  max-height:60vh;
  border-radius:30px;
  right: 4%;
  top: 50%;
/*  transform: translateY(-50%); */
  width: min(38vw, 380px);
  filter: drop-shadow(0 12px 30px rgba(6,20,17,.35));
}

.hero-inner{
  position:relative; z-index:2;
  max-width: var(--max);
  margin: 0 auto;
  width:100%;
  flex:1;
  display:flex;
  flex-direction:column;
}

.identity{
  margin-top: clamp(1rem, 5vh, 3.5rem);
}

.identity h1{
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  font-weight:600;
  color: var(--ivory);
  text-shadow: 0 2px 18px rgba(9,30,26,.25);
}

.identity .role{
  display:inline-block;
  font-family:'Work Sans', sans-serif;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--rose);
  margin-bottom:.6em;
}

.identity p{
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--mint);
  line-height:1.6;
}

/* ---------- NAV ---------- */
nav.pill{
  margin-top: clamp(1.5rem, 4vh, 2.75rem);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: 999px;
  padding: .4rem;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:.15rem;
  width: fit-content;
  margin-left:0;
  margin-right:auto;
  position:relative;
  z-index:3;
}

.nav-links{
  list-style:none;
  display:flex;
  gap:.15rem;
  margin:0; padding:0;
}

.nav-links a{
  display:block;
  text-decoration:none;
  color: var(--ivory);
  font-weight:500;
  font-size:.95rem;
  padding:.65rem 1.1rem;
  border-radius:999px;
  position:relative;
  transition: background .2s ease, color .2s ease;
  white-space:nowrap;
}

.nav-links a:hover{
  background: rgba(255,255,255,.16);
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:1.1rem; right:1.1rem; bottom:.4rem;
  height:2px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .25s ease;
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after{
  transform: scaleX(1);
}

/* current-page tab, set by js/include.js */
.nav-links a.active{
  background: rgba(255,255,255,.18);
}
.nav-links a.active::after{
  transform: scaleX(1);
}

.menu-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:.6rem .9rem;
  color:var(--ivory);
}
.menu-toggle svg{ width:24px; height:24px; }

@media (max-width: 640px){
  .menu-toggle{ display:inline-flex; }

  nav.pill{ flex-wrap:wrap; }
.nav-links{
    position:absolute;
    top: calc(100% + .6rem);
    left:0;
    width: max-content;
    min-width: 180px;
    max-width: 80vw;
    flex-direction:column;
    background: rgba(17,75,112,.96);
    backdrop-filter: blur(14px);
    border-radius:18px;
    padding:.5rem;
    display:none;
    gap:.2rem;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:.85rem 1rem; }

  .hero-overlay{ width:34vw; opacity:.9; }
}

/* ---------- SECTIONS ---------- */
main section{
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 6vw, 4rem);
}
.section-inner{
  max-width: var(--max);
  margin:0 auto;
}
.eyebrow{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--rose-deep);
  margin-bottom:.75rem;
  display:block;
}
.section-inner h2{
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  color: var(--blue);
}
.lede{
  font-size:1.05rem;
  color: var(--ink-soft);
  line-height:1.7;
}

/* Lists don't automatically pick up .lede's color, so they'd otherwise
   render in the default (near-black) text color. Match them explicitly
   to whichever body-text color is in use in that section. */
.section-inner ul,
.section-inner ol{
  color: var(--ink-soft);
  line-height:1.7;
}
.identity ul,
.identity ol{
  color: var(--mint);
}
#testimonials-section ul,
#testimonials-section ol{
  color: var(--mint);
}

#about-section{ background: var(--paper); }
#programs-section{ background: #eef7f0; }
#testimonials-section{ background: var(--blue); color: var(--mint); }
#testimonials-section .eyebrow{ color: var(--rose); }
#testimonials-section h2{ color: var(--ivory); }
#contact-section{ background: var(--paper); }

.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:1.5rem;
  margin-top:2.5rem;
}
.card{
  background: var(--paper);
  border: 1px solid #dde8e1;
  border-radius: 18px;
  padding: 1.75rem;
}
.card .num{
  font-family:'Fraunces', serif;
  font-size:2rem;
  color: var(--green);
  display:block;
  margin-bottom:.5rem;
}
.card h3{ font-size:1.15rem; color: var(--blue); }
.card p{ color: var(--ink-soft); font-size:.95rem; line-height:1.6; margin:0; }

.quote{
  font-family:'Fraunces', serif;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight:400;
  color: var(--ivory);
  margin: 2rem 0 1rem;
  line-height:1.5;
}
.quote cite{
  display:block;
  font-family:'Work Sans', sans-serif;
  font-style:normal;
  font-size:.9rem;
  color: var(--mint);
  opacity:.85;
}

form{ display:flex; flex-direction:column; gap:1rem; margin-top:2rem; }
label{ font-size:.9rem; font-weight:600; color:var(--blue); }
input, textarea{
  width:100%;
  font-family:inherit;
  font-size:1rem;
  padding:.75rem .9rem;
  border-radius:10px;
  border:1px solid #cfd9d3;
  background:#fff;
}
textarea{ min-height:120px; resize:vertical; }
button.submit{
  align-self:flex-start;
  background: var(--blue);
  color: var(--ivory);
  border:none;
  font-weight:600;
  padding: .85rem 1.6rem;
  border-radius:999px;
  cursor:pointer;
  transition: background .2s ease;
}
button.submit:hover{ background:#0d3a58; }

.contact-details p{ color:var(--ink-soft); line-height:1.7; }
.contact-details a{ color:var(--blue); font-weight:600; text-decoration:underline; }

footer{
  background: var(--ink);
  color: var(--mint);
  text-align:center;
  padding:2rem 1rem;
  font-size:.85rem;
}