/* =====================================================================
   Westminster College - LIGHT THEME (white + sky blue)
   Loaded after site.css. Remove the <link> in templates/layout.php to go back to the original look.
   All colours are set here at the top; change them in one place.
   ===================================================================== */
:root {
	--sky: #e4f6fe;        /* palest sky blue (panels, chips) */
	--sky-2: #c6eafb;      /* light sky blue (section backgrounds) */
	--sky-3: #95d6f5;      /* sky blue (borders, gradients) */
	--sky-4: #0b8fd6;      /* main brand blue (same as the buttons): top bar, footer bar, accent lines */
	--blue: #0b8fd6;       /* deep sky blue: buttons, links (readable with white text) */
	--blue-2: #0670ab;     /* hover / darker sky blue */
	--deep: #0b2a4a;       /* dark navy text for headings */
	--gold: var(--sky-4);  /* no yellow: gold accents now use sky blue */
	--red: var(--blue);    /* accents that were red now use sky blue */
	--red-2: var(--blue-2);
	--tint: #f0faff;
	--line: #d6eefa;
	--shadow: 0 12px 32px rgba(11, 143, 214, .14);
}
body { background: #fff; }
a { color: var(--blue); }
h1, h2, h3, h4 { color: var(--deep); }

/* Buttons */
.btn-red, .btn-navy { background: var(--blue); color: #fff; }
.btn-red:hover, .btn-navy:hover { background: var(--blue-2); color: #fff; }
.btn-gold { background: var(--blue); color: #fff; }
.btn-gold:hover { background: var(--blue-2); color: #fff; }
.tag-achievement, .lvl-bgcse, .hw-done .hw-status, .hw-status.hw-done { background: var(--sky); color: var(--blue-2); }
.btn-outline-light { border-color: var(--blue); color: var(--blue-2); background: #fff; }
.btn-outline-light:hover { background: var(--sky); color: var(--blue-2); }
.btn-outline { border-color: var(--blue); color: var(--blue-2); }
.btn-outline:hover { background: var(--blue); color: #fff; }

/* Top bar + header */
.topbar { background: var(--blue); color: rgba(255, 255, 255, .92); }
.topbar-links a { color: #fff; }
.topbar-links a:hover { color: var(--sky-2); }
.site-header { background: rgba(255, 255, 255, .97); box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(11, 143, 214, .08); }
.brand-text small { color: var(--blue); }
/* Header on one line: school name never wraps, a little more width for the menu */
.site-header .container, .topbar .container { max-width: 1300px; }
.header-inner { min-height: 80px; }
.brand { flex: none; }
.brand img { width: 58px; height: 58px; }
.brand-text strong { white-space: nowrap; font-size: 24px; }
.brand-text small { display: block; white-space: nowrap; font-size: 11.5px; letter-spacing: .12em; }
.site-nav .menu a { padding: 10px 11px; }
@media (max-width: 1240px) and (min-width: 1081px) {
	.brand-text strong { font-size: 20px; }
	.brand-text small { font-size: 10.5px; }
	.site-nav .menu a { padding: 10px 7px; font-size: 14.5px; }
}
.site-nav .menu a:hover, .site-nav .current-menu-item > a, .site-nav .current_page_item > a { color: var(--blue-2); background: var(--sky); }
.site-nav .sub-menu { border-top-color: var(--sky-4); }

/* Header: blue top strip + soft white-to-sky menu bar, navy text, sky-blue line underneath */
.topbar { background: linear-gradient(90deg, #0670ab, var(--blue)); color: rgba(255, 255, 255, .92); }
.topbar-links a { color: #fff; }
.topbar-links a:hover { color: var(--sky-2); }
.site-header { background: linear-gradient(180deg, #ffffff 0%, #eef9ff 100%); border-bottom: 3px solid var(--sky-3); box-shadow: 0 6px 18px rgba(11, 143, 214, .10); }
.brand-text strong { color: var(--deep); }
.brand-text small { color: var(--blue); }
.site-nav .menu > li > a { color: var(--deep); }
.site-nav .menu > li > a:hover, .site-nav .menu > .current-menu-item > a { color: var(--blue-2); background: var(--sky-2); }
.site-nav .sub-menu { border-top-color: var(--blue); }
.site-nav .sub-menu a { color: var(--deep); }
.site-nav .sub-menu a:hover { color: var(--blue-2); background: var(--sky); }
.nav-toggle { background: var(--sky-2); }
.nav-toggle span:not(.screen-reader-text) { background: var(--deep); }

/* Homepage hero: sky blue gradient */
.home-hero {
	color: var(--ink);
	background:
		radial-gradient(circle at 85% 10%, rgba(255, 255, 255, .85), transparent 36%),
		radial-gradient(circle at 5% 100%, rgba(92, 192, 238, .45), transparent 45%),
		linear-gradient(165deg, #eaf8ff 0%, #c4e9fb 50%, #93d4f4 100%);
}
.home-hero::before { background-image: radial-gradient(rgba(255, 255, 255, .55) 1.2px, transparent 1.2px); }
.home-hero .eyebrow { color: var(--blue-2); }
.home-hero h1 { color: var(--deep); }
.home-hero-text > p { color: #234565; opacity: 1; }
.hero-quick a { border-color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .75); color: var(--deep); box-shadow: 0 4px 12px rgba(11, 143, 214, .12); }
.hero-quick a:hover { border-color: var(--blue); background: #fff; }
.hero-quick span { background: var(--sky-2); }
.hero-frame { aspect-ratio: 1 / 1; border-color: #fff; box-shadow: 0 30px 60px rgba(6, 112, 171, .28); transform: rotate(1deg); }
.hero-frame img { object-position: center 30%; }
.hero-dots button { background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 1px rgba(6, 112, 171, .3); }
.float-card { box-shadow: 0 14px 34px rgba(6, 112, 171, .2); }
.float-card strong { color: var(--blue-2); }
.float-card-a { border-left-color: var(--sky-4); }
.home-hero + .stats .stats-grid { border-top-color: var(--sky-4); }
.stat strong { color: var(--blue-2); }

/* Sections */
.section-tint { background: var(--tint); }
.eyebrow-red { color: var(--blue); }
.layer-badge { background: var(--blue); }
.feature { border-top: 3px solid var(--sky-3); }
.feature-icon { background: var(--blue); color: #fff; }
.date-block { background: var(--blue); color: rgba(255, 255, 255, .85); }
.date-block b { color: #fff; }
.section-head h2::after { content: ""; display: block; width: 56px; height: 3px; margin: 14px auto 0; border-radius: 2px; background: var(--blue); }
.split-text h2::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 14px; border-radius: 2px; background: var(--blue); }
.motto { color: var(--blue-2); }
.crumbs a { color: var(--blue-2); }
.crumbs a:hover { color: var(--blue); }
.mosaic span { background: linear-gradient(transparent, rgba(6, 70, 110, .78)); }
.mini-panel { background: var(--sky); }
.mini-panel-red { border-top-color: var(--sky-4); background: #fff; }

/* Photos: the new photos are portrait, so give the frames a fixed shape */
.layered .layer-main { aspect-ratio: 4 / 3.4; object-fit: cover; object-position: center 35%; }
.layered .layer-small { aspect-ratio: 4 / 3.6; object-fit: cover; object-position: center 25%; }
.news-lead img { height: 340px; min-height: 0; object-position: center 30%; }
.mosaic img { object-position: center 28%; }
.mosaic { grid-auto-flow: dense; }
@media (max-width: 760px) { .news-lead img { height: 240px; } }

/* Principal's quote: sky blue instead of red */
.quote-band { background: linear-gradient(120deg, #dcf3fd 0%, #b5e3f9 55%, #8ed2f3 100%); color: var(--ink); }
.quote-band::before { color: rgba(255, 255, 255, .6); }
.quote-band blockquote p { color: var(--deep); }
.quote-band footer strong { color: var(--blue-2); }
.quote-band footer span { color: #2d5274; opacity: 1; }
.quote-inner > img { border-color: #fff; box-shadow: 0 18px 36px rgba(6, 112, 171, .25); }

/* S.T.E.A.M. section: white cards on sky blue */
.steam-dark { background: linear-gradient(170deg, #e6f7fe 0%, #c2e8fa 100%); color: var(--ink); }
.steam-dark h2 { color: var(--deep); }
.steam-dark .eyebrow { color: var(--blue-2); }
.steam-dark .section-head p { color: #2d5274; opacity: 1; }
.steam-big { border-color: rgba(255, 255, 255, .9); background: #fff; color: var(--deep); box-shadow: 0 8px 22px rgba(11, 143, 214, .12); }
.steam-big:hover { background: #fff; box-shadow: 0 16px 34px rgba(11, 143, 214, .22); }
.steam-big::before { opacity: .14; }
.steam-big:hover::before { opacity: .26; }
.steam-big small { color: #5b6b82; opacity: 1; }
.steam-teal { --c: #0f9f8f; } .steam-blue { --c: #0b8fd6; } .steam-red { --c: #e0525a; } .steam-purple { --c: #8b5cf6; } .steam-gold { --c: #0891b2; }
.steam-more a { border-color: rgba(255, 255, 255, .9); background: #fff; color: var(--deep); }
.steam-more a:hover { border-color: var(--blue); }
.steam-more span { background: var(--sky-2); }
.steam-letter, .steam-banner { background: var(--blue); color: #fff; }
.steam-banner div { border-right-color: rgba(255, 255, 255, .25); }
.steam-banner span { color: #fff; }

/* Staff cards without a photo */
.person .person-initials { background: linear-gradient(135deg, var(--blue), #3fb0ea); color: #fff; }

/* Call to action band */
.cta-band { background: linear-gradient(110deg, #c6eafb, #8ed2f3); color: var(--ink); }
.cta-photo { background: linear-gradient(110deg, rgba(214, 240, 252, .94) 0%, rgba(142, 210, 243, .88) 100%), var(--cta-img) center / cover; }
.cta-band h2 { color: var(--deep); }
.cta-band p { color: #234565; opacity: 1; }

/* Inner page headers */
.page-hero { background: linear-gradient(160deg, #e6f7fe 0%, #b5e3f9 100%); color: var(--ink); }
.page-hero h1 { color: var(--deep); }
.page-hero p { color: #2d5274; opacity: 1; }

/* Student portal */
.portal-login { background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .85), transparent 40%), linear-gradient(165deg, #eaf8ff, #c4e9fb 55%, #93d4f4); color: var(--ink); }
.portal-login .eyebrow { color: var(--blue-2); }
.portal-login h1 { color: var(--deep); }
.portal-login-card { box-shadow: 0 24px 50px rgba(6, 112, 171, .2); }
.checks-light li { color: #234565; }
.portal-hero { background: linear-gradient(110deg, #c6eafb, #8ed2f3); color: var(--deep); }
.portal-nav a, .portal-nav button { color: var(--deep); }
.portal-nav a:hover, .portal-nav button:hover, .portal-nav a.active { background: rgba(255, 255, 255, .8); color: var(--deep); }
.avatar { background: var(--blue); color: #fff; }
img.avatar { border-color: #fff; }

/* Footer: sky blue with a brighter bottom bar */
.site-footer { background: linear-gradient(180deg, #d4effc 0%, #b9e4f9 100%); color: #234565; }
.site-footer h4 { color: var(--deep); }
.site-footer a { color: var(--blue-2); }
.site-footer a:hover { color: var(--deep); }
.site-footer a.btn, .site-footer a.btn:hover { color: #fff; }
.footer-bottom { border-top: 0; background: var(--blue); color: rgba(255, 255, 255, .9); }
.footer-bottom a, .site-footer .footer-bottom a:hover { color: #fff; font-weight: 600; }
.site-footer h4::after { content: ""; display: block; width: 32px; height: 3px; margin-top: 8px; border-radius: 2px; background: var(--blue); }