/* ==========================================================================
   Westbridge Academy — site styles
   Palette and arch motifs follow the crest. No framework, no build step.
   ========================================================================== */

:root{
  --navy:#0F2A4A;
  --navy-deep:#0A1F38;
  --navy-soft:#1D4470;
  --gold:#E8B44A;
  --gold-deep:#B8871F;
  --cream:#FBF9F4;
  --cream-2:#F4EFE4;
  --ink:#16202E;
  --muted:#57657A;
  --line:#E4DFD2;
  --white:#FFFFFF;
  --shadow:0 1px 2px rgba(15,42,74,.06), 0 8px 24px rgba(15,42,74,.07);
  --shadow-lg:0 2px 4px rgba(15,42,74,.06), 0 18px 48px rgba(15,42,74,.12);
  --radius:14px;
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --sans:"Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wrap:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; height:auto}
a{color:var(--navy-soft)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--gold); outline-offset:2px; border-radius:4px;
}

h1,h2,h3,h4{font-family:var(--serif); color:var(--navy); line-height:1.2; margin:0 0 .5em; font-weight:600}
h1{font-size:clamp(2.1rem, 1.4rem + 3vw, 3.5rem); letter-spacing:-.01em}
h2{font-size:clamp(1.65rem, 1.2rem + 1.9vw, 2.5rem)}
h3{font-size:1.24rem}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.05rem,1rem + .4vw,1.24rem); color:var(--muted); line-height:1.7}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.section{padding:clamp(3.5rem,7vw,6rem) 0}
.section--cream{background:var(--cream)}
.section--tint{background:var(--cream-2)}
.center{text-align:center}
.stack-narrow{max-width:62ch; margin-inline:auto}

.skip{position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:.75rem 1.25rem; z-index:200}
.skip:focus{left:0}

/* ---------- eyebrow + rule ---------- */
.eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 .7rem;
}
.rule{width:64px; height:3px; background:var(--gold); border:0; margin:1.25rem 0}
.center .rule{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.6rem; border-radius:999px; border:2px solid transparent;
  font-family:var(--sans); font-size:1rem; font-weight:600; text-decoration:none; cursor:pointer;
  transition:transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--navy); color:#fff}
.btn--primary:hover{background:var(--navy-deep)}
.btn--gold{background:var(--gold); color:var(--navy-deep)}
.btn--gold:hover{background:#F0C468}
.btn--ghost{border-color:var(--navy); color:var(--navy)}
.btn--ghost:hover{background:var(--navy); color:#fff}
.btn--ghost-light{border-color:rgba(255,255,255,.55); color:#fff}
.btn--ghost-light:hover{background:#fff; color:var(--navy)}
.btn-row{display:flex; flex-wrap:wrap; gap:.85rem}
.center .btn-row{justify-content:center}

/* ---------- top bar ---------- */
.topbar{background:var(--navy-deep); color:#C9D6E6; font-size:.86rem}
.topbar__inner{display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; justify-content:space-between; padding:.5rem 0}
.topbar a{color:#fff; text-decoration:none}
.topbar a:hover{text-decoration:underline}
.topbar__meta{display:inline-flex; align-items:center; flex-wrap:wrap; gap:.2rem .9rem}
/* Separator drawn in CSS so it disappears with the element it belongs to. */
.topbar__hours::before{content:"·"; margin-right:.9rem; color:#6A82A0}

/* Narrow screens: keep the tappable email, drop what the footer already says. */
@media (max-width:820px){
  .topbar__inner{justify-content:center}
  .topbar__addr{display:none}
}
@media (max-width:520px){
  .topbar__hours{display:none}
}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); backdrop-filter:saturate(180%) blur(6px)}
.nav__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none}
.brand svg{width:44px; height:53px; flex:none}
.brand__name{font-family:var(--serif); font-weight:600; color:var(--navy); font-size:1.18rem; line-height:1.1; letter-spacing:.02em}
.brand__sub{display:block; font-family:var(--sans); font-size:.63rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; margin-top:.18rem}
.nav__links{display:flex; align-items:center; gap:.3rem; list-style:none; margin:0; padding:0}
/* :not(.btn) keeps these off the CTA - a bare `.nav__links a` selector outranks
   `.btn--primary` and repainted its label ink-on-navy. */
.nav__links a:not(.btn){
  display:block; padding:.55rem .9rem; border-radius:8px; text-decoration:none;
  color:var(--ink); font-weight:600; font-size:.97rem;
}
.nav__links a:not(.btn):hover{background:var(--cream-2); color:var(--navy)}
.nav__links a:not(.btn)[aria-current="page"]{color:var(--navy); box-shadow:inset 0 -3px 0 var(--gold)}
.nav__cta{margin-left:.4rem}
.nav__toggle{display:none; background:none; border:1px solid var(--line); border-radius:10px; padding:.5rem .65rem; cursor:pointer}
.nav__toggle svg{display:block; width:22px; height:22px; stroke:var(--navy)}

@media (max-width:960px){
  .nav__toggle{display:block}
  .nav__links{
    position:absolute; inset:100% 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line); padding:.5rem 1.25rem 1.1rem; box-shadow:var(--shadow);
  }
  .nav__links[hidden]{display:none}
  .nav__links a:not(.btn){padding:.8rem .25rem; border-bottom:1px solid var(--line)}
  .nav__links a:not(.btn)[aria-current="page"]{box-shadow:none; color:var(--gold-deep)}
  .nav__cta{margin:.9rem 0 0}
  .nav__cta .btn{width:100%; justify-content:center}
}

/* ---------- hero ---------- */
.hero{background:var(--cream); border-bottom:1px solid var(--line); overflow:hidden}
.hero__grid{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:center; padding:clamp(2.5rem,5vw,4.5rem) 0}
.hero h1{margin-bottom:.35em}
.hero__motto{font-family:var(--serif); font-style:italic; color:var(--gold-deep); font-size:1.15rem; margin:0 0 1.1rem}
.hero__art{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg)}
.hero__art svg,.hero__art img{display:block; width:100%}
@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr; padding-top:2.25rem}
  .hero__art{order:-1}
}

/* ---------- photographs ----------
   Every photo sits in a fixed-ratio frame so the page never reflows while
   images load, and nothing is cropped unpredictably on a phone. */
.photo{position:relative; overflow:hidden; border-radius:var(--radius); background:var(--cream-2)}
.photo img{display:block; width:100%; height:100%; object-fit:cover}
.photo--wide{aspect-ratio:16/9}
/* 3:2 matches the ratio the photos are exported at, so nothing is cropped twice. */
.photo--3x2{aspect-ratio:3/2}
.photo--4x3{aspect-ratio:4/3}
.photo--square{aspect-ratio:1/1}
.photo--portrait{aspect-ratio:3/4}
.photo--shadow{box-shadow:var(--shadow-lg)}
figure{margin:0}
figcaption{font-size:.88rem; color:var(--muted); padding-top:.6rem}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
@media (max-width:820px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .gallery{grid-template-columns:1fr} }

/* ---------- fact strip ---------- */
.facts{background:var(--navy); color:#fff}
.facts__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.14)}
.fact{background:var(--navy); padding:1.75rem 1.25rem; text-align:center}
.fact__n{font-family:var(--serif); font-size:1.95rem; color:var(--gold); line-height:1.1; display:block}
.fact__l{font-size:.85rem; letter-spacing:.09em; text-transform:uppercase; color:#BFD0E4; margin-top:.3rem; display:block}
@media (max-width:760px){ .facts__grid{grid-template-columns:repeat(2,1fr)} }

/* ---------- generic grids ---------- */
.grid{display:grid; gap:1.5rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
/* Four columns need real room; drop to two well before the tablet breakpoint. */
@media (max-width:1080px){ .grid--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){ .grid--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .grid--2,.grid--3,.grid--4{grid-template-columns:1fr} }

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:center}
/* For splits where one column is much taller, centring strands the short one. */
.split--top{align-items:start}
@media (max-width:860px){ .split{grid-template-columns:1fr} }

/* ---------- cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.75rem 1.6rem; box-shadow:var(--shadow);
}
.card h3{margin-bottom:.4rem}
.card p:last-child{margin-bottom:0}
.card--plain{box-shadow:none}
.section--cream .card{background:#fff}

/* Arch-topped icon, echoing the crest's viaduct */
.icon-arch{
  width:52px; height:52px; display:grid; place-items:center; margin-bottom:1rem;
  background:var(--cream-2); border-radius:26px 26px 8px 8px; color:var(--navy);
}
.icon-arch svg{width:26px; height:26px; stroke:var(--navy); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* ---------- list with gold ticks ---------- */
.ticks{list-style:none; margin:0 0 1.2em; padding:0; display:grid; gap:.7rem}
.ticks li{display:flex; gap:.7rem; align-items:flex-start}
.ticks li::before{
  content:""; flex:none; width:22px; height:22px; margin-top:.22rem; border-radius:50%;
  background-color:var(--gold);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1F38' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-position:center; background-size:13px; background-repeat:no-repeat;
}

/* ---------- timetable ---------- */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; min-width:520px; background:#fff}
caption{text-align:left; color:var(--muted); font-size:.92rem; padding-bottom:.6rem}
th,td{padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--line)}
thead th{background:var(--navy); color:#fff; font-family:var(--sans); font-size:.82rem; letter-spacing:.09em; text-transform:uppercase}
tbody tr:nth-child(even){background:var(--cream)}
td:first-child{font-weight:600; color:var(--navy); white-space:nowrap}

/* ---------- navy band ---------- */
.band{background:var(--navy); color:#fff; padding:clamp(3rem,6vw,4.5rem) 0}
.band h2{color:#fff}
.band p{color:#C9D6E6}
.band a:not(.btn){color:var(--gold)}

/* ---------- steps ---------- */
.steps{list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:1.25rem}
.steps li{counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start}
.steps li::before{
  content:counter(s); width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--navy); color:var(--gold); font-family:var(--serif); font-size:1.15rem; font-weight:600;
}
.steps h3{margin-bottom:.15rem}
.steps p{margin:0; color:var(--muted)}

/* ---------- forms ---------- */
.form{display:grid; gap:1.1rem}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
@media (max-width:620px){ .form__row{grid-template-columns:1fr} }
label{display:block; font-weight:600; font-size:.92rem; color:var(--navy); margin-bottom:.35rem}
.req{color:var(--gold-deep)}
input,select,textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--ink); background:#fff;
  padding:.75rem .9rem; border:1px solid #CFC8B8; border-radius:10px;
}
textarea{min-height:130px; resize:vertical}
.hint{font-size:.86rem; color:var(--muted); margin:.4rem 0 0}

/* ---------- contact ---------- */
.info-list{list-style:none; margin:0; padding:0; display:grid; gap:1.4rem}
.info-list li{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start}
.info-list .icon-arch{margin:0; width:44px; height:44px; border-radius:22px 22px 6px 6px}
.info-list .icon-arch svg{width:21px; height:21px}
.info-list strong{display:block; color:var(--navy); font-family:var(--serif); font-size:1.05rem}
.info-list a{color:var(--navy-soft)}

/* ---------- footer ---------- */
.footer{background:var(--navy-deep); color:#A9BDD4; padding:3.5rem 0 0; font-size:.95rem}
.footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem}
@media (max-width:820px){ .footer__grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .footer__grid{grid-template-columns:1fr} }
.footer h4{color:#fff; font-family:var(--sans); font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; margin:0 0 1rem}
.footer a{color:#D5E1EF; text-decoration:none}
.footer a:hover{color:var(--gold); text-decoration:underline}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.footer__brand svg{width:56px; height:67px; margin-bottom:.9rem}
.footer__motto{font-family:var(--serif); font-style:italic; color:var(--gold); margin:.2rem 0 0}
.footer__bar{border-top:1px solid rgba(255,255,255,.13); padding:1.2rem 0; display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; font-size:.87rem}

/* ---------- reveal on scroll ---------- */
/* Scoped to .js so that if the script never runs, nothing is ever hidden. */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.js .reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1; transform:none} }

/* ---------- misc ---------- */
.page-head{background:var(--navy); color:#fff; padding:clamp(2.5rem,5vw,4rem) 0}
.page-head h1{color:#fff; margin-bottom:.3rem}
.page-head p{color:#C9D6E6; margin:0; max-width:60ch}
.page-head .eyebrow{color:var(--gold)}
.note{background:var(--cream-2); border-left:4px solid var(--gold); padding:1.1rem 1.3rem; border-radius:0 10px 10px 0}
.note p:last-child{margin-bottom:0}
.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}

/* ---------- cards led by a photo (programme stages, news) ---------- */
.mediacard,.newscard{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.mediacard .photo,.newscard .photo{border-radius:0}
.mediacard__body,.newscard__body{padding:1.5rem 1.5rem 1.6rem}
.mediacard__body h3{font-size:1.14rem; margin-bottom:.4rem}
.mediacard__body p{color:var(--muted); font-size:.96rem; margin:0}
.mediacard__body .eyebrow{margin-bottom:.45rem}
.newscard__meta{
  display:flex; flex-wrap:wrap; gap:.45rem .75rem; align-items:baseline;
  font-size:.75rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:700; margin-bottom:.5rem;
}
.newscard__meta time{color:var(--muted); letter-spacing:.06em}
.newscard h3{font-size:1.1rem; margin-bottom:.4rem}
.newscard p{color:var(--muted); font-size:.96rem; margin:0}