/* =========================================================
   GoldPriceBD - responsive.css
   Version: 2.1
   ---------------------------------------------------------
   Responsive layout for:
   - Header
   - Primary navigation
   - Mobile menu
   - Live prices
   - Comparison
   - Footer
   - Cards / grids
   - Small mobile devices
   ========================================================= */


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    /* -------------------------
       GRID
       ------------------------- */

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

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


    /* -------------------------
       FOOTER
       ------------------------- */

    .footer-grid {
        grid-template-columns:
            1.5fr 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }


    /* -------------------------
       HEADER
       ------------------------- */

    .header-inner {
        gap: 18px;
    }

    .site-nav {
        gap: 2px;
    }

    .site-nav a {
        padding-inline: 10px;
    }

}


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

@media (max-width: 760px) {

    :root {
        --container-padding: 14px;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    .site-header {
        position: sticky;
        top: 0;
        z-index: var(--z-header);
    }

    .header-inner {
        min-height: 68px;

        display: flex;
        align-items: center;

        flex-wrap: wrap;

        gap: 10px 14px;

        padding-block: 10px;
    }


    /* =====================================================
       LOGO
       ===================================================== */

    .site-logo {
        flex: 0 0 auto;
    }


    /* =====================================================
       HEADER ACTIONS
       ===================================================== */

    .header-actions {
        margin-left: auto;

        display: flex;
        align-items: center;

        gap: 8px;

        flex: 0 0 auto;
    }


    /* =====================================================
       LIVE STATUS
       ===================================================== */

    .header-live-status {
        display: none;
    }


    /* =====================================================
       PRIMARY NAVIGATION
       -----------------------------------------------------
       IMPORTANT:
       This is the navigation inside header.html.
       No separate site-navigation component is used.
       ===================================================== */

    .site-nav {

        order: 3;

        width: 100%;

        margin-left: 0;

        display: flex;

        align-items: center;
        justify-content: flex-start;

        gap: 4px;

        overflow-x: auto;
        overflow-y: hidden;

        flex-wrap: nowrap;

        padding:
            4px 0 6px;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }


    .site-nav::-webkit-scrollbar {
        display: none;
    }


    .site-nav a {

        flex: 0 0 auto;

        min-height: 38px;

        padding:
            8px 11px;

        border-radius: 9px;

        white-space: nowrap;

        font-size: 13px;
    }


    .site-nav a.active::after {

        left: 11px;
        right: 11px;

        bottom: 4px;
    }


    /* =====================================================
       MAIN
       ===================================================== */

    .site-main {
        padding-bottom: 48px;
    }


    /* =====================================================
       GRID
       ===================================================== */

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }


    /* =====================================================
       LIVE PRICES
       ===================================================== */

    .live-prices-section {
        padding:
            34px
            var(--container-padding)
            46px !important;
    }


    /* =====================================================
       SECTION HEADINGS
       ===================================================== */

    .section-heading,
    .comparison-heading {
        gap: 14px;
    }


    .section-heading {

        align-items: flex-start !important;

        flex-direction: column;
    }


    .section-heading h2 {
        font-size: 26px;
    }


    /* =====================================================
       LIVE PRICE CONTROLS
       ===================================================== */

    .live-price-controls {

        flex-direction: column;

        align-items: stretch !important;
    }


    .country-selector-group {
        max-width: none !important;
    }


    .copy-information-button {
        width: 100%;
    }


    /* =====================================================
       COMPARISON
       ===================================================== */

    .comparison-controls {
        grid-template-columns:
            1fr !important;
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    .footer-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            32px 22px;
    }


    .footer-brand {
        grid-column: 1 / -1;
    }


    .footer-bottom {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }


    /* =====================================================
       TABLES
       ===================================================== */

    .table-wrapper,
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


    /* =====================================================
       FORMS
       ===================================================== */

    input,
    select,
    textarea {
        max-width: 100%;
    }


    /* =====================================================
       BUTTONS
       ===================================================== */

    .button-group,
    .btn-group {
        flex-wrap: wrap;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {


    /* =====================================================
       HEADER
       ===================================================== */

    .header-inner {

        gap: 8px 10px;

        padding-block: 8px;
    }


    /* =====================================================
       LOGO
       ===================================================== */

    .site-logo {

        font-size: 18px;
    }


    .site-logo-icon {

        width: 31px;
        height: 31px;

        border-radius: 9px;

        font-size: 15px;
    }


    /* =====================================================
       HEADER ACTIONS
       ===================================================== */

    .header-actions {

        margin-left: auto;

        gap: 6px;
    }


    /* =====================================================
       THEME BUTTON
       ===================================================== */

    .icon-button {

        width: 38px;
        height: 38px;
    }


    .theme-icon {
        font-size: 17px;
    }


    /* =====================================================
       NAVIGATION
       ===================================================== */

    .site-nav {

        gap: 2px;

        padding-top: 3px;
        padding-bottom: 5px;
    }


    .site-nav a {

        min-height: 36px;

        padding:
            7px 9px;

        border-radius: 8px;

        font-size: 12px;
    }


    .site-nav a.active::after {

        left: 9px;
        right: 9px;

        height: 2px;
    }


    /* =====================================================
       SECTION HEADINGS
       ===================================================== */

    .section-heading h2 {
        font-size: 23px;
    }


    /* =====================================================
       PRICE GRID
       ===================================================== */

    .prices-grid {
        grid-template-columns:
            1fr !important;
    }


    .price-card {
        padding: 18px !important;
    }


    .price-number {
        font-size: 25px !important;
    }


    /* =====================================================
       COMPARISON
       ===================================================== */

    .gold-price-comparison {
        padding: 18px !important;
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    .footer-grid {
        grid-template-columns: 1fr;
    }


    .footer-brand {
        grid-column: auto;
    }


    .footer-bottom-links {
        gap: 12px;
    }

}


/* =========================================================
   EXTRA SMALL DEVICES
   ========================================================= */

@media (max-width: 360px) {

    :root {
        --container-padding: 12px;
    }


    .site-logo {
        font-size: 17px;
    }


    .site-logo-icon {
        width: 29px;
        height: 29px;
    }


    .site-nav a {

        min-height: 34px;

        padding-inline: 8px;

        font-size: 11px;
    }


    .icon-button {

        width: 36px;
        height: 36px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}