/* Join SSFP — site styles
   School colors: red and royal blue, on white. Red is for actions (buttons, highlights),
   royal blue for structure (header, bands, footer, headings). Other schools' colors appear
   only inside the high school boxes on Academic Excellence. */
:root {
  --red: #c8102e;
  --red-deep: #a00d25;
  --blue: #1f4ba5;
  --blue-deep: #163a85;
  --blue-ink: #13295a;
  --blue-tint: #eef3fc;
  --white: #ffffff;
  --ink: #1f2430;
  --muted: #4f5868;
  --line: #d9e1ef;
  --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --wrap: 1140px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 1.125rem; line-height: 1.6; color: var(--ink); background: var(--white); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--blue-ink); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; line-height: 1.3; margin-top: 1.4em; }
p { margin: 0 0 1em; max-width: 68ch; }
ol, ul { padding-left: 1.3em; }
li { margin-bottom: .4em; }
small { font-size: .85em; font-weight: 400; color: var(--muted); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.band { background: var(--blue-tint); }
.band-blue { background: var(--blue); color: #e9effb; }
.band-blue h2, .band-blue h3 { color: var(--white); }
.band-blue a:not(.btn):not(.hs-box) { color: var(--white); }
/* Red hover and focus would vanish on royal blue (1.4:1), so links and rings on blue go light */
.band-blue a:not(.btn):not(.hs-box):hover, .tour-box a:not(.btn):hover { color: #ffd3da; }
.band-blue :focus-visible, .tour-box :focus-visible, .site-nav :focus-visible, .topbar :focus-visible, .site-footer :focus-visible { outline-color: var(--white); }
.center { text-align: center; }
.lede { font-size: 1.25rem; color: var(--muted); max-width: 62ch; }
.lede-dark { font-size: 1.2rem; }
.prose > * { max-width: 820px; }
.prose h2:not(:first-child) { margin-top: 1.6em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* draft + skip */
.draft-banner { background: #fff3c4; color: #4a3800; text-align: center; font-size: .95rem; padding: 8px 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--white); padding: 8px 12px; z-index: 10; }

/* buttons */
.btn { display: inline-block; padding: 12px 22px; border-radius: 6px; font-weight: 700; text-decoration: none; border: 2px solid transparent; line-height: 1.2; }
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-deep); color: var(--white); }
/* On blue: white button with blue text, so it never competes with the header's red one */
.btn-white { background: var(--white); color: var(--blue-ink); border-color: var(--white); }
.btn-white:hover { background: transparent; color: var(--white); }

/* header */
.site-header { background: var(--white); box-shadow: 0 1px 0 var(--line); }
.topbar { background: var(--blue-ink); color: #dbe4f7; font-size: .9rem; }
.topbar-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 6px; padding-bottom: 6px; }
.topbar a { color: var(--white); font-weight: 600; text-decoration: none; white-space: nowrap; }
.gtranslate_wrapper { min-width: 110px; text-align: right; }
.gtranslate_wrapper select { font: inherit; font-size: .9rem; padding: 2px 4px; border: 0; border-radius: 4px; background: var(--white); color: var(--ink); }
.header-row { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--blue-ink); margin-right: auto; }
.brand img { width: 44px; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--serif); font-size: 1.4rem; }
.brand-sub { font-size: .85rem; color: var(--muted); margin-top: 2px; }
.brand-tag { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-top: 3px; }
.header-cta.is-current, .mobile-bar-tour.is-current { display: none; }
.site-nav { background: var(--blue); border-bottom: 4px solid var(--red); }
.nav-row { display: flex; flex-wrap: wrap; gap: 0 4px; }
.site-nav a { color: var(--white); text-decoration: none; font-weight: 600; font-size: 1rem; padding: 12px 14px; white-space: nowrap; }
.site-nav a:hover { background: var(--blue-deep); color: var(--white); }
.site-nav a[aria-current="page"] { background: var(--red); }
.menu-btn { display: none; font: inherit; font-weight: 700; background: var(--white); color: var(--blue); border: 2px solid var(--blue); border-radius: 6px; padding: 8px 14px; cursor: pointer; }

/* hero: no buttons, so the type carries the space */
.hero { padding: 64px 0 72px; background: linear-gradient(180deg, var(--blue-tint), var(--white)); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); margin-bottom: .25em; text-wrap: balance; }
.hero-slogan { font-family: var(--serif); font-size: 1.5rem; line-height: 1.3; color: var(--red); margin-bottom: 1em; }
.hero .lede { color: var(--ink); font-size: 1.35rem; max-width: 46ch; margin-bottom: 0; }
.hero .photo { aspect-ratio: 3 / 2; }

/* photo placeholders: swap for real photos when the school sends them */
.photo { width: 100%; border-radius: 10px; aspect-ratio: 4 / 3; object-fit: cover; }
.photo.photo-wide { aspect-ratio: 16 / 9; }  /* group shots cropped tight to the people */
.photo-placeholder { display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px;
  background: repeating-linear-gradient(135deg, #e6ecf8 0 14px, #dfe6f5 14px 28px); border: 2px dashed #9fb2db; color: var(--blue-deep); font-weight: 700; }
.photo-placeholder small { font-weight: 400; color: var(--muted); }

/* split layouts */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

/* home fact strip */
.strip { background: var(--blue-ink); color: #d7e0f3; border-bottom: 4px solid var(--red); }
.strip-row { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 22px; padding-bottom: 22px; }
.strip-row li { margin: 0; display: flex; flex-direction: column; text-align: center; }
.strip-row strong { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--white); }
.strip-row span { font-size: .95rem; }

/* home quote band: the quote alone, as a pause */
.quote-band { text-align: center; padding: 80px 0; }
.big-quote { font-family: var(--serif); font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.3; color: var(--white); margin: 0 auto; max-width: 30ch; }
.big-quote::before { content: ""; display: block; width: 64px; height: 4px; background: var(--white); margin: 0 auto 24px; }

/* home cards */
.cards { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cards li { margin: 0; }
.card { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px; border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: 8px; text-decoration: none; color: var(--ink); background: var(--white); }
.card:hover { border-color: var(--blue); border-top-color: var(--red); box-shadow: 0 6px 18px rgba(19, 41, 90, .1); color: var(--ink); }
.card-title { font-family: var(--serif); font-size: 1.25rem; color: var(--blue-ink); }
.card-text { font-size: 1rem; color: var(--muted); }

/* inner page head */
.page-head { background: var(--blue-tint); padding: 56px 0 40px; border-bottom: 1px solid var(--line); }
.page-head .lede { margin-bottom: 0; }
/* Red line under each page title, like the slogan under the home headline */
.page-sub { font-family: var(--serif); font-size: 1.4rem; line-height: 1.3; color: var(--red); margin: -.5em 0 .95em; }
.year-note { margin: 20px 0 0; padding: 12px 16px; background: var(--white); border-left: 5px solid var(--red); border-radius: 0 6px 6px 0; font-weight: 600; color: var(--blue-ink); }

/* mission prayer */
.prayer { text-align: center; }
.prayer p { font-family: var(--serif); font-style: italic; font-size: 1.35rem; margin: 0 auto .9em; max-width: none; }

/* Academic Excellence: graduates band with the high school boxes on a white panel
   (school colors disappear against royal blue, so the boxes never sit on it directly) */
.hs-panel { background: var(--white); border-radius: 14px; padding: 28px 24px 24px; margin-top: 36px; }
.hs-panel .hs-panel-title { font-family: var(--serif); font-size: 1.4rem; color: var(--blue-ink); margin: 0 0 20px; }
.hs-grid { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.hs-grid > li { margin: 0; flex: 0 1 calc(20% - 13px); min-width: 180px; display: flex; }
.hs-box { --box: #13295a; --text: #fff; --outline: #fff;
  display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 16px; border-radius: 10px; text-decoration: none;
  background: var(--box); color: var(--text);
  box-shadow: inset 0 0 0 2px var(--box), inset 0 0 0 4px var(--outline);
  transition: transform .15s ease, box-shadow .15s ease; }
.hs-box:hover { color: var(--text); transform: translateY(-2px);
  box-shadow: inset 0 0 0 2px var(--box), inset 0 0 0 5px var(--outline), 0 8px 20px rgba(19, 41, 90, .22); }
.hs-box:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; }
.hs-logo { display: flex; align-items: center; justify-content: center; height: 84px; }
.hs-logo img { max-height: 64px; max-width: 100%; width: auto; object-fit: contain; }
.hs-logo.plate { background: var(--white); border-radius: 6px; padding: 8px 12px; }
.hs-logo.framed { border: 2px solid var(--white); border-radius: 6px; padding: 6px 10px; }
.hs-name { font-weight: 700; font-size: 1rem; line-height: 1.3; min-height: 3.9em; }
.hs-name::after { content: "\00a0\2197" / ""; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .hs-box, .hs-box:hover { transition: none; transform: none; } }

/* tour page */
.tour-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }
iframe.jotform { display: block; width: 100%; height: 1500px; border: 0; }
.form-slot { padding: 28px; border: 2px dashed var(--line); border-radius: 8px; }
.visit-box { border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.visit-box h2 { font-size: 1.4rem; }
.visit-box p:last-child { margin-bottom: 0; }

/* tuition */
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.option { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.other-fees { background: var(--white); max-width: 820px; margin: 0 auto; }
.option-head { background: var(--red); color: var(--white); font-family: var(--sans); font-weight: 700; font-size: 1.15rem; margin: 0; padding: 12px 18px; }
.fees { width: 100%; border-collapse: collapse; font-size: 1rem; }
.fees th, .fees td { text-align: left; vertical-align: top; padding: 12px 18px; border-top: 1px solid var(--line); }
.fees tr:first-child th, .fees tr:first-child td { border-top: 0; }
.fees th { font-weight: 600; }
.fees td.num { font-weight: 400; color: var(--blue-ink); }
.fees td.tuition-amount { font-weight: 700; }
@media (min-width: 561px) { .fees th { width: 34%; } .fees td.num { width: 30%; } }
.fees-note { color: var(--muted); font-size: 1rem; margin: 24px auto 0; text-align: center; }
.fees-note.refund-note { color: var(--red); font-weight: 600; }
.assist-text { font-size: 1.2rem; max-width: 60ch; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }
.faq-item { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq-item:target { background: var(--blue-tint); border-left: 4px solid var(--red); padding: 18px; border-radius: 0 8px 8px 0; }
.faq-item h2 { font-size: 1.25rem; margin: 0; }
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border-bottom: 0; }
.faq-item p { margin: 8px 0 0; }
.faq-side { position: sticky; top: 24px; display: grid; gap: 20px; }
.tour-box { background: var(--blue); color: #e9effb; border-radius: 10px; padding: 24px; border-top: 5px solid var(--red); }
.tour-box h2 { color: var(--white); font-size: 1.6rem; }
.tour-box a:not(.btn) { color: var(--white); }
.tour-box p:last-child { margin-bottom: 0; }
:target { scroll-margin-top: 24px; }
.tour-box .btn-red { border: 2px solid var(--white); }

/* footer */
.site-footer { background: var(--blue-ink); color: #d7e0f3; border-top: 6px solid var(--red); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding-top: 48px; padding-bottom: 36px; }
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-head { font-family: var(--serif); font-size: 1.3rem; color: var(--white); line-height: 1.25; }
.footer-label { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; color: #9fb4e0; margin-bottom: .3em; }
.site-footer p { margin-top: 0; }
.site-footer a { color: var(--white); }
.social { list-style: none; padding: 0; margin: 0; }
.social a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 4px 0; }
.social a:hover span { text-decoration: underline; }
.footer-base { border-top: 1px solid rgba(255, 255, 255, .15); font-size: .95rem; }
.footer-base-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 24px; padding-top: 14px; padding-bottom: 14px; }
.footer-base p { margin: 0; }
.footer-slogan { font-family: var(--serif); font-style: italic; color: var(--white); }
.footer-base-row p:last-child { font-size: .875rem; color: #9fb4e0; }

/* School request: clean-edged paragraphs on wider screens; phones stay left-aligned to avoid wide word gaps */
@media (min-width: 561px) {
  .page-head .lede, .hero .lede, .split p, .prose p, .faq-item p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 4 4; }
}

/* sticky call and tour bar on phones */
.mobile-bar { display: none; }

/* small screens */
@media (max-width: 900px) {
  .hero-grid, .split, .options, .faq-grid, .tour-grid { grid-template-columns: 1fr; gap: 28px; }
  .split > .photo { order: 2; }
  .faq-side { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .menu-btn { display: inline-block; }
  .js .site-nav { display: none; }
  .js .site-nav.open { display: block; }
  .nav-row { flex-direction: column; padding: 0; }
  .site-nav a { padding: 14px 24px; border-top: 1px solid rgba(255, 255, 255, .12); }
  .hs-grid > li { flex-basis: calc(33.333% - 11px); }
  .cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .section { padding: 52px 0; }
  .quote-band { padding: 56px 0; }
  .wrap { padding: 0 16px; }
  .brand-name { font-size: 1.1rem; }
  .brand-sub { display: none; }
  .brand-tag { font-size: .7rem; letter-spacing: .12em; }
  .header-cta { display: none; }
  .hero { padding: 40px 0 48px; }
  .hero-slogan { font-size: 1.25rem; }
  .page-sub { font-size: 1.2rem; }
  .hero .lede { font-size: 1.2rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .strip-row { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: 1fr; }
  .strip-row strong { font-size: 1.05rem; white-space: nowrap; }
  .hs-panel { padding: 20px 12px 14px; margin-top: 28px; }
  .hs-grid { gap: 10px; }
  .hs-grid > li { flex: 0 1 calc(50% - 5px); min-width: 0; }
  .hs-box { padding: 12px; gap: 8px; }
  .hs-logo { height: 64px; }
  .hs-logo img { max-height: 48px; }
  .hs-name { font-size: .9rem; }
  .mobile-bar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; box-shadow: 0 -2px 10px rgba(0, 0, 0, .15); }
  .mobile-bar a { padding: 14px 8px; text-align: center; font-weight: 700; text-decoration: none; background: var(--blue); color: var(--white); }
  .mobile-bar a.mobile-bar-tour { background: var(--red); }
  .mobile-bar:has(.is-current) { grid-template-columns: 1fr; }
  body { padding-bottom: 52px; }
  .fees, .fees tbody, .fees tr, .fees th, .fees td { display: block; width: 100%; }
  .fees tr { border-top: 1px solid var(--line); padding: 10px 0; }
  .fees tr:first-child { border-top: 0; }
  .fees th, .fees td { border: 0; padding: 2px 18px; }
  .fees td:empty { display: none; }
  .fees td:last-child { font-size: .92rem; color: var(--muted); }
  .footer-base-row { flex-direction: column; }
}
@media (max-width: 360px) {
  .brand-tag { display: none; }
}