/* Base styles (mobile-first approach) */
body {
    font-size: 16px;
    line-height: 1.5;
}

.container {
    width: 100%;
    padding: 0 5px;
    margin: 0 auto;
}

/* Small devices (portrait phones, 320px and up) */
@media (min-width: 320px) {
    body {
        font-size: 16px;
    }

    .container {
        max-width: 320px;
    }

    .front-page-banner{
        padding:5px;
    }

    .logo-small {
        font-size: 1px;
        color: transparent;
    }
}

/* Small devices (landscape phones, 480px and up) */
@media (min-width: 480px) {
    body {
        font-size: 17px;
    }

    .container {
        max-width: 480px;
    }

    .front-page-banner {
        padding: 5px;
    }

    .logo-small {
        font-size: 1px;
        color:transparent;
    }
}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }

    .container {
        max-width: 760px;
    }

    .sidebar {
        display: block;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    body {
        font-size: 18px;
    }

    .container {
        max-width: 980px;
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    body {
        font-size: 20px;
    }

    .container {
        max-width: 1140px;
    }

    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* High resolution devices (retina displays) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Styles for high-resolution displays */
    .logo {
        background-image: url('logo@2x.png');
        background-size: contain;
    }

    .icon {
        background-image: url('icons@2x.png');
        background-size: cover;
    }
}

/* Print styles */
@media print {
    body {
        font-size: 12pt;
        color: #000;
        background: none;
    }

    .no-print {
        display: none;
    }

    a::after {
        content: " (" attr(href) ")";
    }

    .search-card {
        border-bottom: 3px solid orange;
        background-color: #f8f9fa;
    }

    .search-button {
        min-width: 120px;
    }

    .form-control:focus {
        border-color: #ffc107;
        box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
    }

    @media (max-width: 768px) {
        .mobile-stack {
            flex-direction: column;
        }

        .mobile-mb-2 {
            margin-bottom: 0.5rem;
        }

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

        .mobile-text-center {
            text-align: center;
        }
    }


}