/* 
 * LOCLSTAR DIGITAL MARKETING - RESPONSIVE RULES 
 */

/* ==========================================
   MEDIUM DEVICES — Tablets (< 992px)
   ========================================== */
@media (max-width: 991.98px) {
    .section-padding {
        padding: 5rem 0;
    }

    /* ---- HERO: Shrink oversized logo so hamburger stays visible ---- */
    .header-hero .navbar-brand img {
        height: 2.8rem !important;
    }

    /* Hero body — less top padding now logo is smaller */
    .hero-body {
        padding-top: 5rem;
    }

    /* Stats Bar Mobile */
    .stats-bar {
        margin-top: -1.875rem;
        padding: 1.875rem 0.9375rem;
    }

    .stat-item {
        border-right: none;
        border-bottom: 0.0625rem solid rgba(141, 105, 69, 0.1);
        padding: 1.25rem 0;
    }

    .stat-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .stat-item:first-child {
        padding-top: 0;
    }

    /* Tab Nav */
    .tabs-premium-nav {
        gap: 0.625rem;
    }

    .tab-premium-btn {
        padding: 0.625rem 1.125rem !important;
        font-size: 0.8rem;
    }

    .tab-content-panel {
        padding: 2.5rem 1.875rem;
    }
}

/* ==========================================
   SMALL DEVICES — Landscape phones (< 768px)
   ========================================== */
@media (max-width: 767.98px) {
    .section-padding {
        padding: 3.75rem 0;
    }

    /* Keep hero logo compact */
    .header-hero .navbar-brand img {
        height: 2.5rem !important;
    }

    .service-highlight-card {
        padding: 2.1875rem 1.5625rem;
    }

    .tab-content-panel {
        padding: 1.875rem 1.25rem;
    }

    .service-title-panel {
        font-size: 1.8rem;
        margin-top: 1.5625rem;
    }

    .form-card {
        padding: 1.875rem 1.25rem;
    }

    .contact-info-widget {
        padding: 1.875rem 1.25rem;
    }

    /* Global typography scale for mobile portrait & landscape */
    h1, .display-4,
    .about-hero h1,
    .services-hero h1,
    .contact-hero h1 {
        font-size: 2.1rem !important;
        line-height: 1.22 !important;
    }

    h2,
    #services-overview h2,
    #why-loclstar h2,
    #testimonials h2,
    #home-cta h2,
    .why-section h2 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.85rem !important;
    }

    h3,
    .service-highlight-card h3,
    .card-luxury h3 {
        font-size: 1.35rem !important;
        margin-bottom: 0.75rem !important;
    }

    #results h2 {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
    }

    p, .text-muted {
        font-size: 0.9375rem !important;
        line-height: 1.65 !important;
    }
}

/* ==========================================
   EXTRA SMALL — Portrait phones (< 576px)
   ========================================== */
@media (max-width: 575.98px) {
    /* Standard nav logo */
    .navbar-brand img {
        height: 2.25rem !important;
    }

    /* Hero logo — same compact size */
    .header-hero .navbar-brand img {
        height: 2.25rem !important;
    }

    .main-header.scrolled .navbar-brand img {
        height: 2rem !important;
    }

    /* Hero adjustments for tiny screens */
    .hero-body {
        padding-top: 4.5rem;
    }

    /* Hero Title and Line Breaks */
    .hero-title {
        font-size: 1.85rem !important;
        line-height: 1.15 !important;
    }

    .hero-title br {
        display: none !important;
    }

    /* Stack CTA buttons for cleaner alignment and accessibility */
    .hero-cta-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        margin-bottom: 1.5rem !important;
    }

    .hero-cta-row .btn-premium {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 0.875rem 1.25rem !important;
    }

    .hero-ghost-btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 0.5rem 0 !important;
    }

    /* Extra small portrait typography overrides */
    h1, .display-4,
    .about-hero h1,
    .services-hero h1,
    .contact-hero h1 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
    }

    h2,
    #services-overview h2,
    #why-loclstar h2,
    #testimonials h2,
    #home-cta h2,
    .why-section h2 {
        font-size: 1.45rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.75rem !important;
    }

    h3,
    .service-highlight-card h3,
    .card-luxury h3 {
        font-size: 1.2rem !important;
    }

    #results h2 {
        font-size: 1.35rem !important;
    }
}