/*
 * lts14-compat.css — keep the LTS 11 look of aspro.dk + vandværks-sites on TYPO3 14 (bootstrap_package 16, basesite 14).
 * Built 2026-10-08 from update-site/templates/lts14-compat.css; only the blocks ab-styleprobe.sh showed a difference for
 * (live A = BP 12 / Bootstrap 4, B = BP 16 / Bootstrap 5). Included after the site CSS from every root sys_template
 * (replay/14-04-post-manual-include-compat-css.sql). Never edit the customer's fileadmin/Arkiv/Css/style.css instead.
 */

/* container: Bootstrap 5 adds the xxl breakpoint (1320px at >=1400); Bootstrap 4 stopped at 1140 — h1 1016 → 1196 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;
    }
}

/* main menu: BS4 .navbar-light colours (links rgba(0,0,0,.5), active/hover/brand .9) — navigation_extender 14 sets
   #mainnavigation .navbar-nav .nav-link to #010101, so the id selector is needed. Desktop only: the burger menu
   (<992) has its own colour and was not different */
/* brand: .5 in the collapsed (<992) header, .9 on desktop — measured on live */
.navbar-mainnavigation .navbar-brand{
    color: rgba(0,0,0,.5);
}
@media (min-width: 992px){
    .navbar-mainnavigation .navbar-brand{
        color: rgba(0,0,0,.9);
    }
}
.navbar-mainnavigation .nav-link{
    font-size: inherit;
    padding-left: 1rem;
    padding-right: 1rem;
}
/* !important: navigation_extender 14 theme.scss sets #mainnavigation .navbar-nav .nav-link { color: $menuTextColor !important } */
@media (min-width: 992px){
    #mainnavigation .navbar-nav .nav-link{
        color: rgba(0,0,0,.5) !important;
    }
    #mainnavigation .navbar-nav .nav-link:hover,
    #mainnavigation .navbar-nav .nav-link:focus,
    #mainnavigation .navbar-nav .nav-item.active > .nav-link{
        color: rgba(0,0,0,.9) !important;
    }
}

/* active menu item: 2px primary bar under the label (nav-link::before on 11) — BP16 keeps the ::before at height 0 */
@media (min-width: 992px){
    .navbar-mainnavigation .nav-item.active > .nav-link{
        position: relative;
    }
    .navbar-mainnavigation .nav-item.active > .nav-link::before{
        content: "";
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: 4px;
        height: 2px;
        background-color: var(--bs-primary, #0b3758);
    }
}

/* top bar on mobile: .top-container was 40px on 11 (wrapper 56px), 10px on 14 — the whole page sat 30px higher */
@media (max-width: 991.98px){
    .top-container-wrapper .top-container.container{
        min-height: 40px;
    }
}

/* header: BP 12 used fixed brand heights 70/100/110 — brand 111 → 39 px on B */
.navbar-mainnavigation{
    padding-top: 0;
    padding-bottom: 0;
}
.navbar-mainnavigation .navbar-brand{
    display: flex;
    align-items: center;
    height: 70px;
    margin-right: 40px;
}
@media (min-width: 992px){
    .navbar-mainnavigation .navbar-brand{ height: 100px; }
}
@media (min-width: 1200px){
    .navbar-mainnavigation .navbar-brand{ height: 110px; }
}

/* buttons: btn-default text #212121 on 11, #000 on 14 ("Læs mere", "Se mere") */
.btn-default{
    color: #212121;
}

/* card groups: idefa_bootstrap_card_extender 14 turns .card-group-element-columns-N into a grid of N equal columns,
   so 3 cards in a 4-column group sit left and align-center does nothing. On 11 the group was flex and a short row
   was centred — back to BP16's own flex layout (its item width formula uses --cardgroup-columns) */
.card-group-element[class*="card-group-element-columns-"]{
    display: flex;
}
.card-group-element.card-group-element-align-center{
    justify-content: center;
}
/* on 11 items had 10px side padding and no gap; BP16's width formula with its 16px --cardgroup-gap gives exactly
   live's 242px at 1280 — so keep the variable for the width and set the real gap to 0 */
.card-group-element[class*="card-group-element-columns-"]{
    gap: 0;
}
.card-group-element[class*="card-group-element-columns-"] > .card-group-element-item{
    box-sizing: border-box;
    width: calc((100% / var(--cardgroup-columns)) - (16px * (var(--cardgroup-columns) - 1)) / var(--cardgroup-columns));
    padding: 10px; /* all four sides on 11 — top/bottom give the row spacing (measured: 328px items, rows 195px apart) */
}

/* card text inside the card link: inherited the link colour (primary #0b3758) on 11; BP16 renders it in body text #313131 */
.card-group-element .card-body > a .card-text{
    color: var(--bs-primary, #0b3758);
}

/* card titles: idefa_bootstrap_card_extender 14 sets them to 600 (design change); live is 300 / 21.6px */
.card-group-element.card-layout-2 .card-title{
    font-weight: 300;
}
@media (min-width: 1200px){
    .card-group-element.card-layout-2 .card-title{
        font-size: 1.35rem;
    }
}

/* footer: basesite 12+ limits gallery images to max-content; on 11 the logos filled their column (logo 353 → 175 px) */
#page-footer .gallery-item img, #page-footer .gallery-item picture{
    max-width: 100%;
}