/* ==========================================================================
   Zagol Academy — 2026 Refresh Layer  ·  "Deep Blue & Gold"
   Loaded AFTER style.css. Scoped (for now) to index.html so the rest of the
   site is untouched until we roll this out page by page.
   Palette is anchored to the school seal (#006699) + a warm gold accent,
   with sky/coral borrowed from the "globe kids" artwork for KG warmth.
   ========================================================================== */

:root{
  --navy:      #072a3e;   /* deep base — footer, hero, headings */
  --navy-700:  #0a3a52;
  --blue:      #006699;   /* the seal blue — primary */
  --blue-600:  #0b5f88;
  --blue-tint: #e7f1f7;   /* light panels */
  --blue-tint2:#f3f8fb;   /* section wash */
  --gold:      #ef9a2a;   /* warm honey-amber accent / CTAs */
  --gold-600:  #db8a22;
  --gold-ink:  #2a1c06;
  --sky:       #6cabe1;   /* KG accent */
  --coral:     #ec6a5a;   /* KG accent */
  --leaf:      #4fa06a;   /* KG accent */
  --ink:       #1a2730;   /* body text */
  --muted:     #5a6b78;
  --line:      #e3eaef;
  --paper:     #ffffff;
  --paper-2:   #f5f9fb;
  --radius:    18px;
  --radius-sm: 12px;
  --shadow:    0 12px 34px rgba(7,42,62,.10);
  --shadow-sm: 0 4px 16px rgba(7,42,62,.07);
  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Base typography ------------------------------------------------ */
body{
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
p{ color: var(--ink); }
a:hover, a:active, a:focus{ color: var(--blue); }

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-body);   /* clean sans for section/repeated headings */
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--navy);
}
h2{ font-size: clamp(26px, 3.4vw, 36px); line-height: 1.12; }
h3{ font-size: 23px; }

span.yellow-text{ color: var(--gold); }

/* Section rhythm — more breathing room at the top of each section
   (base template had "Activities & Services" flush to the section top, etc.) */
#activities_services{ background: var(--blue-tint2); padding: 76px 0 84px; }
.zagol .row{ padding: 36px 0; }
#directors .our-teacher{ padding: 74px 0; }
.testimonial{ padding: 78px 50px; }
#footer{ padding: 66px 0 54px; }

/* ---------- Navigation ----------------------------------------------------- */
#navbar{ border-top: 4px solid var(--gold); box-shadow: 0 2px 14px rgba(7,42,62,.06); }

ul.menus li a{
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--navy);
  font-size: 15px;
}
ul.menus li.active a{ color: var(--blue); }
ul.menus li a:hover, ul.menus li.open a{
  background-color: transparent;
  color: var(--blue);
}
/* gold underline instead of the old full teal fill */
ul.menus > li{ position: relative; }
ul.menus > li > a:after{
  content:""; position:absolute; left:20px; right:20px; bottom:28px;
  height:3px; border-radius:3px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
#navbar.fixedwrap ul.menus > li > a:after{ bottom:12px; }
ul.menus > li:hover > a:after, ul.menus > li.active > a:after{ transform: scaleX(1); }
/* keep the dropdown caret, recolor it */
ul.menus li.has-child a:hover:after, ul.menus li.open a:after{ display:none; }

#slide-buttons{ background-color: var(--blue); }
#c-menu--slide-right{ background-color: var(--navy); }
.menus-mobile li a:hover{ color: var(--gold); }

/* ---------- Hero ----------------------------------------------------------- */
/* taller hero; padding-top clears the fixed navbar so the eyebrow is never clipped */
#slider.hero{ min-height: 88vh; padding-top: 96px; padding-bottom: 32px; }
#slider.hero:before{
  background: linear-gradient(150deg, rgba(7,42,62,.92) 0%, rgba(0,102,153,.66) 100%);
}
/* faint seal watermark, right side */
#slider.hero:after{
  content:""; position:absolute; right:-40px; top:50%;
  width:460px; height:460px; transform: translateY(-50%);
  background: url(../img/seal-white.png) center/contain no-repeat;
  opacity:.06; z-index:1; pointer-events:none;
}
@media (max-width: 767px){ #slider.hero:after{ display:none; } }

.hero-eyebrow{
  font-family: var(--font-body); font-weight: 700;
  color: var(--gold); letter-spacing: .18em; font-size: 13px;
}
.hero-title{
  font-family: var(--font-head); font-weight: 600;
  text-transform: none; letter-spacing: -0.015em;
}
.hero-lead{ font-family: var(--font-body); }

/* multilingual rotating welcome greeting under the English headline */
.hero-amharic{
  color: var(--gold);
  font-size: clamp(23px, 3.6vh, 40px);
  font-weight: 500;
  line-height: 1.4;
  margin: 14px auto 2px;
  max-width: 820px;
  min-height: 1.4em;               /* reserve space so the line doesn't jump on swap */
  opacity: 1;
  -webkit-transition: opacity .45s ease; transition: opacity .45s ease;
}
.hero-amharic.is-fading{ opacity: 0; }
.hero-amharic.script-ethiopic{ font-family: 'Noto Serif Ethiopic', 'Noto Sans Ethiopic', serif; font-style: normal; }
.hero-amharic.script-latin{ font-family: 'Fraunces', Georgia, serif; font-style: italic; }

/* ---------- Stats strip ---------------------------------------------------- */
.stats-band{ background: linear-gradient(150deg, #072a3e 0%, #0b4a68 100%); padding: 42px 0; }
.stats-row{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.stats-row li{
  -webkit-box-flex: 1; -ms-flex: 1 1 25%; flex: 1 1 25%;
  text-align: center; padding: 12px 14px;
  border-right: 1px solid rgba(255,255,255,.13);
}
.stats-row li:last-child{ border-right: none; }
.stat-num{
  display: block; font-family: var(--font-body); font-weight: 800;
  color: var(--gold); font-size: clamp(34px, 4.4vw, 46px); line-height: 1;
  letter-spacing: -0.02em;
}
.stat-label{
  display: block; color: #bcd0e0; font-size: 12.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; margin-top: 9px;
}
@media (max-width: 600px){
  .stats-row li{ -ms-flex: 1 1 50%; flex: 1 1 50%; }
  .stats-row li:nth-child(2){ border-right: none; }
  .stats-row li:nth-child(1), .stats-row li:nth-child(2){ border-bottom: 1px solid rgba(255,255,255,.13); padding-bottom: 20px; margin-bottom: 8px; }
}

/* ---------- Programs band -------------------------------------------------- */
#programs{ background: #fff; padding: 76px 0 84px; }
#programs .heading-block{ text-align: center; }
#programs .heading-block:after{ margin: 22px auto; }
.programs-grid{
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  gap: 14px; margin: 34px 0 0; padding: 0; list-style: none;
}
.programs-grid li{
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 50px;
  padding: 10px 24px 10px 10px; font-weight: 600; font-size: 15px; color: var(--navy);
  box-shadow: var(--shadow-sm);
  -webkit-transition: -webkit-transform .18s ease, box-shadow .18s ease;
  transition: transform .18s ease, box-shadow .18s ease;
}
/* fixed grid: max 4 across (2 rows of 4 on desktop), 2 across on small screens */
@media (min-width: 768px){
  .programs-grid li{ -ms-flex: 0 0 calc(25% - 11px); flex: 0 0 calc(25% - 11px); }
}
@media (max-width: 767px){
  .programs-grid li{ -ms-flex: 0 0 calc(50% - 7px); flex: 0 0 calc(50% - 7px); padding-right: 10px; }
}
.programs-grid li:hover{ -webkit-transform: translateY(-3px); transform: translateY(-3px); box-shadow: var(--shadow); }
.programs-grid li i{
  width: 40px; height: 40px; border-radius: 50%; -ms-flex: 0 0 auto; flex: 0 0 auto;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  color: #fff; font-size: 16px;
}
/* cycle the warm/cool accents across the subjects */
.programs-grid li:nth-child(1) i{ background: var(--blue); }
.programs-grid li:nth-child(2) i{ background: var(--gold-600); }
.programs-grid li:nth-child(3) i{ background: var(--coral); }
.programs-grid li:nth-child(4) i{ background: var(--leaf); }
.programs-grid li:nth-child(5) i{ background: var(--sky); }
.programs-grid li:nth-child(6) i{ background: var(--blue); }
.programs-grid li:nth-child(7) i{ background: var(--gold-600); }
.programs-grid li:nth-child(8) i{ background: var(--leaf); }

.btn-hero{
  font-family: var(--font-body); font-weight: 700;
  text-transform: none; letter-spacing: 0; font-size: 15px;
  padding: 15px 36px;
}
.btn-hero-amber{ background: var(--gold); color: var(--gold-ink); box-shadow: 0 12px 28px rgba(0,0,0,.24); }
.btn-hero-amber:hover{ background: #fff; color: var(--blue); }
.btn-hero-ghost:hover{ background: #fff; color: var(--blue); }

/* mobile hero: clear the navbar, calm the type down
   (must come AFTER the base hero rules above to win the cascade) */
@media (max-width: 767px){
  #slider.hero{ padding-top: 130px; padding-bottom: 48px; min-height: 76vh; }
  .hero-title{ font-size: clamp(28px, 8.5vw, 38px); }
  .hero-amharic{ font-size: clamp(17px, 5.5vw, 22px); }
  .hero-lead{ font-size: 16px; margin: 14px auto 26px; }
  .hero-eyebrow{ font-size: 11px; letter-spacing: .14em; }
  .btn-hero{ padding: 13px 28px; font-size: 14px; }
}

/* ---------- Headings / dividers -------------------------------------------- */
.heading-block:after{ border-top: 3px solid var(--gold); width: 56px; margin: 22px 0; }
#activities_services .heading-block:after,
.holiday-block .holiday-title + *{ } /* placeholder */
.heading-block h4.tagline{ color: var(--muted); font-family: var(--font-body); font-style: normal; }
/* center the activities heading divider */
#activities_services .heading-block{ text-align:center; }
#activities_services .heading-block:after{ margin: 22px auto; }

/* ---------- About / "zagol" ------------------------------------------------ */
.button-normal.green a{ background-color: var(--blue); border-color: var(--blue);
  font-family: var(--font-body); font-weight: 700; text-transform: none; letter-spacing: .02em; }
.button-normal.green a:hover{ background-color: var(--navy); border-color: var(--navy); color:#fff; }
.button-normal.white a{ color: var(--blue); font-family: var(--font-body); font-weight: 700;
  text-transform: none; letter-spacing: .02em; }

/* ---------- Activity cards (color-coded badges for KG warmth) --------------- */
/* flex the row so every card stretches to the tallest one's height */
.features-grid{
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.features-grid > div{
  display: -webkit-box; display: -ms-flexbox; display: flex;
}
.features-grid .feat-card{ width: 100%; }
.features-grid .feat-card{
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 32px 22px;
}
.features-grid .feat-card:hover{ box-shadow: var(--shadow); }
.features-grid .feat-card h4{
  font-family: var(--font-body); font-weight: 700; text-transform: none;
  color: var(--navy); font-size: 18px; letter-spacing: -0.005em;
}
.features-grid .feat-card p{ color: var(--muted); font-family: var(--font-body); }
.feat-badge{ width: 76px; height: 76px; }
/* each card gets its own accent — professional blue leads, warm colors follow */
.features-grid > div:nth-child(1) .feat-badge{ background: var(--blue-tint); }
.features-grid > div:nth-child(1) .feat-badge .icon{ color: var(--blue); }
.features-grid > div:nth-child(2) .feat-badge{ background: #fdf0d9; }
.features-grid > div:nth-child(2) .feat-badge .icon{ color: var(--gold-600); }
.features-grid > div:nth-child(3) .feat-badge{ background: #fbe9e6; }
.features-grid > div:nth-child(3) .feat-badge .icon{ color: var(--coral); }
.features-grid > div:nth-child(4) .feat-badge{ background: #e7f2ea; }
.features-grid > div:nth-child(4) .feat-badge .icon{ color: var(--leaf); }

/* ---------- Holidays / live calendar --------------------------------------- */
.holiday-block{
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 30px 30px 26px; max-width: 640px;
}
.holiday-title{ font-family: var(--font-body); font-weight: 700; color: var(--navy); font-size: 20px; }
.holiday-title span{ color: var(--gold-600); font-family: var(--font-body); font-weight: 700; }
.holiday-list li{ padding: 11px 0; border-bottom: 1px solid var(--line); }
.holiday-date{
  width: 56px; background: var(--blue); border-radius: 10px; padding: 7px 0;
}
.holiday-date .day{ font-family: var(--font-head); font-weight: 600; }
.holiday-name{ color: var(--ink); font-family: var(--font-body); font-weight: 600; }
.holiday-name small{ color: var(--muted); font-weight: 400; }
.holiday-note{ color: var(--muted); }
/* dynamic states (set by JS) */
.holiday-list li.is-past{ opacity: .38; }
.holiday-list li.is-next{
  background: #fffaf0; margin: 0 -14px; padding-left: 14px; padding-right: 14px;
  border-radius: 12px; border-bottom-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--gold);
}
.holiday-list li.is-next .holiday-date{ background: var(--gold); color: var(--gold-ink); }
.holiday-next-badge{
  display: inline-block; margin-left: 8px; font-family: var(--font-body);
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-ink); background: var(--gold); padding: 2px 8px; border-radius: 20px;
  vertical-align: middle;
}

/* ---------- Calendar + Admissions two-column ------------------------------- */
.info-grid{ margin: 46px auto 0; max-width: 1000px; }
.info-grid .holiday-block{ max-width: none; margin: 0; height: 100%; }
/* the base CSS sets #calendar{margin:30px 0} via an ID — override it so the two
   cards line up flush at the top on desktop */
.info-grid #calendar{ margin: 0; }
.info-col{ margin-bottom: 24px; }
@media (min-width: 992px){
  .info-grid{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .info-col{ display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 0; }
  .info-grid .holiday-block, .info-grid .admissions-card{ width: 100%; }
}
.admissions-card{
  height: 100%; border-radius: var(--radius); padding: 30px 30px 28px;
  background: linear-gradient(160deg, #072a3e 0%, #0b4a68 100%);
  color: #dbe7f0; box-shadow: var(--shadow);
}
.admissions-card .ac-eyebrow{
  color: var(--gold); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; font-size: 12px;
}
.admissions-card h3{ color: #fff; font-size: 23px; margin: 8px 0 10px; }
.admissions-card p{ color: #c6d8e6; font-size: 15px; }
.ac-facts{ margin: 18px 0 22px; padding: 0; list-style: none; }
.ac-facts li{
  display: -webkit-box; display: -ms-flexbox; display: flex;
  gap: 13px; align-items: flex-start; padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.ac-facts li:last-child{ border-bottom: none; }
.ac-facts .ac-ico{ color: var(--gold); font-size: 17px; width: 22px; text-align: center; margin-top: 3px; -ms-flex: 0 0 auto; flex: 0 0 auto; }
.ac-facts strong{ color: #fff; font-weight: 700; display: block; font-size: 14.5px; }
.ac-facts .ac-sub{ color: #9db9cd; font-size: 13px; display: block; line-height: 1.45; }
.ac-actions{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 18px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.btn-gold{ display: inline-block; background: var(--gold); color: var(--gold-ink);
  font-weight: 700; font-size: 14px; padding: 12px 26px; border-radius: 50px; }
.btn-gold:hover{ background: #fff; color: var(--blue); }
.ac-link{ color: var(--gold); font-weight: 600; font-size: 14px; }
.ac-link:hover{ color: #fff; }

/* ---------- Directors / Our Leadership ------------------------------------- */
#directors .our-teacher{ background: var(--blue-tint2); padding: 92px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.leadership-heading{ margin-bottom: 46px; }
.leadership-heading:after{ margin: 22px auto; }
.teacher-desc h3{ font-family: var(--font-body); font-weight: 700; color: var(--navy); font-size: 26px; }
.teacher-desc .position{ color: var(--gold-600); font-weight: 700; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.teacher-desc p{ font-size: 15.5px; }
.teacher-desc ul li a{ color: var(--blue); }
.teacher-desc ul li a:hover{ color: var(--gold-600); }
/* move the inactive dimming from the whole <li> onto the image link only, so the
   name/role captions below each photo stay fully readable */
.teacher-photo li{ opacity: 1; }
.teacher-photo-box a{
  display: block; border-radius: 14px; overflow: hidden; opacity: .5;
  -webkit-transition: opacity .2s ease, box-shadow .2s ease; transition: opacity .2s ease, box-shadow .2s ease;
}
/* make the photo fill its column on desktop too, so the active frame hugs the image
   (the base stylesheet only sets width:100% inside a mobile media query) */
.teacher-photo-box a img{ display: block; width: 100%; height: auto; }
.teacher-photo li.active a, .teacher-photo li:hover a{ opacity: 1; }
.teacher-photo li.active a{ box-shadow: 0 0 0 3px var(--gold); }
.photo-cap{ display: block; text-align: center; margin-top: 13px; }
.photo-cap strong{ display: block; font-family: var(--font-body); font-weight: 700; color: var(--navy); font-size: 15.5px; }
.photo-cap small{ display: block; color: var(--gold-600); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; margin-top: 3px; }
.teacher-photo li.active .photo-cap strong{ color: var(--blue); }

/* ---------- Testimonial ---------------------------------------------------- */
.testimonial.with-bg-image:before{ content:""; position:absolute; inset:0; z-index:50;
  background: linear-gradient(150deg, rgba(7,42,62,.86), rgba(0,102,153,.72)); }
.testimonial .overlay.dark{ display:none; }
.testimonial p.text{ font-family: var(--font-head); font-weight: 400; font-style: italic; font-size: 26px; line-height: 1.4; }
.testimonial.with-bg-image p.text:after{ border-top: 2px solid var(--gold); }
.testimonial h5.title{ font-family: var(--font-body); font-weight: 700; }
.testimonial.with-bg-image h6.position{ color: var(--gold); font-family: var(--font-body); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 700; }

/* ---------- Footer --------------------------------------------------------- */
#footer{ background-color: var(--navy); }
#footer p, #footer a{ color: #b8c9d6; font-size: 14px; line-height: 1.6; }
#footer a:hover{ color: var(--gold); }
.widget-footer h4.title{ font-family: var(--font-body); font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.widget-footer h4.title:after{ border-top: 2px solid var(--gold); width: 34px; }
.widget-footer .recent-post .post-item,
.widget-footer .contact-section{ border-bottom-color: rgba(255,255,255,.10); }
.widget-footer .recent-post .post-item .post-content h4{
  color:#fff; font-family: var(--font-body); font-weight: 600; font-size: 14.5px; line-height: 1.4;
  margin-bottom: 6px;
}
.widget-footer .recent-post .post-item .post-content p{ font-size: 13px; color: #9db3c4; }
.widget-footer .recent-post .post-item .post-content span.date{ color: var(--gold); font-style: normal; font-weight: 600; font-size: 12px; }
.widget-footer .footer-content h4{
  color:#fff; font-family: var(--font-body); font-weight: 600; font-size: 14.5px; margin-bottom: 6px;
}
/* clearer separation between footer columns on desktop */
@media (min-width: 992px){
  .widget-footer{ padding-right: 34px; }
  .widget-footer + .widget-footer{
    border-left: 1px solid rgba(255,255,255,.08);
    padding-left: 34px;
  }
}
.button-normal.white a{ background:#fff; }
/* footer CTA: solid gold pill for clear contrast on navy */
#footer .button-normal.white a{
  background: var(--gold); border-color: var(--gold); color: var(--gold-ink);
  font-weight: 700;
}
#footer .button-normal.white a:hover{
  background: #fff; border-color: #fff; color: var(--blue);
}
.button-normal.white a:hover{ background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }

#copyright{ background-color: #041d2c; padding: 22px 0; }
#copyright p{ color: #8fa6b4; margin: 0; }
#copyright .social-links ul li a{ color: #8fa6b4; }
#copyright .social-links ul li a:hover{ color: var(--gold); }

/* ==========================================================================
   INNER PAGES (About / Students / Parents / Friends / Contact / 404)
   ========================================================================== */

/* ---------- Page title band ------------------------------------------------ */
.single-wrapper{ padding: 0; }
.page-header{
  background: linear-gradient(150deg, #072a3e 0%, #0b4a68 78%, #0e5f82 100%);
  border: none; margin: 0; padding: 168px 0 46px;   /* top padding clears the fixed nav */
  position: relative; overflow: hidden;
}
.page-header:after{
  content:""; position:absolute; right:-70px; top:50%; width:380px; height:380px;
  transform: translateY(-50%);
  background: url(../img/seal-white.png) center/contain no-repeat;
  opacity:.07; pointer-events:none;
}
.page-header h1, .page-header h1.title{
  font-family: var(--font-head); font-weight: 600; text-transform: none;
  color: #fff; margin: 0 0 6px; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1;
}
.page-header .breadcrumb{
  background: transparent; margin: 0; padding: 0; font-size: 13.5px;
}
.page-header .breadcrumb > li > a{ color: #9dc0d5; }
.page-header .breadcrumb > li > a:hover{ color: var(--gold); opacity: 1; }
.page-header .breadcrumb .active{ color: var(--gold); }
.breadcrumb > li + li:before{ color: #5d87a0; }

/* ---------- Shared inner-page rhythm --------------------------------------- */
/* The base CSS pulls anchor sections up with margin:-40px (old anchor-offset hack),
   which makes the first section overlap the new title band. Neutralize it and use
   scroll-margin-top for anchor positioning instead. */
#introduction, #approach, #curriculum, #facilities, #careers, #news, #parent-info,
#registration, #parent-response, #calender, #support, #scholarships, #projects, #online{
  margin-top: 0;
  scroll-margin-top: 110px;   /* keeps #anchor jumps clear of the fixed nav */
}
/* on parents.html, #registration is a grid COLUMN, not a section — strip the
   anchor-section padding the base CSS gives it so it aligns with its siblings */
.row > #registration.col-md-4{ padding: 0 15px; margin: 0; }
.grey-background{ background-color: var(--blue-tint2); }

/* ---------- About Us: open layout (replaced the old accordion) -------------- */
.vision-card{
  background: var(--blue-tint2); border: 1px solid var(--line);
  border-left: 4px solid var(--gold); border-radius: var(--radius-sm);
  padding: 26px 28px; height: 100%;
}
.vision-card .vc-eyebrow{
  display: block; color: var(--gold-600); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; font-size: 12px; margin-bottom: 10px;
}
.vision-card p{ color: var(--ink); font-size: 15.5px; line-height: 1.7; margin: 0; }

.mission-band{
  background: linear-gradient(150deg, #072a3e 0%, #0b4a68 100%);
  padding: 56px 0; margin: 26px 0 0; text-align: center;
}
.mission-band .mb-eyebrow{
  display: block; color: var(--gold); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; font-size: 12px; margin-bottom: 14px;
}
.mission-band .mb-statement{
  font-family: var(--font-head); font-style: italic; font-weight: 400;
  color: #fff; font-size: clamp(22px, 3vw, 32px); line-height: 1.45;
  max-width: 820px; margin: 0 auto;
}

.people-section{ padding: 56px 0 30px; }
.people-card{
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 28px 30px; height: 100%; margin-bottom: 24px;
}
.people-card .pc-head{
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 14px; margin-bottom: 16px;
}
.people-card .pc-ico{
  width: 46px; height: 46px; border-radius: 12px; -ms-flex: 0 0 auto; flex: 0 0 auto;
  background: var(--blue-tint); color: var(--blue);
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  font-size: 19px;
}
.people-card h3{ margin: 0; font-size: 21px; }
.people-card p{ font-size: 15px; line-height: 1.7; }
.people-card p strong{ color: var(--navy); }
@media (min-width: 992px){
  .people-section .row{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .people-section .row > div{ display: -webkit-box; display: -ms-flexbox; display: flex; }
  .people-section .people-card{ width: 100%; }
}

/* ---------- Accordion / panels (About) ------------------------------------- */
.panel-group .panel{
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); margin-bottom: 14px; overflow: hidden;
}
.panel-default > .panel-heading{
  background: #fff; border: none; padding: 18px 22px;
}
.panel-title, .panel-heading h4, .panel-heading h3{
  font-family: var(--font-body); font-weight: 700; color: var(--navy);
  text-transform: none; margin: 0; font-size: 16.5px;
}
.panel-group a:hover .panel-heading, .panel-group a[aria-expanded="true"] .panel-heading{
  background: var(--blue-tint2);
}
.panel-group a[aria-expanded="true"] .panel-title{ color: var(--blue); }
.panel-body{ border-top: 1px solid var(--line) !important; color: var(--ink); }

/* ---------- Banner CTA (Friends etc.) -------------------------------------- */
.banner{
  background: linear-gradient(150deg, #072a3e 0%, #0b4a68 100%);
}
.banner h2, .banner h3, .banner p{ color: #fff; }
.banner .button-normal a{
  background: var(--gold); border-color: var(--gold); color: var(--gold-ink);
  font-family: var(--font-body); font-weight: 700; text-transform: none;
}
.banner .button-normal a:hover{ background: #fff; border-color: #fff; color: var(--blue); }

/* ---------- Link cards (Students online activities) ------------------------ */
.link-post .link-item{
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 30px;
  -webkit-transition: -webkit-transform .2s ease, box-shadow .2s ease;
  transition: transform .2s ease, box-shadow .2s ease;
}
.link-post .link-item:hover{ -webkit-transform: translateY(-5px); transform: translateY(-5px); box-shadow: var(--shadow); }
.link-post .link-content{ padding: 6px 18px 16px; }
.link-post h4, .link-post h3{ font-family: var(--font-body); font-weight: 700; text-transform: none; color: var(--navy); }

/* ---------- Students: age-grouped online resources -------------------------- */
#online .heading-block, #achievements .heading-block{ text-align:center; }
#online .heading-block:after, #achievements .heading-block:after{ margin: 22px auto; }
.res-group{ max-width: 1000px; margin: 0 auto 30px; }
.res-label{
  font-size: 15px; font-weight: 700; color: var(--navy); letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 14px;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px;
}
.res-dot{ width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-blue{ background: var(--blue); } .dot-gold{ background: var(--gold); } .dot-coral{ background: var(--coral); }
.res-cards{
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 14px;
}
.res-card{
  -ms-flex: 1 1 calc(33.333% - 10px); flex: 1 1 calc(33.333% - 10px);
  display: block; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 18px 20px; box-shadow: var(--shadow-sm);
  -webkit-transition: -webkit-transform .18s ease, box-shadow .18s ease;
  transition: transform .18s ease, box-shadow .18s ease;
}
.res-card:hover{ -webkit-transform: translateY(-3px); transform: translateY(-3px); box-shadow: var(--shadow); }
.res-logo{
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  height: 46px; margin-bottom: 12px;
}
.res-logo img{ max-height: 42px; max-width: 150px; width: auto; height: auto; display: block; }
.res-card h4{ font-size: 16px; margin: 0 0 6px; color: var(--navy); }
.res-card p{ font-size: 13.5px; color: var(--muted); margin: 0 0 10px; line-height: 1.55; }
.res-card .res-go{ font-size: 13px; font-weight: 700; color: var(--blue); }
.res-card:hover .res-go{ color: var(--gold-600); }
@media (max-width: 767px){ .res-card{ -ms-flex: 1 1 100%; flex: 1 1 100%; } }

/* ---------- Students: achievements strip ------------------------------------ */
#achievements{ background: var(--blue-tint2); padding: 66px 0 72px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ach-grid{
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 18px; max-width: 1000px; margin: 0 auto;
}
.ach-card{
  -ms-flex: 1 1 calc(33.333% - 12px); flex: 1 1 calc(33.333% - 12px);
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--gold);
  border-radius: var(--radius-sm); padding: 26px 24px; text-align: center;
  box-shadow: var(--shadow-sm);
}
.ach-card .ach-ico{
  width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 14px;
  background: #fdf0d9; color: var(--gold-600); font-size: 24px;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.ach-card h4{ font-size: 17px; margin-bottom: 8px; }
.ach-card p{ font-size: 14px; color: var(--muted); margin: 0; line-height: 1.6; }
@media (max-width: 767px){ .ach-card{ -ms-flex: 1 1 100%; flex: 1 1 100%; } }

/* ---------- Students: modern news layout ------------------------------------ */
.news-modern{ max-width: 1060px; margin: 0 auto; }
.news-featured{
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; margin-bottom: 34px;
}
.news-featured .nf-image{ position: relative; -ms-flex: 1 1 46%; flex: 1 1 46%; min-width: 300px; }
.news-featured .nf-image img{ width: 100%; height: 100%; object-fit: cover; display: block; min-height: 260px; }
.nf-flag{
  position: absolute; top: 16px; left: 16px;
  background: var(--gold); color: var(--gold-ink);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 30px;
}
.news-featured .nf-body{ -ms-flex: 1 1 54%; flex: 1 1 54%; min-width: 300px; padding: 34px 36px; }
.news-featured .nf-body h3{ font-size: 24px; margin: 8px 0 12px; }
.news-featured .nf-body p{ color: var(--muted); font-size: 15px; line-height: 1.7; margin-bottom: 20px; }
.nc-date{ color: var(--gold-600); font-weight: 700; font-size: 12.5px; letter-spacing: .04em; }
.news-grid{
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 18px;
}
.news-card{
  -ms-flex: 1 1 calc(33.333% - 12px); flex: 1 1 calc(33.333% - 12px);
  min-width: 240px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm);
  -webkit-transition: -webkit-transform .18s ease, box-shadow .18s ease;
  transition: transform .18s ease, box-shadow .18s ease;
}
.news-card:hover{ -webkit-transform: translateY(-4px); transform: translateY(-4px); box-shadow: var(--shadow); }
.news-card .nc-image{ position: relative; height: 150px; background: var(--blue-tint); }
.news-card .nc-image img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.nc-year{
  position: absolute; bottom: 10px; left: 10px;
  background: rgba(7,42,62,.85); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px; letter-spacing: .05em;
}
.news-card .nc-body{ padding: 16px 18px 18px; }
.news-card h4{ font-size: 15.5px; line-height: 1.35; margin: 0 0 6px; }
.news-card p{ font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 8px 0 0; }
.news-archive{ margin-top: 30px; }
.news-archive summary{
  cursor: pointer; font-weight: 700; color: var(--blue); font-size: 15px;
  padding: 14px 18px; background: var(--blue-tint2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); list-style-position: inside;
}
.news-archive summary:hover{ color: var(--gold-600); }
.news-archive .archive-list{ padding: 10px 18px; }
.news-archive .archive-list article{ padding: 16px 0; border-bottom: 1px solid var(--line); }
.news-archive .archive-list article:last-child{ border-bottom: none; }
.news-archive .archive-list h4{ font-size: 15.5px; margin-bottom: 4px; }
.news-archive .archive-list p{ font-size: 14px; color: var(--muted); margin: 6px 0 0; }

/* ---------- Students: Life at Zagol gallery ----------------------------------
   NOTE: ids/classes are deliberately NOT "#gallery"/".gallery-item" — the base
   theme defines those (floated, fixed-width lightbox styles) and they broke
   the masonry layout. Do not rename these back. */
#life-gallery{ background: var(--blue-tint2); border-top: 1px solid var(--line); padding: 70px 0 78px; }
#life-gallery .heading-block{ text-align: center; }
#life-gallery .heading-block:after{ margin: 22px auto; }
.gallery-grid{
  -webkit-column-count: 3; column-count: 3; -webkit-column-gap: 16px; column-gap: 16px;
  max-width: 1060px; margin: 0 auto;
}
.lg-item{
  margin: 0 0 16px; break-inside: avoid; -webkit-column-break-inside: avoid;
  border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm);
  background: #fff; float: none; width: auto; position: relative;
}
.lg-item img{ width: 100%; display: block; opacity: 1;
  -webkit-transition: -webkit-transform .25s ease; transition: transform .25s ease; }
.lg-item:hover img{ -webkit-transform: scale(1.03); transform: scale(1.03); }
@media (max-width: 900px){ .gallery-grid{ -webkit-column-count: 2; column-count: 2; } }
@media (max-width: 560px){ .gallery-grid{ -webkit-column-count: 1; column-count: 1; } }

/* ---------- Blog / news list (Students) ------------------------------------ */
.blog-post h2, .blog-post h3{ font-family: var(--font-body); font-weight: 700; text-transform: none; color: var(--navy); }
.post-meta span, .post-meta a{ color: var(--muted); }
.pagination > li > a{
  color: var(--blue); border-color: var(--line); border-radius: 8px; margin: 0 3px;
}
.pagination > li > a:hover, .pagination > .active > a{
  background: var(--blue); border-color: var(--blue); color: #fff;
}

/* ---------- Schedule table (Parents) ---------------------------------------- */
.schedule table.table{
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; border-collapse: separate; border-spacing: 0;
  box-shadow: var(--shadow-sm);
}
.schedule table.table th.header{
  background: var(--navy); color: #fff; border: none;
  font-family: var(--font-body); font-weight: 700; font-size: 16px; padding: 14px 18px;
}
.schedule table.table th.header .icon{ color: var(--gold); margin-right: 8px; }
.schedule table.table td{
  border: none; border-top: 1px solid var(--line); padding: 11px 18px; color: var(--ink);
}
.schedule table.table td.time{ color: var(--blue); font-weight: 600; }
.schedule table.table tr:nth-child(even) td{ background: var(--paper-2); }

/* ---------- Skills / stats bars (Parents) ----------------------------------- */
.my-skills .skills-bar{ background: #e8eef3; border-radius: 30px; overflow: hidden; }
.my-skills .bar{ border-radius: 30px; }
.my-skills .skills-barrow:nth-child(5n+1) .bar{ background: var(--blue) !important; }
.my-skills .skills-barrow:nth-child(5n+2) .bar{ background: var(--gold) !important; }
.my-skills .skills-barrow:nth-child(5n+3) .bar{ background: var(--coral) !important; }
.my-skills .skills-barrow:nth-child(5n+4) .bar{ background: var(--leaf) !important; }
.my-skills .skills-barrow:nth-child(5n+5) .bar{ background: var(--sky) !important; }
.my-skills .skill-title{ font-family: var(--font-body); font-weight: 600; color: var(--navy); }

/* ---------- Pricing / scholarship tiers (Friends) --------------------------- */
.pricing-item{ padding: 0 12px; margin-bottom: 26px; }
.pricing-item .header-area{
  border-radius: var(--radius) var(--radius) 0 0; padding: 20px 10px;
}
.pricing-item:nth-child(3n+1) .header-area{ background: var(--blue) !important; }
.pricing-item:nth-child(3n+2) .header-area{ background: var(--navy) !important; }
.pricing-item:nth-child(3n+3) .header-area{ background: var(--gold-600) !important; }
.pricing-item .header-area .title{
  color: #fff; font-family: var(--font-body); font-weight: 700; text-transform: none; margin: 0;
}
.pricing-item .content{
  background: #fff; border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-sm);
}

/* ---------- Parents: registration checklist card ---------------------------- */
.reg-card{
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--gold);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 22px 22px 20px;
}
.reg-card h4{ margin-bottom: 10px; }
.reg-card p{ font-size: 14px; color: var(--muted); }
.reg-card ul.registration li{
  position: relative; padding: 8px 0 8px 30px; border-bottom: 1px solid var(--line);
  font-size: 14px; line-height: 1.5;
}
.reg-card ul.registration li:last-child{ border-bottom: none; }
.reg-card ul.registration li:before{
  content: "\f00c"; font-family: FontAwesome; position: absolute; left: 2px; top: 8px;
  color: var(--leaf); font-size: 13px;
}
.reg-actions{
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 14px; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 16px;
}
.reg-actions .btn-gold{ padding: 10px 22px; font-size: 13.5px; }
.reg-print{
  background: none; border: none; color: var(--blue); font-weight: 600; font-size: 13.5px;
  cursor: pointer; padding: 0; margin: 0 !important;
}
.reg-print:hover{ color: var(--gold-600); }
@media print{
  body *{ visibility: hidden; }
  .reg-card, .reg-card *{ visibility: visible; }
  .reg-card{ position: absolute; left: 0; top: 0; width: 100%; border: none; box-shadow: none; }
  .reg-actions{ display: none; }
}

/* ---------- Parents: FAQ panel ----------------------------------------------- */
.faq-panel{
  background: var(--blue-tint2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 44px 38px 30px; margin: 40px 0 10px;
}
.faq-panel .heading-block{ margin-bottom: 10px; }
.faq-panel .heading-block:after{ margin: 22px auto; }
.faq-grid{
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 16px;
}
.faq-card{
  -ms-flex: 1 1 calc(50% - 8px); flex: 1 1 calc(50% - 8px); min-width: 260px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.faq-card h4{ font-size: 15.5px; margin-bottom: 8px; color: var(--navy); }
.faq-card h4:before{ content: "Q. "; color: var(--gold-600); font-weight: 800; }
.faq-card p{ font-size: 14px; color: var(--muted); margin: 0; line-height: 1.65; }
.faq-card a{ color: var(--blue); font-weight: 600; }
.faq-more{ text-align: center; margin: 22px 0 0; font-size: 14px; color: var(--muted); }
.faq-more a{ color: var(--blue); font-weight: 700; }

/* ---------- Friends: ways-to-help cards -------------------------------------- */
.help-grid{
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 16px; margin: 26px 0 40px;
}
.help-card{
  -ms-flex: 1 1 calc(20% - 13px); flex: 1 1 calc(20% - 13px); min-width: 180px;
  display: block; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 20px 18px; box-shadow: var(--shadow-sm);
  -webkit-transition: -webkit-transform .18s ease, box-shadow .18s ease;
  transition: transform .18s ease, box-shadow .18s ease;
}
.help-card:hover{ -webkit-transform: translateY(-4px); transform: translateY(-4px); box-shadow: var(--shadow); }
.help-ico{
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 12px;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  color: #fff; font-size: 19px;
}
.hi-blue{ background: var(--blue); } .hi-gold{ background: var(--gold-600); }
.hi-leaf{ background: var(--leaf); } .hi-sky{ background: var(--sky); } .hi-coral{ background: var(--coral); }
.help-card h4{ font-size: 15px; margin: 0 0 6px; color: var(--navy); }
.help-card p{ font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0 0 10px; }
.help-card .help-go{ font-size: 12.5px; font-weight: 700; color: var(--blue); }
.help-card:hover .help-go{ color: var(--gold-600); }
@media (max-width: 991px){ .help-card{ -ms-flex: 1 1 calc(33.333% - 11px); flex: 1 1 calc(33.333% - 11px); } }
@media (max-width: 600px){ .help-card{ -ms-flex: 1 1 100%; flex: 1 1 100%; } }

/* ---------- Friends: scholarships intro — comfortable reading measure --------- */
#scholarships .row:first-of-type{ max-width: 820px; margin-left: auto; margin-right: auto; float: none; }
#scholarships .row:first-of-type p{ line-height: 1.75; font-size: 15.5px; }
#scholarships .row:first-of-type img{ margin: 4px 24px 10px 0; border-radius: var(--radius-sm); }
#scholarships h3{ margin-top: 30px; }

/* ---------- Friends: scholarship tier clarifications -------------------------- */
.tier-desc{
  font-size: 13.5px; color: var(--muted); margin: 16px 14px 4px; line-height: 1.5;
}
.tier-flag{
  display: inline-block; background: var(--gold); color: var(--gold-ink);
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px; vertical-align: middle; margin-left: 8px;
}
.tier-note{
  text-align: center; max-width: 640px; margin: 8px auto 0;
  font-size: 13.5px; color: var(--muted); font-style: italic;
}

/* ---------- FAQ page ---------------------------------------------------------- */
#faq-page{ padding: 40px 0 70px; }
.faqp-container{ max-width: 860px; }
.faqp-intro{ font-size: 16.5px; color: var(--muted); line-height: 1.7; margin: 6px 0 26px; }
.faqp-intro a{ color: var(--blue); font-weight: 600; }
.faqp-toc{
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
.faqp-toc a{
  display: inline-block; background: var(--blue-tint2); border: 1px solid var(--line);
  color: var(--navy); font-weight: 600; font-size: 13.5px;
  padding: 8px 16px; border-radius: 30px;
}
.faqp-toc a:hover{ background: var(--blue); border-color: var(--blue); color: #fff; }
.faqp-group{ padding-top: 26px; scroll-margin-top: 110px; }
.faqp-group h2{
  font-size: 24px; margin: 26px 0 6px; padding-bottom: 12px;
  border-bottom: 3px solid var(--gold);
  display: inline-block;
}
.faqp-item{ padding: 22px 0; border-bottom: 1px solid var(--line); }
.faqp-item:last-child{ border-bottom: none; }
.faqp-item h3{
  font-size: 17.5px; margin: 0 0 10px; color: var(--navy); line-height: 1.35;
}
.faqp-item h3:before{ content: "Q. "; color: var(--gold-600); font-weight: 800; }
.faqp-item p{ font-size: 15px; color: var(--ink); line-height: 1.75; margin: 0; }
.faqp-item a{ color: var(--blue); font-weight: 600; }
.faqp-cta{
  margin-top: 46px; background: linear-gradient(150deg, #072a3e 0%, #0b4a68 100%);
  border-radius: var(--radius); padding: 38px 34px; text-align: center;
}
.faqp-cta h2{ color: #fff; font-size: 24px; margin-bottom: 8px; }
.faqp-cta p{ color: #c6d8e6; margin-bottom: 20px; }
.faqp-cta a{ color: var(--gold); font-weight: 600; }
.faqp-cta .btn-gold{ color: var(--gold-ink); }

/* footer FAQ link in the copyright bar */
#copyright .copyright-text a{ color: #8fa6b4; font-weight: 600; }
#copyright .copyright-text a:hover{ color: var(--gold); }

/* ---------- Contact page ----------------------------------------------------- */
.contact-form input[type="text"], .contact-form input[type="email"],
.contact-form input, .contact-form textarea,
.contact-me input, .contact-me textarea{
  border: 1.5px solid var(--line) !important; border-radius: 10px !important;
  background: #fff; padding: 12px 14px; color: var(--ink);
  -webkit-transition: border-color .15s ease; transition: border-color .15s ease;
}
.contact-form input:focus, .contact-form textarea:focus,
.contact-me input:focus, .contact-me textarea:focus{
  border-color: var(--blue) !important; outline: none;
}
.contact-form .submit, button.submit, input.submit,
button.submit.button-normal.green{
  background: var(--gold); color: var(--gold-ink); border: none; border-radius: 50px;
  font-family: var(--font-body); font-weight: 700; text-transform: none;
  letter-spacing: .02em; padding: 12px 36px;
}
.contact-form .submit:hover, button.submit:hover, input.submit:hover,
button.submit.button-normal.green:hover{ background: var(--navy) !important; border-color: var(--navy) !important; color: #fff; }
.contact-icon{ color: var(--blue); }
.contact-details h3, .contact-details h4, .visit-us h3{
  font-family: var(--font-body); font-weight: 700; text-transform: none; color: var(--navy);
}

/* ==========================================================================
   "Zagol Games" — colorful nav pill + game picker page (games.html)
   ========================================================================== */

/* --- Nav: flush right, no wrapping --- */
/* The old template reserved 60px of nav margin for a search widget that renders
   fully transparent (invisible, but it intercepts clicks) — drop both so the
   menu can use the full column and sit flush against the right edge. */
.sb-search{ display: none; }
ul.menus{ margin-right: 0; }
ul.menus li.nav-games a{ padding-right: 0; }
ul.menus > li.nav-games > a:after{ right: 0; }
/* Keep the menu on ONE row down to the Bootstrap md breakpoint. Between 992–1199px
   the nav column (col-md-9) is only ~705px but the menu's natural width is ~720px,
   so tighten the per-link padding just in that band to make it fit instead of
   wrapping. Below 992px there isn't room even tightened — hand off to the hamburger. */
@media only screen and (min-width: 992px) and (max-width: 1199px){
  ul.menus li a{ padding-left: 13px; padding-right: 13px; }
  ul.menus > li > a:after{ left: 13px; right: 13px; }
}
@media only screen and (max-width: 991px){
  #main-menu{ display: none; }
  .mobile-menu{ display: block; }
}

/* --- Desktop nav: two-tone "Zagol Games" (blue + gold), no button --- */
ul.menus li.nav-games a{ font-weight: 700; }
ul.menus li.nav-games .fa-gamepad{ color: var(--gold); margin-right: 3px; }
ul.menus li.nav-games .gm-zagol{ color: var(--blue); }
ul.menus li.nav-games .gm-games{ color: var(--gold); }
ul.menus li.nav-games a:hover .gm-zagol{ color: var(--blue-600); }
ul.menus li.nav-games a:hover .gm-games{ color: var(--gold-600); }

/* --- Mobile slide-out menu --- */
.menus-mobile li.nav-games a{ color: var(--gold); font-weight: 700; }
.menus-mobile li.nav-games a .fa{ margin-right: 8px; }

/* --- Games page: banner --- */
.games-banner{
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(239,154,42,.28), transparent 60%),
    radial-gradient(900px 420px at 8% 110%, rgba(108,171,225,.22), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-700) 62%, var(--blue-600) 135%);
  color: #fff;
  text-align: center;
  padding: 170px 20px 66px;   /* top padding clears the fixed navbar */
}
.games-banner .games-eyebrow{
  display: inline-block;
  font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.games-banner h1{
  color: #fff;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.08;
  margin: 0 0 10px;
}
.games-banner .games-amh{
  font-family: 'Noto Serif Ethiopic', 'Abyssinica SIL', serif;
  font-size: 21px; color: rgba(255,255,255,.85); margin: 0 0 14px;
}
.games-banner .games-lead{
  max-width: 560px; margin: 0 auto;
  color: rgba(255,255,255,.88); font-size: 17px; line-height: 1.6;
}

/* --- Games page: picker grid --- */
#games-picker{ background: var(--blue-tint2); }
.games-grid{
  max-width: 1000px; margin: 0 auto;
  padding: 64px 20px 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 36px;
}
.game-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.game-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow); }
.game-art{ display: block; background: #14100c; }
.game-art svg{ display: block; width: 100%; height: auto; }
.game-body{ padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.game-title-row{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.game-body h2{ font-size: 24px; margin: 0; line-height: 1.2; }
.game-amh{
  font-family: 'Noto Serif Ethiopic', 'Abyssinica SIL', serif;
  font-size: 17px; color: var(--muted);
}
.age-badge{
  align-self: flex-start;
  margin: 10px 0 12px;
  background: var(--blue-tint); color: var(--blue-600);
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
  padding: 4px 13px; border-radius: 999px;
}
.game-desc{ font-size: 15.5px; line-height: 1.6; margin: 0 0 24px; }
.game-play{ margin-top: auto; }
.game-play a{
  display: inline-block;
  background: linear-gradient(135deg, #f9c05e, var(--gold) 55%, var(--gold-600));
  color: var(--gold-ink);
  font-weight: 700; font-size: 16px;
  padding: 12px 32px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(239,154,42,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.game-play a:hover{
  transform: translateY(-2px);
  color: var(--gold-ink);
  box-shadow: 0 8px 18px rgba(239,154,42,.45);
}
.games-note{
  text-align: center; color: var(--muted); font-size: 14.5px;
  max-width: 640px; margin: 0 auto; padding: 0 20px 74px;
}

/* --- Games page: phone tuning — smaller type, more breathing room --- */
@media only screen and (max-width: 600px){
  .games-banner{ padding: 126px 20px 44px; }
  .games-banner .games-eyebrow{ font-size: 12px; letter-spacing: 2px; margin-bottom: 10px; }
  .games-banner h1{ font-size: 30px; }
  .games-banner .games-amh{ font-size: 18px; margin-bottom: 12px; }
  .games-banner .games-lead{ font-size: 15px; line-height: 1.58; }

  .games-grid{ padding: 38px 18px 20px; gap: 26px; }
  .game-body{ padding: 22px 22px 24px; }
  .game-body h2{ font-size: 21px; }
  .game-amh{ font-size: 15px; }
  .age-badge{ font-size: 12px; margin: 9px 0 12px; padding: 4px 12px; }
  .game-desc{ font-size: 14.5px; line-height: 1.58; margin-bottom: 20px; }
  .game-play a{ font-size: 15px; padding: 11px 26px; }
  .games-note{ font-size: 13.5px; padding: 4px 20px 52px; }
}