/*
 * Delaware IT Pro - Mobile Styles
 * Consolidated and refined mobile overrides for phones and small tablets.
 */

/* ==========================================================================
   Tablet Overrides (768px - 1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Prevent horizontal overflow */
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    /* Header tweaks for tablet */
    .header-container {
        padding: 10px 24px;
        height: 70px;
    }
    
    .site-logo {
        height: 70px;
        width: auto;
    }
    
    /* Hamburger Menu for Tablet */
    .mobile-nav-toggle {
        display: flex !important;
        background: none;
        border: none;
        color: #11212E;
        cursor: pointer;
        padding: 12px;
        z-index: 10000;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
    }

    .main-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #FFFFFF;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out, padding 0.3s ease;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        border-top: 1px solid rgba(0,0,0,0.05);
    }

    .main-navigation.menu-open {
        max-height: 600px;
        padding: 24px;
    }

    .main-menu-container {
        width: 100%;
    }

    .primary-menu {
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    .primary-menu li {
        width: 100%;
    }

    .primary-menu a {
        display: block;
        padding: 12px 0;
        font-size: 1.25rem;
    }

    .header-button-wrap {
        margin-top: 24px;
        width: 100%;
    }

    .header-button, .header-button-link {
        width: 100%;
        text-align: center;
        display: block;
        padding: 16px !important;
    }

    /* Scale down very large hero text for tablets */
    .dip-hero-title, .dip-services-hero-title, .dip-pricing-hero-title, .dip-calc-hero-title, .dip-health-hero-title {
        font-size: clamp(2.5rem, 5vw, 3rem) !important;
    }

    /* Tablet Grid - Allow wrapping into 2 columns instead of stacking completely */
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-wrap: wrap !important;
        gap: 32px !important;
    }
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: calc(50% - 16px) !important;
        width: calc(50% - 16px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Fix section paddings */
    .alignwide, .alignfull {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .dip-hero-section, .dip-problems-section, .dip-tiers-section, .dip-blueprint-section, 
    .dip-testimonials-section, .dip-services-hero, .dip-features-section,
    .dip-pricing-hero-section, .dip-onsite-section, .dip-projects-section,
    .dip-calc-hero-section, .dip-calc-ui-section, .dip-calc-steps-section,
    .dip-health-hero-section, .dip-health-matrix-section, .dip-health-why-section,
    .dip-about-hero-section, .dip-about-mission-section, .dip-about-values-section, .dip-about-work-section,
    .dip-explainers-section, .dip-not-included-section, .dip-trust-strip, .dip-lead-magnet-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* Blueprint Pattern Fix */
    .dip-blueprint-connector::before {
        display: none !important;
    }
    
    /* Footer Adjustments */
    .footer-columns {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 32px;
    }
    .footer-col {
        flex-basis: calc(50% - 16px);
    }
    
    .site-footer {
        padding-left: 24px !important;
        padding-right: 24px !important;
        padding-top: 60px !important;
    }
}

/* ==========================================================================
   Base Mobile Overrides (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
    /* Prevent horizontal overflow */
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    /* Header & Mobile Menu */
    .header-container {
        padding: 10px 20px;
        height: 70px;
    }
    
    .site-logo {
        height: 60px;
        width: auto;
    }
    
    .mobile-nav-toggle {
        display: flex !important;
        background: none;
        border: none;
        color: #11212E;
        cursor: pointer;
        padding: 12px;
        z-index: 10000;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
    }

    .main-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #FFFFFF;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out, padding 0.3s ease;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        border-top: 1px solid rgba(0,0,0,0.05);
    }

    .main-navigation.menu-open {
        max-height: 600px;
        padding: 24px;
    }

    .main-menu-container {
        width: 100%;
    }

    .primary-menu {
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    .primary-menu li {
        width: 100%;
    }

    .primary-menu a {
        display: block;
        padding: 12px 0;
        font-size: 1.25rem;
    }

    .header-button-wrap {
        margin-top: 24px;
        width: 100%;
    }

    .header-button, .header-button-link {
        width: 100%;
        text-align: center;
        display: block;
        padding: 16px !important;
    }

    /* Global Layout - Stack Columns */
    .wp-block-columns {
        flex-direction: column !important;
        gap: 32px !important;
        align-items: center !important;
    }

    .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Tier Cards Centering & Sizing */
    .dip-tiers-grid .wp-block-column, 
    .dip-testimonials-grid .wp-block-column,
    .dip-pricing-hero-section .wp-block-column,
    .dip-features-section .wp-block-column,
    .dip-contact-card,
    .dip-health-matrix-card,
    .dip-not-included-card-alt,
    .dip-explainer-card,
    .dip-feature-card,
    .dip-services-tier-card {
        max-width: 280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .dip-tier-card-basic, .dip-tier-card-featured, .dip-tier-card-enterprise, .dip-services-tier-card, .dip-pricing-card {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    .dip-tier-list, .dip-feature-list {
        text-align: left !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: inline-block !important;
        width: fit-content;
    }

    .dip-tier-list li, .dip-feature-list li {
        justify-content: flex-start !important;
    }


    /* Section Padding Adjustments */
    .dip-hero-section, .dip-problems-section, .dip-tiers-section, .dip-blueprint-section, 
    .dip-testimonials-section, .dip-services-hero, .dip-features-section,
    .dip-pricing-hero-section, .dip-onsite-section, .dip-projects-section,
    .dip-calc-hero-section, .dip-calc-ui-section, .dip-calc-steps-section,
    .dip-health-hero-section, .dip-health-matrix-section, .dip-health-why-section,
    .dip-about-hero-section, .dip-about-mission-section, .dip-about-values-section, .dip-about-work-section,
    .dip-explainers-section, .dip-not-included-section, .dip-trust-strip, .dip-lead-magnet-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* Alignwide and Alignfull Padding */
    .alignwide, .alignfull {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Blueprint Pattern Fix */
    .dip-blueprint-connector::before {
        display: none !important;
    }

    /* Lead Magnet Form Fix */
    .dip-lead-magnet-input {
        margin-right: 0 !important;
        width: 100% !important;
        min-height: 50px;
        max-width: 280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .dip-lead-magnet-inner {
        padding: 48px 24px !important;
    }

    /* About How We Work Image Grid Fix */
    .dip-about-work-image-offset {
        margin-top: 24px !important;
    }

    /* Trust Strip Alignment */
    .dip-trust-strip .wp-block-column {
        margin-bottom: 32px;
    }
    .dip-trust-strip .wp-block-column:last-child {
        margin-bottom: 0;
    }

    /* Typography Overrides */
    .dip-hero-title, .dip-services-hero-title, .dip-pricing-hero-title, .dip-calc-hero-title, .dip-health-hero-title {
        font-size: 2.25rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    .dip-problems-title, .dip-tiers-title, .dip-blueprint-title, .dip-testimonials-title, 
    .dip-features-title, .dip-onsite-title, .dip-projects-title, .dip-calc-steps-title,
    .dip-health-matrix-title, .dip-health-why-title, .dip-about-mission-title, .dip-about-values-title, .dip-about-work-title {
        font-size: 1.875rem !important;
        text-align: center !important;
    }

    .dip-hero-overline, .dip-hero-subtitle, .dip-services-hero-subtitle, .dip-pricing-hero-subtitle, .dip-calc-hero-subtitle, .dip-health-hero-subtitle, .dip-about-mission-text {
        text-align: center !important;
        font-size: 1.125rem !important;
    }

    .dip-trust-container, .dip-hero-trust, .dip-lead-magnet-form, .dip-hero-buttons, .dip-tier-button-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center;
        width: 100%;
        gap: 16px !important;
    }

    .dip-trust-pill, .dip-hero-button, .dip-tier-button, .dip-lead-magnet-form .wp-block-button {
        width: 100% !important;
        max-width: 280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
        display: flex !important;
    }

    .dip-trust-pill {
        width: fit-content !important;
        margin-bottom: 0 !important; /* Gap handled by container */
    }

    .dip-trust-strip .wp-block-group {
        align-items: center !important;
        justify-content: center !important;
    }

    .dip-blueprint-step .wp-block-group {
        align-items: center !important;
        text-align: center;
    }

    .dip-pain-card {
        justify-content: center !important;
        text-align: center;
        flex-direction: column !important;
        padding: 24px !important;
        max-width: 280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }

    .dip-pain-card-icon {
        margin-right: 0 !important;
        margin-bottom: 12px !important;
    }


    /* Hero Metrics & Floating elements Centering */
    .dip-metric, .dip-about-hero-satisfaction {
        position: relative !important;
        left: 0 !important;
        bottom: 0 !important;
        margin: 24px auto 0 !important;
        width: 100%;
        max-width: 280px !important;
        justify-content: center !important;
        display: flex !important;
        text-align: center;
    }

    /* Footer Adjustments */
    .footer-columns {
        flex-direction: column;
        gap: 32px;
    }

    .site-footer {
        padding-left: 24px !important;
        padding-right: 24px !important;
        text-align: center;
        padding-top: 60px !important;
    }

    .dip-footer-link {
        padding: 10px 0 !important;
        display: block !important;
    }

    .footer-cta-title {
        font-size: 2rem !important;
    }

    .footer-col-title, .footer-col-content {
        align-items: center;
        text-align: center;
    }

    /* Pricing & Cards */
    .dip-pricing-card.is-highlighted {
        transform: scale(1) !important;
        margin: 32px 0 !important;
    }
    
    .dip-pricing-card {
        margin-bottom: 24px;
        padding: 32px 24px !important;
    }
    
    .dip-tier-card-featured {
        transform: scale(1) !important;
    }

    /* Calculator Adjustments */
    .dip-calc-card {
        padding: 24px !important;
    }

    .dip-calc-tile-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .dip-calc-total-box {
        padding: 32px !important;
    }

    .dip-calc-total-amount {
        font-size: 2.5rem !important;
    }
    
    .dip-calc-line-item {
        font-size: 0.875rem;
    }

    /* Calculator Slider Touch Targets */
    .dip-calc-range-thumb {
        width: 32px !important;
        height: 32px !important;
    }

    .dip-calc-range-track {
        height: 8px !important;
        margin: 32px 0 !important;
    }

    /* Form Inputs */
    .dip-form-input, .dip-form-select, .dip-form-submit {
        min-height: 48px;
    }
    
    .dip-contact-card, .dip-health-matrix-card {
        padding: 40px 24px !important;
    }

    .dip-not-included-card-alt {
        padding: 40px 24px !important;
    }

    /* Pattern Specific Adjustments */
    
    /* Calculator Hero Overlay */
    .dip-calc-hero-overlay {
        position: relative !important;
        bottom: 0 !important;
        left: 0 !important;
        margin-top: -40px;
        margin-left: 20px;
        margin-right: 20px;
        width: auto;
    }

    /* Health Check Why No-Sales Image */
    .dip-health-why-image-card {
        min-height: auto !important;
    }

    .dip-health-why-quote-box {
        padding: 24px !important;
    }

    .dip-health-why-quote {
        font-size: 1.125rem !important;
    }

    /* Services Not Included Decor */
    .dip-not-included-decor {
        display: none !important;
    }

    .dip-not-included-item {
        padding: 12px 0 !important;
    }

    /* Cards and Grids Reset */
    .dip-explainer-card, .dip-feature-card, .dip-services-tier-card {
        min-height: auto !important;
    }

    .dip-feature-icon {
        font-size: 2.5rem !important;
        margin-bottom: 16px !important;
    }

    /* About How We Work Image Grid */
    .dip-about-work-image-col[style*="margin-top"] {
        margin-top: 24px !important;
    }

    /* Testimonials Grid Fix */
    .dip-testimonial-card {
        padding: 32px 24px !important;
    }

    /* Ribbon Fix */
    .dip-ribbon {
        position: relative !important;
        border-radius: 0.75rem 0.75rem 0 0 !important;
        width: 100%;
        text-align: center;
        display: block;
    }

    /* Contact Info Panel Gap */
    .dip-contact-info-panel {
        padding: 40px 24px !important;
    }

    .dip-contact-info-val {
        font-size: 1.125rem !important;
        word-break: break-all;
    }
}

/* ==========================================================================
   Micro Mobile Overrides (max-width: 480px)
   ========================================================================== */
@media (max-width: 480px) {
    /* Extreme Mobile Fixes */
    .dip-hero-title, .dip-services-hero-title, .dip-pricing-hero-title, .dip-calc-hero-title, .dip-health-hero-title {
        font-size: 1.875rem !important;
    }
    
    .dip-calc-tile-grid {
        grid-template-columns: 1fr;
    }
    
    .dip-calc-total-amount {
        font-size: 2.25rem !important;
    }
    
    .footer-cta-title {
        font-size: 1.75rem !important;
    }
}