/*
 * cn-lts14-compat.css — make the TYPO3 14 copy (idefa_basesite + navigation_extender menu-layout-4 +
 * barcelona_elements) look like the barcelona_theme LTS 10 live site. Measured against www.cn-maskinfabrik.dk /
 * www.cn-energy.dk with /ab-compare. Included after all other CSS (replay 14-42).
 */

/* ---------- header: logo row on white, dark-blue menu bar, content 1170 wide ---------- */
.page-header-container{
    max-width: none;
    padding: 0;
}
.page-header-top{
    max-width: 1170px;
    margin: 0 auto;
    padding: 20px 0 18px;
}
/* service links above the logo (from the special page, partial override MainLayout4.html) */
.cn-header-topmenu{
    max-width: 1170px;
    margin: 0 auto;
    padding-top: 18px;
    width: 100%;
}
.cn-topmenu{
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
}
.cn-topmenu li + li::before{
    content: "|";
    color: #c8c8c8;
    margin: 0 9px;
}
.cn-topmenu a{
    color: #00375e;
    font-weight: 500;
    text-decoration: none;
}
.cn-topmenu a:hover{
    text-decoration: underline;
}
.cn-header-address{
    text-align: right;
    font-size: 16px;
    line-height: 19px;
    color: #1d1d1b;
}
.cn-header-address p{
    margin: 0;
}
.page-header-top-left img{
    max-height: 56px;
    width: auto;
}
.page-header-bottom{
    background-color: #00375e;
}
.page-header-bottom-content{
    max-width: 1170px;
    margin: 0 auto;
    padding: 0;
}
#mainnavigation .navbar-nav{
    padding-left: 0 !important;
    margin-left: 0 !important;
}
/* active top item: barcelona's light grey-blue bar */
#mainnavigation .navbar-nav > .nav-item > .nav-link.active{
    background-color: #a3b1be;
}
#mainnavigation .navbar-nav .nav-link::before,
#mainnavigation .navbar-nav .nav-link.active .nav-link-text{
    display: inline;
    border: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
#mainnavigation .navbar-nav .nav-link::before{
    display: none !important;
}
@media (min-width: 992px){
    #mainnavigation .navbar-nav{
        gap: 0;
        flex-wrap: nowrap;
        justify-content: flex-start !important;
    }
    .page-header-bottom,
    .page-header-bottom-content,
    #mainnavigation{
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    #mainnavigation .navbar-nav .nav-link{
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        white-space: nowrap;
        padding: 15px 12px !important;
        line-height: 16px !important;
    }
    #mainnavigation .navbar-nav .nav-link .nav-link-text{
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 16px !important;
        letter-spacing: 0;
    }
    /* nav_layout4.scss pads every .nav-item 15px top/bottom (bar 76px; live 46px) */
    #mainnavigation .navbar-nav > .nav-item{
        padding-top: 0;
        padding-bottom: 0;
    }
    .nav-style-simple:hover > .dropdown-menu{
        margin-top: 0;
    }
    #mainnavigation .navbar-nav .nav-link:hover,
    #mainnavigation .navbar-nav .nav-link:focus{
        color: #a3b1be !important;
    }
}

/* inverted (small, white) logo only in the compact mobile bar */
.page-header-top-left .navbar-brand-logo-inverted{
    display: none !important;
}

/* ---------- below 992px (BS3 md): barcelona's compact header — dark-blue bar, small white logo, burger right ---------- */
@media (max-width: 991.98px){
    #page-header,
    #page-header.navbar,
    .page-header-top{
        background-color: #00375e !important;
    }
    .page-header-top-left .navbar-brand{
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .cn-header-topmenu,
    .page-header-top-right{
        display: none !important;
    }
    .page-header-container{
        position: relative;
    }
    .page-header-top{
        padding: 7px 15px !important;
    }
    .page-header-top-left .navbar-brand-logo-normal{
        display: none !important;
    }
    .page-header-top-left .navbar-brand-logo-inverted{
        display: block !important;
        max-height: 40px;
        width: auto;
        height: 40px;
    }
    .page-header-bottom{
        background-color: transparent;
    }
    .page-header-bottom-content .navbar-toggler{
        position: absolute;
        top: 10px;
        right: 15px;
        border: 0;
        padding: 6px;
    }
    .page-header-bottom-content .navbar-toggler{
        color: #ffffff !important;
        filter: brightness(0) invert(1);
    }
    #page-content > .frame-type-carousel_fullscreen:first-child{
        margin-top: 0 !important;
    }
    .carousel-fullscreen .carousel-item.carousel-item-type-image{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* the opened menu: a full-width list right under the 54px bar (navigation_extender makes it a fixed,
       centred 90% overlay) */
    #mainnavigation.show,
    #mainnavigation.collapsing{
        position: absolute !important;
        top: 54px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 54px);
        overflow-y: auto;
        transform: none !important;
        background-color: #00375e;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        z-index: 10000;
    }
    #mainnavigation .navbar-nav{
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    #mainnavigation .nav-link-indicator{
        filter: brightness(0) invert(1);
    }
    #mainnavigation .navbar-nav > .nav-item{
        padding: 0 !important;
    }
    #mainnavigation .navbar-nav .nav-link,
    #mainnavigation .navbar-nav .nav-link .nav-link-text{
        color: #ffffff !important;
        text-transform: uppercase;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 22px !important;
    }
    #mainnavigation .navbar-nav .nav-link{
        padding: 12px 13px !important;
    }
    /* columns stack below 992 like BS3 col-md-* did */
    #page-content [class*="frame-type-barcelonaelements-"] .row > [class*="col-md-"],
    #page-footer .cn-footer-row > [class*="col-md-"]{
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---------- hero: barcelona's full-width image slider (owl → carousel_fullscreen, item type image) ---------- */
#page-content > .frame-type-carousel_fullscreen:first-child{
    margin-top: 9px !important;
    padding-top: 0 !important;
}
#page-content > .frame-type-carousel_fullscreen:first-child .frame-container,
#page-content > .frame-type-carousel_fullscreen:first-child .frame-inner{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}
.carousel-fullscreen .carousel-indicators{
    display: none;
}
#page-content > .frame-type-carousel_fullscreen:first-child .frame-container,
#page-content > .frame-type-carousel_fullscreen:first-child .frame-group-container{
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
.carousel-fullscreen .carousel-item.carousel-item-type-image{
    background-color: transparent !important;
    min-height: 0 !important;
    height: auto !important;
}
.carousel-fullscreen .carousel-item-type-image .carousel-content,
.carousel-fullscreen .carousel-item-type-image .carousel-content-inner{
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
}
.carousel-fullscreen .carousel-item-type-image .carousel-content,
.carousel-fullscreen .carousel-item-type-image .carousel-content-inner{
    max-width: none !important;
    width: 100%;
}
.carousel-fullscreen .carousel-item-type-image .carousel-image,
.carousel-fullscreen .carousel-item-type-image .carousel-image picture{
    display: block;
    width: 100%;
    max-width: none !important;
}
.carousel-fullscreen .carousel-item-type-image .carousel-image img{
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    /* barcelona's owl slider had a fixed 1140:319 frame and cropped taller images (CN Energy) */
    aspect-ratio: 1140 / 319;
    object-fit: cover;
    object-position: center;
}

/* ---------- parallax hero: barcelona's "featured image" (parellex_image → carousel_fullscreen with a header and
   one image item, e.g. /landbrug/traktorer). Live: viewport-high image, page title centred on a dark veil, header
   laid transparently over it with the white logo ---------- */
#page-content > .frame-type-carousel_fullscreen:first-child:has(.frame-header + .carousel .carousel-item:only-child){
    margin-top: 0 !important;
}
#page-content > .frame-type-carousel_fullscreen:first-child:has(.frame-header + .carousel .carousel-item:only-child) .frame-inner{
    position: relative;
}
#page-content > .frame-type-carousel_fullscreen:first-child:has(.frame-header + .carousel .carousel-item:only-child) .frame-header{
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    margin: 0;
    text-align: center;
}
#page-content > .frame-type-carousel_fullscreen:first-child:has(.frame-header + .carousel .carousel-item:only-child) .frame-header .element-header{
    color: #ffffff !important;
    text-transform: none !important;
    font-size: 36px !important;
    font-weight: 600 !important;
    line-height: 1.33 !important;
    margin: 0;
}
#page-content > .frame-type-carousel_fullscreen:first-child:has(.frame-header + .carousel .carousel-item:only-child) .carousel-item{
    position: relative;
}
#page-content > .frame-type-carousel_fullscreen:first-child:has(.frame-header + .carousel .carousel-item:only-child) .carousel-item::after{
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}
#page-content > .frame-type-carousel_fullscreen:first-child:has(.frame-header + .carousel .carousel-item:only-child) .carousel-image img{
    aspect-ratio: auto;
    height: 100vh !important;
}
body:has(#page-content > .frame-type-carousel_fullscreen:first-child .frame-header + .carousel .carousel-item:only-child) #page-header{
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}
/* the header's height is reserved as padding on #page-content — the hero goes under the header instead */
body:has(#page-content > .frame-type-carousel_fullscreen:first-child .frame-header + .carousel .carousel-item:only-child) #page-content{
    padding-top: 0 !important;
}
@media (min-width: 992px){
    body:has(#page-content > .frame-type-carousel_fullscreen:first-child .frame-header + .carousel .carousel-item:only-child) #page-header,
    body:has(#page-content > .frame-type-carousel_fullscreen:first-child .frame-header + .carousel .carousel-item:only-child) .page-header-top{
        background-color: transparent !important;
    }
    body:has(#page-content > .frame-type-carousel_fullscreen:first-child .frame-header + .carousel .carousel-item:only-child) .cn-topmenu a,
    body:has(#page-content > .frame-type-carousel_fullscreen:first-child .frame-header + .carousel .carousel-item:only-child) .cn-topmenu li{
        color: #ffffff !important;
    }
    body:has(#page-content > .frame-type-carousel_fullscreen:first-child .frame-header + .carousel .carousel-item:only-child) .page-header-top-right{
        display: none !important;
    }
    /* live shows the full logo in white here; the inverted file is barcelona's small "CN" logo */
    body:has(#page-content > .frame-type-carousel_fullscreen:first-child .frame-header + .carousel .carousel-item:only-child) .page-header-top-left .navbar-brand-logo-normal{
        filter: brightness(0) invert(1);
    }
}
@media (max-width: 991.98px){
    body:has(#page-content > .frame-type-carousel_fullscreen:first-child .frame-header + .carousel .carousel-item:only-child) #page-header,
    body:has(#page-content > .frame-type-carousel_fullscreen:first-child .frame-header + .carousel .carousel-item:only-child) .page-header-top{
        background-color: rgba(0, 55, 94, 0.85) !important;
    }
    #page-content > .frame-type-carousel_fullscreen:first-child:has(.frame-header + .carousel .carousel-item:only-child) .frame-header{
        width: 80%;
    }
    #page-content > .frame-type-carousel_fullscreen:first-child:has(.frame-header + .carousel .carousel-item:only-child) .frame-header .element-header{
        font-size: 26px !important;
    }
}

/* ---------- content width: BS3 container 1170 (1140 content) like live ---------- */
/* barcelona_elements' page template wraps content in .container.single-container (1140 incl. 20px padding = 1100) */
.container.single-container{
    max-width: 1170px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}
/* first element sits 29px under the menu bar on live (container 30px + bp frame 42px here) */
.container.single-container{
    padding-top: 29px !important;
}
.single-container .post-content > .frame:first-child{
    padding-top: 0 !important;
}
.single-container .frame-container-default{
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.regular-posts .card-img-top,
.regular-posts .card-img-top img{
    border-radius: 0 !important;
}
[class*="frame-type-barcelonaelements-"] .row{
    --bs-gutter-x: 30px;
}

/* full-width page template (product pages): content sits in a 1cols container with its own .container */
.full-width-layout{
    padding-top: 29px;
}
.full-width-layout .frame-container-default{
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.full-width-layout .container{
    max-width: 1170px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.full-width-layout #main > .frame:first-child{
    padding-top: 0 !important;
}
/* bp 16 frames pad every element 40px on top; barcelona's headers sat at the frame's top edge */
#page-content .frame,
#page-footer .frame{
    padding-top: 0 !important;
}

/* ---------- typography: barcelona's page headings and body text ---------- */
#page-content .frame-header .element-header{
    font-size: 24px;
    font-weight: 700;
    line-height: 33.6px;
    text-transform: uppercase;
    color: #010101;
    margin-bottom: 16px;
}
/* header elements that only carry a subheader (CN Energy product pages) looked like a page heading on live */
#page-content .frame-type-header .frame-header .element-subheader{
    font-size: 24px;
    font-weight: 700;
    line-height: 33.6px;
    text-transform: uppercase;
    color: #010101;
    margin-bottom: 16px;
}
#page-content h4 a,
#page-content h4 a:hover{
    color: #010101;
    font-size: 16px;
}
#page-content .frame-header h3.element-header,
#page-content .frame-header h4.element-header{
    font-size: 18px;
    line-height: 25px;
}
#page-content p{
    font-size: 14px;
    line-height: 25.2px;
    color: #313131;
}
#page-content .full-width-layout p{
    font-size: 16px;
    line-height: 28.8px;
    color: #010101;
}
#page-content li{
    font-size: 14px;
    line-height: 21.7px;
    color: #313131;
}

/* tabs (bp 16 nav-tabs): barcelona showed them as small uppercase buttons, the active one dark blue */
#page-content .nav-tabs{
    border-bottom: 0;
    gap: 2px;
    margin-bottom: 25px;
}
#page-content .nav-tabs .nav-link{
    border: 0 !important;
    border-radius: 0;
    padding: 5px 25px;
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
    color: #313131;
    background: transparent;
}
#page-content .nav-tabs .nav-link.active{
    background-color: #00375e;
    color: #ffffff;
}

/* ---------- barcelona posts (content block bootstrap_package_post): flat, like live's .post-summary ---------- */
/* posts with background "light": a bordered box with a faint gradient on live, not a grey frame */
#page-content .frame-type-bootstrap_package_post.frame-background-light{
    background: transparent !important;
    padding: 0 !important;
}
#page-content .regular-posts.bg-light{
    background: transparent !important;
}
#page-content .regular-posts.bg-light .card{
    border: 1px solid #dddddd;
    background: linear-gradient(#ffffff, #f2f2f2);
}
#page-content .regular-posts.bg-light .card-body{
    padding: 12px 16px;
}
#page-content .regular-posts.bg-light h1.card-title{
    margin-bottom: 0;
}
.regular-posts h1.card-title{
    font-size: 24px;
    line-height: 31.92px;
    margin-bottom: 15px;
}
.regular-posts .card{
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.regular-posts .card-img-top img{
    width: 100%;
    height: auto;
    border-radius: 0;
}
.regular-posts .card-body{
    padding: 18px 0 0;
}
.regular-posts .card-title{
    color: #00375e;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 18px;
}
.regular-posts .card-body p{
    font-size: 14px;
    line-height: 23.1px;
    color: #333333;
}
/* inline buttons in body text: <a class="btn-primary"> without .btn (BS3 styled them, BS5 does not) */
.frame a.btn-primary:not(.btn){
    display: inline-block;
    padding: 6px 12px;
    background-color: #585860;
    color: #ffffff;
    font-size: 16px;
    line-height: 25px;
    text-decoration: none;
}
.frame a.btn-primary:not(.btn):hover{
    background-color: #3f3f45;
    color: #ffffff;
}
/* the editors' buttons are <a class="btn-block btn-primary"> without .btn — BS3 styled .btn-block on its own */
.regular-posts a.btn-block,
.frame a.btn-block{
    display: block;
    width: 100%;
    padding: 7px 12px;
    background-color: #585860;
    color: #ffffff;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    text-decoration: none;
}
.regular-posts a.btn-block:hover,
.frame a.btn-block:hover{
    background-color: #3f3f45;
    color: #ffffff;
}

/* ---------- footer: three columns (layout override), barcelona's headings with a rule after them ---------- */
#page-footer .footer-container{
    max-width: 1170px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#page-footer .cn-footer-row{
    --bs-gutter-x: 30px;
}
#page-footer .frame-container-default{
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#page-footer .cn-footer-col .element-header{
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 25px;
}
#page-footer .cn-footer-col .element-header::after{
    content: "";
    flex: 1;
    border-top: 3px solid #ffffff;
}
#page-footer .cn-footer-col,
#page-footer .cn-footer-col p{
    font-size: 16px;
    line-height: 29px;
    color: #ffffff;
}
#page-footer .cn-footer-col a,
#page-footer .cn-footer-col p a{
    color: #868686 !important;
}
/* footer images (map, icons): bp 16 sizes gallery items from the image width settings — let them take their own size */
#page-footer .frame-type-image .gallery-row,
#page-footer .frame-type-image .gallery-item,
#page-footer .frame-type-image figure{
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}
#page-footer .frame-type-image img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}
/* Facebook / Instagram icons (two images in a 2-column container) */
#page-footer .frame-type-barcelonaelements-2cols .gallery-item img{
    width: 80px !important;
    max-width: 80px !important;
}

/* ---------- galleries (barcelona image_gallary → gallery): barcelona always showed 4 square tiles per row ---------- */
@media (min-width: 768px){
    #page-content .frame-type-gallery .gallery-row{
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin: 0;
    }
    #page-content .frame-type-gallery .gallery-item{
        flex: 0 0 calc((100% - 12px) / 4) !important;
        max-width: calc((100% - 12px) / 4) !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}
#page-content .frame-type-gallery .gallery-item img{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* ---------- barcelona containers: gridelements never rendered the grid's own header ---------- */
[class*="frame-type-barcelonaelements-"] > .frame-group-container > .frame-group-inner > .frame-container > .frame-inner > .frame-header{
    display: none;
}

/* ---------- phones: barcelona's BS3 mobile type scale (live: h1 28 / h2 26 / h3 24 / h4 22, body text 16px) ---------- */
@media (max-width: 768px){
    #page-content p{
        font-size: 16px !important;
        line-height: 28.8px !important;
    }
}
@media (max-width: 767px){
    #page-content h1.element-header{ font-size: 28px !important; line-height: 1.2 !important; }
    #page-content h2.element-header{ font-size: 26px !important; line-height: 1.2 !important; }
    #page-content h3.element-header{ font-size: 24px !important; line-height: 1.2 !important; }
    #page-content h4.element-header{ font-size: 22px !important; line-height: 1.2 !important; }
}

/* ---------- in-content sliders (barcelona owl → carousel, "old-barca"): BP 16 gives every item a fixed 600px height
   and centres the image in it (empty bands, a floating square in narrow columns). barcelona's slider was exactly as
   high as its cropped image ---------- */
#page-content .frame-type-carousel .carousel-item,
#page-content .frame-type-carousel .carousel-content,
#page-content .frame-type-carousel .carousel-content-inner{
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
}
#page-content .frame-type-carousel .carousel-content,
#page-content .frame-type-carousel .carousel-content-inner,
#page-content .frame-type-carousel .carousel-image,
#page-content .frame-type-carousel .carousel-image picture{
    display: block;
    width: 100%;
    max-width: none !important;
}
#page-content .frame-type-carousel .carousel-image img{
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
}
#page-content .frame-type-carousel .carousel-indicators{
    display: none;
}

/* footer map: BP's <picture> is max-width: max-content, which shrank the image to its own srcset size */
#page-footer .frame-type-image picture{
    display: block;
    max-width: none !important;
}

/* ---------- search in the menu bar (barcelona's magnifier; lib.cnSearch, replay 14-51): the icon is a label for the
   field, the field opens on focus and submits on Enter — no JS ---------- */
.page-header-bottom-content{
    position: relative;
}
.cn-search{
    position: absolute;
    top: 0;
    right: 15px;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0;
    z-index: 5;
}
.cn-search-icon{
    width: 36px;
    height: 36px;
    margin: 0;
    cursor: pointer;
    background: no-repeat center / 15px 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M11.74 10.34a6.5 6.5 0 1 0-1.4 1.4l3.85 3.85a1 1 0 0 0 1.41-1.41zM6.5 11a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E");
}
.cn-search-input{
    width: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    height: 30px;
    font-size: 14px;
    color: #010101;
    background: #ffffff;
    transition: width .2s, opacity .2s;
}
.cn-search:focus-within .cn-search-input{
    width: 220px;
    padding: 0 10px;
    opacity: 1;
}
/* in the compact bar the icon sits left of the burger */
@media (max-width: 991.98px){
    .cn-search{
        position: absolute;
        top: -44px;
        right: 60px;
        height: 36px;
    }
    .cn-search:focus-within .cn-search-input{
        width: 160px;
    }
}