/*--------------------------------------
 Overrides for Landing Page
----------------------------------------*/
.main-container.landing-mode {
    max-width: 100% !important;
    padding: 5rem 0 0 0 !important;
    margin: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    display: block !important;
    flex: initial !important;
}

body.landing-mode header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

@media (max-width: 768px) {
    body.landing-mode header {
        padding: 0 !important;
    }
}

body.landing-mode .ui-section-header--nav-link {
    padding: 0.5rem;
    color: var(--ui-color-brand);
    border-radius: 2px;
    transition:
        background-color 150ms ease,
        color 150ms ease;
}

body.landing-mode .ui-section-header--nav-link:hover,
body.landing-mode .ui-section-header--nav-link:focus-visible {
    background-color: var(--ui-color-brand);
    color: #fff;
}

/* ==========================================================
   LANDING MODE – MOBILE ONLY LOCKDOWN
   Applies ONLY on small screens
   ========================================================== */

@media (max-width: 768px) {

    /* --------------------------------------
     0. TYPOGRAPHY: shrink hero heading
  --------------------------------------- */
    body.landing-mode h1 {
        font-size: 3.25rem !important;
        line-height: 1.3;
    }

    body.landing-mode p {
        font-size: 1rem !important;
        line-height: 1.3;
    }

    body.landing-mode footer {
        font-size: 0.80rem !important;
        padding: 0.75rem !important;
    }

    /* --------------------------------------
     1. HEADER: hide hamburger + nav
  --------------------------------------- */
    body.landing-mode .ui-section-header--menu-icon,
    body.landing-mode #ui-section-header--menu-id,
    body.landing-mode .ui-section-header--nav {
        display: none !important;
    }

    /* --------------------------------------
     2. MAIN: hide ALL sections
  --------------------------------------- */
    body.landing-mode main>section {
        display: none !important;
    }

    /* --------------------------------------
     3. HERO: allow hero section
  --------------------------------------- */
    body.landing-mode #heroSection {
        display: block !important;
    }

    /* --------------------------------------
     4. HERO IMAGE: hide image, keep text
  --------------------------------------- */
    body.landing-mode #heroSection img {
        display: none !important;
    }

    /* --------------------------------------
     5. FOOTER: keep footer visible
  --------------------------------------- */
    body.landing-mode footer {
        display: flex !important;
    }

    /* --------------------------------------
     6. SAFETY: prevent horizontal scroll
  --------------------------------------- */
    body.landing-mode {
        overflow-x: hidden;
    }
}