/* ============================================================
   mobile-fixes.css — site-wide responsive + layout hardening
   Loaded after style.css / plans.css and BEFORE each page's
   own <style> block, so page-specific rules still win.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
html, body { overflow-x: hidden; max-width: 100%; }

img, svg, video { max-width: 100%; }
iframe { max-width: 100%; border: 0; }

/* ------------------------------------------------------------
   Fixed header — consistent, compact, readable on every page
   ------------------------------------------------------------ */
#header.fixed-top,
header.fixed-top {
  z-index: 1030;
  background: #05090f;                 /* solid — NO backdrop-filter/blur here:
                                          it turns position:fixed children (the
                                          mobile menu overlay) into a broken,
                                          header-sized box. */
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  padding: 6px 0;
}
#header > .container { min-height: 60px; }

/* Full-screen mobile menu overlay — pin to the viewport explicitly so it can't
   collapse even if an ancestor ever creates a containing block (this is what
   was happening: the header's blur made the fixed overlay anchor to the
   header instead of the screen and squash to ~80px tall). */
.navbar-mobile {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
}
/* The panel sizes to its own content (it was being stretched to the bottom
   of the screen regardless of how many links it held, leaving a big empty
   black gap under the last item). */
.navbar-mobile > ul {
  position: absolute !important;
  top: 58px !important;
  left: 15px !important;
  right: 15px !important;
  bottom: auto !important;
  inset-block-end: auto !important;
  height: auto !important;
  max-height: calc(100dvh - 90px) !important;
  overflow-y: auto !important;
  background: #05090f !important;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}

/* Hamburger pinned to the true right edge of the header on every page
   (it used to sit wherever flex order left it, with dead space after it). */
@media (max-width: 991px) {
  #header > .container { flex-wrap: nowrap; }
  #navbar.navbar { margin-left: auto !important; flex: 0 0 auto; }
  .navbar .mobile-nav-toggle { margin: 0; }
}

/* Logo: neutralise the inline width:150px / height:150px used across pages */
#header a img,
#header .logo img,
#header img {
  height: 42px !important;
  max-height: 42px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block;
}
@media (max-width: 575.98px) {
  #header a img,
  #header .logo img,
  #header img { height: 36px !important; max-height: 36px !important; }
}

/* Text wordmark that replaced the old "Quantum Prime" logo image */
#header .brand-logo {
  font-family: "Raleway", "Poppins", sans-serif;
  font-weight: 800;
  font-size: 23px;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
#header .brand-logo span { color: #06C633; }
@media (max-width: 575.98px) { #header .brand-logo { font-size: 19px; } }

/* site-fixes.js sets body padding-top to the real header height;
   these are just the pre-JS fallbacks */
body { padding-top: 66px; }
@media (min-width: 992px) { body { padding-top: 78px; } }

/* ------------------------------------------------------------
   Navigation — touch targets without the old line-height hack
   ------------------------------------------------------------ */
.navbar a,
.navbar a:focus { line-height: 1.35 !important; }
.navbar li { position: relative; }
button, .btn, a.btn { min-height: 44px; }

/* ------------------------------------------------------------
   Header dropdown menus — reliable on mouse, touch & keyboard.
   site-fixes.js toggles .dropdown-open (and legacy .dropdown-active);
   these rules reveal the panel regardless of :hover support.
   ------------------------------------------------------------ */
.navbar .dropdown > a { cursor: pointer; }

/* wide screens: floating panel */
.navbar .dropdown.dropdown-open > ul,
.navbar .dropdown > ul.dropdown-active {
  opacity: 1 !important;
  visibility: visible !important;
  top: 100% !important;
  pointer-events: auto !important;
}
.navbar .dropdown > ul {
  background: #0b1220 !important;          /* was semi-transparent & unreadable */
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45) !important;
  padding: 8px 0 !important;
}
.navbar .dropdown > ul a { color: #e9edf5 !important; }
.navbar .dropdown > ul a:hover,
.navbar .dropdown > ul li:hover > a { background-color: #06C633 !important; color: #08130b !important; }

/* inside the mobile burger overlay: expand in flow, no floating layer */
@media (max-width: 991px) {
  .navbar-mobile .dropdown > ul { display: none; }
  .navbar-mobile .dropdown.dropdown-open > ul,
  .navbar-mobile .dropdown > ul.dropdown-active {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, .04) !important;
    border: 0;
    margin: 6px 0 6px 12px !important;
  }
  /* chevron flips when open */
  .navbar-mobile .dropdown.dropdown-open > a .bi-chevron-down { transform: rotate(180deg); }
}
.navbar .dropdown > a .bi-chevron-down { transition: transform .2s ease; }
.navbar .dropdown.dropdown-open > a .bi-chevron-down { transform: rotate(180deg); }

/* ------------------------------------------------------------
   Hero (inner pages sit BELOW the header, not under it)
   ------------------------------------------------------------ */
#hero .container { padding-top: 0; }
@media (max-width: 767.98px) {
  #hero { padding: 90px 0 46px; min-height: auto; height: auto; }
  #hero h1 { font-size: clamp(26px, 7vw, 40px); line-height: 1.2; }
  #hero h2 { font-size: clamp(15px, 4vw, 19px); line-height: 1.5; }
}

/* ------------------------------------------------------------
   Phone typography + gutters
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .section-title h2 { font-size: 26px; }
  h1 { font-size: 28px; }
  h2 { font-size: 23px; }
  h3 { font-size: 20px; }
  .container, .container-fluid { padding-left: 16px; padding-right: 16px; }
}

/* ------------------------------------------------------------
   Cards / icon boxes — kill fixed widths that cause overflow
   ------------------------------------------------------------ */
.icon-box { height: auto; }
.icon-box[style*="min-width"] { min-width: 0 !important; }
.services .row > [class*="col-"] { display: flex; }
.services .icon-box { width: 100%; }

/* ------------------------------------------------------------
   Section spacing on phones (hero keeps its own padding)
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  section:not(#hero) { padding-top: 44px !important; padding-bottom: 44px !important; }
}

/* ------------------------------------------------------------
   Any future <table> stays inside the viewport
   ------------------------------------------------------------ */
table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------
   Footer stacks and centres on phones
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  #footer .footer-top { padding: 40px 0 20px; }
  #footer .footer-info,
  #footer .footer-links,
  #footer .footer-newsletter,
  #footer .footer-contact { text-align: center; }
  #footer .social-links { display: flex; justify-content: center; gap: 8px; }
  #footer .footer-links ul { padding-left: 0; }
}

/* ------------------------------------------------------------
   education.html — cards with hard-coded height:150px
   ------------------------------------------------------------ */
.edu-card { height: auto !important; }
.edu-card img,
.edu-card .card-img-top {
  height: auto !important;
  max-height: 200px;
  width: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------
   vip.html — absolutely-positioned blurred backdrop image
   ------------------------------------------------------------ */
.vip-img { max-width: 60%; height: auto; }
@media (max-width: 767.98px) { .vip-img { max-width: 92%; } }

/* ------------------------------------------------------------
   accounts.html — horizontal "swipe" plan strip: contain it
   ------------------------------------------------------------ */
.plans-scroll,
.scroll-container,
.horizontal-scroll,
[class*="horizontal-scroll"] { max-width: 100%; }
@media (max-width: 575.98px) {
  .plan-card, .plans-scroll .card { scroll-snap-align: start; }
  .plans-scroll, .scroll-container { scroll-snap-type: x proximity; }
}