/**
 * Responsive Global Styles for Skitterskoon Theme
 * This file ensures ALL pages (current and future) are responsive
 * Applies to all device sizes and screen types
 *
 * @package Skitterskoon
 */

/* ===================================
   BASE RESPONSIVE SETUP
   =================================== */

/* Ensure all images are responsive by default */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent horizontal scroll on all pages */
body {
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
}

/* Responsive video embeds */
iframe,
embed,
object,
video {
    max-width: 100%;
}

/* Responsive tables */
table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* ===================================
   BREAKPOINT: 992px (Tablets Landscape)
   =================================== */

@media (max-width: 992px) {
    /* Typography adjustments */
    body {
        font-size: 15px;
    }

    /* Container adjustments */
    .container,
    .content-wrapper,
    .page-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Common sections */
    section,
    .section {
        padding: 60px 0;
    }

    /* Grid layouts - 2 columns max */
    .grid,
    .card-grid,
    .services-grid,
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }

    /* Headers */
    h1 {
        font-size: 2.2rem;
        line-height: 1.3;
    }

    h2 {
        font-size: 2rem;
        line-height: 1.3;
    }

    h3 {
        font-size: 1.6rem;
        line-height: 1.3;
    }

    h4 {
        font-size: 1.3rem;
    }

    h5 {
        font-size: 1.1rem;
    }
}

/* ===================================
   BREAKPOINT: 768px (Tablets Portrait / Large Phones)
   =================================== */

@media (max-width: 768px) {
    /* Typography adjustments */
    body {
        font-size: 15px;
        line-height: 1.6;
    }

    /* Container adjustments */
    .container,
    .content-wrapper,
    .page-wrapper,
    .main-content {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%;
    }

    /* Common sections */
    section,
    .section {
        padding: 50px 0;
    }

    /* Grid layouts - 1 column */
    .grid,
    .card-grid,
    .services-grid,
    .features-grid,
    .team-grid,
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* Flex layouts - stack vertically */
    .flex-row,
    .flex-container {
        flex-direction: column !important;
    }

    /* Headers */
    h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.75rem;
        line-height: 1.3;
    }

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

    h4 {
        font-size: 1.25rem;
    }

    h5 {
        font-size: 1.1rem;
    }

    h6 {
        font-size: 1rem;
    }

    /* Buttons - full width on mobile */
    .btn,
    .button,
    a.btn,
    button.btn {
        width: 100%;
        max-width: 350px;
        padding: 0.9rem 1.5rem;
        font-size: 1rem;
        display: block;
        margin: 10px auto;
    }

    /* Button groups - stack vertically */
    .btn-group,
    .button-group,
    .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }

    /* Cards */
    .card {
        margin-bottom: 20px;
        padding: 20px;
    }

    /* Forms */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        width: 100%;
        font-size: 16px; /* Prevent zoom on iOS */
    }

    /* Tables - make scrollable */
    table {
        font-size: 0.9rem;
    }

    /* Hide desktop-only elements */
    .desktop-only,
    .hide-mobile {
        display: none !important;
    }

    /* Show mobile-only elements */
    .mobile-only,
    .show-mobile {
        display: block !important;
    }
}

/* ===================================
   BREAKPOINT: 480px (Standard Phones)
   =================================== */

@media (max-width: 480px) {
    /* Typography adjustments */
    body {
        font-size: 14px;
    }

    /* Container adjustments */
    .container,
    .content-wrapper,
    .page-wrapper,
    .main-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Common sections */
    section,
    .section {
        padding: 40px 0;
    }

    /* Headers */
    h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    h3 {
        font-size: 1.25rem;
        line-height: 1.2;
    }

    h4 {
        font-size: 1.1rem;
    }

    h5 {
        font-size: 1rem;
    }

    h6 {
        font-size: 0.9rem;
    }

    /* Buttons */
    .btn,
    .button,
    a.btn,
    button.btn {
        padding: 0.8rem 1.2rem;
        font-size: 0.95rem;
    }

    /* Small buttons */
    .btn-sm,
    .button-small {
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
    }

    /* Cards */
    .card {
        padding: 15px;
    }

    /* Spacing utilities */
    .mb-5,
    .my-5 {
        margin-bottom: 2rem !important;
    }

    .mt-5,
    .my-5 {
        margin-top: 2rem !important;
    }

    .pb-5,
    .py-5 {
        padding-bottom: 2rem !important;
    }

    .pt-5,
    .py-5 {
        padding-top: 2rem !important;
    }
}

/* ===================================
   BREAKPOINT: 375px (Small Phones - iPhone SE, etc.)
   =================================== */

@media (max-width: 375px) {
    /* Typography adjustments */
    body {
        font-size: 13px;
    }

    /* Container adjustments */
    .container,
    .content-wrapper,
    .page-wrapper,
    .main-content {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Headers */
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    h4,
    h5,
    h6 {
        font-size: 1rem;
    }

    /* Buttons */
    .btn,
    .button {
        padding: 0.7rem 1rem;
        font-size: 0.85rem;
    }

    /* Cards */
    .card {
        padding: 12px;
    }

    /* Reduce gaps */
    .grid,
    .card-grid {
        gap: 15px;
    }
}

/* ===================================
   RESPONSIVE UTILITIES
   =================================== */

/* Text alignment responsive */
@media (max-width: 768px) {
    .text-center-mobile {
        text-align: center !important;
    }

    .text-left-mobile {
        text-align: left !important;
    }
}

/* Width utilities */
@media (max-width: 768px) {
    .w-100-mobile {
        width: 100% !important;
    }

    .max-w-100-mobile {
        max-width: 100% !important;
    }
}

/* Spacing responsive utilities */
@media (max-width: 768px) {
    .no-padding-mobile {
        padding: 0 !important;
    }

    .no-margin-mobile {
        margin: 0 !important;
    }
}

/* ===================================
   COMMON RESPONSIVE PATTERNS
   =================================== */

/* Hero sections */
@media (max-width: 768px) {
    .hero,
    .hero-section,
    .banner {
        min-height: 400px !important;
        padding: 40px 15px;
    }

    .hero-title,
    .banner-title {
        font-size: 2rem;
    }

    .hero-subtitle,
    .banner-subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hero,
    .hero-section,
    .banner {
        min-height: 300px !important;
        padding: 30px 10px;
    }

    .hero-title,
    .banner-title {
        font-size: 1.5rem;
    }

    .hero-subtitle,
    .banner-subtitle {
        font-size: 0.9rem;
    }
}

/* Modals and popups */
@media (max-width: 768px) {
    .modal,
    .popup,
    .dialog {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto;
    }

    .modal-content,
    .popup-content {
        padding: 20px;
    }
}

/* Navigation menus */
@media (max-width: 768px) {
    nav ul,
    .nav-menu,
    .menu {
        flex-direction: column;
    }

    nav li,
    .nav-item,
    .menu-item {
        width: 100%;
        text-align: center;
    }
}

/* ===================================
   LANDSCAPE ORIENTATION FIX
   =================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .hero,
    .hero-section {
        min-height: 250px !important;
    }

    section,
    .section {
        padding: 30px 0;
    }
}

/* ===================================
   PRINT STYLES
   =================================== */

@media print {
    /* Hide navigation, footer, etc. */
    nav,
    .navigation,
    .header,
    .footer,
    .sidebar,
    .btn,
    .button {
        display: none !important;
    }

    /* Ensure content is readable */
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    /* Prevent page breaks inside elements */
    h1, h2, h3, h4, h5, h6,
    p, blockquote, pre {
        page-break-inside: avoid;
    }
}

/* ===================================
   ACCESSIBILITY IMPROVEMENTS
   =================================== */

/* Ensure touch targets are large enough on mobile */
@media (max-width: 768px) {
    a,
    button,
    input[type="submit"],
    input[type="button"],
    .btn,
    .clickable {
        min-height: 44px;
        min-width: 44px;
        padding: 10px;
    }
}

/* Focus visible for keyboard navigation */
@media (prefers-reduced-motion: no-preference) {
    *:focus-visible {
        outline: 2px solid var(--primary-color, #37726E);
        outline-offset: 2px;
    }
}