/*
 * 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;
    }
    /* top/transform: theme_lts11_bs5 centres the logo with top:50% + translateY(-50%), which needs a fixed brand
       height — with height:auto the top resolves to 0 and the transform alone lifted the logo 40px into the top bar */
    .navbar-mainnavigation .navbar-brand-image img{
        height: 81px;
        max-height: none !important;
        width: auto;
        top: auto;
        transform: none;
    }
    /* live: 111px header = 81px logo + 15px above/below (BP16 gave 24.4px → 129px); min-height for
       Trafikofficial, whose 49px logo would leave a 79px header */
    .navbar-mainnavigation{
        padding-top: 15px;
        padding-bottom: 15px;
    }
    body:not(.menu-is-fixed) .navbar-mainnavigation{
        min-height: 111px;
    }
    body.menu-is-fixed .navbar-mainnavigation{
        --mainnavigation-nav-height: 75px;
    }
    body.menu-is-fixed .navbar-mainnavigation .navbar-brand-image img{
        height: 30px;
    }
    /* Trafikofficial (no top bar) scrolled: live 100px with the logo centred — the 75px nav-height brand left
       a 105px header with the logo at its top */
    body.menu-is-fixed .top-wrapper:not(:has(.top-container-wrapper)) .navbar-mainnavigation{
        min-height: 100px;
    }
    body.menu-is-fixed .top-wrapper:not(:has(.top-container-wrapper)) .navbar-mainnavigation .navbar-brand{
        height: auto !important;
    }
}
/* main menu at >=1440 (where live's row fits): starts 24px after the logo, 16px link padding. Narrower, live's row
   runs off the screen (Klubhuset cut at 1280), so BP16's centred 8px row is kept there on purpose.
   DCU only (the site with the top bar) — Trafikofficial's live menu is right-aligned, as BP16 already renders it */
@media (min-width: 1440px){
    .top-wrapper:has(.top-container-wrapper) .navbar-mainnavigation .navbar-collapse{
        justify-content: flex-start;
        margin-left: 24px;
    }
    body .top-wrapper:has(.top-container-wrapper) .navbar-mainnavigation .navbar-nav{
        margin-left: 0;
    }
    .navbar-mainnavigation .navbar-nav > .nav-item > .nav-link{
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* header below 992px: basesite 14's theme_lts11_bs5 forces .navbar-brand { height: 100px !important } — the BS4
   theme on live did not, so the mobile/iPad header was 131px instead of live's 70px and every page moved ~60px down */
@media screen and (max-width: 992px){
    .navbar-mainnavigation .navbar-brand{
        height: auto !important;
    }
    /* live's phone header is 70px on both sites; Trafikofficial's 24px logo left 65px */
    .navbar-mainnavigation{
        min-height: 70px;
    }
    /* logo 15px from the edge as on live (container padding 0 + brand margin 15px; BS5 gave 20px padding) */
    .navbar-mainnavigation .menu-container{
        padding-left: 0;
    }
    .navbar-mainnavigation .navbar-brand{
        margin-left: 15px;
    }
}

/* burger header up to 1199px (grid-float-breakpoint = 1200px in EXT:cyklingdanmark constants, drj 2026-11-03):
   live's tablet header is 70px with the logo centred (DCU 63x40, Trafikofficial 186x24) — BP16's 30.4px nav
   padding made it 100px */
@media (max-width: 1199.98px){
    .navbar-mainnavigation{
        padding-top: 15px;
        padding-bottom: 15px;
        min-height: 70px;
    }
    .navbar-mainnavigation .navbar-brand{
        height: auto !important;
    }
    /* the theme's top:50% + translateY(-50%) centring needs a fixed brand height (see the >=1200 block) */
    .navbar-mainnavigation .navbar-brand-image img{
        top: auto;
        transform: none;
    }
    /* DCU: the theme caps the logo at 40px only up to 992px — above it the 100px desktop logo came through */
    .top-wrapper:has(.top-container-wrapper) .navbar-mainnavigation .navbar-brand-image img{
        max-height: 40px !important; /* beats the site's own max-height:100% !important */
    }
}

/* 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: basesite 14's theme_lts11_bs5 pads #page-footer section 15px each side — live has none, so every
   footer column was 30px narrower and Trafikofficial's copyright text wrapped one line more */
#page-footer section{
    padding-left: 0;
    padding-right: 0;
}

/* 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;
    }
}
/* 3-column containers from 768px (footer + content, e.g. /discipliner/bane's committee cards): live's columns are
   1fr (min-content wins — the footer e-mail column grows to 224px at 768, bane's 151/245/260); BP16's equal
   minmax(0,1fr) thirds wrapped headings and e-mail lines differently */
@media (min-width: 768px){
    .contentcontainer[data-container-identifier="container_3_columns"]{
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .contentcontainer[data-container-identifier="container_3_columns"] > .contentcontainer-column{
        min-width: auto;
    }
}
@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.
   Live's bar is 55px: 5px margin-bottom on the list, 40px AFTER each item (navigation_extender's inline <style>
   puts it before — body raises specificity past that later sheet), 15px before the search icon (live's empty
   language-picker margin) */
.top-container-wrapper .top-container-right > ul{
    display: flex;
    margin-bottom: 5px;
}
.top-container-wrapper .top-container-right > ul > li{
    float: none;
}
@media (min-width: 769px){
    body .top-container-wrapper .top-container-right > ul > li{
        padding: 0 40px 0 0;
    }
    body .top-container-wrapper .top-container-right .search-link{
        margin-left: 15px;
    }
}

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

/* card groups (4 columns): card_extender 14 turns them into a 4-column grid, so the site's
   .card-group-element-item { flex: 1 !important } no longer applies. On live the items wrap at their min-content (~135px:
   8 in a row on desktop, 5+3 on iPad, 2 per row on phones) — that needs live's gap 0 and min-width auto (14 sets 0) */
.card-group-element.card-group-element-columns-4{
    display: flex;
    gap: 0;
}
.card-group-element.card-group-element-columns-4 .card-group-element-item{
    min-width: auto;
}

/* card groups in a column next to taller text (BMX page, iPad): BP16's flex-column .frame-inner gives the group
   flex 1 1 auto, so it grew to the 886px text column and the red captions dropped to the bottom; live: 84px */
.frame-inner > .card-group-element{
    flex: none;
}

/* card layout 2 (image cards with a red caption, BMX page): card_extender 14 makes the title 600 — on live (11) it
   only had padding-bottom, so it kept 300 weight and .page-content h3's inherit size (16px) — 20px only <=768px,
   where the site's own .card-group-element .card-title { font-size: 1.25rem } applies */
.card-group-element.card-layout-2 .card-title{
    font-weight: 300;
}
@media (min-width: 769px){
    .card-group-element.card-layout-2 .card-title{
        font-size: inherit;
    }
}

/* links in text-icon elements (official notices list, Trafikofficial's front-page boxes): basesite 14 adds
   .texticon-content a:not(.btn) { color: inherit } — live had no such rule, the links kept the red frame link colour */
/* :where keeps it at basesite's own specificity, so the front page's shortcut bar (white links, red on hover) still wins */
:where(.frame) .texticon-content a:not(.btn){
    color: var(--frame-link-color);
}

/* front-page shortcut bar: 14's .texticon is a flex column with a 20px gap — live stacks icon (64) and label (24)
   with none, so each box was 108px instead of 88 */
.frame-shortcut-bar .texticon{
    gap: 0;
}

/* tab navigation (/gaa-til-cykling, BMX page): live shows inactive tabs black on #efefef and the active one #494949
   on white; BP16's .nav-tabs makes inactive tabs red on transparent */
.tab-navigation .nav-tabs .nav-link{
    color: #000;
    background-color: #efefef;
}
.tab-navigation .nav-tabs .nav-link.active{
    color: #494949;
    background-color: #fff;
}

/* text slides in carousels (Trafikofficial /community quotes): BP16 paints the item's backend colours
   (#333 / white) through --carousel-item-background/-color; live's BP11 template never used them on text items */
.carousel-item-layout-custom.carousel-item-type-text{
    background-color: transparent;
    color: inherit;
}

/* texticon: BP16 pushes the header 8px down beside the icon and the text column shrinks to its content
   (flex item) — on live the header sits level with the icon top and the column fills the row */
/* (the 8px comes from BP16's inline <style> `.texticon-left .texticon-content :first-child`, which loads after
   this file and hits the header and its h2 — body raises specificity past it) */
body .texticon .texticon-content :first-child{
    margin-top: 0;
}
.texticon > .texticon-content{
    flex: 1 1 auto;
    min-width: 0; /* one long word grew a notice to 311px past the row edge (officielle meddelelser, phone) */
}

/* lists: BS5's reboot indents ul/ol 2rem — BS4 left the browser's 40px (om-licens link lists wrapped differently) */
ul, ol{
    padding-left: 40px;
}

/* textpic without images: live's BP11 still rendered the empty gallery item, and the 40px flex gap put the text
   40px below (above) / above (below) it; BP16 drops the empty item and the text moved up 40px */
.textpic.textpic-above:not(:has(.textpic-gallery)){
    padding-top: 40px;
}
.textpic.textpic-below:not(:has(.textpic-gallery)){
    padding-bottom: 40px;
}

/* layout 1 (1100px content column): basesite 14's BS5 port added margin 15px auto — live's is 0 auto, so every
   layout-1 element was 30px taller (Trafikofficial /to-viden has a dozen in a row) */
.frame-layout-1 > .frame-group-container > .frame-group-inner > .frame-container{
    margin-top: 0;
    margin-bottom: 0;
}

/* RTE tables: BS5 gives every cell color #000 and a white background through its table variables; BS4 cells
   inherited the text colour (#212121) and were transparent, also on grey frame backgrounds */
.table{
    --bs-table-color: inherit;
    --bs-table-bg: transparent;
}
.table > :not(caption) > * > *{
    color: inherit;
    background-color: transparent;
    padding: .75rem; /* BS4 cell padding (BS5 .5rem) — /trafik's table wrapped its links differently */
}

/* news detail: BS5's .row > * gives the text column a 20px gutter each side and stretches the Tilbage button to
   full width (width:100%, flex-shrink:0) — on live both are plain flex items in a gutterless row */
.news-single .article > .row > *{
    padding-left: 0;
    padding-right: 0;
    width: auto;
    flex-shrink: 1;
}
.news-single .article > .row > .btn{
    padding-left: 12px;
    padding-right: 12px;
}

/* .btn-default (Tilbage, Se alle nyheder): #212121 text on live, BS5 renders it #000 */
.btn-default:not(:hover):not(:focus){
    color: #212121;
}

/* Mailchimp form (/nyhedsbrev): its embedded CSS sets #mc_embed_signup { font: 14px Helvetica } — live's form
   ran at 16px (labels, checkboxes, inputs) */
body #mc_embed_signup{
    font-size: 16px;
}
/* the form's 20px bottom margin collapsed out of the block frame on live; BP16's flex .frame-inner keeps it */
#mc_embed_signup #mc-embedded-subscribe-form{
    margin-bottom: 0;
}

/* BS4's .text-justify is gone in BS5 — RTE text marked justified fell back to left-aligned on both sites */
.text-justify{
    text-align: justify !important;
}

/* <small> (footer "Cookie deklaration" etc.): BS4 80%, BS5 .875em */
small, .small{
    font-size: 80%;
}

/* 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 */
}