/* ============================================================
   RCJPS — Shared foundation styles
   Loaded by every page (index, about, contact) before each
   page's own <style> block. Contains the site chrome (nav,
   footer, mobile nav), design tokens, and shared primitives.
   Page-specific component styles live inline in each page.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --navy: #0A1628;
    --navy-deep: #060E1C;
    --navy-mid: #122040;
    --gold: #C9A84C;
    --gold-light: #E2C97E;
    --gold-pale: #FAF5E8;
    --white: #FFFFFF;
    --offwhite: #F7F5F0;
    /* Warm neutral surface for sections that used to be solid dark navy.
       Deliberately warm (not a cool blue-grey) so it sits in the same family
       as --offwhite and --gold-pale rather than fighting them. */
    --stone: #EFE9DE;
    --stone-border: #DFD6C6;
    --text: #1C1C2E;
    --muted: #6B7280;
    --border: #E3DDD4;
}
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: 'Inter', sans-serif; color: var(--text); background: var(--white); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ── NAV ─────────────────────────────────────── */
.site-nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 0 48px;
    height: 80px;
    display: flex; align-items: center; justify-content: space-between;
    background: transparent;
    transition: background 0.4s, backdrop-filter 0.4s, box-shadow 0.4s;
}
.site-nav.solid {
    background: rgba(6,14,28,0.95);
    backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(201,168,76,0.15);
}
.nav-logo img {
    width: 72px; height: 72px;
    object-fit: cover; object-position: left center;
    border-radius: 50%;
    transition: transform 0.3s;
}
.nav-logo:hover img { transform: scale(1.05); }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links > li { position: relative; }
.nav-links > li > a {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.8px; text-transform: uppercase;
    color: rgba(255,255,255,0.8);
    padding: 8px 14px; display: block; border-radius: 4px;
    white-space: nowrap;
    transition: color 0.2s;
}
.nav-links > li > a:hover { color: var(--gold); }
.nav-links > li > a.active-link { color: var(--gold); }
.dropdown-menu {
    display: none; position: absolute; top: calc(100% + 12px); left: 0;
    background: var(--navy-deep);
    border: 1px solid rgba(201,168,76,0.15);
    border-top: 2px solid var(--gold);
    border-radius: 0 0 8px 8px;
    min-width: 210px; padding: 8px 0;
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
    list-style: none;
}
/* Invisible bridge across the 12px gap so the cursor can reach the dropdown
   without losing the hover state (which would hide the menu). */
.dropdown-menu::before {
    content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.nav-links li:hover .dropdown-menu { display: block; }
.dropdown-menu li a {
    font-size: 11.5px; font-family: 'Montserrat', sans-serif;
    font-weight: 500; letter-spacing: 0.3px;
    color: rgba(255,255,255,0.7);
    padding: 10px 20px; display: block;
    transition: color 0.2s, padding-left 0.2s;
}
.dropdown-menu li a:hover { color: var(--gold); padding-left: 28px; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-social {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.7);
    transition: all 0.2s;
}
.nav-social:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.1); }
.nav-social svg { width: 14px; height: 14px; }
.nav-cta {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--navy-deep); background: var(--gold);
    padding: 10px 22px; border-radius: 4px;
    transition: all 0.25s; margin-left: 4px;
}
.nav-cta:hover { background: var(--gold-light); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,168,76,0.3); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
.hamburger span { width: 22px; height: 1.5px; background: var(--white); border-radius: 2px; }

/* ── SECTION PRIMITIVES ─────────────────────────── */
.section { padding: 100px 48px; }
.section-inner { max-width: 1320px; margin: 0 auto; }
.eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 4px; text-transform: uppercase;
    color: var(--gold); display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
}
.eyebrow::before { content: ''; width: 36px; height: 2px; background: var(--gold); flex-shrink: 0; }
.eyebrow.center { justify-content: center; }
.section-h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 700; color: var(--navy);
    line-height: 1.18; margin-bottom: 16px;
}
.section-h2.light { color: var(--white); }
.section-lead { font-size: 16px; line-height: 1.85; color: var(--muted); max-width: 620px; }
.section-lead.light { color: rgba(255,255,255,0.6); }

/* ── BUTTONS ────────────────────────────────────── */
.btn-gold {
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--navy-deep); background: var(--gold);
    padding: 14px 30px; border-radius: 4px;
    border: 2px solid var(--gold); display: inline-block; transition: all 0.25s;
    cursor: pointer;
}
.btn-gold:hover { background: transparent; color: var(--gold); }
.btn-outline {
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: rgba(255,255,255,0.85); background: transparent;
    padding: 14px 30px; border-radius: 4px;
    border: 2px solid rgba(255,255,255,0.28); display: inline-block; transition: all 0.25s;
}
.btn-outline:hover { border-color: rgba(255,255,255,0.75); color: var(--white); }
/* Outline button sitting on a light surface (the default is white-on-dark) */
.btn-outline.on-light { color: var(--navy); border-color: rgba(10,22,40,0.22); }
.btn-outline.on-light:hover { border-color: var(--navy); color: var(--navy); background: rgba(10,22,40,0.04); }
.text-cta {
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--navy); display: inline-flex; align-items: center; gap: 8px;
    border-bottom: 2px solid var(--gold); padding-bottom: 2px;
    margin-top: 8px; transition: gap 0.2s;
}
.text-cta:hover { gap: 14px; }

/* ── FOOTER ─────────────────────────────────────── */
.site-footer { background: var(--navy-deep); padding: 72px 48px 0; }
.footer-inner { max-width: 1320px; margin: 0 auto; }
.footer-top {
    display: grid; grid-template-columns: 240px 1fr;
    gap: 80px; padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-logo-row img { width: 52px; height: 52px; object-fit: cover; object-position: left center; border-radius: 50%; }
.footer-brand-name { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: var(--white); }
.footer-brand-name span { display: block; font-size: 10px; font-weight: 400; opacity: 0.45; line-height: 1.5; }
.footer-desc { font-size: 13px; line-height: 1.8; color: rgba(255,255,255,0.4); margin-bottom: 20px; }
.footer-affil-label { font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.footer-affil-text { font-size: 12px; color: rgba(255,255,255,0.25); }
.footer-links-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.footer-col-title { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 12.5px; color: rgba(255,255,255,0.42); display: block; transition: color 0.2s, padding-left 0.2s; }
.footer-col ul li a:hover { color: var(--gold); padding-left: 6px; }
.footer-bottom { padding: 20px 0; display: flex; align-items: center; justify-content: space-between; }
.footer-copy { font-size: 12px; color: rgba(255,255,255,0.25); }
.footer-copy a { color: rgba(201,168,76,0.7); }
.footer-soc { display: flex; gap: 8px; }
.footer-soc-btn { width: 32px; height: 32px; border-radius: 6px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; }
.footer-soc-btn:hover { background: var(--gold); color: var(--navy-deep); }
.footer-soc-btn svg { width: 14px; height: 14px; }

/* ── MOBILE NAV ─────────────────────────────────── */
.mobile-nav {
    display: none; position: fixed; inset: 0;
    background: var(--navy-deep); z-index: 2000;
    flex-direction: column; padding: 32px; overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav-close { align-self: flex-end; background: none; border: none; color: var(--white); font-size: 28px; cursor: pointer; padding: 8px; margin-bottom: 24px; }
.mobile-nav-links { list-style: none; }
.mobile-nav-links li { border-bottom: 1px solid rgba(255,255,255,0.06); }
.mobile-nav-links li a { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 600; color: var(--white); padding: 15px 0; display: block; }
.mobile-nav-links li a:hover { color: var(--gold); }

/* ── REVEAL ANIMATIONS ──────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* ── SHARED RESPONSIVE: nav collapse, footer, section padding ── */
/* Collapse the full menu to the hamburger before it gets cramped */
@media (max-width: 1200px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .site-nav { padding: 0 32px; }
}
@media (max-width: 1100px) {
    .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
    .footer-links-grid { grid-template-columns: repeat(2, 1fr); }
    .section { padding: 80px 40px; }
}
@media (max-width: 640px) {
    .site-nav { padding: 0 20px; height: 64px; }
    .nav-logo img { width: 52px; height: 52px; }
    .nav-cta, .nav-social { display: none; }
    .section { padding: 56px 24px; }
    .section-h2 { font-size: clamp(24px, 6.5vw, 32px); }
    .eyebrow { font-size: 9.5px; letter-spacing: 2.5px; }
    .section-lead { font-size: 14.5px; }
    .site-footer { padding: 48px 24px 0; }
    .footer-top { grid-template-columns: 1fr; gap: 36px; }
    .footer-links-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
    .footer-col-title { font-size: 9px; letter-spacing: 1.5px; }
    .footer-bottom { padding: 20px 24px; flex-direction: column; gap: 12px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ============================================================
   WordPress integration (theme additions, not in the design)
   ============================================================ */

/* Keep the fixed nav below the admin bar while logged in */
.admin-bar .site-nav,
.admin-bar .mobile-nav { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .site-nav,
    .admin-bar .mobile-nav { top: 46px; }
}
@media screen and (max-width: 600px) {
    html #wpadminbar { position: fixed; }
}

.screen-reader-text {
    border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
    height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
    position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
    clip: auto; clip-path: none; height: auto; width: auto;
    left: 16px; top: 16px; z-index: 100000;
    background: var(--white); color: var(--navy); padding: 12px 18px; border-radius: 4px;
    font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700;
}

/* Spam trap on the contact form: hidden from people, filled in by bots */
.rcjps-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* Open dropdowns for keyboard users as well as on hover */
.nav-links li:focus-within .dropdown-menu { display: block; }


/* Dropdown links carry a one-line description (the menu item's Description) */
.dropdown-menu { min-width: 300px; }
.dropdown-menu li a .nav-desc {
    display: block; margin-top: 3px;
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 400;
    letter-spacing: 0; line-height: 1.45; text-transform: none;
    color: rgba(255,255,255,0.4);
    transition: color 0.2s;
}
.dropdown-menu li a:hover .nav-desc { color: rgba(255,255,255,0.62); }
.dropdown-menu li a.active-link { color: var(--gold); }
/* Long dropdowns (seven links or more) open in two columns so they stay on screen.
   No overflow here: it would clip the ::before bridge that keeps the menu open while the
   cursor crosses the gap below the nav. */
.nav-links li:hover .dropdown-menu:has(> li:nth-child(7)),
.nav-links li:focus-within .dropdown-menu:has(> li:nth-child(7)) {
    display: block; column-count: 2; column-gap: 4px;
    min-width: 600px;
}
.dropdown-menu li { break-inside: avoid; }
/* The design's bridge stops at the dropdown's 2px top border, leaving a strip of the gap
   uncovered where the menu closed under a slow cursor. Reach all the way up to the nav item. */
.dropdown-menu::before { top: -14px; height: 14px; }
/* From the fourth item on, dropdowns hang from the item's right edge */
.nav-links > li:nth-child(n+4) .dropdown-menu { left: auto; right: 0; }

/* Mobile menu: groups that open in place */
.mobile-nav-links summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 600;
    color: var(--white); padding: 15px 0;
}
.mobile-nav-links summary::-webkit-details-marker { display: none; }
.mobile-nav-links summary::after {
    content: ''; width: 8px; height: 8px; margin-right: 6px;
    border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
    transform: rotate(45deg); transition: transform 0.25s;
}
.mobile-nav-links details[open] > summary { color: var(--gold); }
.mobile-nav-links details[open] > summary::after { transform: rotate(-135deg); }
.mobile-sub { list-style: none; padding: 0 0 12px 14px; border-left: 1px solid rgba(201,168,76,0.3); margin: 0 0 12px 2px; }
.mobile-nav-links .mobile-sub li { border-bottom: 0; }
.mobile-nav-links .mobile-sub li a { font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.72); padding: 9px 0; }
.mobile-nav-links a[aria-current="page"] { color: var(--gold); }


/* Phones: the design's smallest labels drop to 8–9.5px on narrow screens, which is hard to read.
   Keep every label at 10px or more, and give text links a taller area to tap. */
@media (max-width: 640px) {
    html body .eyebrow,
    html body .page-hero-eyebrow,
    html body .hero-eyebrow,
    html body .breadcrumb,
    html body .breadcrumb a,
    html body .breadcrumb .current,
    html body .e-card-tag,
    html body .ev-tag,
    html body .event-tag,
    html body .badge-text,
    html body .next-label,
    html body .pager-lbl,
    html body .side-title,
    html body .footer-affil-label,
    html body .footer-col-title { font-size: 10.5px; }
    html body .quick-label,
    html body .hero-stat-lbl,
    html body .event-card-badge-month { font-size: 10px; }
    html body .eyebrow,
    html body .page-hero-eyebrow,
    html body .hero-eyebrow { letter-spacing: 2px; }
    .breadcrumb a { padding: 9px 0; }
    .text-cta, .view-all, .pager-all { padding-top: 10px; }
}


/* Theme 1.17: the top row. The social icons and the design's gold button, now up to four
   (Parent Portal, Student Login and the fee payments, the same shortcuts as the strip under the
   home banner), moved from the menu bar to a slim row above it: the bar is full at laptop widths,
   and the row has room for all of them. The fixed element is now the header holding both rows;
   the menu bar keeps its rules and the main script toggles `solid` on both. Under 640px the row
   is hidden, as the design hides the button and the icons, and the four are printed as a grid at
   the foot of the mobile menu. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
.site-header .site-nav { position: static; }
.nav-top {
    display: flex; align-items: center; justify-content: flex-end; gap: 14px;
    height: 38px; padding: 0 48px;
    background: rgba(6,14,28,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.4s;
}
.site-header.solid .nav-top { background: var(--navy-deep); border-bottom-color: rgba(201,168,76,0.12); }
.nav-top .nav-social { width: 26px; height: 26px; }
.nav-top .nav-social svg { width: 12px; height: 12px; }
.nav-top-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.14); }
.nav-top-links { display: flex; align-items: center; gap: 8px; }
.nav-top-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--navy-deep); background: var(--gold);
    padding: 6px 14px; border-radius: 3px;
    white-space: nowrap;
    transition: background 0.2s, box-shadow 0.2s;
}
.nav-top-link:hover { background: var(--gold-light); box-shadow: 0 4px 14px rgba(201,168,76,0.3); }
/* The menu bar without its right-hand group: the menu sits against the right edge. */
.site-header .nav-links { margin-left: auto; }
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .site-header { top: 46px; }
}
@media (max-width: 1200px) {
    .nav-top { padding: 0 32px; }
}
@media (max-width: 640px) {
    .nav-top { display: none; }
}
.mobile-nav-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.mobile-nav-cta {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase; text-align: center;
    color: var(--navy-deep); background: var(--gold);
    padding: 14px 12px; border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}
.mobile-nav-cta:hover { background: var(--gold-light); }
.mobile-nav-cta-line { background: none; color: var(--gold); border: 1px solid rgba(201,168,76,0.5); }
.mobile-nav-cta-line:hover { background: rgba(201,168,76,0.1); }

/* Rich text fields (theme 1.14): what the edit screen's editor and its Add Media button can produce */
.rcjps-list { padding-left: 1.4em; }
.rcjps-list li { margin-bottom: 0.35em; }
.hero-sub + .hero-sub, .cta-sub + .cta-sub, .page-hero-sub + .page-hero-sub,
.section-lead + .section-lead, .vm-text + .vm-text, .value-text + .value-text,
.tl-text + .tl-text, .v-body + .v-body, .legacy-quote + .legacy-quote,
.sc-card-text + .sc-card-text, .sc-step-text + .sc-step-text, .sc-leader-text + .sc-leader-text,
.sc-uniform-text + .sc-uniform-text, .sc-quote-text + .sc-quote-text, .pg-quote-text + .pg-quote-text,
.doc-row-detail p + p, .saint-quote p + p, .sc-voice blockquote p + p { margin-top: 0.8em; }
.alignleft { float: left; margin: 6px 24px 12px 0; }
.alignright { float: right; margin: 6px 0 12px 24px; }
.aligncenter { display: block; margin: 12px auto; }
img.alignnone { margin: 12px 0; }
img[class*="wp-image-"] { height: auto; }
.wp-caption { max-width: 100%; margin-bottom: 12px; }
.wp-caption img { width: 100%; }
.wp-caption-text { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 6px; }