/*
 * lts14-compat.css — cyklingdanmark.dk / trafikofficial.dk: keep the LTS 11 look on TYPO3 14 (bootstrap_package 16, basesite 14).
 * From update-site/templates/lts14-compat.css; only blocks the style probe (ab-styleprobe.sh vs live) showed are kept.
 * Included by EXT:cyklingdanmark/Configuration/TypoScript/setup.typoscript (page.includeCSS.lts14compat, after theme).
 * GO-LIVE FILE (fileadmin is not in git) — and re-index it in FAL after every edit (TYPO3 14 cache-busts with the sha1).
 */

/* header (>1200px, where navigation_extender's scroll effect runs): live 127x80 logo in an 88px nav row, and
   ~48x30 in a 75px row once body.menu-is-fixed. BP16 derives both from --mainnavigation-nav-height (62x39 at the
   top, the scrolled state never shrank) and the site's own max-height:100% !important beats the JS inline sizes */
@media (min-width: 1200px){
    .navbar-mainnavigation{
        --mainnavigation-nav-height: 88px;
    }
    .navbar-mainnavigation .navbar-brand{
        height: auto;
    }
    .navbar-mainnavigation .navbar-brand-image img{
        height: 80px;
        max-height: none !important;
        width: auto;
    }
    body.menu-is-fixed .navbar-mainnavigation{
        --mainnavigation-nav-height: 75px;
    }
    body.menu-is-fixed .navbar-mainnavigation .navbar-brand-image img{
        height: 30px;
    }
}

/* container: BS5 xxl (1320 at >=1400) — BS4 stopped at 1140 (h2/sponsor logos 1016 → 1196 wide at 1920) */
@media (min-width: 1400px){
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl,
    .frame-container-default,
    .frame-layout-embedded > .frame-group-container{
        max-width: 1140px;
    }
}

/* footer on phones: live stacks the 3 columns and shows the social icons two per row (156px) */
@media (max-width: 767.98px){
    #page-footer .contentcontainer[data-container-identifier="container_3_columns"]{
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 575.98px){
    #page-footer .gallery-item-size-4{
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* footer images (social icons): basesite 12+ caps them at max-content, and 14's srcset adds a 2x candidate
   that halves the intrinsic size (68px) — on 11 they filled their column (112px desktop / 156px phone) */
#page-footer .gallery-item img, #page-footer .gallery-item picture{
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* main menu: 14 adds a gap between items and a dropdown caret (::after) — 11 had neither */
.navbar-mainnavigation .navbar-nav{
    gap: 0;
}
.navbar-mainnavigation .dropdown-toggle::after{
    display: none;
}

/* top bar menu: navigation_extender 14 floats the items right → reversed order, search icon on top of the last one */
.top-container-wrapper .top-container-right > ul{
    display: flex;
    margin-bottom: 0;
}
.top-container-wrapper .top-container-right > ul > li{
    float: none;
}

/* carousel indicators + prev/next arrows: hidden on live */
.carousel-indicators{
    display: none;
}
.carousel .carousel-control{
    opacity: 0;
}

/* news list titles: 16px on live (site SCSS says 22px, but live's cascade ends at 16px) */
.news-list-view h3,
.news-list-view h3 a{
    font-size: 16px;
}

/* OneTrust "Cookie Settings" in the footer: live keeps the site's dark button at its own width;
   on 14 OneTrust's injected rule wins (same specificity, loaded later) and BP16 stretches it */
#page-footer #ot-sdk-btn.ot-sdk-show-settings{
    background-color: #122F3B !important;
    border-color: #122F3B !important;
    color: #fff !important;
    width: auto !important;
    align-self: flex-start; /* parent .frame-inner is a flex column on 14 — the button was stretched to 473px */
}