/* ==================================
   SEVENFOLD CONSULTING - SMALL LAPTOP STYLES
   Version: 1.0
   Description: Responsive styles for small laptops and landscape tablets (769px - 1024px)
   Purpose: Fixes layout issues on small HP laptops and similar devices
   ================================== */

/* ==================================
   SMALL LAPTOP BREAKPOINT (769px - 1024px)
   Target: Small laptops, landscape tablets, compact displays
   Common resolutions: 1366x768, 1024x768, 900px+ browser windows
   ================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    /* NOTE: This media query should NOT affect mobile (768px and below) */
    
    /* ==================================
       1. CONTAINER & LAYOUT ADJUSTMENTS
       ================================== */
    
    /* Main container with optimal padding for small screens */
    .container {
        max-width: 95%;
        padding: 0 30px;
        margin: 0 auto;
    }
    
    /* Section spacing optimization */
    .section,
    section {
        padding: 60px 0;
    }
    
    /* ==================================
       2. NAVIGATION OPTIMIZATION
       ================================== */
    
    /* Navigation container adjustments - Universal selectors for all nav elements */
    nav .nav-container,
    nav#navbar .nav-container,
    .nav-container {
        padding: 25px 30px !important; /* Increased padding for proper logo space */
        max-width: 100%;
        min-height: 90px !important; /* Increased to fully accommodate logo */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    /* Ensure navigation has enough height - works with or without ID */
    nav,
    nav#navbar {
        min-height: 90px !important; /* Increased for safety margin */
        overflow: visible !important;
        height: auto !important;
    }
    
    /* Force all nav children to respect logo space */
    nav *,
    nav#navbar * {
        overflow: visible !important;
    }
    
    /* Reduce navigation gaps for better space utilization */
    .nav-links {
        gap: 30px;
        font-size: 0.95rem;
    }
    
    /* Adjust dropdown width for small screens */
    .dropdown {
        min-width: 200px;
        max-width: 250px;
    }
    
    /* Logo adjustments - Universal selectors work with or without navbar ID */
    nav .logo-nav,
    nav#navbar .logo-nav,
    .logo-nav {
        gap: 12px;
        align-items: center;
        min-height: 45px !important; /* Increased for safety */
        display: flex;
    }
    
    nav .logo-text-nav,
    nav#navbar .logo-text-nav,
    .logo-text-nav {
        font-size: 1.3rem;
        line-height: 1.2;
    }
    
    /* BULLETPROOF LOGO FIX: Universal selector with maximum specificity */
    body nav .logo-dots-nav,
    body nav#navbar .logo-dots-nav,
    body .nav-container .logo-dots-nav,
    nav .logo-dots-nav,
    nav#navbar .logo-dots-nav,
    #navbar .logo-dots-nav,
    .logo-nav .logo-dots-nav,
    .logo-dots-nav {
        width: 50px !important; /* Increased for maximum dot accommodation */
        height: 50px !important; /* MUST accommodate dot at bottom (35px + 6px + margin) */
        min-width: 50px !important;
        min-height: 50px !important;
        max-width: none !important; /* Prevent any width restrictions */
        max-height: none !important; /* Prevent any height restrictions */
        overflow: visible !important; /* Critical - ensures dots aren't clipped */
        position: relative !important;
        flex-shrink: 0 !important; /* Prevents logo from shrinking */
        display: block !important;
        contain: none !important; /* Disable CSS containment */
        clip: auto !important; /* Ensure no clipping */
        clip-path: none !important; /* Disable any clip paths */
        mask: none !important; /* Disable any masks */
        box-sizing: border-box !important;
    }
    
    /* ==================================
       3. HERO SECTIONS
       ================================== */
    
    /* Hero section spacing - adjusted for taller navigation */
    .hero,
    .hero-section,
    .hero-services,
    .connect-hero {
        padding: 120px 0 80px;
        margin-top: 90px; /* Increased to account for taller nav */
    }
    
    /* Hero content optimization */
    .hero-content {
        max-width: 90%;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    /* Hero title sizing */
    .hero-title,
    h1.hero-title {
        font-size: 2.5rem;
        line-height: 1.2;
        margin-bottom: 1.2rem;
    }
    
    /* Hero subtitle */
    .hero-subtitle {
        font-size: 1.15rem;
        line-height: 1.5;
        max-width: 600px;
        margin: 0 auto 2rem;
    }
    
    /* ==================================
       4. TYPOGRAPHY SCALING
       ================================== */
    
    /* Optimized heading sizes for small laptops */
    h1 {
        font-size: 2.2rem;
        line-height: 1.25;
    }
    
    h2 {
        font-size: 1.8rem;
        line-height: 1.3;
    }
    
    h3 {
        font-size: 1.5rem;
        line-height: 1.35;
    }
    
    h4 {
        font-size: 1.25rem;
        line-height: 1.4;
    }
    
    h5 {
        font-size: 1.1rem;
        line-height: 1.45;
    }
    
    h6 {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    /* Body text optimization */
    p, li, td, th {
        font-size: 1rem;
        line-height: 1.65;
    }
    
    /* ==================================
       5. GRID LAYOUTS
       ================================== */
    
    /* 2-column grids stay as 2 columns */
    .grid-2,
    .two-column-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    /* 3-column grids become 2 columns */
    .grid-3,
    .three-column-grid,
    .mvv-cards,
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    /* 4-column grids become 2 columns */
    .grid-4,
    .four-column-grid,
    .feature-grid,
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    /* Team grid adjustments */
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    /* Process stages - horizontal with wrap */
    .process-stages {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    /* Link grid in error pages */
    .link-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    /* ==================================
       6. CARDS & COMPONENTS
       ================================== */
    
    /* Card padding optimization */
    .card,
    .service-card,
    .feature-card,
    .mvv-card,
    .value-card {
        padding: 25px;
        margin-bottom: 0;
    }
    
    /* Team member cards */
    .team-member {
        flex-direction: row;
        gap: 20px;
        align-items: center;
        text-align: left;
    }
    
    .member-image {
        width: 100px;
        height: 100px;
        flex-shrink: 0;
    }
    
    /* Process stage cards */
    .process-stage {
        padding: 20px;
        min-height: 180px;
    }
    
    .stage-marker {
        width: 50px;
        height: 50px;
    }
    
    /* ==================================
       7. BUTTONS & FORMS
       ================================== */
    
    /* Button sizing */
    .cta-button,
    .primary-button,
    .secondary-button {
        padding: 12px 35px;
        font-size: 1rem;
        min-width: 150px;
    }
    
    /* Form elements */
    input,
    textarea,
    select {
        padding: 11px 16px;
        font-size: 0.95rem;
    }
    
    /* Form grid layouts */
    .form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* ==================================
       8. FOOTER
       ================================== */
    
    /* Footer grid - 2 columns */
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        text-align: left;
    }
    
    /* Footer sections */
    .footer-section h3 {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }
    
    .footer-links {
        gap: 10px;
    }
    
    /* ==================================
       9. TABLES
       ================================== */
    
    /* Table responsiveness */
    table {
        font-size: 0.9rem;
    }
    
    th, td {
        padding: 10px 12px;
    }
    
    /* ==================================
       10. SPECIAL COMPONENTS
       ================================== */
    
    /* Stats/metrics display */
    .stats-grid,
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    /* Testimonial cards */
    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    /* Timeline components */
    .timeline {
        padding: 0 20px;
    }
    
    /* Modal dialogs */
    .modal-content {
        width: 90%;
        max-width: 600px;
        margin: 5% auto;
    }
    
    /* Carousel adjustments */
    .carousel-container {
        padding: 0 30px;
    }
    
    /* ==================================
       11. SPACING UTILITIES
       ================================== */
    
    /* Margin adjustments */
    .section-header {
        margin-bottom: 40px;
    }
    
    .section-title {
        margin-bottom: 20px;
    }
    
    /* Padding utilities */
    .px-4 {
        padding-left: 25px;
        padding-right: 25px;
    }
    
    .py-4 {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    /* ==================================
       12. IMAGES & MEDIA
       ================================== */
    
    /* Image sizing constraints */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Logo images in content */
    .content-logo,
    .partner-logo {
        max-width: 150px;
    }
    
    /* Background images */
    .hero-background {
        background-size: cover;
        background-position: center;
    }
    
    /* ==================================
       13. FLEXBOX LAYOUTS
       ================================== */
    
    /* Flex containers */
    .flex-container {
        gap: 25px;
    }
    
    /* Flex wrap for small screens */
    .flex-wrap-tablet {
        flex-wrap: wrap;
    }
    
    /* Center alignment for flex items */
    .flex-center {
        justify-content: center;
        align-items: center;
    }
    
    /* ==================================
       14. ERROR PAGE SPECIFIC
       ================================== */
    
    .error-container {
        padding: 100px 30px 60px;
    }
    
    .error-404 {
        font-size: 6rem;
    }
    
    /* ==================================
       15. OVERFLOW HANDLING
       ================================== */
    
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }
    
    /* Code blocks and pre-formatted text */
    pre, code {
        max-width: 100%;
        overflow-x: auto;
        font-size: 0.9rem;
    }
    
    /* Scrollable containers */
    .scroll-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==================================
   LANDSCAPE ORIENTATION FIXES
   For devices in landscape mode
   ================================== */

@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    .hero,
    .hero-section {
        padding: 100px 0 60px;
        margin-top: 70px;
    }
    
    .section {
        padding: 50px 0;
    }
    
    /* Adjust hero title for landscape */
    .hero-title {
        font-size: 2.2rem;
    }
}

/* ==================================
   HIGH DPI DISPLAYS
   For small laptops with high resolution
   ================================== */

@media (min-width: 769px) and (max-width: 1024px) and (min-resolution: 1.5dppx) {
    /* Slightly larger text for high DPI */
    body {
        font-size: 1.05rem;
    }
    
    /* Sharper borders and shadows */
    .card {
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    }
}

/* ==================================
   SPECIFIC WIDTH FIXES
   Target common small laptop widths
   ================================== */

/* Exact 1024px fix - bridges the media query gap */
@media (min-width: 1024px) and (max-width: 1024px) {
    /* Override styles.css (max-width: 1024px) for exactly 1024px */
    nav#navbar {
        min-height: 90px !important; /* Match main fix */
        overflow: visible !important;
        height: auto !important;
    }
    
    nav#navbar .nav-container {
        padding: 25px 30px !important; /* Match main fix */
        min-height: 90px !important; /* Match main fix */
    }
    
    /* BULLETPROOF 1024px FIX: Match main solution */
    body nav#navbar .logo-dots-nav,
    nav#navbar .logo-dots-nav,
    #navbar .logo-dots-nav {
        width: 50px !important; /* Match main fix dimensions */
        height: 50px !important; /* Match main fix dimensions */
        min-width: 50px !important;
        min-height: 50px !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
        position: relative !important;
        flex-shrink: 0 !important;
        display: block !important;
        contain: none !important;
        clip: auto !important;
        clip-path: none !important;
        mask: none !important;
        box-sizing: border-box !important;
    }
}

/* 1366x768 displays (common HP laptop resolution) */
@media (min-width: 1000px) and (max-width: 1024px) {
    .container {
        max-width: 960px;
    }
    
    .nav-links {
        gap: 35px;
    }
}

/* 900-999px range */
@media (min-width: 900px) and (max-width: 999px) {
    .container {
        max-width: 860px;
    }
    
    /* 3-column grids can stay as 3 on wider small laptops */
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* 800-899px range */
@media (min-width: 800px) and (max-width: 899px) {
    .container {
        max-width: 760px;
    }
}