/* =========================================================
   School Modern — Main Stylesheet
   Palette: Deep Indigo (#1E3A5F), Teal (#2FA88F), Warm Amber (#F2A93B), Off-white (#F7F8FA)
   Font: 'Inter' (body) / 'Poppins' (headings) — loaded via functions.php from Google Fonts, self-hosted fallback stacks below
   ========================================================= */

:root{
  --color-primary: #1E3A5F;
  --color-primary-light: #2C5079;
  --color-accent: #2FA88F;
  --color-accent-dark: #23806C;
  --color-warm: #F2A93B;
  --color-bg: #F7F8FA;
  --color-white: #FFFFFF;
  --color-text: #232830;
  --color-muted: #6B7280;
  --color-border: #E4E7EC;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(16,24,40,.08);
  --shadow-md: 0 8px 24px rgba(16,24,40,.10);
  --shadow-lg: 0 16px 40px rgba(16,24,40,.14);
  --container: 1180px;
  --font-heading: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

html{ scroll-behavior: smooth; }
body{
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 16px;
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-heading);
  color: var(--color-primary);
  line-height: 1.25;
  margin: 0 0 .5em;
  font-weight: 600;
}
h1{ font-size: clamp(2rem, 4vw, 3rem); }
h2{ font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3{ font-size: 1.35rem; }
p{ margin: 0 0 1em; color: var(--color-text); }
a{ color: var(--color-accent-dark); transition: color .2s ease; }
a:hover{ color: var(--color-primary); }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.section{ padding: 72px 0; }
.section--alt{ background: var(--color-white); }
.section-head{ text-align: center; max-width: 640px; margin: 0 auto 48px; }
.eyebrow{
  display: inline-block;
  color: var(--color-accent-dark);
  background: rgba(47,168,143,.1);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.accreditation-badges{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0 auto 40px; max-width: 900px;
}
.accreditation-badge{
  flex: 1 1 220px; text-align: center; background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 16px 18px;
}
.accreditation-badge strong{ display: block; color: var(--color-primary); font-family: var(--font-heading); font-size: .95rem; margin-bottom: 4px; }
.accreditation-badge span{ font-size: .8rem; color: var(--color-muted); }

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn--primary{ background: var(--color-accent); color: #fff; }
.btn--primary:hover{ background: var(--color-accent-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--outline{ background: transparent; border-color: var(--color-white); color: var(--color-white); }
.btn--outline:hover{ background: var(--color-white); color: var(--color-primary); }
.btn--dark{ background: var(--color-primary); color: #fff; }
.btn--dark:hover{ background: var(--color-primary-light); color:#fff; }

/* =========================
   Top contact bar
   ========================= */
.top-bar{ background: var(--color-primary); color: rgba(255,255,255,.9); font-size: .82rem; }
.top-bar__inner{ display: flex; align-items: center; justify-content: space-between; padding: 8px 24px; flex-wrap: wrap; gap: 10px 24px; }
.top-bar__contacts{ display: flex; gap: 22px; flex-wrap: wrap; }
.top-bar__contacts a, .top-bar__social{ color: rgba(255,255,255,.9); }
.top-bar__contacts a:hover, .top-bar__social:hover{ color: var(--color-warm); }
@media (max-width: 680px){
  .top-bar__contacts{ gap: 12px; }
  .top-bar__inner .top-bar__contacts:first-child a:nth-child(2){ display:none; }
}

/* =========================
   Header / Navigation
   ========================= */
.site-header{
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 1000;
}
.site-header__inner{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--container);
  margin: 0 auto;
}
.site-branding{ display: flex; align-items: center; gap: 12px; }
.site-branding img{ max-height: 46px; width: auto; }
.site-logo-img{ height: 58px; width: auto; }
.site-title{ font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--color-primary); margin:0; }
.site-title a{ color: inherit; }
.site-description{ font-size: .78rem; color: var(--color-muted); margin: 0; }

.main-navigation ul{ display: flex; gap: 6px; align-items: center; }
.main-navigation a{
  display: block; padding: 10px 16px; color: var(--color-text); font-weight: 500; border-radius: var(--radius-sm);
}
.main-navigation a:hover, .main-navigation .current-menu-item > a{ background: var(--color-bg); color: var(--color-primary); }
.main-navigation .cta-link a{ background: var(--color-accent); color: #fff; }
.main-navigation .cta-link a:hover{ background: var(--color-accent-dark); color:#fff; }

/* Submenu support (for any future dropdown menu items) */
.main-navigation li.menu-item-has-children{ position: relative; }
.main-navigation .sub-menu{
  display:none; position:absolute; top:100%; left:0; min-width:240px;
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); padding:8px; z-index:1100;
}
.main-navigation li.menu-item-has-children:hover > .sub-menu{ display:block; }
.main-navigation .sub-menu li{ list-style:none; }
.main-navigation .sub-menu a{ padding:9px 12px; font-size:.9rem; white-space:nowrap; border-radius:6px; }
.main-navigation .sub-menu a:hover{ background:var(--color-bg); }

.menu-toggle{ display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--color-primary); }

/* =========================
   Hero
   ========================= */
.hero{
  background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-light) 60%, var(--color-accent-dark) 130%);
  color: #fff;
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}
.hero__grid{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero h1{ color: #fff; margin-bottom: .4em; }
.hero p{ color: rgba(255,255,255,.86); font-size: 1.1rem; max-width: 520px; }
.hero__actions{ display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero__image{ border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero__stats{ display: flex; gap: 32px; margin-top: 40px; flex-wrap: wrap; }
.hero__stat-num{ font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--color-warm); }
.hero__stat-label{ font-size: .85rem; color: rgba(255,255,255,.75); }

/* =========================
   Feature / Info cards
   ========================= */
.grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grid-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.card{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card__icon{
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  background: rgba(47,168,143,.12); color: var(--color-accent-dark);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 16px;
}

/* =========================
   Faculty
   ========================= */
.faculty-card{ text-align: center; background: #fff; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); transition: transform .18s ease; }
.faculty-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.faculty-card__photo{ aspect-ratio: 1/1; overflow: hidden; background: var(--color-bg); }
.faculty-card__photo img{ width: 100%; height: 100%; object-fit: cover; }
.faculty-card__body{ padding: 20px; }
.faculty-card__name{ margin: 0 0 4px; font-size: 1.05rem; }
.faculty-card__role{ color: var(--color-accent-dark); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.faculty-card__meta{ color: var(--color-muted); font-size: .88rem; margin-top: 10px; }

/* =========================
   Achievements
   ========================= */
.achievement-item{
  display: flex; gap: 18px; align-items: flex-start;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 22px; box-shadow: var(--shadow-sm);
}
.achievement-item__badge{
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-warm); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700;
}
.achievement-item__year{ color: var(--color-muted); font-size: .82rem; margin-bottom: 4px; display:block; }

/* =========================
   Registration form
   ========================= */
.registration-wrap{ max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-sm); }
.form-section-title{ font-size: 1.1rem; color: var(--color-accent-dark); border-bottom: 2px solid var(--color-border); padding-bottom: 8px; margin: 28px 0 18px; }
.form-section-title:first-child{ margin-top: 0; }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form-group{ display: flex; flex-direction: column; gap: 6px; }
.form-group--full{ grid-column: 1 / -1; }
.form-group label{ font-weight: 600; font-size: .88rem; color: var(--color-text); }
.form-group .required{ color: #d64545; }
.form-group input, .form-group select, .form-group textarea{
  padding: 11px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .95rem; background: #fbfbfc;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline: none; border-color: var(--color-accent); background: #fff;
}
.form-note{ font-size: .82rem; color: var(--color-muted); margin-top: 4px; }
.form-honeypot{ position: absolute; left: -9999px; opacity: 0; }
.form-submit{ margin-top: 8px; }
.form-message{ padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 24px; font-weight: 500; }
.form-message--success{ background: rgba(47,168,143,.12); color: var(--color-accent-dark); border: 1px solid var(--color-accent); }
.form-message--error{ background: rgba(214,69,69,.1); color: #b93030; border: 1px solid #d64545; }
.privacy-note{ font-size: .8rem; color: var(--color-muted); margin-top: 18px; display:flex; gap:8px; align-items:flex-start; }

/* =========================
   Notice Board — scrolling marquee
   ========================= */
.notice-marquee{
  background: linear-gradient(90deg, #C9501E, #E6832B);
  color: #fff; overflow: hidden;
}
.notice-marquee__inner{ display:flex; align-items:center; gap:20px; padding:0; }
.notice-marquee__label{
  flex:none; display:flex; align-items:center; gap:8px; font-weight:700; font-size:.88rem;
  background: rgba(0,0,0,.18); padding:12px 20px; white-space:nowrap;
  border-right: 1px solid rgba(255,255,255,.2);
}
.notice-marquee__viewport{ flex:1; overflow:hidden; position:relative; padding:12px 0; }
.notice-marquee__track{
  display:inline-flex; align-items:center; white-space:nowrap;
  animation: notice-scroll 32s linear infinite;
}
.notice-marquee__viewport:hover .notice-marquee__track{ animation-play-state: paused; }
.notice-marquee__item{ display:inline-block; padding:0 20px; font-size:.92rem; font-weight:600; color:#fff; transition: color .15s ease; }
.notice-marquee__item:hover{ color: var(--color-warm); text-decoration: underline; }
.notice-marquee__sep{ font-size:.5rem; opacity:.5; vertical-align:middle; }
.notice-marquee__viewall{
  flex:none; display:flex; align-items:center; gap:4px; font-weight:700; font-size:.82rem;
  color:#fff; background: rgba(255,255,255,.15); padding:9px 16px; border-radius:999px;
  white-space:nowrap; margin-right:16px; transition: background .15s ease;
}
.notice-marquee__viewall:hover{ background: rgba(255,255,255,.28); color:#fff; }

@keyframes notice-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (max-width: 680px){
  .notice-marquee__label{ padding:10px 14px; font-size:.8rem; }
  .notice-marquee__item{ font-size:.85rem; }
}

.notice-manage-list{ display:flex; flex-direction:column; gap:16px; max-width:820px; margin:0 auto; }
.notice-manage-item{ display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md); padding:18px; box-shadow:var(--shadow-sm); }

.gallery-manage-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.gallery-manage-item{ background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); }
.gallery-manage-item__photo{ aspect-ratio:1/1; background:var(--color-bg); overflow:hidden; }
.gallery-manage-item__photo img{ width:100%; height:100%; object-fit:cover; }
.gallery-manage-item__form{ padding:12px; }
.gallery-manage-item__form textarea{
  width:100%; resize:vertical; padding:8px 10px; border:1.5px solid var(--color-border); border-radius:6px;
  font-family:var(--font-body); font-size:.82rem; background:#fbfbfc;
}
.gallery-manage-item__form textarea:focus{ outline:none; border-color:var(--color-accent); background:#fff; }
@media (max-width:900px){ .gallery-manage-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .gallery-manage-grid{ grid-template-columns:1fr; } }
.notice-manage-item__photo{ flex:none; width:80px; height:80px; border-radius:var(--radius-sm); overflow:hidden; background:var(--color-bg); }
.notice-manage-item__photo img{ width:100%; height:100%; object-fit:cover; }
.notice-manage-item__body{ flex:1; }
.notice-manage-item__body h4{ margin:0 0 4px; font-size:1rem; }
.notice-manage-item__body p{ margin:0; }
.notice-manage-item__delete{ flex:none; padding:8px 16px; font-size:.82rem; text-align:center; }

@media (max-width:560px){
  .notice-manage-item{ flex-wrap:wrap; }
}

/* =========================
   Gallery
   ========================= */
.gallery-filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:36px; }
.gallery-filter{
  background:#fff; border:1.5px solid var(--color-border); color:var(--color-text);
  padding:9px 20px; border-radius:999px; font-weight:600; font-size:.85rem; cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gallery-filter:hover{ border-color: var(--color-accent); color: var(--color-accent-dark); }
.gallery-filter.is-active{ background: var(--color-primary); border-color: var(--color-primary); color:#fff; }

.gallery-grid{ column-count: 3; column-gap: 20px; }
.gallery-item{
  margin: 0 0 20px; break-inside: avoid; position: relative; border-radius: var(--radius-md);
  overflow: hidden; cursor: pointer; box-shadow: var(--shadow-sm); background: #000;
}
.gallery-item img{ width:100%; display:block; transition: transform .35s ease, filter .35s ease; }
.gallery-item:hover img{ transform: scale(1.06); filter: brightness(.85); }
.gallery-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  color:#fff; font-size:.85rem; font-weight:600;
  opacity:0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
}
.gallery-item:hover figcaption{ opacity:1; transform: translateY(0); }
.gallery-item.is-hidden{ display:none; }

.lightbox{
  position: fixed; inset: 0; background: rgba(10,14,20,.94); z-index: 3000;
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden;
  transition: opacity .25s ease; padding: 24px;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__img{ max-width: min(90vw, 1100px); max-height: 82vh; border-radius: var(--radius-sm); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox__caption{ position:absolute; bottom:28px; left:0; right:0; text-align:center; color:#fff; font-size:.95rem; }
.lightbox__close, .lightbox__prev, .lightbox__next{
  position:absolute; background: rgba(255,255,255,.12); border:none; color:#fff; cursor:pointer;
  border-radius:50%; width:46px; height:46px; font-size:1.3rem; display:flex; align-items:center; justify-content:center;
  transition: background .15s ease;
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover{ background: rgba(255,255,255,.24); }
.lightbox__close{ top:22px; right:22px; }
.lightbox__prev{ left:22px; top:50%; transform: translateY(-50%); }
.lightbox__next{ right:22px; top:50%; transform: translateY(-50%); }

@media (max-width: 900px){ .gallery-grid{ column-count: 2; } }
@media (max-width: 560px){
  .gallery-grid{ column-count: 1; }
  .lightbox__prev, .lightbox__next{ width:38px; height:38px; font-size:1rem; }
}

/* =========================
   CTA banner
   ========================= */
.cta-banner{ background: var(--color-warm); color: var(--color-primary); text-align: center; padding: 64px 0; border-radius: var(--radius-lg); }
.cta-banner h2{ color: var(--color-primary); }

/* =========================
   Footer
   ========================= */
.site-footer{ background: var(--color-primary); color: rgba(255,255,255,.85); padding: 64px 0 28px; margin-top: 80px; }
.footer-logo-wrap{
  width: 108px; height: 108px; border-radius: 50%; margin-bottom: 18px;
  background: conic-gradient(var(--color-accent) 0turn 0.25turn, var(--color-warm) 0.25turn 0.5turn, var(--color-accent) 0.5turn 0.75turn, var(--color-warm) 0.75turn 1turn);
  padding: 5px; box-shadow: var(--shadow-md);
}
.footer-logo-wrap img{
  width: 100%; height: 100%; object-fit: contain; display: block;
  background: #fff; border-radius: 50%; padding: 12px;
}
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 40px; }
.site-footer h4{ color: #fff; font-size: 1rem; margin-bottom: 16px; }
.site-footer a{ color: rgba(255,255,255,.78); }
.site-footer a:hover{ color: var(--color-warm); }
.site-footer li{ margin-bottom: 10px; }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.15); padding-top: 22px; font-size: .85rem; text-align: center; color: rgba(255,255,255,.65); }
.footer-bottom a{ color: rgba(255,255,255,.75); font-weight: 600; }
.footer-bottom a:hover{ color: var(--color-warm); }

/* =========================
   Responsive
   ========================= */
@media (max-width: 900px){
  .hero__grid{ grid-template-columns: 1fr; }
  .grid-3, .grid-4, .grid-2{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px){
  .main-navigation{ display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-md); }
  .main-navigation.is-open{ display: block; }
  .main-navigation ul{ flex-direction: column; padding: 12px; }
  .main-navigation .sub-menu{ position:static; box-shadow:none; border:none; padding:0 0 0 16px; display:none; }
  .main-navigation li.menu-item-has-children.is-open > .sub-menu{ display:block; }
  .menu-toggle{ display: block; }
  .grid-3, .grid-4, .grid-2{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .section{ padding: 48px 0; }
  .registration-wrap{ padding: 24px; }
}