/*
 * Mobile Responsive Enhancements
 * Kasetidea Theme - Version 1.0.0
 */

/* ============================================
   MOBILE BREAKPOINTS
   ============================================ */

/* Extra Small Devices (phones, 320px to 575px) */
@media (max-width: 575px) {
    
    /* Typography */
    body {
        font-size: 14px;
        line-height: 1.6;
    }
    
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.1rem !important; }
    
    /* Containers */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Hero Section */
    .hero-section {
        padding: 40px 0 !important;
    }
    
    .hero-section h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    .hero-section p {
        font-size: 0.9rem !important;
    }
    
    /* Search Bar */
    .search-bar {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .search-bar input {
        font-size: 14px !important;
        padding: 12px 15px !important;
    }
    
    .search-bar button {
        padding: 10px 15px !important;
        font-size: 13px !important;
    }
    
    /* Statistics */
    .stats-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        margin-top: 20px !important;
    }
    
    .stat-item {
        font-size: 0.9rem !important;
    }
    
    .stat-number {
        font-size: 1.5rem !important;
    }
    
    /* Cards Grid */
    .grid-3-cols,
    .grid-2-cols {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Plant Cards */
    .plant-card,
    .article-card {
        margin-bottom: 15px !important;
    }
    
    .plant-card h3,
    .article-card h3 {
        font-size: 1.1rem !important;
    }
    
    .plant-card p,
    .article-card p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }
    
    /* Buttons */
    .btn,
    button,
    a.button {
        padding: 10px 20px !important;
        font-size: 14px !important;
        min-height: 44px !important; /* Touch target */
    }
    
    /* Navigation */
    .main-nav {
        padding: 10px 0 !important;
    }
    
    .nav-menu {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .nav-item {
        width: 100% !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #eee;
    }
    
    /* Footer */
    footer .footer-columns {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    footer h4 {
        font-size: 1rem !important;
        margin-bottom: 15px !important;
    }
    
    footer ul li {
        padding: 8px 0 !important;
    }
    
    /* Sections Spacing */
    section {
        padding: 40px 0 !important;
    }
    
    .section-header {
        margin-bottom: 25px !important;
    }
    
    /* Collections Cards */
    .collection-card {
        padding: 20px !important;
    }
    
    .collection-items {
        flex-wrap: wrap !important;
    }
    
    .collection-item {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
        margin: 4px !important;
    }
    
    /* Modals */
    .modal-content {
        width: 95% !important;
        margin: 20px auto !important;
        padding: 20px !important;
    }
    
    /* Hide on Mobile */
    .hide-mobile {
        display: none !important;
    }
}

/* Small Devices (tablets, 576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    
    /* Typography */
    body {
        font-size: 15px;
    }
    
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.75rem !important; }
    h3 { font-size: 1.5rem !important; }
    
    /* Grid */
    .grid-3-cols {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    /* Statistics */
    .stats-container {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 15px !important;
    }
    
    /* Cards */
    .plant-card,
    .article-card {
        margin-bottom: 20px !important;
    }
}

/* Medium Devices (tablets, 768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    
    /* Grid */
    .grid-3-cols {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }
    
    /* Hero */
    .hero-section h1 {
        font-size: 2.5rem !important;
    }
    
    /* Footer */
    footer .footer-columns {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
    }
}

/* ============================================
   TOUCH OPTIMIZATION
   ============================================ */

/* Touch Targets - Minimum 44x44px */
@media (hover: none) and (pointer: coarse) {
    
    /* Touch targets for interactive elements, but exclude logo links */
    a:not(.site-logo):not(.custom-logo-link):not([class*="logo"]), 
    button:not(.mobile-menu-toggle), 
    input, 
    select, 
    textarea {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Menu toggle needs proper touch target */
    .mobile-menu-toggle {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    .touch-target {
        padding: 12px !important;
    }
    
    /* Remove hover effects on touch devices */
    .card:hover,
    .button:hover {
        transform: none !important;
    }
    
    /* Tap highlight */
    * {
        -webkit-tap-highlight-color: rgba(39, 174, 96, 0.2);
    }
}

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

@media (max-width: 767px) and (orientation: landscape) {
    
    .hero-section {
        padding: 30px 0 !important;
    }
    
    .hero-section h1 {
        font-size: 1.75rem !important;
    }
    
    section {
        padding: 30px 0 !important;
    }
}

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

/* Focus Visible for Keyboard Navigation */
@media (hover: none) {
    
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 3px solid #27AE60 !important;
        outline-offset: 2px !important;
    }
}

/* ============================================
   IMAGE RESPONSIVENESS
   ============================================ */

@media (max-width: 575px) {
    
    /* Plant Images */
    .plant-image,
    .article-image {
        height: 180px !important;
        object-fit: cover;
    }
    
    /* Hero Background */
    .hero-section {
        background-size: cover !important;
        background-position: center !important;
    }
    
    /* Card Images */
    .card-image {
        height: 150px !important;
        object-fit: cover;
    }
}

/* ============================================
   MOBILE MENU
   ============================================ */

@media (max-width: 991px) {
    
    /* Hamburger Menu */
    .mobile-menu-toggle {
        display: block !important;
        font-size: 24px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        color: #2C3E50;
    }
    
    .mobile-menu {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        z-index: 999;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .mobile-menu.active {
        display: block;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }
    
    .mobile-menu-items {
        padding: 20px;
    }
    
    .mobile-menu-item {
        padding: 15px 0;
        border-bottom: 1px solid #eee;
        font-size: 16px;
    }
    
    .mobile-menu-item:last-child {
        border-bottom: none;
    }
}

/* ============================================
   SAFE AREA (iPhone X+)
   ============================================ */

@supports (padding: max(0px)) {
    
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    .fixed-bottom {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
}

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

@media print {
    
    /* Hide non-essential elements */
    header,
    footer,
    .no-print {
        display: none !important;
    }
    
    /* Optimize for print */
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: black;
        background: white;
    }
    
    a {
        text-decoration: underline;
        color: black;
    }
    
    /* Page breaks */
    h1, h2, h3 {
        page-break-after: avoid;
    }
    
    img {
        max-width: 100%;
        page-break-inside: avoid;
    }
}