/* =====================================================================
   NRSFC 2026 — UI/UX overlap & layout fixes (Claude audit, 10 Nov 2026)
   Loaded LAST on every page. Small, targeted overrides only.
   ===================================================================== */

/* 1. Homepage "Supporters / Messages of support": the section was forced to
      min-height:1370px although the people cards are hidden until consent,
      leaving ~900px of empty white space on tablet/laptop/desktop. */
#patrons.screen { min-height: 0 !important; }

/* 2. Mobile header (≤420px): the logo text "National Reels & Short Film"
      ran underneath the "Register — ₹500" button. Compact the button. */
@media (max-width: 420px) {
  .nav-clean .nav-btn-register {
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 0.72rem !important;
    letter-spacing: -0.01em !important;
  }
}
@media (max-width: 350px) {
  .nav-clean .logo-name { white-space: normal !important; }
}

/* 3. Footer "NRSFC 2026" wordmark: sized for Impact, so on devices without
      Impact (most Android phones, Linux) the last digit was cut off. */
.sf-footer .sf-wordmark-text,
.sf-wordmark-text { font-size: clamp(3rem, 14.2vw, 16.5rem) !important; }
@media (max-width: 640px) {
  .sf-footer .sf-wordmark-text,
  .sf-wordmark-text { font-size: clamp(2.2rem, 13.6vw, 4.2rem) !important; }
}

/* 4. Footer CTA card: the secondary button ("Get free story kit") had dark
      text on the dark card and was practically invisible. */
.sf-footer .sf-cta-card .sf-cta-btn--secondary,
.sf-cta-card .sf-cta-btn--secondary {
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.sf-footer .sf-cta-card .sf-cta-btn--secondary:hover,
.sf-cta-card .sf-cta-btn--secondary:hover,
.sf-cta-card .sf-cta-btn--secondary:focus-visible { background: rgba(255, 255, 255, 0.14) !important; }

/* 5. Inner pages (login, register, FAQ, organizers, campus…) on 13–15" laptops
      (1025–1480px): the desktop nav was wider than the bar, so the logo text ran
      into "Home", "Support" ran under "Login" and the Register button was pushed
      off-screen. Same compact sizing as the homepage header. */
@media (min-width: 1025px) and (max-width: 1480px) {
  html body .nav-clean .nav-inner { gap: 6px !important; }
  html body .nav-clean .nav-logo { gap: 6px !important; flex: 0 0 auto !important; }
  html body .nav-clean .nav-links { gap: 1px !important; flex: 0 1 auto !important; justify-content: flex-start !important; }
  html body .nav-clean .nav-actions { gap: 6px !important; flex: 0 0 auto !important; }
  html body .nav-clean:not(.team-dark-nav).scrolled .logo-name,
  html body .nav-clean:not(.team-dark-nav) .logo-name,
  html body .nav-clean .logo-name { font-size: 0.78rem !important; }
  html body .nav-clean:not(.team-dark-nav).scrolled .nav-links > li > a,
  html body .nav-clean:not(.team-dark-nav).scrolled .nav-links > li > .nav-link-dropdown,
  html body .nav-clean:not(.team-dark-nav) .nav-links > li > a,
  html body .nav-clean:not(.team-dark-nav) .nav-links > li > .nav-link-dropdown,
  html body .nav-clean .nav-links > li > a,
  html body .nav-clean .nav-links > li > .nav-link-dropdown { padding: 6px 7px !important; font-size: 0.75rem !important; }
  html body .nav-clean:not(.team-dark-nav).scrolled .nav-btn-register,
  html body .nav-clean:not(.team-dark-nav).scrolled .nav-btn-login,
  html body .nav-clean .nav-btn-register,
  html body .nav-clean .nav-btn-login { padding: 7px 13px !important; font-size: 0.74rem !important; }
}
@media (min-width: 1025px) and (max-width: 1300px) {
  html body .nav-clean:not(.team-dark-nav).scrolled .nav-links > li > a,
  html body .nav-clean:not(.team-dark-nav).scrolled .nav-links > li > .nav-link-dropdown,
  html body .nav-clean:not(.team-dark-nav) .nav-links > li > a,
  html body .nav-clean:not(.team-dark-nav) .nav-links > li > .nav-link-dropdown,
  html body .nav-clean .nav-links > li > a,
  html body .nav-clean .nav-links > li > .nav-link-dropdown { padding: 6px 4px !important; font-size: 0.7rem !important; }
  html body .nav-clean:not(.team-dark-nav).scrolled .nav-btn-register,
  html body .nav-clean:not(.team-dark-nav).scrolled .nav-btn-login,
  html body .nav-clean .nav-btn-register,
  html body .nav-clean .nav-btn-login { padding: 6px 10px !important; font-size: 0.7rem !important; }
}

/* 6. Registration page payment buttons (.btn-pay-gold): after the orange recolor the label colour became
      #D9381E on a #EA381B background (contrast 1.12:1 = invisible). Force white text. CSS only - no logic touched. */
.btn-pay-gold,
.btn-pay-gold span,
.btn-pay-gold:hover,
.btn-pay-gold:hover span { color: #FFFFFF !important; }

/* 7. Keyboard 'Skip to main content' link: same orange-on-orange problem (1.12:1) after the recolor. */
.skip-link,
.skip-link:focus { color: #FFFFFF !important; background: #171514 !important; }

/* 8. Registration page header (theme.css is loaded only there): logo title and menu links used the
      page's light text colours (#F8FAFC / #B4C2D9) on the cream header — almost invisible.
      Match every other page: logo #052F32, links #1A1A1A, hover orange; the red "Home" pill keeps white text. CSS only. */
html body #main-nav.nav-clean:not(.team-dark-nav) .nav-logo-text .logo-name,
html body nav.nav-clean:not(.team-dark-nav) .nav-logo-text .logo-name { color: #052F32 !important; }
html body #main-nav.nav-clean:not(.team-dark-nav) .nav-links > li > a:not(.nav-link-home),
html body #main-nav.nav-clean:not(.team-dark-nav) .nav-link-dropdown,
html body nav.nav-clean:not(.team-dark-nav) .nav-links > li > a:not(.nav-link-home),
html body nav.nav-clean:not(.team-dark-nav) .nav-link-dropdown { color: #1A1A1A !important; }
html body #main-nav.nav-clean:not(.team-dark-nav) .nav-links > li > a:not(.nav-link-home):hover,
html body #main-nav.nav-clean:not(.team-dark-nav) .nav-link-dropdown:hover,
html body nav.nav-clean:not(.team-dark-nav) .nav-links > li > a:not(.nav-link-home):hover,
html body nav.nav-clean:not(.team-dark-nav) .nav-link-dropdown:hover { color: #EA381B !important; }
html body #main-nav.nav-clean:not(.team-dark-nav) .nav-links > li > a.nav-link-home,
html body nav.nav-clean:not(.team-dark-nav) .nav-links > li > a.nav-link-home { color: #FFFFFF !important; }