/* ==============================================
   PHONE & TABLET FIXES (2026-10-18)
   Linked last in include_header.php, after the template CSS and the
   header's inline <style>, so equal-specificity rules here win.
   !important only where a section sets an inline style.
   ============================================== */

/* ---------- Header: logo + menu button on one line ---------- */
@media (max-width: 991.98px) {
    #header { padding: 14px 0; }
    #header.scroll { padding: 8px 0; }

    #header nav { flex-wrap: nowrap; }
    #header .navbar-brand { flex: 0 1 auto; min-width: 0; }
    #header .premium-logo { height: 38px; max-width: 100%; }
    #header .custom-toggler { flex-shrink: 0; margin-left: 12px; }

    /* The template pushes heroes 80px down below 992px, which left a white
       band behind the transparent header and hid the white logo. */
    .hero-section { margin-top: 0; }

    /* open menu scrolls instead of running off a short screen */
    .premium-nav-wrapper { max-height: calc(100vh - 90px); overflow-y: auto; }

    /* full-width gold Contact button (the header's .scroll rule was undoing it) */
    #premiumNav .premium-nav-list > li:last-child { width: 100%; }
    #header #premiumNav .premium-btn-contact {
        width: 100%;
        background: var(--gold-primary);
        border-color: var(--gold-primary);
        color: #fff !important;
    }
}

@media (max-width: 767.98px) {

    /* ---------- Heroes ---------- */
    /* margin-bottom: the template leaves a 15-20px white strip under the
       hero on phones narrower than 480px */
    #hero-14 { padding-top: 120px; margin-bottom: 0; }
    #hero-14 .mg-top { margin-top: 0; }

    /* hero photo bleeds off the right edge on desktop; keep it inside here
       (#hero-14 prefix beats the section's own later !important rule) */
    #hero-14 .hero-premium-image-wrapper { display: block; margin: 40px 0 0 !important; }
    #hero-14 .hero-premium-image-wrapper img { max-height: none !important; }

    /* ---------- Rows placed straight in full-width wrappers ---------- */
    #getting_started > div > .row,
    #customizations > div > .row { margin-left: 0; margin-right: 0; }

    /* long sub-domain example wraps instead of being clipped */
    #getting_started b { overflow-wrap: anywhere; }

    /* ---------- Feature icon grid (3 per row) ---------- */
    .fbox-wrapper .row { margin-bottom: 0 !important; }
    .fbox-wrapper .col { padding-left: 4px; padding-right: 4px; }
    .fbox-wrapper .fbox-txt h6 { font-size: 13px !important; line-height: 1.3; }

    /* ---------- Pricing ---------- */
    #pricing > div { padding: 20px 16px !important; }
    #pricing .toggle-btn { white-space: nowrap; }
    #pricing .toggler-txt { font-size: 0.95rem; }
    #pricing .pricing-1-table { padding: 30px 24px 26px; }
    #pricing .price span { font-size: 2.4rem; letter-spacing: -2px; }
    #pricing .pricing-features { padding-left: 0; }
    #pricing .pricing-features li { padding: 8px 0; }
    #pricing .pricing-features li p {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        line-height: 1.35;
    }
    #pricing .pricing-features li p i { flex-shrink: 0; line-height: inherit; }

    /* ---------- "We built it for you" ---------- */
    #customizations > div { padding: 40px 16px !important; }
    #customizations .col-md-7 { padding: 24px 0 0 !important; }
    #customizations .simple-lidst { padding-left: 0; }
    #customizations .stylish-img-sm { width: 100%; }

    /* ---------- Footer ---------- */
    /* contact column gets the full width so the email stays on one line */
    #footer .row > div:has(.fl-4) { width: 100%; }
    #footer a { overflow-wrap: anywhere; }
    #footer .footer-copyright,
    #footer .bottom-secondary-link { text-align: center !important; }
}