/*
====================================
RESPONSIVE — loads last, overrides
header.css / navigation.css / footer.css
at the breakpoints below.
====================================
*/

/* ============================================
   TABLET (<= 1024px)
   ============================================ */
@media (max-width: 1024px) {

    .main-header .header-container {
        grid-template-columns: 160px 1fr 140px;
        gap: 20px;
    }

    .header-right,
    .btn-primary {
        width: 110px;
        height: 42px;
        font-size: 14px;

    }
}

/* ============================================
   MOBILE / SMALL TABLET (<= 768px)
   ============================================ */
@media (max-width: 768px) {

    .top-header .header-container {
        flex-wrap: wrap;
        justify-content: center;
        min-height: auto;
        padding: 8px 0;
        gap: 6px 16px;
        text-align: center;
    }

    .top-date {
        font-size: 12px;
    }

    .top-menu {
        gap: 14px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .top-menu a {
        font-size: 12px;
    }

    /* ---------- Breaking news ---------- */
    .breaking-news .header-container {
        height: auto;
        padding: 8px 0;
    }

    .breaking-title {
        width: auto;
        min-width: 78px;
        height: 28px;
        padding: 0 12px;
        font-size: 12px;
        white-space: nowrap;
        margin-right: 14px;
    }

    .breaking-ticker a {
        font-size: 13px;
        margin-right: 14px;
    }

    .main-header {
        padding: 14px 0;
    }

    .main-header .header-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }

    .logo-area {
        order: 1;
        flex: 1 1 auto;
    }

    .logo-area img {
        max-width: 130px;
    }

    .header-right {
        order: 2;
        flex: 0 0 auto;
        gap: 10px;
    }

    .header-right,
    .btn-primary {
        width: auto;
        height: 40px;
        font-size: 13px;
        margin-bottom: 0px !important;
    }

    .mobile-toggle {
        display: flex;
    }

    .search-area {
        order: 3;
        flex: 1 0 100%;
        width: 100%;
    }

    .header-search-form input {
        height: 46px;
        font-size: 14px;
        padding: 0 55px 0 18px;
    }

    /* ---------- Collapsible main navigation ---------- */
    .main-navigation {
        display: none;
    }

    .main-navigation.open {
        display: block;
    }

    .main-navigation .header-container {
        width: 100%;
        max-width: none;
    }

    .main-navigation ul.primary-menu {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 6px 0;
    }

    /* Pills keep their rounded shape on mobile — no cut-through border-bottom
       (previously a straight line sliced across the rounded corners). */
    .main-navigation ul.primary-menu li {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }

    .main-navigation ul.primary-menu li a {
        display: block;
        width: 100%;
    }

    /* ---------- Mobile toggle animates to an X when open ---------- */
    .mobile-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mobile-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Prevent background scroll while mobile menu is open */
    body.nav-open {
        overflow: hidden;
    }

    /* ---------- Footer ---------- */
    .site-footer .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px;
    }

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

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* ============================================
   SMALL PHONE (<= 480px)
   ============================================ */
@media (max-width: 480px) {

    /* Date stays visible (just smaller) instead of display:none — hiding it
       previously removed it from the flex row entirely, which is why the
       top menu ("About Us / Contact") appeared to jump to one side. */
    .top-date {
        font-size: 11px;
    }

    .breaking-title {
        min-width: 66px;
        padding: 0 10px;
        font-size: 11px;
    }

    .logo-area img {
        max-width: 105px;
    }

    /* Subscribe button shrinks to a compact pill instead of hiding its
       label completely (a label-less circle read as "gone"). */
    .btn-primary {
        padding: 0 12px;
        height: 38px;
        font-size: 12px;
    }

    .header-right {
        gap: 8px;
    }

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

/* Language switcher: globe icon + compact spacing */
.top-menu .trp-language-switcher-container {
    display: inline-flex !important;
    align-items: center;
}

.top-menu .trp-language-switcher-container:first-of-type::before {
    content: "\f0ac";
    /* Font Awesome globe icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
}

.top-menu .trp-language-switcher-container+.trp-language-switcher-container::before {
    content: "/";
    margin: 0 6px;
    color: rgba(255, 255, 255, .5);
}

.top-menu .trp-ls-language-name {
    font-size: 14px;
}