/* =========================================================
   EdNet® Homez™ — Responsive & Big-Screen Layer
   Covers: 4K/TV, desktop, laptop, tablet, mobile (high/low)
   ========================================================= */

/* ── 1. Remove fixed/narrow width caps on nav / top bar ── */
.iq-navbar .navbar-inner,
.iq-navbar .container-fluid,
.navbar-inner {
    max-width: 100% !important;
    padding-left: clamp(16px, 4vw, 80px) !important;
    padding-right: clamp(16px, 4vw, 80px) !important;
}
.landing-header {
    width: 100% !important;
    max-width: 100% !important;
}

/* ── 2. Global fluid container ── */
.eh-pitch,
.eh-billboard,
.eh-features-grid,
.eh-features-heading,
.eh-footer-cta .container-fluid,
.eh-footer-cta .section-padding-top {
    padding-left: clamp(20px, 5vw, 120px) !important;
    padding-right: clamp(20px, 5vw, 120px) !important;
}

/* ── 3. Feature slider — full fluid ── */
.feature-slider-section,
.fs-swiper,
.fs-slide { width: 100% !important; }
.fs-slide-content { padding-left: clamp(24px, 6vw, 120px) !important; }
.fs-slide-image-panel { padding-right: clamp(24px, 5vw, 100px) !important; }

/* ── 4. Topbar full stretch ── */
.eh-topbar {
    padding-left: clamp(16px, 4vw, 80px) !important;
    padding-right: clamp(16px, 4vw, 80px) !important;
}

/* ── 5. Hero section ── */
.p-top-h-height { min-height: 100vh !important; }
.banner-big-font {
    font-size: clamp(3rem, 6vw, 8rem) !important;
}
.banner-subtitle { font-size: clamp(1rem, 2vw, 1.4rem) !important; }

/* ── 6. validate.php — remove max-width constraint on card ── */
.vl-body {
    padding: clamp(80px, 8vw, 120px) clamp(12px, 4vw, 60px) clamp(30px, 4vw, 60px) !important;
    align-items: flex-start !important;
    justify-content: center !important;
}
.vl-card {
    max-width: min(1100px, 96vw) !important;
    width: 100% !important;
}
.vl-right {
    flex: 1 !important;
    padding: clamp(24px, 3vw, 48px) clamp(20px, 3vw, 48px) !important;
    min-width: 0 !important;
}

/* Code row — never overflow */
.vl-code-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
}
.vl-input, .vl-digit, .vl-sep {
    flex-shrink: 1 !important;
    min-width: 0 !important;
}

/* ── 7. selectuser.php — full-screen fluid grid ── */
.su-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.su-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 18vw, 220px), 1fr)) !important;
    gap: clamp(12px, 2vw, 28px) !important;
    padding: clamp(16px, 3vw, 48px) clamp(16px, 4vw, 80px) !important;
}

/* ── 8. register.php card ── */
.reg-center {
    padding: clamp(100px, 10vw, 140px) clamp(16px, 4vw, 60px) clamp(40px, 5vw, 80px) !important;
}
.reg-card {
    max-width: min(580px, 98vw) !important;
}

/* ── 9. startfreetrial.php ── */
.sft-center {
    padding: clamp(100px, 10vw, 140px) clamp(16px, 4vw, 60px) clamp(40px, 5vw, 80px) !important;
}
.sft-form-wrap, .sft-field {
    max-width: min(560px, 96vw) !important;
}

/* ── 10. activate.php card ── (Note: activate.php's own inline
   style already sets correct clearance directly; this class was
   previously a phantom selector matching nothing in the markup.) */

/* ──────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
   ──────────────────────────────────────────────────────────

   Breakpoints used:
   2560px+ : Smart TV / 4K
   1920px  : Large desktop
   1440px  : Standard desktop / large laptop
   1024px  : Small laptop / large tablet
   768px   : Tablet portrait
   480px   : High-end mobile
   375px   : Small mobile
*/

/* 4K / Smart TV */
@media (min-width: 2560px) {
    .fs-slide-title { font-size: 5.5rem !important; }
    .fs-slide-desc  { font-size: 1.1rem !important; max-width: 700px !important; }
    .fs-slide-content { max-width: 860px !important; }
    .fs-slide-image-panel { width: 40% !important; }
    .banner-big-font { font-size: 10rem !important; }
    .pitch-img-wrap { max-width: 1400px !important; }
    .eh-pitch h2 { font-size: 4rem !important; }
    .vl-card { max-width: 1300px !important; }
    .vl-left { width: 360px !important; }
    .su-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; }
    .brand-ednet, .brand-homez { height: 84px !important; }
    .brand-name { font-size: 2.4rem !important; }
    .sft-headline { font-size: 5rem !important; }
}

/* Large desktop 1920px */
@media (min-width: 1920px) and (max-width: 2559px) {
    .fs-slide-title { font-size: 4.5rem !important; }
    .fs-slide-content { max-width: 760px !important; }
    .pitch-img-wrap { max-width: 1200px !important; }
    .vl-card { max-width: 1100px !important; }
    .su-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; }
    .brand-ednet, .brand-homez { height: 60px !important; }
    .brand-name { font-size: 1.7rem !important; }
}

/* Standard desktop / laptop 1440px */
@media (min-width: 1440px) and (max-width: 1919px) {
    .fs-slide-title { font-size: clamp(3.2rem, 4vw, 4.2rem) !important; }
    .brand-ednet, .brand-homez { height: 48px !important; }
}

/* Small laptop / large tablet — landscape 1024px */
@media (min-width: 1024px) and (max-width: 1439px) {
    .vl-left { width: 240px !important; }
    .su-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; }
}

/* Tablet portrait 768–1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .fs-slide-image-panel { width: 38% !important; }
    .fs-slide-title { font-size: 2.4rem !important; }
    .vl-card { flex-direction: column !important; }
    .vl-left { width: 100% !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; gap: 20px !important; padding: 20px 24px !important; }
    .vl-access-card { display: none !important; }
    .su-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; padding: 20px 24px !important; }
    .reg-grid { grid-template-columns: 1fr 1fr !important; }
    .reg-card { max-width: 90% !important; }
    .banner-big-font { font-size: 4.5rem !important; }
}

/* High-end mobile (iPhone 14 Pro, Samsung S24, etc.) 480–767px */
@media (min-width: 480px) and (max-width: 767px) {
    .vl-card { flex-direction: column !important; }
    .vl-left { width: 100% !important; padding: 24px 20px 16px !important; flex-direction: row !important; align-items: center !important; gap: 16px !important; }
    .vl-profile-pic { width: 56px !important; height: 56px !important; margin-bottom: 0 !important; }
    .vl-profile-name { margin-bottom: 0 !important; font-size: 0.95rem !important; }
    .vl-profile-type { margin-bottom: 0 !important; }
    .vl-access-card, .vl-card-cta { display: none !important; }
    .vl-right { padding: 20px !important; }
    .vl-code-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
    }
    .vl-input, .vl-digit {
        width: clamp(38px, 9vw, 50px) !important;
        height: clamp(44px, 11vw, 54px) !important;
        font-size: 1.1rem !important;
    }
    .su-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; padding: 16px 16px !important; }
    .reg-grid { grid-template-columns: 1fr !important; }
    .fs-slide-image-panel { display: none !important; }
    .fs-slide-content { padding: 0 5% !important; max-width: 100% !important; }
    .fs-slide-title { font-size: 2rem !important; }
    .banner-big-font { font-size: 3.5rem !important; }
    .sft-form-wrap { flex-direction: column !important; gap: 10px !important; overflow: visible !important; box-shadow: none !important; }
    .sft-field input[type="email"] { border-right: 1px solid rgba(255,255,255,0.2) !important; border-radius: 6px !important; }
    .sft-btn { border-radius: 6px !important; justify-content: center !important; }
    /* Fix content going under topbar */
    .su-page-body, .su-content { padding-top: 70px !important; }
}

/* Small mobile (375px and below) */
@media (max-width: 479px) {
    .vl-card { flex-direction: column !important; }
    .vl-left { width: 100% !important; padding: 20px 16px 12px !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; }
    .vl-profile-pic { width: 48px !important; height: 48px !important; margin-bottom: 0 !important; border-radius: 10px !important; }
    .vl-profile-name { font-size: 0.85rem !important; margin-bottom: 0 !important; }
    .vl-profile-type { margin-bottom: 0 !important; font-size: 0.6rem !important; }
    .vl-access-card, .vl-card-cta { display: none !important; }
    .vl-right { padding: 16px !important; }
    .vl-title { font-size: 1.2rem !important; }
    .vl-subtitle { font-size: 0.8rem !important; }
    .vl-code-row {
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: center !important;
    }
    .vl-input, .vl-digit {
        width: 34px !important;
        height: 40px !important;
        font-size: 0.95rem !important;
    }
    .vl-sep { font-size: 0.9rem !important; margin: 0 2px !important; }
    .vl-btn { width: 100% !important; }
    .su-grid { grid-template-columns: repeat(2, 1fr) !important; padding: 14px 12px !important; gap: 10px !important; }
    .reg-grid { grid-template-columns: 1fr !important; }
    .reg-card { padding: 20px 14px !important; }
    .banner-big-font { font-size: 2.6rem !important; }
    .fs-slide-title { font-size: 1.8rem !important; }
    .fs-slide-image-panel { display: none !important; }
    .fs-slide-content { padding: 0 4% !important; max-width: 100% !important; }
    .fs-nav { bottom: 20px !important; left: 4% !important; }
    .sft-headline { font-size: 1.8rem !important; }
    .sft-form-wrap { flex-direction: column !important; gap: 10px !important; overflow: visible !important; box-shadow: none !important; }
    .sft-field input[type="email"] { border-right: 1px solid rgba(255,255,255,0.2) !important; border-radius: 6px !important; }
    .sft-btn { border-radius: 6px !important; justify-content: center !important; }
    /* Push page content below topbar */
    .su-page-body, .su-content { padding-top: 64px !important; }
    .vl-body { padding-top: 70px !important; }
}

/* ── Prevent any content going UNDER the sticky topbar ── */
.vl-page { padding-top: 0 !important; }
.vl-body { padding-top: max(80px, 6vw) !important; }

/* Select User page — sticky topbar clearance */
.su-topbar + * { margin-top: 0 !important; }

/* ══════════════════════════════════════════════════════
   TOPBAR CLEARANCE — prevents ANY content going under the
   fixed 64px topbar, on every page, at every screen size
   ══════════════════════════════════════════════════════ */

/* Pages that use p-top-h-height hero */
@media (max-width: 767px) {
.p-top-h-height {
    padding-top: 64px !important;
}

/* validate.php */
.vl-body {
    padding-top: clamp(80px, 9vw, 120px) !important;
}

/* startfreetrial / register / activate / pwreset center cards */
.sft-center,
.reg-center,
.act-center,
.pr-center {
    padding-top: clamp(130px, 16vw, 160px) !important;
}

/* lgn.php / forgot key / misc centered pages */
.lgn-center {
    padding-top: clamp(130px, 16vw, 160px) !important;
}

/* selectuser — grid content */
.su-page-body,
.su-content {
    padding-top: clamp(72px, 7vw, 100px) !important;
}
}

/* ── iPhone 8 (375px) specific corrections ── */
@media (max-width: 390px) {
    .p-top-h-height { padding-top: 64px !important; }
    .vl-body        { padding-top: 82px !important; }

    /* Card sizing on 375px — make sure card doesn't overflow */
    .lgn-card,
    .reg-card,
    .sft-form-wrap,
    .pr-card,
    .fks-card,
    .act-card {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Topbar brand text shrink so logo row stays on one line */
    .brand-name { font-size: 1.1rem !important; }
    .brand-ednet, .brand-homez { height: clamp(32px, 9vw, 40px) !important; }
}

/* ── Navbar — prevent overlap with background content on sticky scroll ── */
.header-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
}
/* main content inside pages with the Streamit header */
.main-content {
    padding-top: 0 !important;
}
.main-content .p-top-h-height {
    /* The background div — must not start at 0 when header is fixed */
    min-height: 100vh !important;
}

/* ── Golden cards on narrow phones ───────────────────────────────
   Below ~480px the card is already nearly the full screen width, so
   a floating rounded card with side margins doesn't read as a "card"
   at all — it just looks like an oversized, oddly-inset box. Turn it
   into a genuine full-bleed section instead: no side margins, no
   rounded corners, edge to edge. */
@media (max-width: 480px) {
    .lgn-center,
    .reg-center,
    .sft-center,
    .pr-center,
    .act-center {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .lgn-card,
    .reg-card,
    .pr-card,
    .act-card,
    .fks-card {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 0 !important;
    }
    .lgn-card::before,
    .reg-card::before,
    .pr-card::before,
    .act-card::before,
    .fks-card::before {
        border-radius: 0 !important;
        inset: 0 !important;
    }
    /* fks-card (forgot_key_sent) sets its background directly rather
       than via ::before — flatten its own corners too. */
    .fks-card { border-radius: 0 !important; }
}