/* GAP header-only responsive fixes.
   Scope is intentionally limited to the existing header and testing notice;
   no content, links, branding, or functionality are changed. */

#tg-header,
#tg-header * {
    box-sizing: border-box;
}

.gap-testing-notice {
    max-width: 100%;
}

@media (max-width: 991px) {
    /* Keep the utility links readable without allowing them to overflow. */
    #tg-header .tg-topbar .container,
    #tg-header .tg-topbar .col-xs-12,
    #tg-header .tg-topbar .row {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    #tg-header .tg-topbar .col-xs-12 {
        padding-left: 10px;
        padding-right: 10px;
    }

    #tg-header .tg-topbar .tg-leftbox {
        display: none;
    }

    #tg-header .tg-topbar .tg-rightbox {
        float: none;
        width: 100%;
        max-width: 100%;
        padding: 0;
        text-align: center;
    }

    #tg-header .tg-topbar .tg-addnav {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 7px 0;
        text-align: center;
    }

    #tg-header .tg-topbar .tg-addnav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 2px 0;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #tg-header .tg-topbar .tg-addnav ul li {
        float: none;
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        padding: 0 7px;
        line-height: 1.65;
    }

    #tg-header .tg-topbar .tg-addnav ul li a {
        display: inline-block;
        font-size: 13px;
        line-height: 1.65;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Put the existing logo and Bootstrap menu toggle on one compact row. */
    #tg-header .tg-navigationarea {
        position: relative;
        z-index: 10040;
        float: none;
        padding: 8px 0;
    }

    #tg-header .tg-navigationarea > .container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    #tg-header .tg-navigationarea > .container > .row {
        display: block;
        margin-left: 0;
        margin-right: 0;
    }

    #tg-header .tg-navigationarea > .container > .row > .col-xs-12 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
    }

    #tg-header .tg-navigationarea .tg-logo {
        float: none;
        display: block;
        flex: 0 1 210px;
        width: min(62vw, 210px);
        max-width: calc(100% - 66px);
        min-width: 0;
        margin: 0;
        line-height: 0;
    }

    #tg-header .tg-navigationarea .tg-logo a {
        display: block;
        width: 100%;
    }

    #tg-header .tg-navigationarea .tg-logo a img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 64px;
        object-fit: contain;
        object-position: left center;
        padding: 0;
    }

    #tg-header .tg-navigationarea .tg-navplusdropdown {
        flex: 0 0 auto;
        width: auto;
        min-width: 44px;
        margin: 0;
        padding: 0;
        text-align: right;
    }

    #tg-header .tg-navigationarea .tg-nav {
        float: none;
        width: auto;
        margin: 0;
        padding: 0;
        line-height: 1;
        text-align: right;
    }

    #tg-header .tg-navigationarea .navbar-header {
        float: none;
        display: block;
        margin: 0;
    }

    /* Bootstrap 3 normally switches to its desktop navbar at 768px.
       Keep the existing collapse/toggle interaction available on tablets too. */
    #tg-header .tg-navigationarea .navbar-toggle {
        display: inline-flex !important;
    }

    #tg-header .tg-navigationarea .navbar-collapse.collapse:not(.in) {
        display: none !important;
    }

    #tg-header .tg-navigationarea .navbar-collapse.collapse.in {
        display: block !important;
    }

    #tg-header .tg-navigationarea .navbar-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        float: none;
        width: 46px;
        height: 42px;
        margin: 0;
        padding: 9px 10px;
        border: 1px solid #ed0878;
        border-radius: 0;
        background: #ed0878;
    }

    #tg-header .tg-navigationarea .navbar-toggle:hover,
    #tg-header .tg-navigationarea .navbar-toggle:focus {
        background: #d8076c;
        border-color: #d8076c;
    }

    #tg-header .tg-navigationarea .navbar-toggle .icon-bar {
        display: block;
        width: 24px;
        height: 2px;
        border-radius: 1px;
        background: #fff;
    }

    #tg-header .tg-navigationarea .navbar-toggle .icon-bar + .icon-bar {
        margin-top: 5px;
    }

    #tg-header .tg-navigationarea .tg-navigation {
        /* Left-align dropdown to the header row so it stays inside mobile/tablet screens. */
        position: absolute;
        top: calc(100% + 8px);
        right: auto !important;
        left: 10px !important;
        width: min(340px, calc(100vw - 20px));
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 150px);
        overflow-x: hidden;
        overflow-y: auto;
        margin: 0;
        padding: 5px 0;
        border: 1px solid #eee;
        background: #fff !important;
        box-shadow: 0 8px 24px rgba(25, 30, 45, .14);
        text-align: left;
        z-index: 10050;
    }

    #tg-header .tg-navigationarea .tg-navigation > ul {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: left;
    }

    #tg-header .tg-navigationarea .tg-navigation > ul > li::before,
    #tg-header .tg-navigationarea .tg-navigation > ul > li::after {
        display: none !important;
        content: none !important;
    }

    #tg-header .tg-navigationarea .tg-navigation > ul > li {
        float: none;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #tg-header .tg-navigationarea .tg-navigation > ul > li > a {
        display: block;
        width: 100%;
        min-height: 44px;
        padding: 11px 16px;
        line-height: 22px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Prevent the moving notice from widening the page on narrow screens. */
    .gap-testing-notice {
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
        font-size: 12px;
        line-height: 1.45;
        padding: 8px 0;
    }
}

@media (max-width: 360px) {
    #tg-header .tg-topbar .tg-addnav ul li {
        padding-left: 5px;
        padding-right: 5px;
    }

    #tg-header .tg-topbar .tg-addnav ul li a {
        font-size: 12px;
    }

    #tg-header .tg-navigationarea > .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    #tg-header .tg-navigationarea .tg-logo {
        width: min(60vw, 185px);
        max-width: calc(100% - 58px);
    }

    #tg-header .tg-navigationarea .navbar-toggle {
        width: 42px;
        height: 40px;
    }
}


/* v4 fix: anchor the collapsed menu to the full-width header column.
   Previously the nearest positioned ancestor could be the right-aligned
   navigation/toggle, shifting the dropdown to the right edge on mobile/tablet. */
@media (max-width: 991px) {
    #tg-header .tg-navigationarea > .container > .row > .col-xs-12 {
        position: relative;
    }

    #tg-header .tg-navigationarea .tg-navplusdropdown,
    #tg-header .tg-navigationarea .tg-nav,
    #tg-header .tg-navigationarea .navbar-header {
        position: static;
    }

    #tg-header .tg-navigationarea .tg-navigation {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: auto !important;
        width: min(340px, calc(100vw - 30px)) !important;
        max-width: calc(100vw - 30px) !important;
        box-sizing: border-box;
        margin: 0 !important;
        z-index: 10050 !important;
    }
}


/* v5: remove the extra vertical gap above the logo/menu row on mobile and tablet.
   Keep all existing header links and controls; only tighten vertical spacing. */
@media (max-width: 991px) {
    #tg-header .tg-topbar {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
    }

    #tg-header .tg-topbar > .container,
    #tg-header .tg-topbar > .container > .col-xs-12,
    #tg-header .tg-topbar > .container > .col-xs-12 > .row {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
    }

    #tg-header .tg-navigationarea {
        margin-top: 0 !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    #tg-header .tg-navigationarea > .container,
    #tg-header .tg-navigationarea > .container > .row,
    #tg-header .tg-navigationarea > .container > .row > .col-xs-12 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    #tg-header .tg-navigationarea .tg-logo {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    #tg-header .tg-navigationarea .navbar-header,
    #tg-header .tg-navigationarea .tg-nav,
    #tg-header .tg-navigationarea .tg-navplusdropdown {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    #tg-header .tg-navigationarea {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    #tg-header .tg-navigationarea > .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #tg-header .tg-navigationarea > .container > .row > .col-xs-12 {
        min-height: 48px;
    }

    #tg-header .tg-navigationarea .tg-logo a img {
        max-height: 52px;
    }
}


/* v6 targeted correction based on the latest mobile/tablet screenshots.
   The actual markup is .container > .col-xs-12 > .row, so target the real
   structure and avoid positioning the dropdown against the whole header row. */

/* Keep the existing utility links visible on a compact pink bar instead of
   leaving a blank white strip when the legacy header styles collapse. */
@media (max-width: 767px) {
    #tg-header .tg-topbar {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        background: #ed0878 !important;
        border-bottom: 1px solid #d8076c !important;
    }

    #tg-header .tg-topbar > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
    }

    #tg-header .tg-topbar > .container > .col-xs-12 {
        float: none !important;
        width: 100% !important;
        padding: 0 !important;
    }

    #tg-header .tg-topbar > .container > .col-xs-12 > .row {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #tg-header .tg-topbar .tg-rightbox,
    #tg-header .tg-topbar .tg-addnav {
        display: block !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 3px 0 !important;
        text-align: center !important;
        background: transparent !important;
    }

    #tg-header .tg-topbar .tg-addnav ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    #tg-header .tg-topbar .tg-addnav ul li {
        display: inline-flex !important;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 5px !important;
        line-height: 1.5 !important;
        border: 0 !important;
    }

    #tg-header .tg-topbar .tg-addnav ul li a {
        display: inline-block !important;
        padding: 1px 0 !important;
        color: #fff !important;
        font-size: 11px !important;
        line-height: 1.5 !important;
        white-space: nowrap !important;
    }
}

/* Keep the logo row tight: remove only excess vertical padding, not content. */
@media (max-width: 767px) {
    #tg-header .tg-navigationarea {
        margin: 0 !important;
        padding: 2px 0 !important;
    }

    #tg-header .tg-navigationarea > .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #tg-header .tg-navigationarea > .container > .row {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    #tg-header .tg-navigationarea > .container > .row > .col-xs-12 {
        min-height: 48px !important;
    }
}

/* Position the collapsed menu relative to the hamburger itself.
   This makes the panel open directly below the menu button on both mobile
   and tablet, while its right edge remains inside the viewport. */
@media (max-width: 991px) {
    #tg-header .tg-navigationarea > .container > .row > .col-xs-12 {
        position: relative !important;
    }

    #tg-header .tg-navigationarea .tg-navplusdropdown {
        position: static !important;
    }

    #tg-header .tg-navigationarea .tg-nav {
        position: relative !important;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
    }

    #tg-header .tg-navigationarea .navbar-header {
        position: relative !important;
    }

    #tg-header .tg-navigationarea #tg-navigation.tg-navigation {
        position: absolute !important;
        top: calc(100% + 4px) !important;
        right: 0 !important;
        left: auto !important;
        width: min(290px, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 125px) !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        z-index: 10050 !important;
        box-sizing: border-box !important;
    }
}


/* v7 corrective override: preserve the original pink utility navigation bar.
   The yellow testing notice is a separate element and remains untouched. */
@media (max-width: 991px) {
    #tg-header .tg-topbar {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: #ed0878 !important;
    }

    #tg-header .tg-topbar .tg-rightbox,
    #tg-header .tg-topbar nav.tg-addnav {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    #tg-header .tg-topbar nav.tg-addnav ul,
    #tg-header .tg-topbar nav.tg-addnav ul li,
    #tg-header .tg-topbar nav.tg-addnav ul li a {
        visibility: visible !important;
        opacity: 1 !important;
    }

    #tg-header .tg-topbar nav.tg-addnav ul li a {
        color: #fff !important;
    }
}