/* =========================================================
   St. Jeremy Group of Schools — stylesheet
   Palette drawn straight from the campus: gate blue, roof-trim
   gold, the crest's red badge, stone-block grey, shamba green.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Work+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --sky-blue:    #2C8FC9;
  --sky-blue-dk: #1B5C85;
  --gold:        #F3B02D;
  --gold-dk:     #D6941A;
  --crest-red:   #C8402C;
  --stone:       #E9E4D8;
  --stone-dk:    #6b6459;
  --ink:         #17324A;
  --leaf:        #3C7A3A;
  --cream:       #FBF9F4;
  --white:       #ffffff;

  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Work Sans', system-ui, sans-serif;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(23,50,74,0.12);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--sky-blue-dk);
  line-height:1.15;
  margin:0 0 .5em;
}
a{color:var(--sky-blue-dk); text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}
.section{padding:72px 0;}
.section-tight{padding:40px 0;}
.eyebrow{
  font-family:var(--font-display);
  color:var(--crest-red);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  font-weight:600;
  margin-bottom:.6em;
  display:inline-block;
}
.lead{font-size:1.15rem; color:#3a4f5f; max-width:60ch;}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}

/* ---------- Signature: picket-fence divider ----------
   Recreates the blue/gold picket fence seen bordering the
   school gardens — used as a section-break motif. */
.picket-divider{
  height:26px;
  background-image:
    linear-gradient(135deg, var(--sky-blue) 25%, transparent 25%),
    linear-gradient(225deg, var(--gold) 25%, transparent 25%);
  background-position: 0 0, 13px 0;
  background-size: 26px 26px;
  background-repeat: repeat-x;
  opacity:.9;
}

/* ---------- Header / Nav ---------- */
.topbar{
  background:var(--ink);
  color:#cfe3f0;
  font-size:.85rem;
}
.topbar .container{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px; flex-wrap:wrap; gap:6px;
}
.topbar a{color:#cfe3f0;}
.topbar .tb-item{margin-right:18px; white-space:nowrap;}

header.site-header{
  background:var(--white);
  box-shadow:0 2px 10px rgba(23,50,74,0.08);
  position:sticky; top:0; z-index:50;
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:14px;}
.crest{
  width:56px; height:56px; border-radius:50%;
  background:var(--crest-red);
  border:3px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display); font-weight:700;
  font-size:1.4rem; flex-shrink:0;
}
.brand-text .name{
  font-family:var(--font-display); font-weight:700; color:var(--sky-blue-dk);
  font-size:1.25rem; margin:0; letter-spacing:.01em;
}
.brand-text .motto{
  font-size:.8rem; color:var(--crest-red); font-style:italic; font-weight:600;
}
nav.main-nav > ul{
  list-style:none; display:flex; gap:4px; margin:0; padding:0; flex-wrap:wrap;
}
nav.main-nav a{
  display:block; padding:10px 14px; border-radius:8px;
  font-weight:600; color:var(--ink); font-size:.95rem;
}
nav.main-nav a:hover, nav.main-nav a.active{background:var(--stone); color:var(--sky-blue-dk);}
.nav-toggle{display:none; background:none; border:2px solid var(--sky-blue); border-radius:8px; padding:8px 10px; font-size:1.2rem; color:var(--sky-blue-dk);}

/* ---------- Dropdown: "Our Schools" ---------- */
.has-dropdown{position:relative;}
.dropdown-toggle{display:flex; align-items:center; gap:5px;}
.dropdown-toggle .caret{font-size:.7em; transition:transform .18s ease;}
nav.main-nav .dropdown-menu{
  list-style:none; margin:0; padding:8px; display:none;
  position:absolute; top:100%; left:0; z-index:60; min-width:210px;
  background:#fff; border-radius:10px; box-shadow:var(--shadow); border:1px solid rgba(23,50,74,.06);
  flex-direction:column;
}
.dropdown-menu li{margin:0;}
.dropdown-menu a{padding:10px 14px; border-radius:8px; white-space:nowrap; display:block;}
@media (hover:hover) and (pointer:fine){
  .has-dropdown:hover .dropdown-menu{display:flex;}
  .has-dropdown:hover .dropdown-toggle .caret{transform:rotate(180deg);}
}
.has-dropdown.open .dropdown-menu{display:flex;}
.has-dropdown.open .dropdown-toggle .caret{transform:rotate(180deg);}
@media (max-width:880px){
  nav.main-nav .dropdown-menu{position:static; box-shadow:none; border:none; padding:0 0 0 16px; display:none; background:transparent;}
  .has-dropdown.open .dropdown-menu{display:flex;}
}

@media (max-width:880px){
  .nav-toggle{display:block;}
  nav.main-nav{
    display:none; width:100%; order:3;
    border-top:1px solid var(--stone); margin-top:10px; padding-top:10px;
  }
  nav.main-nav.open{display:block;}
  nav.main-nav > ul{flex-direction:column;}
  .header-row{flex-wrap:wrap;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative; color:#fff; overflow:hidden;
  background:linear-gradient(180deg, rgba(23,50,74,.55), rgba(23,50,74,.72)), var(--ink);
}
.hero img.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1;
}
.hero .container{padding-top:96px; padding-bottom:96px;}
.hero h1{color:#fff; font-size:clamp(2rem, 4.5vw, 3.4rem); max-width:16ch;}
.hero .sub{color:#e8f1f8; font-size:1.15rem; max-width:55ch; margin-bottom:1.8em;}
.hero-badges{display:flex; gap:14px; flex-wrap:wrap; margin-top:1.6em;}
.hero-badge{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35);
  padding:8px 16px; border-radius:999px; font-size:.85rem; font-weight:600;
}

.btn{
  display:inline-block; padding:13px 26px; border-radius:10px;
  font-weight:700; font-family:var(--font-display); letter-spacing:.02em;
  border:2px solid transparent; cursor:pointer; font-size:.98rem;
}
.btn-gold{background:var(--gold); color:var(--ink); border-color:var(--gold-dk);}
.btn-gold:hover{background:var(--gold-dk); color:#fff;}
.btn-outline{background:transparent; color:#fff; border-color:#fff;}
.btn-outline:hover{background:#fff; color:var(--ink);}
.btn-blue{background:var(--sky-blue); color:#fff; border-color:var(--sky-blue-dk);}
.btn-blue:hover{background:var(--sky-blue-dk);}
.btn-row{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- Cards / grids ---------- */
.grid{display:grid; gap:28px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:880px){.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); border:1px solid rgba(23,50,74,.06);
}
.card .card-body{padding:22px;}
.card .card-img{aspect-ratio:4/3; overflow:hidden;}
.card .card-img img{width:100%; height:100%; object-fit:cover;}
.card h3{margin-bottom:.35em; font-size:1.15rem;}
.card .tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sky-blue-dk); background:var(--stone);
  padding:4px 10px; border-radius:6px; margin-bottom:10px;
}

.section-alt{background:#fff;}
.section-ink{background:var(--ink); color:#dce9f2;}
.section-ink h2, .section-ink h3{color:#fff;}
.section-ink .lead{color:#c3d7e5;}

.stat-row{display:flex; gap:40px; flex-wrap:wrap; margin-top:12px;}
.stat .num{font-family:var(--font-display); font-size:2.4rem; color:var(--gold); font-weight:700;}
.stat .label{font-size:.85rem; color:#c3d7e5; text-transform:uppercase; letter-spacing:.08em;}

.two-col{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
@media (max-width:880px){.two-col{grid-template-columns:1fr;}}
.two-col img{border-radius:var(--radius); box-shadow:var(--shadow);}

.section-head{max-width:70ch; margin-bottom:40px;}

.list-check{list-style:none; padding:0; margin:0;}
.list-check li{
  padding-left:32px; position:relative; margin-bottom:14px; color:#3a4f5f;
}
.list-check li::before{
  content:"✓"; position:absolute; left:0; top:0;
  width:22px; height:22px; border-radius:50%; background:var(--leaf); color:#fff;
  font-size:.8rem; display:flex; align-items:center; justify-content:center;
}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:880px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.gallery-grid{grid-template-columns:1fr;}}
.gallery-grid figure{margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3;}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.gallery-grid figure:hover img{transform:scale(1.06);}
.filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px;}
.filter-row a{
  padding:8px 16px; border-radius:999px; background:var(--stone); font-weight:600; font-size:.88rem;
}
.filter-row a.active{background:var(--sky-blue); color:#fff;}

/* ---------- Forms ---------- */
.form-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:36px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:700px){.form-grid{grid-template-columns:1fr;}}
.field{margin-bottom:18px;}
.field.full{grid-column:1/-1;}
.field label{display:block; font-weight:600; margin-bottom:6px; font-size:.92rem;}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:8px; border:1.5px solid #d7e0e6;
  font-family:var(--font-body); font-size:.98rem; background:#fbfdfe;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--sky-blue); outline:none;}
.alert{padding:14px 18px; border-radius:10px; margin-bottom:20px; font-weight:600;}
.alert-success{background:#e5f5e6; color:#215a24; border:1px solid #b7ddb9;}
.alert-error{background:#fbe7e4; color:#8a2e1f; border:1px solid #f0b8ac;}

/* ---------- Contact ---------- */
.contact-item{display:flex; gap:14px; align-items:flex-start; margin-bottom:22px;}
.contact-icon{
  width:42px; height:42px; border-radius:50%; background:var(--sky-blue);
  color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-weight:700;
}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--ink); color:#b9cfdd; padding:56px 0 24px;}
footer.site-footer h4{color:#fff; font-size:1rem; margin-bottom:14px;}
footer.site-footer a{color:#b9cfdd;}
footer.site-footer a:hover{color:#fff;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px;}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr;}}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); margin-top:36px; padding-top:20px;
  font-size:.85rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
footer .list-plain{list-style:none; padding:0; margin:0;}
footer .list-plain li{margin-bottom:9px;}

/* ---------- Admin panel ---------- */
.admin-body{background:#f1f4f7; font-family:var(--font-body); color:var(--ink); margin:0;}
.admin-shell{display:flex; min-height:100vh;}
.admin-sidebar{width:230px; background:var(--ink); color:#dce9f2; flex-shrink:0;}
.admin-sidebar .brand{padding:22px 20px; border-bottom:1px solid rgba(255,255,255,.1);}
.admin-sidebar .brand .name{color:#fff; font-size:1rem;}
.admin-sidebar nav ul{list-style:none; margin:0; padding:14px;}
.admin-sidebar nav a{
  display:block; padding:11px 14px; border-radius:8px; color:#dce9f2; font-weight:600; margin-bottom:4px; font-size:.92rem;
}
.admin-sidebar nav a:hover, .admin-sidebar nav a.active{background:var(--sky-blue-dk); color:#fff;}
.admin-main{flex:1; padding:32px; max-width:1100px;}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:26px;}
.admin-card{background:#fff; border-radius:12px; padding:26px; box-shadow:0 4px 14px rgba(23,50,74,.06); margin-bottom:24px;}
table.admin-table{width:100%; border-collapse:collapse;}
table.admin-table th, table.admin-table td{
  text-align:left; padding:12px 10px; border-bottom:1px solid #e9edf1; font-size:.92rem; vertical-align:middle;
}
table.admin-table th{color:var(--stone-dk); text-transform:uppercase; font-size:.72rem; letter-spacing:.05em;}
.badge{padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:700;}
.badge-blue{background:#dcedf9; color:var(--sky-blue-dk);}
.badge-gold{background:#fbeacb; color:#8a600b;}
.badge-red{background:#fbe1dc; color:#8a2e1f;}
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--ink), var(--sky-blue-dk));
}
.login-card{background:#fff; padding:40px; border-radius:16px; width:360px; box-shadow:0 20px 50px rgba(0,0,0,.3);}
.icon-btn{background:none; border:none; cursor:pointer; color:var(--sky-blue-dk); font-weight:700;}
.action-row{display:flex; gap:10px;}