/* 
 * Connect Information Technology - Responsive Styles (Enhanced Mobile Navbar)
 * Mobile-First Approach with improved hero/nav behavior
 */

/* ===========================
   Desktop / Laptop (max-width:1200px)
   =========================== */
@media (max-width:1200px) {
    :root {
        --container-width:960px;
    }
}

/* ===========================
   Tablet (max-width:992px)
   =========================== */
@media (max-width: 992px) {
    :root {
        --container-width:720px;
    }

    h1 {
        font-size:3rem;
    }

    h2 {
        font-size:2.25rem;
    }

    .grid-4 {
        grid-template-columns:repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns:repeat(2, 1fr);
    }
}

/* ===========================
   Mobile (max-width:768px)
   Main mobile breakpoint with enhanced navbar
   =========================== */
@media (max-width:768px) {
    :root {
        --container-width:100%;
        --header-height:60px;
        --space-3xl:50px;
        --space-2xl:40px;
        --space-xl:20px;
        --space-lg:16px;
        --space-md:12px;
    }

    html {
        font-size:14px;
    }

    body {
        padding-top:var(--header-height);
    }

    /* Typography scaling for mobile */
    h1 {
        font-size:2rem;
        line-height:1.3;
        margin-bottom:var(--space-lg);
    }

    h2 {
        font-size:1.5rem;
        line-height:1.3;
        margin-bottom:var(--space-md);
    }

    h3 {
        font-size:1.25rem;
        margin-bottom:var(--space-md);
    }

    h4 {
        font-size:1.1rem;
        margin-bottom: var(--space-sm);
    }

    p {
        font-size:0.95rem;
        line-height: 1.5;
        margin-bottom:var(--space-md);
    }

    /* ===========================
       NAVBAR: Enhanced Mobile optimization
       =========================== */
    .navbar {
        height:var(--header-height);
        padding:0;
        z-index:1200;
        position:fixed;
        top:0;
        left:0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        border-bottom:1px solid rgba(0, 0, 0, 0.05);
    }

    .navbar .container {
        height:100%;
        padding:0 12px;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .logo {
        flex-shrink:0;
        order:0;
    }

    .logo-img {
        height:36px;
    }

    /* Show hamburger on mobile - CRITICAL */
    .hamburger {
        display:flex ! important;
        align-items: center;
        justify-content: center;
        padding:8px 12px;
        margin: 0;
        background:none;
        border:none;
        cursor: pointer;
        flex-shrink:0;
        order:2;
    }

    .hamburger i {
        font-size:1.5rem;
        color:var(--neutral-dark);
    }

    .hamburger:focus {
        outline:2px solid var(--primary-blue);
        outline-offset:2px;
    }

    /* Mobile sliding nav menu - COMPLETE REDESIGN */
    .nav-menu {
        position:fixed;
        top:var(--header-height);
        left:0;
        right:0;
        bottom:0;
        background-color:var(--bg-white);
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:0;
        margin-left:0;
        margin: 0;
        padding:0;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        /* smooth scrolling on iOS */
        transform:translateX(100%);
        transition:transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
        border-top:1px solid rgba(0, 0, 0, 0.05);
        z-index:1100;
        display:flex ! important;
        width:100%;
        max-width:100%;
        height:calc(100vh - var(--header-height));
    }

    /* Show nav menu when active */
    .nav-menu.active {
        transform:translateX(0);
    }

    /* Mobile nav links: proper spacing and touch targets */
    .nav-menu .nav-link {
        display:block;
        width:100%;
        padding: 16px 16px;
        font-size:1rem;
        font-weight:500;
        border-bottom:1px solid rgba(0, 0, 0, 0.04);
        color:var(--neutral-dark);
        margin:0;
        min-height:48px;
        display:flex;
        align-items:center;
        transition:background-color 200ms ease;
        touch-action:manipulation;
    }

    /* Remove underline animation on mobile */
    .nav-menu .nav-link::after {
        display:none;
    }

    .nav-menu .nav-link:active,
    .nav-menu .nav-link:hover {
        background-color:var(--bg-light);
        color:var(--primary-blue);
    }

    /* Mobile dropdowns - accordion style */
    .nav-dropdown {
        width:100%;
        border-bottom:1px solid rgba(0, 0, 0, 0.04);
    }

    .nav-dropdown > a {
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        padding: 16px 16px;
        font-size:1rem;
        font-weight: 500;
        color:var(--neutral-dark);
        min-height:48px;
        border: none;
        background:transparent;
        cursor:pointer;
        transition:background-color 200ms ease;
    }

    .nav-dropdown > a i {
        font-size:0.75rem;
        transition:transform 200ms ease;
        margin-left:auto;
    }

    .nav-dropdown.active > a {
        background-color:var(--bg-light);
        color:var(--primary-blue);
    }

    .nav-dropdown.active > a i {
        transform:rotate(180deg);
    }

    /* Dropdown menu - hidden by default, shown when active */
    .dropdown-menu {
        position:static;
        display:none;
        box-shadow:none;
        background: rgba(0, 0, 0, 0.02);
        min-width:auto;
        margin:0;
        padding: 0;
        border-radius:0;
        border: none;
        z-index:1001;
        width:100%;
    }

    /* Never show dropdown on hover on mobile */
    .nav-dropdown:hover .dropdown-menu {
        display:none;
    }

    /* Show dropdown when .active is toggled by JS */
    .nav-dropdown.active .dropdown-menu {
        display:block;
    }

    .dropdown-item {
        display:block;
        padding:14px 16px 14px 32px;
        font-size:0.95rem;
        color:var(--neutral-dark);
        border-bottom:1px solid rgba(0, 0, 0, 0.03);
        background: rgba(0, 0, 0, 0.02);
        min-height:44px;
        display:flex;
        align-items:center;
        transition:background-color 200ms ease;
        text-decoration:none;
        touch-action:manipulation;
    }

    .dropdown-item:active,
    .dropdown-item:hover {
        background-color:rgba(0, 0, 0, 0.05);
        color:var(--primary-blue);
    }

      /* ===========================
       HERO:  Mobile optimizations
       =========================== */
    .hero {
        padding-top: calc(var(--header-height) + 20px);
        padding-bottom:  24px;
        min-height: auto;
        margin-top: 0;
        /* Remove negative margin */
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 14px;
        align-items: start;
    }

    /* Visual card nudged down so it clears the fixed navbar */
    .hero-visual {
        order: -1;
        /* keep image above text on small screens */
    }

    .hero-visual-card {
        max-width: 100%;
        margin:   0 auto;
        padding: 8px;
        margin-top: 12px;
    }

    .hero-image {
        border-radius: 12px;
        max-height: 240px;
        width: 100%;
        margin-top: 8px;
    }

    .hero-content {
        padding:0;
        text-align:left;
    }

    .hero-title {
        font-size:1.6rem;
        margin-bottom:12px;
        line-height:1.05;
    }

    .hero-lead {
        font-size:0.98rem;
        margin-bottom:16px;
        max-width:100%;
    }

    .hero-pill {
        margin-bottom:12px;
    }

    /* CTA buttons stack on mobile */
    .hero-cta {
        display: flex;
        flex-direction:column;
        gap:10px;
    }

    .hero-cta .btn-cta {
        width:100%;
        min-width:auto;
        padding:14px 16px;
        font-size:0.95rem;
    }

    /* ===========================
       BUTTONS: Touch-friendly sizing
       =========================== */
    .btn {
        padding:12px 16px;
        font-size: 0.95rem;
        min-height:44px;
        width:100%;
        border-radius:10px;
    }

    .btn-lg {
        padding:14px 20px;
        font-size: 1rem;
    }

    .btn-sm {
        padding:10px 14px;
        font-size:0.9rem;
        min-height:40px;
    }

    /* ===========================
       CARDS & COMPONENTS
       =========================== */
    .card {
        padding:var(--space-lg);
        margin-bottom:var(--space-lg);
    }

    .card:hover {
        transform:none;
        box-shadow:var(--shadow-sm);
    }

    .card-icon {
        font-size:2rem;
        margin-bottom: var(--space-md);
    }

    /* Partner Cards */
    .partner-card {
        width:100%;
        max-width:100%;
        height:auto;
        min-height:100px;
        margin-bottom: var(--space-lg);
    }

    /* ===========================
       FORMS: Optimized for mobile
       =========================== */
    .form-input {
        padding:12px 12px;
        font-size:16px;
        /* 16px prevents zoom on iOS */
        border-radius:var(--radius-sm);
        width:100%;
    }

    input[type="text"],
    input[type="email"],
    input[type="phone"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        font-size:16px;
        padding:12px;
        width:100%;
    }

    /* ===========================
       FOOTER:Stack columns on mobile
       =========================== */
    .footer {
        padding:var(--space-xl) 0 var(--space-lg);
    }

    .footer .grid,
    .footer .grid-4 {
        grid-template-columns:1fr ! important;
        gap:var(--space-lg);
    }

    .footer .footer-col {
        padding-bottom:0;
    }

    .footer h4 {
        font-size:1rem;
        margin-bottom:var(--space-md);
    }

    .footer-link {
        font-size:0.9rem;
        margin-bottom:var(--space-sm);
    }

    .footer-text-small {
        font-size:0.85rem;
    }

    /* ===========================
       PAGE HERO:   Mobile optimization
       =========================== */
    .page-hero,
    .page-hero-lg {
        padding-top: calc(var(--header-height) + 30px);
        padding-bottom:  20px;
        margin-top: 0;
        /* Remove negative margin */
    }

    .page-hero-lg h1 {
        font-size: 1.8rem;
    }

    .page-hero-lg p {
        font-size: 0.95rem;
        max-width: 100%;
    }

    /* ===========================
       UTILITY CLASSES
       =========================== */
    .flex-column-mobile {
        flex-direction:column;
    }

    .order-first-mobile {
        order:-1;
    }

    /* Grids stack to single column */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns:1fr;
        gap:var(--space-lg);
    }

    .section {
        padding:var(--space-2xl) 0;
    }

    .container {
        padding:0 12px;
    }
}

/* ===========================
   Small Mobile (max-width:480px)
   Additional refinements for very small phones
   =========================== */
@media (max-width:480px) {
    :root {
        --header-height:56px;
        --space-xl:16px;
        --space-lg:12px;
        --space-md:8px;
    }

    html {
        font-size:13px;
    }

    body {
        padding-top:var(--header-height);
    }

    .navbar {
        height:var(--header-height);
    }

    .logo-img {
        height:32px;
    }

    .hamburger {
        padding:6px 10px;
    }

    .hamburger i {
        font-size:1.3rem;
    }

    .nav-menu {
        top:var(--header-height);
        height:calc(100vh - var(--header-height));
    }

    .nav-menu .nav-link {
        padding:14px 12px;
        font-size:0.95rem;
        min-height:44px;
    }

    .nav-dropdown > a {
        padding:14px 12px;
        font-size:0.95rem;
    }

    .dropdown-item {
        padding:12px 12px 12px 28px;
        font-size:0.9rem;
        min-height:40px;
    }

    h1 {
        font-size:1.5rem;
        line-height:1.3;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size:1.1rem;
    }

    .hero-image {
        max-height:200px;
        margin-top: 6px;
    }

    .hero-title {
        font-size:1.4rem;
    }

    .hero-lead {
        font-size:0.9rem;
    }

    .btn {
        padding:10px 14px;
        font-size:0.9rem;
        min-height:40px;
    }

    .card {
        padding:var(--space-md);
    }

    .section {
        padding:var(--space-xl) 0;
    }

    .container {
        padding:0 10px;
    }
}

/* ===========================
   Extra Small Mobile (max-width:360px)
   Edge case: very small devices
   =========================== */
@media (max-width:360px) {
    :root {
        --header-height:56px;
        --space-lg:10px;
        --space-md:6px;
    }

    html {
        font-size:12px;
    }

    .hamburger {
        padding:6px 8px;
    }

    .hamburger i {
        font-size:1.2rem;
    }

    .nav-menu .nav-link {
        padding: 12px 10px;
        min-height:40px;
    }

    .nav-dropdown > a {
        padding:12px 10px;
    }

    .dropdown-item {
        padding:10px 10px 10px 24px;
        min-height:38px;
    }

    h1 {
        font-size:1.3rem;
    }

    h2 {
        font-size:1.1rem;
    }

    .hero-image {
        max-height:160px;
    }

    .hero-title {
        font-size:1.2rem;
    }

    .btn {
        padding:10px 12px;
        font-size: 0.85rem;
        min-height: 38px;
    }

    .container {
        padding:0 8px;
    }
}

/* ===========================
   Accessibility:Reduced motion
   =========================== */
@media (prefers-reduced-motion:reduce) {
    * {
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
    }
}

/* ===========================
   Accessibility:High contrast preference
   =========================== */
@media (prefers-contrast:more) {
    .nav-link,
    .dropdown-item {
        color:#111 !important;
    }

    .btn {
        box-shadow:none;
        border-width:2px;
    }
}