/* theme.css — small additions the WordPress build needs on top of the ported design CSS.
   Keep this file short; the generated bundles (assets/css/*.css) must stay verbatim. */

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Forms */
.shcis-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.form-error { grid-column: 1 / -1; margin: .6rem 0 0; font-size: .68rem; line-height: 1.5; color: var(--brand); }
.form-success.show { display: block; }
.contact-form-grid .form-success { display: none; margin: 0; font-size: .78rem; color: var(--brand-deep); }
.contact-form-grid .form-success.show { display: block; }
.premium-form input:invalid:focus, .premium-form textarea:invalid:focus, .contact-form-grid input:invalid:focus, .contact-form-grid textarea:invalid:focus { outline: 2px solid rgba(69, 92, 123, .35); }

/* Images: WordPress srcset images must fill the same boxes the design's <img> did */
img { max-width: 100%; height: auto; }
.inner-hero-media, .hero-media img, .masonry figure img, .facility-feature figure img, .life-feature > img, .academic-photo img, .home-event-feature > img, .event-feature-card > img { height: 100%; }

/* Record detail body text (notice body, event description) */
.record-body { margin-top: 1.4rem; font-size: .85rem; line-height: 1.75; color: var(--ink); max-width: 62rem; }
.record-body p { margin: 0 0 .9rem; }
.record-body ul, .record-body ol { padding-left: 1.3rem; margin: 0 0 .9rem; }
.record-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.2rem; }
.record-media { margin: 1.4rem 0 0; border-radius: 1.5rem; overflow: hidden; background: var(--surface); }
.record-media img { display: block; width: 100%; height: auto; }
.event-detail-copy .pill + .pill { margin-left: .6rem; }
.event-meta-card a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.events-empty { font-size: .85rem; color: var(--ink-soft); }

/* Default / article pages (page.php) */
.article-body { font-size: .88rem; line-height: 1.75; color: var(--ink); max-width: 62rem; }
.article-body h2, .article-body h3 { font-family: var(--serif); color: var(--brand-deep); margin: 1.6rem 0 .6rem; }
.article-body h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.article-body h3 { font-size: 1.4rem; }
.article-body p { margin: 0 0 1rem; }
.article-body img { border-radius: 1rem; }
.article-body a { color: var(--brand); }

/* Video gallery: featured embed + grid of further videos inside the design's .video-clean wrapper */
.video-clean-grid .video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 1.2rem; overflow: hidden; background: #000; }
.video-clean-grid .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.video-grid figure { margin: 0; }
.video-grid iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 1.2rem; background: #000; display: block; }
.video-grid figcaption { margin-top: .6rem; font-size: .72rem; line-height: 1.5; color: var(--ink-soft); }
.video-grid figcaption strong { display: block; font-family: var(--serif); font-size: 1.05rem; color: var(--brand-deep); }

/* Gallery album filter pills (ivory section ground) */
.gallery-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.gallery-filter a { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; padding: .55rem .9rem; border-radius: 999px; border: 1px solid rgba(11, 33, 72, .25); color: var(--brand-deep); text-decoration: none; }
.gallery-filter a.is-active, .gallery-filter a:hover { background: var(--brand-deep); color: #fffdf9; border-color: var(--brand-deep); }
.masonry figure figcaption small { display: block; font-size: .62rem; opacity: .75; margin-top: .2rem; }
/* School Settings → "Ivory bar below the photo" caption style (default is the design's navy overlay). */
body.gallery-captions-bar .gallery-clean-section .masonry figcaption { position: static !important; padding: .8rem 1rem !important; background: #fffdf9 !important; color: #0b2148 !important; font: 600 1rem/1.25 var(--serif) !important; min-height: 3.2rem !important; opacity: 1 !important; transform: none !important; }
body.gallery-captions-bar .gallery-clean-section .masonry figure::after { display: none !important; }

/* Birthdays: a single (students) scroller instead of the design's two columns */
.birthday-grid-single { grid-template-columns: minmax(0, 1fr) !important; }
.birthday-slide-media img { object-fit: cover; object-position: 50% 22%; } /* ERP portraits: keep faces in frame when the photo is cropped */

/* Toppers: optional result details under a figure */
.result-media-grid figcaption em { display: block; font-style: normal; font-size: .62rem; color: var(--ink-soft); margin-top: .15rem; }

/* Search results + generic archives */
.search-form-inline { display: flex; gap: .6rem; margin: 1.2rem 0 1.6rem; }
.search-form-inline input { flex: 1; border: 1px solid var(--hairline); border-radius: .85rem; padding: .8rem .9rem; font: 400 .8rem/1.5 var(--sans); background: var(--surface-card); color: var(--ink); }

/* Admin bar offset for the fixed masthead */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* Photo Gallery hub with many albums: album cards (cover + title + count) instead of one giant masonry */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.album-card { display: block; text-decoration: none; color: inherit; border-radius: 1.2rem; }
.album-card figure { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 1.2rem; overflow: hidden; background: var(--surface); }
.album-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.album-card:hover img, .album-card:focus-visible img { transform: scale(1.04); }
.album-card figcaption { position: absolute; inset: auto 0 0 0; padding: 2.2rem .95rem .85rem; background: linear-gradient(to top, rgba(6, 21, 47, .9), rgba(6, 21, 47, 0)); color: #fffdf9; display: grid; gap: .15rem; }
.album-card figcaption strong { font: 600 1.02rem/1.25 var(--serif); }
.album-card figcaption small { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; opacity: .82; }
.album-card:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .album-card img { transition: none; } }