/* ============================================================
 * Custom redesign overrides for the public website.
 * Loaded LAST in layout/default.php, after the theme CSS
 * (front/theme/<slug>.css) and front/responsive.css — every
 * rule here intentionally overrides the stock template rather
 * than replacing it, so the underlying theme files (not present
 * in the app repo, server-only) never need to be touched.
 * ============================================================ */

:root {
  --gps-navy: #1e3a5f;
  --gps-navy-dark: #14263f;
  --gps-gold: #e8871e;
  --gps-blue: #2e6fbe;
  --gps-bg: #f6f8fb;
  --gps-text: #2a3342;
  --gps-text-soft: #6b7280;
  --gps-radius: 14px;
  --gps-radius-sm: 10px;
  --gps-shadow: 0 10px 30px rgba(20, 38, 63, 0.08);
  --gps-shadow-hover: 0 16px 40px rgba(20, 38, 63, 0.14);
}

html {
  font-size: 17px !important;
}

body {
  color: var(--gps-text);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Card grid spacing — consistent gap between every card,
   on every listing page (facilities, news, notice, holiday, event,
   gallery) instead of relying on Bootstrap's default gutter, which
   read as uneven/too tight between rows. ---------- */

.facilities-area .row,
.page-news-area .row,
.page-notice-area .row,
.page-event-area .row,
.page-gallery-area .row,
.latest-event .row,
.achivement-area .row {
  row-gap: 28px;
}

.facilities-area [class*="col-"],
.page-news-area [class*="col-"],
.page-notice-area [class*="col-"],
.page-event-area [class*="col-"],
.latest-event [class*="col-"],
.achivement-area [class*="col-"] {
  padding-left: 14px;
  padding-right: 14px;
}

/* Belt-and-suspenders: row-gap alone has no effect on old float-based
   Bootstrap grids (only real flex/grid containers honor it), so every
   card also gets its own margin-bottom — this is what actually
   guarantees a gap between stacked cards on any grid implementation. */
.single-event,
.single-news,
.single-notice,
.single-holiday {
  margin-bottom: 28px !important;
}

a {
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------- Header ---------- */

.header-top-area {
  background: var(--gps-navy-dark) !important;
}

.header-bottom-area {
  background: var(--gps-navy) !important;
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.header-bottom-area .logo img {
  max-height: 56px;
  width: auto;
  border-radius: 8px;
}

.header-bottom-area #menu > li {
  position: relative;
}

.header-bottom-area #menu > li > a {
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 26px 16px !important;
  transition: color 0.2s ease;
}

.header-bottom-area #menu > li > a:hover,
.header-bottom-area #menu > li.active > a {
  color: var(--gps-gold) !important;
}

/* Underline the currently-open section so it stays visibly marked, not
   just on hover — the header.php view now stamps the matching <li> with
   .active server-side based on the current URL. */
.header-bottom-area #menu > li.active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  height: 3px;
  border-radius: 3px;
  background: var(--gps-gold);
}

.header-bottom-area #menu .drop li.active a {
  background: var(--gps-bg) !important;
  color: var(--gps-navy) !important;
  font-weight: 700;
}

/* Pre-existing site bug (present before any of this redesign work): the
   ANNOUNCEMENT submenu rendered open on every page load instead of only on
   hover — the theme's own CSS never actually hides it by default. Fixed
   here rather than left as "expected" since it's a genuine layout bug, not
   a styling choice. */
.header-bottom-area #menu li .drop {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.header-bottom-area #menu li:hover .drop {
  display: block;
  opacity: 1;
  visibility: visible;
}

.header-bottom-area #menu .drop {
  border-radius: var(--gps-radius-sm);
  overflow: hidden;
  box-shadow: var(--gps-shadow-hover);
  border: none !important;
  padding: 6px 0;
}

.header-bottom-area #menu .drop li a {
  padding: 10px 20px !important;
  font-weight: 500;
}

.header-bottom-area #menu .drop li a:hover {
  background: var(--gps-bg) !important;
  color: var(--gps-navy) !important;
}

/* ---------- Hero / slider ---------- */

.slider-area .single-slider .content .intro {
  font-weight: 500;
  letter-spacing: 1px;
  opacity: 0.9;
}

.slider-area .single-slider .content .title {
  font-weight: 800;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.slider-area .single-slider .content .glbscl-link-btn {
  background: var(--gps-gold) !important;
  border: none !important;
  border-radius: 999px;
  padding: 14px 34px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 24px rgba(232, 135, 30, 0.4);
}

.slider-area .single-slider .content .glbscl-link-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(232, 135, 30, 0.5);
}

/* ---------- Section titles (used across nearly every page) ---------- */

.section-title {
  margin-bottom: 48px;
}

.section-title .title {
  font-weight: 800;
  font-size: 2rem;
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}

.section-title .title .inner {
  color: var(--gps-navy);
}

.section-title .title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: var(--gps-gold);
}

/* ---------- Principal message banner ---------- */

.top-banner-area {
  padding: 80px 0;
}

.top-banner-content .title {
  font-weight: 800;
  color: var(--gps-navy);
  margin-bottom: 20px;
}

.top-banner-content .text {
  color: var(--gps-text-soft);
  line-height: 1.8;
  font-size: 1.05rem;
  transition: max-height 0.3s ease;
}

/* Only applied by JS once the text is measurably taller than the
   principal's photo — a short message never gets clamped or a
   Read More button at all. */
.top-banner-content .text.is-clamped {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
}

.principal-text-wrap {
  position: relative;
}

.read-more-btn {
  margin-top: 14px;
  border: none;
  background: var(--gps-navy);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 9px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.read-more-btn:hover {
  background: var(--gps-gold);
  transform: translateY(-2px);
}

.top-banner-img img {
  border-radius: var(--gps-radius);
  box-shadow: var(--gps-shadow-hover);
  transform: none !important;
  clip-path: none !important;
}

/* ---------- Facilities / feature cards ---------- */

.facilities-area {
  background: var(--gps-bg);
  padding: 70px 0;
}

.single-faclities {
  background: #fff;
  border-radius: var(--gps-radius);
  padding: 40px 24px;
  text-align: center;
  box-shadow: var(--gps-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
}

.single-faclities:hover {
  transform: translateY(-8px);
  box-shadow: var(--gps-shadow-hover);
}

.single-faclities .icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--gps-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.single-faclities .icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.single-faclities .name {
  font-weight: 700;
  color: var(--gps-navy);
  margin: 0;
}

/* ---------- Generic content/list cards — News, Notice, Holiday, Events ---------- */

.single-blog,
.single-event,
.single-news,
.single-notice,
.single-holiday,
.single-gallery {
  background: #fff;
  border-radius: var(--gps-radius);
  box-shadow: var(--gps-shadow);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
  margin-bottom: 30px;
}

.single-blog:hover,
.single-event:hover,
.single-news:hover,
.single-notice:hover,
.single-holiday:hover,
.single-gallery:hover {
  transform: translateY(-6px);
  box-shadow: var(--gps-shadow-hover);
}

.single-blog img,
.single-event img,
.single-news img,
.single-gallery img {
  border-radius: 0;
}

/* ---------- Event media carousel (multiple photos/videos per event) ----------
 * The cover image plus any extra photos/videos uploaded from the admin
 * panel all show as slides in one carousel, one at a time, with
 * prev/next arrows and dot indicators — the visible slide's own link
 * still opens the full lightbox gallery (fancybox) so visitors can
 * view everything full-screen. */

.event-carousel {
  position: relative;
  overflow: hidden;
  background: var(--gps-navy);
}

.event-carousel-track {
  position: relative;
  width: 100%;
  padding-top: 66%;
}

.event-carousel-slide {
  display: none;
  position: absolute;
  inset: 0;
}

.event-carousel-slide.active {
  display: block;
}

.event-carousel-slide a,
.event-carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
}

.event-carousel-slide img {
  object-fit: cover;
}

.event-carousel-slide .is-video-slide {
  width: 100%;
  height: 100%;
  background: #000;
}

.event-carousel-slide .carousel-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  display: block;
}

.event-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--gps-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease, transform 0.2s ease;
}

.event-carousel-nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.08);
}

.event-carousel-nav.prev {
  left: 10px;
}

.event-carousel-nav.next {
  right: 10px;
}

.event-carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.event-carousel-dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}

.event-carousel-dots .dot.active {
  width: 20px;
  background: #fff;
}

.event-media-count {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
  background: rgba(20, 38, 63, 0.75);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.event-carousel-lg .event-carousel-track {
  padding-top: 56%;
}

/* ---------- Top Students ----------
 * Reuses the same achiever data that already powers the app's Top
 * Achievers screen — surfaced here on the public homepage too. */

.top-students-area {
  background: var(--gps-bg);
  padding: 70px 0;
}

.single-top-student {
  position: relative;
  background: #fff;
  border-radius: var(--gps-radius);
  box-shadow: var(--gps-shadow);
  overflow: hidden;
  text-align: center;
  margin-bottom: 32px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.single-top-student::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--gps-gold), var(--gps-blue));
  z-index: 2;
}

.single-top-student:hover {
  transform: translateY(-10px);
  box-shadow: var(--gps-shadow-hover);
}

.single-top-student .photo {
  position: relative;
  padding-top: 105%;
  background: linear-gradient(135deg, var(--gps-navy) 0%, var(--gps-navy-dark) 100%);
  overflow: hidden;
}

.single-top-student .photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 38, 63, 0.85) 0%, rgba(20, 38, 63, 0) 45%);
}

.single-top-student .photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.single-top-student:hover .photo img {
  transform: scale(1.08);
}

.single-top-student .photo-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 2.5rem;
}

.single-top-student .badge-rank {
  position: absolute;
  left: 12px;
  top: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--gps-gold);
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.3px;
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(232, 135, 30, 0.5);
}

.single-top-student .badge-rank::before {
  content: "\f559"; /* fa-trophy */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.single-top-student:nth-child(2) .badge-rank,
.single-top-student .badge-rank.is-silver {
  background: #9ca8b4;
  box-shadow: 0 4px 14px rgba(120, 133, 148, 0.45);
}

.single-top-student:nth-child(3) .badge-rank,
.single-top-student .badge-rank.is-bronze {
  background: #b5722f;
  box-shadow: 0 4px 14px rgba(181, 114, 47, 0.45);
}

.single-top-student .info {
  padding: 22px 16px 26px;
}

.single-top-student .name {
  color: var(--gps-navy);
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 4px;
}

.single-top-student .class-label {
  color: var(--gps-text-soft);
  font-size: 0.9rem;
  margin-bottom: 16px;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

.single-top-student .class-label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: var(--gps-gold);
}

.single-top-student .score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.single-top-student .score .grade,
.single-top-student .score .marks {
  background: var(--gps-navy);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 16px;
  border-radius: 999px;
}

.single-top-student .score .percent {
  color: var(--gps-blue);
  font-weight: 800;
  font-size: 1rem;
}

@media (max-width: 767px) {
  .top-students-area {
    padding: 44px 0;
  }

  .single-top-student .name {
    font-size: 1rem;
  }
}

/* ---------- Buttons, generally ---------- */

.glbscl-btn,
.btn-primary,
.theme-btn {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.glbscl-btn:hover,
.btn-primary:hover,
.theme-btn:hover {
  transform: translateY(-2px);
}

/* ---------- Pagination ---------- */

.pagination {
  gap: 6px;
}

.pagination li a,
.pagination li span {
  border-radius: 8px !important;
  border-color: #e5e9f0 !important;
}

/* ---------- Footer ---------- */

footer {
  background: var(--gps-navy-dark) !important;
  position: relative;
}

/* Thin gold accent line dividing the page content from the footer —
   a small touch that makes the footer read as a deliberate section,
   not just "where the page ran out". */
footer::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--gps-gold), var(--gps-blue));
}

.footer-top-area {
  padding: 60px 0 36px;
}

.footer-widget {
  margin-bottom: 30px;
}

.footer-widget .fw-logo img {
  max-height: 56px;
  margin-bottom: 16px;
}

.footer-widget .fw-title {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 12px;
}

.footer-widget .fw-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  background: var(--gps-gold);
  border-radius: 3px;
}

.footer-widget .text {
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.75;
  font-size: 0.95rem;
}

/* Two-column grid for the link list — the original single stacked
   column ran to 8+ items and made the footer feel endless on mobile,
   this halves the scroll length while staying easy to scan. */
.footer-widget .links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 12px;
}

.footer-widget .links li,
.footer-widget .address li {
  margin-bottom: 12px;
}

.footer-widget .links a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  text-transform: capitalize;
  display: inline-block;
}

.footer-widget .links a:hover {
  color: var(--gps-gold);
  padding-left: 4px;
}

.footer-widget .address li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  line-height: 1.5;
}

.footer-widget .address li .icon {
  color: var(--gps-gold);
  margin-top: 2px;
  flex-shrink: 0;
}

.footer-widget .social {
  display: flex;
  gap: 10px;
}

.footer-widget .social li a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.footer-widget .social li a:hover {
  background: var(--gps-gold);
  border-color: var(--gps-gold);
  transform: translateY(-3px);
}

.footer-bottom-area {
  background: rgba(0, 0, 0, 0.25);
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-bottom-area .copyright {
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  font-size: 0.9rem;
}

/* ---------- Mandatory disclosure badge ----------
 * The original is a raster .gif with the glitchy pink text baked
 * directly into the image pixels — that can't be restyled since
 * it's not real text, so it's hidden and replaced with a clean
 * CSS badge carrying the same words and same link. */

.hta-left a[href*="mandatory-public-disclosure"] img {
  display: none;
}

.hta-left a[href*="mandatory-public-disclosure"] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #ffab3d 0%, var(--gps-gold) 55%, #c96e0f 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.2px;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(232, 135, 30, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  animation: gps-badge-pulse 2.2s ease-in-out infinite;
}

.hta-left a[href*="mandatory-public-disclosure"]:hover {
  background: linear-gradient(135deg, #c96e0f 0%, #c96e0f 100%);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff !important;
  animation-play-state: paused;
}

.hta-left a[href*="mandatory-public-disclosure"]::before {
  content: "\f071"; /* fa-exclamation-triangle */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.78rem;
}

.hta-left a[href*="mandatory-public-disclosure"]::after {
  content: "Mandatory Public Disclosure";
}

/* Soft attention-drawing pulse — a compliance link is worth noticing,
   but this stays subtle (scale + glow only, no color flashing) so it
   doesn't read as an ad or error state. */
@keyframes gps-badge-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(232, 135, 30, 0.55);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(232, 135, 30, 0);
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hta-left a[href*="mandatory-public-disclosure"] {
    animation: none;
  }
}

/* ---------- Header top bar — spacing/alignment/readable font size ---------- */

.header-top-area .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.header-top-area .hta-box {
  display: inline-flex;
  align-items: center;
  margin: 6px 16px 6px 0;
}

.header-top-area .hta-left {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 8px 0;
}

.header-top-area .hta-right {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 0;
  margin-left: auto;
}

/* Deliberately smaller than the main nav below it (.header-bottom-area
   #menu > li > a) — this is secondary/utility info, it shouldn't visually
   outrank the primary navigation. */
.header-top-area .text,
.header-top-area .icon {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

.header-top-area .icon {
  margin-right: 5px;
}

@media (max-width: 1100px) {
  .header-top-area .hta-left,
  .header-top-area .hta-right {
    flex-wrap: wrap;
  }
}

/* Mobile top bar: disclosure badge centered on its own line, then phone
   and email each on their own full-width centered line below — matches
   the readable "label : value" stacked layout, not squeezed into one
   cramped row. The .gps-fab (bottom-right floating button) still exists
   as a quick-access shortcut lower on the page, but the header itself
   now always shows full contact info too, same as desktop. */
@media (max-width: 767px) {
  .header-top-area .row {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    padding: 10px 16px;
    gap: 4px;
  }

  .header-top-area .hta-left,
  .header-top-area .hta-right {
    display: contents;
  }

  .header-top-area .hta-box {
    margin: 0;
  }

  /* The <p class="text"> tags carry a default browser margin (~1em top
     and bottom) that isn't reset elsewhere — on desktop it's masked by
     the row's own flex alignment, but stacked vertically here it was
     the actual source of the oversized gaps between the badge, phone,
     and email lines, not the flex `gap` itself. */
  .header-top-area .hta-box .text {
    margin: 0;
  }

  .hta-disclosure {
    order: -1;
    margin-bottom: 2px;
  }

  .header-top-area .hta-box:not(.hta-disclosure) {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-top-area .hta-right {
    margin-top: 2px;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .hta-left a[href*="mandatory-public-disclosure"] {
    font-size: 0.78rem;
    padding: 6px 14px 6px 12px;
  }

  .header-top-area .text,
  .header-top-area .icon {
    font-size: 0.85rem;
  }
}

/* The FAB is a bottom-of-screen convenience shortcut on mobile only —
   the header above already shows full contact info on every screen
   size, so there's nothing for the FAB to add on desktop. */
@media (min-width: 768px) {
  .gps-fab {
    display: none;
  }
}

/* ---------- Mobile menu — no flash-of-open-menu before meanmenu.js runs ----------
 * meanmenu.js sets its own inline display:none once it initializes, which
 * always wins over any CSS here — this rule only closes the brief gap
 * before that JS runs, it can't (and shouldn't) block the hamburger toggle
 * afterward. */
@media (max-width: 767px) {
  #mobile_menu_active {
    display: none;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
  .section-title .title {
    font-size: 1.6rem;
  }

  .top-banner-area {
    padding: 50px 0;
    text-align: center;
  }

  .top-banner-img {
    margin-top: 30px;
  }

  .facilities-area {
    padding: 50px 0;
  }

  .single-faclities {
    margin-bottom: 24px;
  }
}

@media (max-width: 767px) {
  .header-top-area .hta-left,
  .header-top-area .hta-right {
    justify-content: center;
    text-align: center;
  }

  .header-bottom-area .logo {
    text-align: left !important;
  }

  .header-bottom-area .logo img {
    margin-left: 0;
    max-height: 44px;
  }

  .header-bottom-area .row {
    display: flex;
    align-items: center;
  }

  .slider-area .single-slider .content .intro {
    font-size: 1.1rem;
    margin-bottom: 6px;
  }

  .slider-area .single-slider .content .title {
    font-size: 1.7rem;
    line-height: 1.25;
    margin-bottom: 16px;
  }

  .slider-area .single-slider .content .glbscl-link-btn {
    padding: 11px 24px;
    font-size: 0.9rem;
  }

  /* Principal Message text — smaller and tighter on mobile than the
     desktop size (1.05rem/1.8 line-height read as too large/loose on
     a narrow column, per feedback that it looked cleaner before). */
  .top-banner-area {
    padding: 44px 0;
  }

  .top-banner-content .title {
    font-size: 1.5rem;
  }

  .top-banner-content .text {
    font-size: 0.92rem;
    line-height: 1.6;
  }

  /* Left-aligned two-column grid, not centered — a centered stacked
     list is what made the mobile footer feel like an endless plain
     list before; left-aligned columns read as an intentional footer
     nav instead. Social icons stay centered since that's a common,
     recognizable pattern for a share/follow row. */
  .footer-top-area {
    padding: 44px 0 18px;
    text-align: left;
  }

  .footer-widget {
    margin-bottom: 34px;
  }

  .footer-widget .links {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-widget .social {
    justify-content: center;
    display: flex;
  }

  .footer-bottom-area .copyright {
    text-align: center;
    display: block;
  }
}

@media (max-width: 480px) {
  .section-title .title {
    font-size: 1.35rem;
  }

  .single-faclities {
    padding: 28px 18px;
  }

  .slider-area .single-slider .content .intro {
    font-size: 1rem;
  }

  .slider-area .single-slider .content .title {
    font-size: 1.45rem;
  }
}

/* ============================================================
 * Inner pages — every page (About, News, Notice, Holiday,
 * Result, Event, Gallery, Contact, Our Teachers/Students/
 * Courses) opens with this exact same breadcrumb banner, so
 * styling it once covers every page's header consistently.
 * ============================================================ */

.page-breadcumb-area {
  background: linear-gradient(135deg, var(--gps-navy) 0%, var(--gps-navy-dark) 100%) !important;
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

.page-breadcumb-area .title {
  color: #fff;
  font-weight: 800;
  font-size: 2.1rem;
  margin-bottom: 14px;
}

.page-breadcumb-area .links {
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-breadcumb-area .links li {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.page-breadcumb-area .links li:not(:last-child)::after {
  content: "/";
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.35);
}

.page-breadcumb-area .links li a {
  color: rgba(255, 255, 255, 0.85);
}

.page-breadcumb-area .links li a:hover {
  color: var(--gps-gold);
}

/* The current-page crumb repeats the H1 title verbatim (by design in
   page.php/mandatory_public_disclosure.php) — de-emphasize it clearly
   (smaller, not bold, muted) so it reads as a location trail, not a
   second heading competing with the title above it. */
.page-breadcumb-area .links li:last-child a {
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: capitalize;
  cursor: default;
  pointer-events: none;
}

.page-breadcumb-area .links li:last-child a:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- News / Notice / Holiday / Event card content ---------- */

.page-news-area,
.page-notice-area,
.page-event-area,
.page-gallery-area,
.page-contact-area {
  padding: 60px 0;
}

.single-news .content,
.single-event .content {
  padding: 22px;
}

.single-notice,
.single-event {
  padding: 24px;
}

.single-news .title a,
.single-notice .title a,
.single-event .title a {
  color: var(--gps-navy);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.4;
}

.single-news .title a:hover,
.single-notice .title a:hover,
.single-event .title a:hover {
  color: var(--gps-blue);
}

.single-news .meta,
.single-notice .meta,
.single-event .list {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.single-news .meta .info,
.single-notice .meta .info,
.single-event .list .info {
  color: var(--gps-text-soft);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.single-news .meta .icon,
.single-notice .meta .icon,
.single-event .list .icon {
  color: var(--gps-gold);
}

.single-news .text,
.single-notice .text,
.single-event .text {
  color: var(--gps-text-soft);
  line-height: 1.7;
  margin: 10px 0;
}

.single-holiday .date,
.single-notice .date {
  color: var(--gps-blue);
  font-weight: 600;
  font-size: 0.95rem;
}

.more .glbscl-link-btn {
  display: inline-block;
  padding: 8px 22px !important;
  background: var(--gps-navy);
  color: #fff !important;
}

.more .glbscl-link-btn:hover {
  background: var(--gps-gold);
}

/* ---------- Gallery ----------
 * gallery.php puts the title and carousel as DIRECT children of
 * `.row`, with no `.col-*` wrapper — so they inherit the row's
 * -15px negative margins with nothing to counteract it, pulling
 * them past the container's actual left/right edge (visible as
 * "touching the screen edge" on mobile). Zeroing the row's margins
 * here and adding matching padding directly fixes it without
 * needing to add a wrapper column in the PHP. */
.page-gallery-area .row {
  margin-left: 0;
  margin-right: 0;
}

.gallery-section-title,
.gallery-carousel {
  padding-left: 15px;
  padding-right: 15px;
}

.gallery-section-title {
  margin: 40px 0 20px;
}

.gallery-section-title .title {
  color: var(--gps-navy);
  font-weight: 800;
}

.single-gallery {
  border-radius: var(--gps-radius-sm);
  overflow: hidden;
  position: relative;
}

.single-gallery img {
  border-radius: var(--gps-radius-sm);
  transition: transform 0.3s ease;
}

.single-gallery:hover img {
  transform: scale(1.05);
}

.single-gallery .icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 38, 63, 0.4);
  color: #fff;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.single-gallery:hover .icon {
  opacity: 1;
}

/* The theme's own carousel script (front/theme.js, server-only — not part
   of this repo checkout) initializes .gallery-carousel with owl-carousel's
   loop:true and a fixed items:4 on desktop. That combination is unreliable
   whenever an album's real image count isn't a clean multiple of 4: owl
   clones slides to fill its loop buffer (visible duplicates), and with
   very few real images (e.g. just 1) its own width/transform math computes
   a broken 0px item that then renders as an empty box, or — once a floor
   width is forced back in — visually overflows because the stage's JS
   transform was calculated assuming the broken (near-zero) width.
   Patching individual symptoms (hide clones, then floor the width) chased
   its tail across two rounds without fully fixing it, since owl's transform
   positioning and the CSS floor kept disagreeing. Instead, this bypasses
   owl's sliding mechanism entirely for this carousel: .owl-stage is
   dissolved with display:contents so its real .owl-item children become
   direct flex children of .gallery-carousel, position/transform are reset
   so owl's JS-computed (and sometimes wrong) slide offset no longer
   applies, and nav/dots are hidden since there's no longer anything to
   slide between — every real image just lays out in a plain wrapping row,
   correct regardless of how many images an album has. */
.gallery-carousel.owl-carousel {
  display: flex !important;
  flex-wrap: wrap !important;
  direction: ltr !important;
  justify-content: flex-start;
  gap: 18px;
  background: transparent !important;
}

/* Both wrapper levels between .gallery-carousel and .owl-item need to be
   dissolved with display:contents — owl's real DOM is stage-outer >
   stage > item, and leaving either wrapper as a normal block box means
   .owl-item's flex properties land on a non-flex parent and have no
   effect at all (this is what silently collapsed every image before). */
.gallery-carousel.owl-carousel .owl-stage-outer {
  display: contents !important;
}

.gallery-carousel.owl-carousel .owl-stage {
  display: contents !important;
}

.gallery-carousel.owl-carousel .owl-item {
  position: static !important;
  transform: none !important;
  width: auto !important;
  float: none !important;
  direction: ltr;
  flex: 0 1 240px;
}

.gallery-carousel.owl-carousel .owl-item.cloned {
  display: none !important;
}

.gallery-carousel.owl-carousel .owl-nav,
.gallery-carousel.owl-carousel .owl-dots {
  display: none !important;
}

/* Fixed-aspect card instead of the source image's raw (often
   inconsistent) dimensions — every thumbnail reads as one tidy grid
   regardless of how many photos an album has or their original size. */
.gallery-carousel.owl-carousel .single-gallery {
  box-shadow: var(--gps-shadow);
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gallery-carousel.owl-carousel .single-gallery:hover {
  transform: translateY(-4px);
  box-shadow: var(--gps-shadow-hover);
}

.gallery-carousel.owl-carousel .single-gallery a {
  position: relative;
  display: block;
  padding-top: 75%;
}

.gallery-carousel.owl-carousel .single-gallery img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Result / Report Card lookup form ---------- */

div.form.login_form {
  max-width: 500px !important;
  margin: 0 auto !important;
  background: #fff !important;
  border-radius: var(--gps-radius) !important;
  box-shadow: var(--gps-shadow) !important;
  padding: 40px !important;
}

div.form.login_form h1 {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--gps-navy) !important;
}

/* result.php ships its own inline <style> block, deeper in the document
   than any <head> stylesheet, with !important rules of EQUAL specificity
   to a same-tag-shape selector — equal specificity + equal !important is
   decided by DOM order, and the inline block is later than this file no
   matter how late this link tag loads. Needs strictly HIGHER specificity
   to win, not just later loading — matching the real classes on these
   inputs (form-control has-feedback-left / login-button) to get there. */
section.login_content form input.form-control.has-feedback-left {
  border-radius: var(--gps-radius-sm) !important;
  border-color: #e5e9f0 !important;
  box-shadow: none !important;
}

section.login_content form input.login-button.login-button {
  background-color: var(--gps-gold) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  width: 100%;
  border: none !important;
}

/* ---------- Contact page ---------- */

.contact-page-title {
  color: var(--gps-navy);
  font-weight: 800;
  margin-bottom: 24px;
}

.contact-form-area {
  background: #fff;
  border-radius: var(--gps-radius);
  box-shadow: var(--gps-shadow);
  padding: 32px;
}

.contact-input-box input,
.contact-input-box textarea {
  width: 100%;
  border: 1px solid #e5e9f0 !important;
  border-radius: var(--gps-radius-sm) !important;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 1.05rem;
}

.contact-input-box textarea {
  min-height: 140px;
  resize: vertical;
}

.single-contact-info {
  background: #fff;
  border-radius: var(--gps-radius-sm);
  box-shadow: var(--gps-shadow);
  padding: 20px;
  margin-bottom: 20px;
  height: calc(100% - 20px);
}

.single-contact-info .icon {
  color: var(--gps-gold);
  font-size: 1.3rem;
  margin-bottom: 10px;
  display: block;
}

.page-contact-area iframe {
  border-radius: var(--gps-radius);
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .page-breadcumb-area {
    padding: 40px 0;
  }

  .page-breadcumb-area .title {
    font-size: 1.5rem;
  }

  .login_form {
    padding: 24px;
  }

  .contact-form-area {
    padding: 22px;
  }
}

/* ---------- Floating contact button (phone/email) ----------
 * Phone and email used to live in the header top bar; moved here per
 * feedback since the header bar was cramped, especially on mobile.
 * Sits bottom-right on every page, expands upward on click/tap. */

.gps-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1000;
}

.gps-fab-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--gps-gold);
  color: #fff;
  font-size: 1.3rem;
  box-shadow: 0 8px 24px rgba(232, 135, 30, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gps-fab-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(232, 135, 30, 0.55);
}

.gps-fab-toggle .fa-times {
  display: none;
}

.gps-fab.open .gps-fab-toggle .fa-phone-volume {
  display: none;
}

.gps-fab.open .gps-fab-toggle .fa-times {
  display: inline-block;
}

.gps-fab-menu {
  position: absolute;
  right: 0;
  bottom: 68px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.gps-fab.open .gps-fab-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gps-fab-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--gps-navy) !important;
  border-radius: 999px;
  padding: 10px 18px 10px 10px;
  box-shadow: var(--gps-shadow-hover);
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.9rem;
}

.gps-fab-item .gps-fab-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gps-navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---------- Preloader ----------
 * Covers the whole viewport (including the header/menu behind it) at
 * a high z-index until the page has fully loaded, so nothing is
 * visible except the animated logo while assets are still coming in. */

body.gps-loading {
  overflow: hidden;
}

#preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--gps-navy-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.4s ease;
}

body.gps-loaded #preloader {
  opacity: 0;
  pointer-events: none;
}

.gps-preloader-logo {
  width: 96px;
  height: 96px;
}

.gps-preloader-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  animation: gps-preloader-bounce 1s ease-in-out infinite;
}

@keyframes gps-preloader-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-18px) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gps-preloader-logo img {
    animation: none;
  }
}

@media (max-width: 480px) {
  .gps-fab {
    right: 16px;
    bottom: 16px;
  }

  .gps-fab-item .gps-fab-label {
    font-size: 0.85rem;
  }
}