/* Responsive Styles */

/* Tablet Styles - 768px to 1024px */
@media (max-width: 1024px) {
    .container {
        padding: 0 var(--spacing-md);
    }
    
    .calculator-container {
        gap: var(--spacing-lg);
    }
    
    .charts-container {
        grid-template-columns: 1fr;
    }
    
    .strategy-cards {
        grid-template-columns: 1fr;
    }
    
    .steps {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }
}

/* Mobile Styles - 768px and below */
@media (max-width: 768px) {
    /* Typography adjustments */
    :root {
        --font-size-h1: 28px;
        --font-size-h2: 24px;
        --font-size-h3: 20px;
        --font-size-h4: 18px;
        --spacing-xs: 4px;
        --spacing-sm: 6px;
        --spacing-md: 12px;
        --spacing-lg: 16px;
        --spacing-xl: 24px;
        --spacing-2xl: 32px;
    }
    
    /* Header */
    .mobile-menu-toggle {
        display: flex;
    }
    
    .nav-links {
        position: fixed;
        top: 60px;
        right: -100%;
        width: 250px;
        height: calc(100vh - 60px);
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        flex-direction: column;
        padding: var(--spacing-xl);
        box-shadow: -2px 0 15px rgba(0, 0, 0, 0.2);
        transition: right 0.3s ease;
        z-index: 99;
        border-left: 1px solid var(--glass-border);
    }
    
    .nav-links.active {
        right: 0;
    }
    
    .nav-links li {
        margin-bottom: var(--spacing-lg);
    }
    
    /* Hero */
    .hero {
        padding: var(--spacing-xl) 0;
    }
    
    .hero-title {
        font-size: 28px;
    }
    
    .hero-subtitle {
        font-size: var(--font-size-base);
    }
    
    .cta-button {
        font-size: var(--font-size-base);
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    /* Calculator */
    .calculator-section {
        padding: var(--spacing-xl) 0;
    }
    
    .calculator-container {
        padding: var(--spacing-lg);
    }
    
    .debt-item-fields {
        grid-template-columns: 1fr;
    }
    
    .strategy-options {
        flex-direction: column;
    }
    
    .rollover-status {
        flex-direction: column;
        text-align: center;
    }
    
    .status-icon {
        margin: 0 auto;
    }
    
    /* Key Metrics */
    .key-metrics {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .metric {
        padding: var(--spacing-md);
    }
    
    .metric-value {
        font-size: var(--font-size-h4);
    }
    
    /* Tables */
    .comparison-table {
        font-size: var(--font-size-small);
        width: 100%;
        table-layout: auto;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: var(--spacing-sm);
        font-size: 12px;
        white-space: normal;
        word-break: break-word;
    }
    
    /* Ensure tables stay within bounds */
    .schedule-table table,
    .comparison-table table {
        min-width: unset;
    }
    
    /* Results section adjustments */
    .calculator-results {
        padding: var(--spacing-md);
    }
    
    /* Schedule Actions */
    .schedule-actions {
        flex-wrap: wrap;
    }
    
    .action-button {
        flex: 1;
        min-width: 100px;
    }
    
    /* Steps */
    .steps {
        grid-template-columns: 1fr;
    }
    
    /* FAQ */
    .faq-item {
        padding: var(--spacing-md);
    }
    
    /* Footer */
    .footer {
        padding: var(--spacing-xl) 0 var(--spacing-md);
    }
}

/* Small Mobile - 480px and below */
@media (max-width: 480px) {
    /* Typography adjustments for very small screens */
    :root {
        --font-size-base: 14px;
        --font-size-small: 12px;
        --font-size-h1: 24px;
        --font-size-h2: 20px;
        --font-size-h3: 18px;
        --font-size-h4: 16px;
    }
    
    /* Further reduce padding */
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .calculator-container {
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }
    
    /* Form inputs */
    .form-group input,
    .form-group select {
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* Buttons */
    .add-debt-button,
    .calculate-button {
        padding: var(--spacing-md) var(--spacing-sm);
        font-size: var(--font-size-base);
    }
    
    /* Charts */
    .chart-wrapper {
        padding: var(--spacing-md);
    }
    
    /* Chart toggle on mobile */
    .chart-header {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: flex-start;
    }
    
    .chart-toggle {
        width: 100%;
    }
    
    .toggle-btn {
        flex: 1;
    }
    
    /* Schedule table - make scrollable */
    .schedule-table {
        font-size: 12px;
        max-height: 300px;
    }
    
    .schedule-table th,
    .schedule-table td {
        padding: var(--spacing-xs);
    }
    
    /* Ensure action buttons wrap properly */
    .schedule-actions {
        justify-content: center;
        gap: var(--spacing-sm);
    }
    
    .action-button {
        font-size: var(--font-size-small);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    /* Hero adjustments */
    .hero-title {
        font-size: var(--font-size-h2);
        line-height: 1.3;
    }
    
    /* Debt item adjustments */
    .debt-item {
        padding: var(--spacing-sm);
    }
    
    .debt-item-header h4 {
        font-size: var(--font-size-base);
    }
    
    /* Key metrics on very small screens */
    .metric {
        padding: var(--spacing-sm);
    }
    
    .metric-value {
        font-size: var(--font-size-base);
    }
    
    .metric-label {
        font-size: var(--font-size-small);
    }
    
    /* Strategy options */
    .strategy-option {
        padding: var(--spacing-sm);
    }
    
    .strategy-label strong {
        font-size: var(--font-size-base);
    }
    
    .strategy-label small {
        font-size: var(--font-size-small);
    }
    
    /* FAQ items */
    .faq-item {
        padding: var(--spacing-sm);
    }
    
    .faq-item summary {
        font-size: var(--font-size-base);
        padding-right: var(--spacing-lg);
    }
    
    /* Steps */
    .step-number {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-base);
    }
    
    .step h3 {
        font-size: var(--font-size-base);
    }
    
    /* Footer */
    .footer-section h4 {
        font-size: var(--font-size-base);
    }
    
    .footer-section {
        margin-bottom: var(--spacing-md);
    }
}

/* Very Small Mobile - 320px and below */
@media (max-width: 320px) {
    /* Even smaller adjustments */
    :root {
        --font-size-base: 13px;
        --font-size-small: 11px;
        --font-size-h1: 20px;
        --font-size-h2: 18px;
        --font-size-h3: 16px;
        --font-size-h4: 14px;
    }
    
    /* Minimal padding */
    .container {
        padding: 0 8px;
    }
    
    .calculator-container {
        padding: 8px;
    }
    
    /* Stack remove button below debt name */
    .debt-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .remove-debt {
        align-self: flex-end;
    }
    
    /* Full width form fields */
    .debt-item-fields {
        gap: var(--spacing-sm);
    }
    
    /* Smaller logo */
    .logo h1 {
        font-size: var(--font-size-h3);
    }
    
    /* Comparison table adjustments */
    .comparison-table {
        font-size: 11px;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 4px;
    }
    
    /* Hide some columns on very small screens */
    @media (max-width: 320px) {
        .schedule-table th:nth-child(4),
        .schedule-table td:nth-child(4),
        .schedule-table th:nth-child(5),
        .schedule-table td:nth-child(5) {
            display: none;
        }
    }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    button,
    input,
    select,
    textarea,
    a {
        min-height: 44px;
    }
    
    .nav-links a {
        padding: var(--spacing-sm) 0;
    }
    
    .strategy-option {
        padding: var(--spacing-lg);
    }
    
    .faq-item summary {
        padding: var(--spacing-md) var(--spacing-xl) var(--spacing-md) 0;
    }
}

/* Landscape mobile adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: var(--spacing-lg) 0;
    }
    
    .hero-title {
        font-size: 24px;
    }
    
    .key-metrics {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp borders */
    .debt-item,
    .strategy-option,
    .comparison-table,
    .schedule-table {
        border-width: 0.5px;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    /* Disable background animations */
    body::before,
    body::after,
    .shape,
    .hero::before,
    .metric::before,
    .step-number::before {
        animation: none !important;
    }
    
    /* Reduce blur effects for performance */
    .header,
    .calculator-container,
    .chart-wrapper,
    .strategy-card,
    .metric,
    .payoff-schedule {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Mobile Performance Optimizations */
@media (max-width: 768px) {
    /* Simplify animations on mobile */
    .shape {
        animation-duration: 30s;
    }
    
    /* Reduce blur intensity on mobile for better performance */
    .calculator-container,
    .chart-wrapper,
    .strategy-card,
    .metric {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    
    /* Disable hover effects on touch devices */
    @media (hover: none) {
        .calculator-container:hover,
        .debt-item:hover,
        .strategy-card:hover,
        .metric:hover,
        .chart-wrapper:hover,
        .payoff-schedule:hover {
            transform: none;
        }
    }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    /* Could add dark mode styles here if desired */
}