/* styles.css — Stone & Light */

/* ─── Theme Tokens ─────────────────────────────────────────────────────────── */
:root{
    --ink:#0f1e33;        /* text */
    --night:#3b2a5a;      /* header/bg */
    --indigo:#3b2a5a;     /* accent */
    --sky:#e9edf7;        /* light bg */
    --gold:#f2d27a;       /* accent */
    --white:#fff;
    --muted:#6b7280;
    --maxw:88rem;
    --header-h:56px;
}

/* ─── Base ─────────────────────────────────────────────────────────────────── */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    margin:0;
    font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    color:var(--ink);
    background:var(--white);
    line-height:1.65;
    text-rendering:optimizeLegibility;
}
h1,h2,h3{
    font-family:"Merriweather",Georgia,"Times New Roman",serif;
    line-height:1.25;
    margin:0 0 .5em;
    color:var(--night);
}
h1{ font-size:clamp(2rem,3vw + 1rem,3.25rem); }
h2{ font-size:clamp(1.5rem,1.5vw + 1rem,2rem); }
h3{ font-size:clamp(1.15rem,1vw + .75rem,1.4rem); color:var(--indigo); }
p,li{ font-size:1.05rem; }
ul{ padding-left:1.25rem; }
.wrap{ width:min(100%,var(--maxw)); margin:0 auto; padding:0 1rem; }
.narrow{ width:min(820px,100%); }
.pad-xl{ padding:5rem 0; }
.pad-lg{ padding:3rem 0; }

/* ─── Header (sticky) ──────────────────────────────────────────────────────── */
.site-header{
    position:sticky; top:0; z-index:50; height:var(--header-h);
    background:linear-gradient(180deg,rgba(43,23,70,.98) 0%,rgba(43,23,70,.92) 100%);
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header .wrap{
    height:100%;
    display:flex; align-items:center; justify-content:space-between;
}
.brand{
    color:var(--gold); text-decoration:none; font-weight:700; letter-spacing:.5px;
}
.main-nav ul{
    list-style:none; margin:0; padding:0;
    display:flex; gap:1rem; align-items:center;
}
.main-nav a{
    color:#e6e8ee; text-decoration:none; font-size:.95rem;
    padding:.35rem .5rem; border-radius:.4rem;
}
.main-nav a:hover,.main-nav a:focus{ background:rgba(255,255,255,.08); }

/* ─── Hero ─────────────────────────────────────────────────────────────────── */
.hero{ position:relative; margin-top:0; }
.hero img{ display:block; width:100%; height:auto; }
.hero-overlay{
    position:absolute; inset:0;
    display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
    text-align:center; padding:2rem 2rem 3.5rem; background:none; color:var(--white);
}
.hero-overlay h1{ color:var(--white); text-shadow:0 8px 28px rgba(0,0,0,.35); }
.tag{
    margin-top:.5rem; font-weight:300;
    font-size:clamp(1.05rem,1.1vw + .7rem,1.4rem);
    text-shadow:0 2px 10px rgba(0,0,0,.25);
}
@media (max-width:640px){ .hero-overlay{ padding-bottom:2.25rem; } }

/* ─── Content ──────────────────────────────────────────────────────────────── */
.content-section{ background:var(--white); }
.content-section:nth-of-type(odd){ background:#fbfcff; }
.content-section p{ color:#1f2937; }
.content-section ul li{ margin:.4rem 0; }

/* ─── Parallax bands ───────────────────────────────────────────────────────── */
.parallax{
    height:clamp(40vh,48vw,62vh);
    background-size:cover; background-position:center; background-repeat:no-repeat;
    background-attachment:fixed;
    border-top:1px solid rgba(0,0,0,.06);
    border-bottom:1px solid rgba(0,0,0,.06);
}
/* iOS/Android avoid fixed */
@supports (-webkit-touch-callout:none){ .parallax{ background-attachment:scroll; } }
@media (max-width:768px){
    .parallax{ background-attachment:scroll; }
    .pad-xl{ padding:3.75rem 0; }
}

/* ─── Footer (current markup) ──────────────────────────────────────────────── */
.site-footer{
    background:#0f1626; color:#dbe1f0;
    padding:24px 0; border-top:1px solid rgba(255,255,255,.12);
}
.footer-wrap{
    width:min(100%,var(--maxw)); margin:0 auto; padding:0 1rem;
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:wrap;
}
.footer-brand{ display:flex; align-items:center; gap:10px; }
.flag{ height:20px; display:block; } /* tuned size */
.site-name{ font-weight:600; letter-spacing:.02em; }

.footer-menu a{
    color:#dbe1f0; text-decoration:none; margin-right:14px;
}
.footer-menu a:last-child{ margin-right:0; }
.footer-menu a:hover{ text-decoration:underline; }

.footer-social a{
    display:inline-flex; align-items:center; margin-left:10px;
}
.footer-social a:first-child{ margin-left:0; }

.icon{ width:24px; height:24px; display:block; } /* 48px PNG → 24px UI */

.footer-legal{
    display:block; width:100%;
    margin:10px 0 0; padding:8px 0;
    text-align:center; color:#aeb8cf;
}

@media (max-width:640px){
    .footer-wrap{ justify-content:center; text-align:center; }
}

/* ─── Forms / Contact ─────────────────────────────────────────────────────── */
.muted{ color:var(--muted); }
.contact-placeholder{
    background:linear-gradient(180deg,#f7f9ff 0%,#ffffff 60%);
    border-top:1px solid rgba(0,0,0,.06);
    border-bottom:1px solid rgba(0,0,0,.06);
}
.contact-form{ display:grid; gap:1rem; margin-top:1rem; }
.contact-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.contact-form label{ display:grid; gap:.4rem; }
.contact-form input,.contact-form textarea{
    width:100%; padding:.8rem .9rem; border:1px solid #cfd6e6; border-radius:.6rem; font:inherit; background:#fff;
}
.contact-form input:disabled,.contact-form textarea:disabled{ background:#f3f5fb; color:#6b7280; }
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:.7rem 1.1rem; border-radius:.6rem; border:1px solid rgba(0,0,0,.08);
    background:var(--gold); color:#101010; font-weight:700;
    cursor:not-allowed; opacity:.7;
}
@media (max-width:720px){ .contact-form .row{ grid-template-columns:1fr; } }

/* ─── Mobile Nav Controls ─────────────────────────────────────────────────── */
.nav-toggle{
    display:none; width:40px; height:40px; border:0; background:transparent; padding:8px;
    border-radius:.5rem; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    line-height:0; cursor:pointer;
}
.nav-toggle:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.nav-toggle .bar{
    display:block; width:22px; height:2px; background:#f0ecff; border-radius:2px;
    transition:transform .2s ease, opacity .2s ease;
}
#nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
#nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
#nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:900px){ .nav-toggle{ display:inline-flex; } }

/* Mobile nav drawer */
@media (max-width:900px){
    .site-header .wrap{ position:relative; }
    .main-nav{
        position:absolute; top:var(--header-h); left:0; right:0; z-index:60;
        background:linear-gradient(180deg,rgba(43,23,70,.98) 0%,rgba(43,23,70,.94) 100%);
        border-bottom:1px solid rgba(255,255,255,.12);
        display:block; max-height:0; overflow:hidden; opacity:0; visibility:hidden;
        transform:translateY(-8px);
        transition:max-height .3s ease, opacity .2s ease, transform .2s ease, visibility 0s linear .3s;
    }
    #nav-toggle[aria-expanded="true"] + .main-nav{
        max-height:60vh; opacity:1; visibility:visible; transform:translateY(0);
        transition:max-height .35s ease, opacity .2s ease, transform .2s ease, visibility 0s;
    }
    .main-nav ul{
        display:flex; flex-direction:column; align-items:stretch; gap:0; padding:.5rem; margin:0;
    }
    .main-nav a{ display:block; padding:.85rem 1rem; color:#f0ecff; }
    .main-nav a:hover,.main-nav a:focus{ background:rgba(255,255,255,.12); }
}

/* ─── Anchor offset for sticky header ─────────────────────────────────────── */
:root{ --anchor-offset:calc(var(--header-h) + 12px); }
@supports (scroll-margin-top:1px){
    #hero,.content-section,.contact-placeholder{ scroll-margin-top:var(--anchor-offset); }
}

/* ─── State helpers / Accessibility ───────────────────────────────────────── */
body.nav-open{ overflow:hidden; }
@media (min-width:901px){ body.nav-open{ overflow:auto; } }
a:focus-visible,button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
@media (max-width:900px){
    :root{ --header-h:48px; }
    .brand{ font-size:1rem; }
    .nav-toggle{ width:36px; height:36px; padding:6px; }
    .nav-toggle .bar{ width:20px; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    *{ animation:none !important; transition:none !important; }
    .parallax{ background-attachment:scroll; }
}
@media (prefers-reduced-motion:reduce) and (max-width:900px){
    .main-nav{ transition:none !important; }
}

/* ─── Spam honeypot ───────────────────────────────────────────────────────── */
.contact-form .hp{
    position:absolute !important; left:-10000px; top:auto; width:1px; height:1px;
    overflow:hidden; white-space:nowrap;
}

/* ─── Flash messages ──────────────────────────────────────────────────────── */
.flash{
    padding:.85rem 1rem; text-align:center; font-weight:600; border-bottom:2px solid transparent;
}
.flash.ok{ background:#e7f6ec; color:#18794e; border-bottom-color:#18794e; }
.flash.err{ background:#feecec; color:#b42318; border-bottom-color:#b42318; }
@media (max-width:640px){ .hero .tag{ display:none; } }


/* Meet your teacher — floated portrait */
#meet-your-teacher .wrap::after {
    content: "";
    display: table;
    clear: both; /* clearfix for desktop float */
}

#meet-your-teacher .teacher-photo {
    display: block;
    width: clamp(180px, 33%, 360px); /* about a third on desktop */
    height: auto;
    aspect-ratio: 734 / 1000;       /* helps browsers reserve space */
}

/* Desktop/tablet: float left with breathing room */
@media (min-width: 900px) {
    #meet-your-teacher .teacher-photo {
        float: left;
        margin: 0 1.25rem 0.75rem 0;  /* right gutter, a bit of bottom */
    }
}

/* Phones: stack inline with text, no float */
@media (max-width: 899.98px) {
    #meet-your-teacher .teacher-photo {
        float: none;
        width: min(70%, 360px);       /* comfy inline size on small screens */
        margin: 0 0 1rem 0;
    }
}

/* ========== Vertical spacing tune-up (Stone & Light) ========== */

/* Section padding: reduce big gutters */
.content-section {
    /* was likely larger; tighten globally */
    padding-block: clamp(1.75rem, 2.5vw + 0.5rem, 3rem);
}

/* Kill “double spacing” where bottom margins stack */
.content-section > *:last-child {
    margin-bottom: 0;
}

/* Headings not so chunky */
.content-section h2 {
    margin-top: 0;
    margin-bottom: 0.6rem;
    line-height: 1.2;
}

/* Paragraph rhythm */
.content-section p {
    margin-top: 0;
    margin-bottom: 0.9rem;
}

/* Extra insurance: remove default gap between consecutive sections */
.content-section + .content-section {
    margin-top: 0; /* rely on padding-block only */
}

/* Narrow wrapper: keep a sane max width so the widget and text feel balanced */
.wrap.narrow {
    max-width: 52rem; /* ~832px */
}