/* =========================================================================
   Marion Lawlor Tuition — shared stylesheet
   -------------------------------------------------------------------------
   All design tokens live in :root below. To re-skin the whole site
   (colours, fonts, spacing), edit the variables here — nothing else.
   Built on Bootstrap 5; this file only adds the brand layer on top.
   ========================================================================= */

:root {
  /* --- Palette ------------------------------------------------------- */
  --pine:       #2A3A33;  /* deepest green — headings & body text        */
  --ink-soft:   #5C6B63;  /* muted text, captions, attributions          */
  --sage:       #5B7C6B;  /* primary accent — links, buttons, eyebrows   */
  --sage-deep:  #3E5A4C;  /* hover / pressed                             */
  --paper:      #FBF9F4;  /* main page background (warm off-white)        */
  --sand:       #EFE9DD;  /* alternating section background               */
  --brass:      #B0894F;  /* flourishes: quote marks, hairline accents   */
  --line:       #E3DDD0;  /* hairline borders                            */

  /* --- Type ---------------------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Layout -------------------------------------------------------- */
  --measure: 68ch;        /* comfortable reading width                   */
  --radius: 3px;
}

/* =========================================================================
   Base
   ========================================================================= */
html { scroll-behavior: smooth; }

/* Custom elements (shared header/footer injected by js/site.js) */
ml-header, ml-footer { display: block; }

body {
  font-family: var(--font-body);
  color: var(--pine);
  background: var(--paper);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display-face {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--pine);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

p { margin-bottom: 1.15rem; }

a { color: var(--sage-deep); text-underline-offset: 3px; }
a:hover { color: var(--brass); }

strong { font-weight: 700; }

/* Reusable readable column */
.measure { max-width: var(--measure); }

/* Eyebrow label above section titles */
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brass);
  margin-bottom: 0.65rem;
}

/* Thin brass rule used as a quiet divider */
.rule-brass {
  width: 56px;
  height: 2px;
  background: var(--brass);
  border: 0;
  opacity: 1;
  margin: 0 0 1.5rem;
}
.rule-brass.center { margin-left: auto; margin-right: auto; }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn-tuition {
  --bs-btn-color: #fff;
  background: var(--sage);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
  padding: 0.85rem 1.9rem;
  transition: background-color .18s ease, transform .18s ease;
}
.btn-tuition:hover {
  background: var(--sage-deep);
  color: #fff;
  transform: translateY(-2px);
}

/* =========================================================================
   Header / navbar
   ========================================================================= */
.site-header {
  background: rgba(251, 249, 244, 0.92);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line);
}

.navbar-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--pine) !important;
}

.site-header .nav-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--pine) !important;
  padding: 0.4rem 0.9rem !important;
  position: relative;
}
.site-header .nav-link:hover,
.site-header .nav-link.active,
.site-header .nav-link[aria-current="page"] {
  color: var(--sage-deep) !important;
}
.site-header .nav-link.active::after,
.site-header .nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: 0.05rem;
  height: 2px;
  background: var(--brass);
}

.site-header .dropdown-menu {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(42, 58, 51, 0.10);
  padding: 0.4rem;
}
.site-header .dropdown-item {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--pine);
  border-radius: 2px;
  padding: 0.5rem 0.8rem;
}
.site-header .dropdown-item:hover,
.site-header .dropdown-item.active {
  background: var(--sand);
  color: var(--sage-deep);
}

.nav-cta {
  margin-left: 0.4rem;
}
.nav-cta .nav-link {
  background: var(--sage);
  color: #fff !important;
  border-radius: var(--radius);
  padding: 0.45rem 1.1rem !important;
}
.nav-cta .nav-link:hover { background: var(--sage-deep); color: #fff !important; }
.nav-cta .nav-link.active::after { display: none; }

/* =========================================================================
   Hero (home) and page title bands
   ========================================================================= */
.hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  /* The pine gradient is always visible; the photo layers on top once
     images/home-hero.jpg exists. If the file is missing, the gradient
     alone still reads as an intentional designed hero. */
  background:
    linear-gradient(180deg, rgba(28,40,34,0.45) 0%, rgba(28,40,34,0.62) 100%),
    var(--hero-image, none),
    linear-gradient(150deg, #35493E 0%, #223029 100%);
  background-size: cover, cover, cover;
  background-position: center;
}
.hero__title {
  color: #fff;
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
  margin: 0;
}
.hero__sub {
  color: rgba(255,255,255,0.92);
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.82rem;
  font-weight: 700;
  margin-top: 1rem;
}

/* Slimmer band used as the title for interior pages */
.page-band {
  background: linear-gradient(150deg, #35493E 0%, #223029 100%);
  color: #fff;
  text-align: center;
  padding: clamp(3rem, 8vw, 5.5rem) 1rem;
}
.page-band h1 { color: #fff; font-weight: 500; font-size: clamp(2rem, 4.5vw, 3.3rem); }
.page-band .page-band__sub {
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 0.5rem;
}

/* =========================================================================
   Sections
   ========================================================================= */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--sand { background: var(--sand); }

.section h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); margin-bottom: 0.85rem; }
.section h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 1.6rem;
  margin-bottom: 0.4rem;
  color: var(--sage-deep);
}

/* Framed photo. The sand background keeps a missing/slow image tidy. */
.framed {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.framed img { width: 100%; height: auto; display: block; }

/* =========================================================================
   Contact mini-cards (home page) — the ➤ / ☎ blocks
   ========================================================================= */
.contact-line { margin-bottom: 1.6rem; }
.contact-line .label {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--sage-deep);
  margin-bottom: 0.2rem;
}
.contact-line .glyph { color: var(--brass); margin-right: 0.4rem; }

/* =========================================================================
   Quotes / testimonials
   ========================================================================= */
.quote {
  position: relative;
  padding: 2rem 1.5rem 1.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  height: 100%;
}
.quote::before {
  content: "\201C";               /* opening curly quote */
  font-family: var(--font-display);
  color: var(--brass);
  font-size: 3.4rem;
  line-height: 1;
  position: absolute;
  top: 0.6rem; left: 1rem;
  opacity: 0.5;
}
.quote p { font-size: 1.02rem; position: relative; }
.quote .attrib {
  display: block;
  margin-top: 0.6rem;
  font-weight: 700;
  font-style: normal;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

/* Masonry-style flow for the testimonials grid (CSS columns, no JS) */
.quote-masonry { column-gap: 1.5rem; }
@media (min-width: 768px)  { .quote-masonry { column-count: 2; } }
@media (min-width: 1200px) { .quote-masonry { column-count: 3; } }
.quote-masonry .quote {
  break-inside: avoid;
  margin-bottom: 1.5rem;
  display: inline-block;
  width: 100%;
}

/* Large featured testimonial */
.quote--featured {
  background: var(--sand);
  border: 0;
  padding: clamp(2rem, 5vw, 3.25rem);
}
.quote--featured p { font-size: clamp(1.05rem, 1.8vw, 1.28rem); line-height: 1.75; }

/* A spotlight pull-quote on the home page */
.pullquote {
  border-left: 3px solid var(--brass);
  padding-left: 1.4rem;
}
.pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: var(--pine);
}
.pullquote .attrib { font-family: var(--font-body); color: var(--ink-soft); font-weight: 700; font-size: 0.92rem; }

/* The large intro statement on the Primary page */
.statement {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.5;
  color: var(--pine);
  border-left: 3px solid var(--brass);
  padding-left: 1.5rem;
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  background: var(--pine);
  color: rgba(255,255,255,0.82);
  text-align: center;
  padding: 3rem 1rem;
}
.site-footer .footer-brand {
  font-family: var(--font-display);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 1.1rem;
}
.site-footer nav { line-height: 2.2; }
.site-footer a {
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0 0.15rem;
}
.site-footer a:hover { color: var(--brass); }
.site-footer .sep { color: rgba(255,255,255,0.3); padding: 0 0.35rem; }
.site-footer .small-print {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
}

/* =========================================================================
   Accessibility & motion
   ========================================================================= */
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

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