/* Responsive / Media Query Styles */

/* Large screens (desktops) */
@media (max-width: 1200px) {
    .container {
        max-width: 992px;
    }
}

/* Medium screens (tablets landscape) */
@media (max-width: 992px) {
    .container {
        max-width: 768px;
    }

    .nav-header {
        flex-direction: column;
        gap: var(--spacing-4);
        text-align: center;
    }

    .nav-header > div {
        flex-direction: column;
        gap: var(--spacing-4);
    }

    .col-4 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: var(--spacing-8);
    }
}

/* Small screens (tablets portrait) */
@media (max-width: 768px) {
    .container {
        padding: 0 var(--spacing-4);
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-4);
    }

    .text-3xl {
        font-size: var(--font-size-2xl);
    }

    .text-2xl {
        font-size: var(--font-size-xl);
    }

    .col-4,
    .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: var(--spacing-6);
    }

    .row {
        flex-direction: column;
    }

    .footer {
        padding: var(--spacing-8) 0;
    }

    .gap-24 {
        gap: var(--spacing-4);
    }

    .gap-10 {
        gap: var(--spacing-2);
    }
}

/* Extra small screens (mobile) */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    .nav-header {
        padding: var(--spacing-4) 0;
    }

    .card {
        padding: var(--spacing-4);
    }

    .card-header {
        padding: var(--spacing-4);
    }

    .card-content {
        padding: var(--spacing-4);
    }

    .p-20 {
        padding: var(--spacing-3);
    }

    .p-40 {
        padding: var(--spacing-4);
    }

    .mb-40 {
        margin-bottom: var(--spacing-6);
    }

    .tool-icon {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-xs);
    }
}

/* Print styles */
@media print {
    .nav-header,
    .footer {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .card {
        border: 1px solid #ccc;
        box-shadow: none;
    }
}