/* site.css - Minerva Schools & Colleges, "Heritage" design: paper background, crest maroon and navy, Fraunces serif display,
   Source Sans body. Flat surfaces, hairline rules, 3-4px radii. Reads well on a phone. */
:root
{
    --page: #f7f2e9;
    --paper: #fffdf8;
    --alt: #efe7d8;
    --line: #dccfb8;
    --ink: #2a2520;
    --ink-soft: #6b6155;
    --primary: #1f2870;
    --primary-deep: #171d52;
    --primary-soft: #e8e4d6;
    --accent: #8a1538;
    --accent-soft: #f3dde4;
    --gold: #b8923a;
    --radius: 3px;
    --radius-lg: 4px;
    --display: 'Fraunces', Georgia, serif;
    --body: 'Source Sans 3', 'Segoe UI', sans-serif;
}
*               { box-sizing: border-box; }
html            { scroll-behavior: smooth; }
body            { margin: 0; font: 17px/1.6 var(--body); color: var(--ink); background: var(--page); }
img             { max-width: 100%; display: block; }
/* A grid child defaults to min-width:auto, so a wide photo would stretch its column past the phone screen. */
.hero > *, .split > *, .two-col > *, .cta-box > *, .band-inner > *, .profile > *, .cards > * { min-width: 0; }
a               { color: var(--primary); }
h1, h2, h3, h4  { font-family: var(--display); line-height: 1.12; margin: 0 0 .6rem; color: var(--primary-deep); font-weight: 600; letter-spacing: -.01em; }
h1              { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2              { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
h3              { font-size: 1.3rem; }
h4              { font-size: 1.05rem; }
p               { margin: 0 0 1rem; }
.wrap           { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }
.kicker         { font-family: var(--body); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: .5rem; }
.muted          { color: var(--ink-soft); }
.lead           { font-size: 1.15rem; }
.btn            { display: inline-block; padding: .8rem 1.4rem; border-radius: var(--radius); background: var(--accent); color: #fff; text-decoration: none;
                  font-weight: 600; border: 2px solid var(--accent); font-family: var(--body); font-size: 1rem; cursor: pointer; }
.btn:hover      { background: #a21a43; border-color: #a21a43; }
.btn.ghost      { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn.ghost:hover { background: var(--primary-soft); }
.btn.big        { padding: 1rem 1.8rem; font-size: 1.1rem; }
.actions        { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---- top bar and header --------------------------------------------------------------------------------------- */
.topbar         { background: var(--accent); color: #f3d6de; font-size: .85rem; }
.topbar .wrap   { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; min-height: 36px; align-items: center; }
.topbar a       { color: #fff; text-decoration: none; }
.topbar-links a { margin-left: 1.25rem; }
.topbar-links a.hl { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.site-head      { background: var(--paper); border-bottom: 3px double var(--accent); position: sticky; top: 0; z-index: 20; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 84px; }
.logo img       { height: 64px; width: auto; }
.nav            { display: flex; align-items: center; gap: .15rem; }
.nav > a, .nav .menu > a { text-decoration: none; color: var(--ink); padding: .5rem .8rem; border-radius: var(--radius); font-weight: 600; display: inline-block; }
.nav > a:hover, .nav > a.active, .nav .menu:hover > a, .nav .menu.active > a { background: var(--primary-soft); color: var(--primary-deep); }
.nav .menu      { position: relative; }
.nav .menu > a i { display: inline-block; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: 0 0 3px 4px; }
.nav .drop      { display: none; position: absolute; left: 0; top: 100%; min-width: 280px; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--accent);
                  padding: .4rem 0; z-index: 30; }
.nav .menu:hover .drop, .nav .menu:focus-within .drop { display: block; }
.nav .drop a    { display: block; padding: .5rem 1rem; text-decoration: none; color: var(--ink); }
.nav .drop a small { display: block; color: var(--ink-soft); font-size: .8rem; }
.nav .drop a:hover { background: var(--primary-soft); }
.nav a.nav-cta  { margin-left: .5rem; color: #fff !important; background: var(--accent) !important; }
.nav-toggle     { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }
.nav-toggle span { display: block; height: 3px; background: var(--primary-deep); margin: 7px 8px; border-radius: 2px; }
@media (max-width: 980px)
{
    .nav-toggle { display: block; }
    .nav        { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); flex-direction: column; align-items: stretch;
                  padding: .5rem 1rem 1rem; border-bottom: 1px solid var(--line); }
    body.nav-open .nav { display: flex; }
    .nav .menu  { position: static; }
    .nav .drop  { display: block; position: static; border: 0; border-left: 3px solid var(--line); margin: 0 0 .5rem .8rem; min-width: 0; }
    .nav a.nav-cta { margin: .5rem 0 0; text-align: center; }
}

/* ---- hero (home) and page heads ------------------------------------------------------------------------------- */
.hero           { background: var(--page); display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; max-width: 1180px; margin: 0 auto; padding: 3.5rem 1.25rem; }
.hero-media img { height: 420px; width: 100%; object-fit: cover; border: 10px solid var(--paper); box-shadow: 0 0 0 1px var(--line); }
.hero-text      { max-width: 620px; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .hero-media img { height: 300px; } }
.page-head      { background: var(--primary-deep); color: #fff; padding: 3rem 0; }
.page-head .kicker { color: var(--gold); }
.page-head h1   { color: #fff; margin-bottom: .4rem; }
.page-head p    { color: #c9cff5; max-width: 720px; margin: 0; font-size: 1.1rem; }
.page-head.photo { position: relative; min-height: 300px; display: flex; align-items: flex-end; overflow: hidden; }
.page-head.photo img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-head.photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 29, 82, .35), rgba(23, 29, 82, .9)); }
.page-head.photo .wrap { position: relative; width: 100%; z-index: 1; }

/* ---- stats ---------------------------------------------------------------------------------------------------- */
.stats          { background: var(--accent); color: #fff; }
.stats-grid     { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats-grid div { padding: 1.5rem 1.25rem; border-left: 1px solid rgba(255, 255, 255, .2); }
.stats-grid div:first-child { border-left: 0; }
.stats-grid b   { display: block; font-family: var(--display); font-size: 2.2rem; line-height: 1; font-weight: 600; }
.stats-grid span { font-size: .9rem; opacity: .85; }
@media (max-width: 800px) { .stats-grid { grid-template-columns: 1fr 1fr; } .stats-grid div:nth-child(3) { border-left: 0; } }

/* ---- blocks, cards, prose ------------------------------------------------------------------------------------- */
.block          { padding: 4rem 0; }
.block.alt      { background: var(--alt); }
.block.tight    { padding: 2.5rem 0; }
.section-head   { max-width: 720px; margin-bottom: 2.25rem; }
.section-head h2::after { content: ''; display: block; width: 64px; height: 3px; background: var(--gold); margin-top: .8rem; }
.cards          { display: grid; gap: 1.25rem; }
.cards.three    { grid-template-columns: repeat(3, 1fr); }
.cards.two      { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .cards.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cards.three, .cards.two { grid-template-columns: 1fr; } }
.card           { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--primary); border-radius: var(--radius-lg); padding: 1.5rem;
                  text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.card h3        { margin-top: .5rem; }
.card p         { font-size: .95rem; }
.card .more     { margin-top: auto; color: var(--accent); font-weight: 600; }
a.card:hover    { border-color: var(--accent); }
.tag            { align-self: flex-start; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: .2rem .6rem;
                  border-radius: 2px; background: var(--accent-soft); color: var(--accent); }
.prose          { max-width: 760px; }
.prose h2       { margin-top: 2rem; }
.prose h3       { margin-top: 1.5rem; }
.prose ul       { padding-left: 1.25rem; }
.prose li       { margin-bottom: .35rem; }
.two-col        { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }
.sidebox        { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 1.5rem; }
.sidebox h3     { font-size: 1.1rem; }
.sidebox ul     { list-style: none; padding: 0; margin: 0; }
.sidebox li     { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.sidebox li:last-child { border-bottom: 0; }

.split          { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.split-media img { border: 10px solid var(--paper); box-shadow: 0 0 0 1px var(--line); width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.split.flip .split-media { order: 2; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split.flip .split-media { order: 0; } }
.ticks          { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.ticks li       { padding-left: 1.6rem; position: relative; margin-bottom: .5rem; }
.ticks li::before { content: ''; position: absolute; left: 2px; top: .55rem; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }

.gallery        { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery figure { margin: 0; position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 2; }
.gallery img    { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem 1rem; color: #fff; font-weight: 600;
                  background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr 1fr; } }

.band           { background: var(--primary-deep); color: #fff; padding: 3.5rem 0; }
.band h2        { color: #fff; }
.band .kicker   { color: var(--gold); }
.band p         { color: #c9cff5; max-width: 640px; }
.band-inner     { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.band .btn      { background: #fff; color: var(--primary-deep); border-color: #fff; }

.people         { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.person img     { width: 140px; height: 140px; object-fit: cover; object-position: top; border-radius: 50%; margin-bottom: 1rem; border: 4px solid var(--paper); box-shadow: 0 0 0 2px var(--line); }
.person p       { font-size: .95rem; }
@media (max-width: 800px) { .people { grid-template-columns: 1fr; } }
.profile        { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: start; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.profile:last-child { border-bottom: 0; }
.profile img    { width: 200px; height: 240px; object-fit: cover; object-position: top; border: 8px solid var(--paper); box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 700px) { .profile { grid-template-columns: 1fr; } }

/* ---- forms and tables ----------------------------------------------------------------------------------------- */
.cta-box        { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; background: var(--paper); border: 1px solid var(--line); padding: 2.5rem; }
@media (max-width: 900px) { .cta-box { grid-template-columns: 1fr; } }
.form           { display: grid; gap: .9rem; }
.form.two       { grid-template-columns: 1fr 1fr; }
.form .full     { grid-column: 1 / -1; }
@media (max-width: 600px) { .form.two { grid-template-columns: 1fr; } }
label           { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; color: var(--primary-deep); }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], select, textarea
                { width: 100%; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; background: var(--paper); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
textarea        { min-height: 130px; }
small.help      { color: var(--ink-soft); font-size: .82rem; }
table.list      { width: 100%; border-collapse: collapse; background: var(--paper); font-size: .95rem; }
table.list th, table.list td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list th   { background: var(--primary-soft); color: var(--primary-deep); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.scroll         { overflow-x: auto; }
.notice         { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.notice time    { display: block; font-size: .8rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .25rem; }
.notice h3      { margin-bottom: .4rem; }
.notice p:last-child { margin-bottom: 0; }
.course-grid    { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.course         { background: var(--paper); border: 1px solid var(--line); padding: 1rem 1.25rem; }
.course b       { display: block; font-family: var(--display); color: var(--primary-deep); font-size: 1.1rem; }
.course span    { color: var(--ink-soft); font-size: .9rem; }
.flash          { padding: .9rem 1.2rem; border-left: 4px solid var(--gold); background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }

/* ---- footer --------------------------------------------------------------------------------------------------- */
.site-foot      { background: var(--primary-deep); color: #c9cff5; padding: 3.5rem 0 1.5rem; font-size: .95rem; }
.foot-grid      { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 1.2fr; gap: 2rem; }
.foot-grid a    { color: #fff; text-decoration: none; display: block; margin-bottom: .4rem; }
.foot-grid h4   { color: #fff; margin-bottom: .8rem; }
.foot-logo      { height: 56px; width: auto; background: #fff; padding: 6px 10px; border-radius: var(--radius); margin-bottom: 1rem; }
.social a       { display: inline; }
.foot-base      { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .15); font-size: .85rem; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .foot-grid { grid-template-columns: 1fr; } }