/* responsive.css - Responsive styles for HSE Calculator */

/* ===== X-SMALL DEVICES (Phones, less than 576px) ===== */
@media (max-width: 575.98px) {
    /* Base adjustments */
    html {
        font-size: 14px;
    }
    
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    /* Typography */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
    }
    
    /* Header & Navigation */
    .navbar {
        padding: 10px 0;
    }
    
    .nav-links {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: var(--white);
        flex-direction: column;
        gap: 0;
        transition: left 0.3s ease;
        padding: var(--spacing-md);
        box-shadow: var(--shadow-md);
        z-index: var(--z-dropdown);
        overflow-y: auto;
    }
    
    .nav-links.active {
        left: 0;
    }
    
    .nav-link {
        width: 100%;
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--border-color);
        text-align: center;
        font-size: 1.1rem;
    }
    
    .mobile-toggle {
        display: flex;
    }
    
    /* Buttons */
    .btn {
        width: 100%;
        max-width: none;
        margin-bottom: var(--spacing-xs);
        justify-content: center;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .hero-buttons .btn {
        margin-bottom: var(--spacing-sm);
    }
    
    /* Calculator Form */
    .calculator-form {
        padding: var(--spacing-md);
        margin: var(--spacing-md) auto;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .print-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    /* Cards & Grids */
    .calculators-grid,
    .products-grid,
    .blog-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .calculator-card-detailed {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-md);
    }
    
    .calculator-card-detailed .calculator-icon {
        margin: 0 auto var(--spacing-md);
    }
    
    /* Training System */
    .training-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .training-form-card,
    .training-records-card {
        padding: var(--spacing-md);
    }
    
    /* Tables */
    .records-table-container {
        max-height: 400px;
        margin: 0 -15px;
        width: calc(100% + 30px);
    }
    
    .records-table th,
    .records-table td {
        padding: 10px;
        font-size: 0.85rem;
    }
    
    /* Results */
    .result-value {
        font-size: 1.75rem;
    }
    
    .result-header {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
    
    /* Social Sharing */
    .social-buttons {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
    }
    
    .social-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .social-card {
        padding: var(--spacing-md);
        margin: var(--spacing-md);
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .footer-col {
        text-align: center;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    /* Support Section */
    .support-card {
        padding: var(--spacing-md);
        margin: 0 var(--spacing-md);
    }
    
    .support-icon {
        font-size: 2rem;
    }
    
    /* Amazon Banner */
    .banner-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }
    
    /* Export Options */
    .export-options {
        flex-direction: column;
        align-items: stretch;
    }
    
    .export-filters {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .date-range {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
    
    /* Records Summary */
    .records-summary {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .summary-item {
        min-width: 100%;
    }
    
    /* Modal */
    .modal-content {
        padding: var(--spacing-md);
        margin: var(--spacing-sm);
    }
    
    .modal-close {
        top: 10px;
        right: 10px;
    }
    
    /* Stats */
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    /* Notes Grid */
    .notes-grid {
        grid-template-columns: 1fr;
    }
    
    /* Page Header */
    .page-header {
        padding: 50px 0;
    }
    
    .page-header h1 {
        font-size: 2rem;
        padding: 0 var(--spacing-sm);
    }
    
    .page-header p {
        font-size: 1rem;
        padding: 0 var(--spacing-sm);
    }
}

/* ===== SMALL DEVICES (Phones, 576px and up) ===== */
@media (min-width: 576px) and (max-width: 767.98px) {
    .container {
        padding: 0 var(--spacing-md);
    }
    
    /* Calculator Grid */
    .calculators-grid,
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Training System */
    .training-container {
        grid-template-columns: 1fr;
    }
    
    /* Social Buttons */
    .social-buttons-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Form Rows */
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Records Table */
    .records-table-container {
        max-height: 450px;
    }
    
    /* Navigation */
    .mobile-toggle {
        display: flex;
    }
    
    .nav-links {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 80%;
        max-width: 400px;
        height: calc(100vh - 70px);
        background: var(--white);
        flex-direction: column;
        gap: 0;
        transition: left 0.3s ease;
        padding: var(--spacing-md);
        box-shadow: var(--shadow-md);
        z-index: var(--z-dropdown);
        overflow-y: auto;
    }
    
    .nav-links.active {
        left: 0;
    }
    
    .nav-link {
        width: 100%;
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--border-color);
        text-align: center;
    }
}

/* ===== MEDIUM DEVICES (Tablets, 768px and up) ===== */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    
    .hero-title {
        font-size: 2rem;
    }
    
    /* Navigation - Show desktop nav on tablets */
    .mobile-toggle {
        display: none;
    }
    
    .nav-links {
        display: flex;
        position: static;
        flex-direction: row;
        height: auto;
        background: none;
        box-shadow: none;
        padding: 0;
        overflow: visible;
    }
    
    .nav-link {
        padding: 8px 12px;
        border-bottom: none;
        text-align: left;
    }
    
    /* Calculator Grid */
    .calculators-grid,
    .products-grid,
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Training System */
    .training-container {
        grid-template-columns: 1fr;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Tools Categories */
    .tools-categories {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Social Buttons */
    .social-buttons-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== LARGE DEVICES (Desktops, 992px and up) ===== */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Calculator Grid */
    .calculators-grid,
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Training System */
    .training-container {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Navigation - Ensure desktop nav */
    .mobile-toggle {
        display: none;
    }
}

/* ===== EXTRA LARGE DEVICES (Large desktops, 1200px and up) ===== */
@media (min-width: 1200px) {
    /* Calculator Grid */
    .calculators-grid,
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Training System */
    .training-container {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Navigation - Ensure desktop nav */
    .mobile-toggle {
        display: none;
    }
}

/* ===== TABLET-SPECIFIC ADJUSTMENTS ===== */
@media (max-width: 991.98px) and (min-width: 768px) {
    /* Adjust container padding */
    .container {
        padding: 0 var(--spacing-md);
    }
    
    /* Adjust form layouts */
    .form-row-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Adjust button sizes */
    .btn-large {
        padding: 14px 28px;
        font-size: 1rem;
    }
    
    /* Adjust card layouts */
    .card-horizontal {
        flex-direction: column;
    }
    
    .card-horizontal .card-img {
        width: 100%;
        height: 200px;
    }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-height: 575.98px) and (orientation: landscape) {
    /* Adjust heights for landscape */
    .hero {
        padding: var(--spacing-lg) 0;
        min-height: auto;
    }
    
    .modal-content {
        max-height: 80vh;
    }
    
    .records-table-container {
        max-height: 300px;
    }
    
    /* Compact forms */
    .calculator-form {
        padding: var(--spacing-md);
    }
    
    .form-group {
        margin-bottom: var(--spacing-sm);
    }
    
    /* Smaller buttons */
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    /* Navigation adjustment */
    .nav-links {
        height: calc(100vh - 60px);
        top: 60px;
    }
}

/* ===== HIGH-DPI (RETINA) DISPLAYS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Use higher quality images if available */
    .logo-img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    /* Sharper borders */
    .border,
    .border-top,
    .border-bottom,
    .border-left,
    .border-right {
        border-width: 0.5px;
    }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    /* This can be expanded based on your dark mode requirements */
    body {
        background-color: #121212;
        color: #e0e0e0;
    }
    
    .card,
    .calculator-form,
    .training-form-card,
    .training-records-card {
        background-color: #1e1e1e;
        color: #e0e0e0;
    }
    
    .form-control {
        background-color: #2d2d2d;
        border-color: #404040;
        color: #e0e0e0;
    }
    
    .form-control:focus {
        border-color: #4c8bf5;
        background-color: #2d2d2d;
    }
    
    .text-dark {
        color: #e0e0e0 !important;
    }
    
    .text-muted {
        color: #aaa !important;
    }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn,
    .nav-link,
    .social-btn,
    .btn-action {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover effects for touch */
    .btn:hover,
    .card:hover,
    .social-btn:hover,
    .btn-action:hover {
        transform: none !important;
    }
    
    /* Larger form controls */
    .form-control {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
    
    select.form-control {
        min-height: 44px;
    }
    
    /* Adjust spacing for touch */
    .nav-links {
        gap: var(--spacing-md);
    }
    
    .btn {
        padding: 12px 24px;
    }
}

/* ===== FOLDABLE DEVICES ===== */
@media (max-width: 359.98px) {
    /* Extra small phones */
    .container {
        padding: 0 8px;
    }
    
    .btn {
        padding: 10px 16px;
        font-size: 0.875rem;
    }
    
    .calculator-form {
        padding: 15px;
        margin: 10px;
    }
    
    .result-value {
        font-size: 1.5rem;
    }
}

/* ===== VERY LARGE SCREENS ===== */
@media (min-width: 1600px) {
    .container {
        max-width: 1400px;
    }
    
    .calculators-grid,
    .products-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}