/* ================================================================
   PREMIUM BLUE-SLATE THEME  v3  —  Rajdhani Grih Boys Hostel

   Key fix: previous values (#F4F7FE) were imperceptibly close to
   white. This version uses values that create a clearly visible,
   premium light-blue "ice glass" effect harmonious with the brand.
   ================================================================ */

/* ================================================================
   1.  CSS VARIABLE OVERRIDES
   ================================================================ */
:root {
  /* ── Core backgrounds ───────────────────────────────────────
     These are clearly visible to the eye — not "off-white"
     but a genuine soft blue-ice that reads as a premium tone.   */
  --white:       #EAF1FF;   /* main page bg  — light ice-blue   */
  --surface:     #EAF1FF;
  --subtle:      #DDE8FA;   /* alt sections  — medium blue-tint  */

  /* ── Text — keep original (they were correct) ─────────────── */
  --ink-1:       #0C1A2E;
  --ink-2:       #3D5270;
  --ink-3:       #8A9EBB;
  --ink-4:       #B8C7DA;

  /* ── Borders — slightly richer ────────────────────────────── */
  --border:      #C8D9F4;
  --border-mid:  #A8C0E8;

  /* ── Gold — warm amber accent ─────────────────────────────── */
  --gold:        #E09A10;
  --gold-light:  #FEF0CE;

  /* ── Shadows — tuned for the new background depth ─────────── */
  --sh-xs:  0 1px  4px  rgba(12,26,80,.05);
  --sh-sm:  0 2px  10px rgba(12,26,80,.07);
  --sh-md:  0 6px  24px rgba(12,26,80,.09);
  --sh-lg:  0 14px 44px rgba(12,26,80,.13);
  --sh-xl:  0 24px 64px rgba(12,26,80,.17);
  --sh-blue:    0 8px 28px rgba(29,91,216,.30);
  --sh-blue-lg: 0 16px 48px rgba(29,91,216,.38);
}

/* ================================================================
   2.  PAGE BODY
   ================================================================ */
html, body {
  background: var(--white);   /* #EAF1FF — clearly visible */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ================================================================
   3.  SECTION BACKGROUNDS
       Two-tone alternation with clearly perceivable difference.
       Odd sections = lighter (#EAF1FF → #E4ECFB)
       Even sections = deeper  (#D8E5F8 → #D0DDF5)
   ================================================================ */
.about.section {
  background: linear-gradient(180deg, #EAF1FF 0%, #E2ECFC 100%);
}
#location {
  background: linear-gradient(180deg, #D8E6FA 0%, #D0DFF6 100%) !important;
}
.coaching.section {
  background: linear-gradient(180deg, #EAF1FF 0%, #E2ECFC 100%);
}
.why.section {
  background: linear-gradient(180deg, #D8E6FA 0%, #D0DFF6 100%) !important;
}
#facilities {
  background: linear-gradient(180deg, #E4EDFB 0%, #EAF1FF 100%) !important;
}
#menu {
  background: linear-gradient(180deg, #D8E6FA 0%, #D0DFF6 100%) !important;
}
#faq {
  background: linear-gradient(180deg, #EAF1FF 0%, #D8E6FA 100%) !important;
}
#contact {
  background: linear-gradient(180deg, #D8E6FA 0%, #D0DFF6 100%) !important;
}
/* Gallery needs pure white for accurate photo colours */
.gallery.section {
  background: #FFFFFF !important;
}

/* ================================================================
   4.  CARD SURFACES — Pure White On The Blue Background
       #FFFFFF on #D8E6FA creates a clear, beautiful depth effect.
       Cards genuinely "float" with visible separation from sections.
   ================================================================ */
.why-card,
.fac-card,
.loc-seo-card,
.lsf-item,
.coaching-card,
.menu-card,
.menu-schedule-wrap,
.faq-item,
.cic-item,
.qr-btn,
.map-card,
.av-badge,
.enquiry-form {
  background: #FFFFFF !important;
}

/* About feature rows — very light blue */
.about-feat {
  background: #EEF5FF !important;
  border-color: var(--border) !important;
}
.about-feat:hover {
  background: var(--blue-50) !important;
  border-color: var(--blue-100) !important;
}
.af-icon {
  background: var(--blue-50) !important;
  border-color: var(--blue-100) !important;
  color: var(--blue) !important;
}

/* ================================================================
   5.  NAVBAR — Light Blue Glass When Scrolled
   ================================================================ */
.navbar.scrolled {
  background: rgba(234,241,255,.97) !important;
  box-shadow: 0 1px 0 var(--border),
              0 8px 32px rgba(12,26,80,.10) !important;
}
.navbar.scrolled::before {
  background: linear-gradient(
    90deg, var(--blue) 0%, var(--blue-light) 55%, var(--gold) 100%
  ) !important;
}

/* ================================================================
   6.  SECTION H2 — Deep Navy → Brand Blue
   ================================================================ */
.section-head:not(.testi-head) h2 {
  background: linear-gradient(
    135deg, #07122A 0%, #0D2050 45%, #1D5BD8 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.center-head h2::after,
.section-head:not(.center-head) h2::after {
  background: linear-gradient(90deg, var(--blue) 0%, var(--gold) 100%) !important;
  height: 4px !important;
}

/* ================================================================
   7.  SECTION TAG PILLS — Original Blue (correct for the palette)
   ================================================================ */
.tag {
  background: linear-gradient(
    135deg, var(--blue-50) 0%, var(--blue-100) 100%
  ) !important;
  color: var(--blue) !important;
  border-color: var(--blue-200) !important;
  box-shadow: 0 1px 6px rgba(29,91,216,.12) !important;
}
.tag::after {
  background: linear-gradient(
    105deg, transparent 40%,
    rgba(255,255,255,.5) 50%,
    transparent 60%
  ) !important;
}
/* Tag-light (dark sections — testimonials, hero) — strong contrast */
.tag-light {
  background: rgba(255,255,255,.22) !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,.50) !important;
  box-shadow: 0 1px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.2) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ================================================================
   8.  WHY CARDS
   ================================================================ */
.why-card { background: #FFFFFF !important; }
.why-card::before {
  background: linear-gradient(90deg, var(--blue) 0%, var(--gold) 100%) !important;
}
.wc-line {
  background: linear-gradient(
    90deg, var(--gold) 0%, var(--blue-100) 60%, transparent 100%
  ) !important;
}

/* ================================================================
   9.  FACILITY CARDS
   ================================================================ */
.fac-card {
  background: #FFFFFF !important;
  border-top-color: var(--blue-100) !important;
}
.fac-card:hover { border-top-color: var(--blue) !important; }
.fac-card:hover::after {
  background: linear-gradient(
    160deg, var(--blue-50) 0%, transparent 55%
  ) !important;
}

/* ================================================================
   10. FAQ — Blue Active State
   ================================================================ */
.faq-item { border-color: var(--border) !important; }
.faq-q:hover {
  color: var(--blue) !important;
  background: var(--blue-50) !important;
}
.faq-item.open {
  border-color: var(--blue-200) !important;
  box-shadow: 0 4px 16px rgba(29,91,216,.10) !important;
}
.faq-item.open .faq-q {
  color: var(--blue) !important;
  background: var(--blue-50) !important;
}
.faq-item.open .faq-chevron {
  background: var(--blue) !important;
  color: #FFFFFF !important;
}

/* ================================================================
   11. FOOD MENU SCHEDULE
   ================================================================ */
.ms-row:hover { background: #EEF4FF !important; }
.ms-row       { border-color: #C4D8F4 !important; }
.ms-day       { border-color: #C4D8F4 !important; }
.ms-meal      { border-color: #C4D8F4 !important; }
.ms-row[data-today] {
  background: linear-gradient(90deg, #FEF8EE 0%, #FEF3E0 100%) !important;
}
.ms-row[data-today]::before {
  background: linear-gradient(180deg, var(--gold), #F0C840) !important;
}
.ms-row[data-today] .ms-day      { color: #7A5000 !important; }
.ms-row[data-today] .ms-day::after { background: var(--gold) !important; }
.ms-b::before {
  background: linear-gradient(180deg, var(--gold), #F0C840) !important;
}
.menu-img-toggle {
  background: #FFFFFF !important;
  border-color: var(--border) !important;
}
.menu-img-toggle:hover,
.menu-img-toggle.open {
  background: var(--blue-50) !important;
  border-color: var(--blue-200) !important;
  color: var(--blue) !important;
}

/* ================================================================
   12. COACHING SECTION
   ================================================================ */
.coaching-seo-block {
  background: linear-gradient(135deg, #EEF5FF 0%, #E4EEFB 100%) !important;
  border-color: var(--blue-100) !important;
}
.coaching-seo-block h3 {
  background: linear-gradient(
    135deg, #07122A 0%, #0D2050 45%, #1D5BD8 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.coaching-features span {
  background: #FFFFFF !important;
  border-color: var(--border) !important;
}

/* ================================================================
   13. LOCATION SEO CARDS
   ================================================================ */
.loc-seo-card {
  background: #FFFFFF !important;
  border-color: var(--border) !important;
}
.lsf-item {
  background: #FFFFFF !important;
  border-color: var(--border) !important;
}
.lsf-item:hover {
  background: var(--blue-50) !important;
  border-color: var(--blue-200) !important;
}
.lsf-item:hover i { color: var(--blue) !important; }

/* ================================================================
   13b. TESTIMONIALS SECTION HEAD — Force Crisp White Visibility
        The dark navy background needs high-contrast text.
        Override any colour/opacity from the cascade.
   ================================================================ */
/* Section heading */
.testi-head h2 {
  color: #FFFFFF !important;
  background: none !important;
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  opacity: 1 !important;
}
/* Description paragraph — was near-invisible at .78 opacity */
.testi-head p {
  color: rgba(255,255,255,.92) !important;
  opacity: 1 !important;
  font-size: 1rem !important;
}
/* Reduce excess top padding in the dark section */
.testimonials.section {
  padding-top: clamp(3.5rem, 6vw, 5rem) !important;
}

/* ================================================================
   14. TESTIMONIALS — Dark Section, Warm-Blue Glass Cards
   ================================================================ */
.testi-card {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.testi-card:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.18) !important;
}
.testi-featured {
  background: rgba(29,91,216,.2) !important;
  border-color: rgba(29,91,216,.42) !important;
}
.testi-featured:hover { background: rgba(29,91,216,.28) !important; }
.tc-avatar {
  background: linear-gradient(135deg, var(--blue), var(--blue-light)) !important;
}

/* ================================================================
   15. CONTACT SECTION
   ================================================================ */
.cic-item {
  background: #FFFFFF !important;
  border-color: var(--border) !important;
}
.cic-item:hover {
  background: var(--blue-50) !important;
  border-color: var(--blue-100) !important;
}
.qr-call:hover {
  background: var(--blue-50) !important;
  border-color: var(--blue-200) !important;
}
.enquiry-form {
  background: linear-gradient(160deg, #FFFFFF 50%, #EEF4FF 100%) !important;
  border-color: var(--border) !important;
}
.ef-group input,
.ef-group select,
.ef-group textarea {
  background: #F4F8FF !important;
  border-color: var(--border) !important;
  color: var(--ink-1) !important;
}
.ef-group input:focus,
.ef-group select:focus,
.ef-group textarea:focus {
  background: #FFFFFF !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 4px rgba(29,91,216,.1) !important;
}
.map-card { border-color: var(--border) !important; }

/* ================================================================
   16. FOOTER — Keep Navy Dark
   ================================================================ */
.footer { background: #050E1C !important; }

/* ================================================================
   17. MICRO-CHROME
   ================================================================ */
.btt {
  background: #EAF1FF !important;
  border-color: var(--border) !important;
}
.btt:hover {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}
.mobile-cta-bar {
  background: rgba(234,241,255,.97) !important;
  border-color: var(--border) !important;
}
.scroll-progress {
  background: linear-gradient(
    90deg, var(--blue) 0%, var(--blue-light) 55%, var(--gold) 100%
  ) !important;
  box-shadow: 0 0 10px rgba(29,91,216,.5) !important;
}
.pl-bar {
  background: linear-gradient(90deg, var(--blue), var(--gold)) !important;
}

/* ================================================================
   18. HERO — Unchanged (dark navy, no modification needed)
   ================================================================ */
.hero-pills span {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.16) !important;
}
.hero-pills span:hover {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.26) !important;
}

/* ================================================================
   19. ABOUT VISUAL CARD
   ================================================================ */
.av-card {
  background: linear-gradient(145deg, #0B1622 0%, #162E58 100%) !important;
}
.av-badge {
  background: #FFFFFF !important;
  border-color: var(--border) !important;
}

/* ================================================================
   20. TYPOGRAPHY REFINEMENTS
   ================================================================ */
.section-head h2 { letter-spacing: -.028em; line-height: 1.16; }
body             { letter-spacing: .003em; }

/* ================================================================
   21. SUBTLE GRAIN TEXTURE
       Just barely perceptible — adds a premium paper quality.
   ================================================================ */
.about.section,
.coaching.section,
#facilities,
#faq {
  position: relative;
  overflow: hidden;
}
.about.section::after,
.coaching.section::after,
#facilities::after,
#faq::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: .4;
}
.about.section > *,
.coaching.section > *,
#facilities > *,
#faq > * {
  position: relative;
  z-index: 1;
}

/* ================================================================
   22. GALLERY LIGHTBOX
   ================================================================ */
.lightbox {
  background: rgba(5,14,28,.97) !important;
}