/* Aanpassingen op front/css/style.css, gevraagd door Yannick op 27-08-2026.
   Bewust een apart bestand: style.css komt van de oorspronkelijke bouwer, en zo
   blijft zichtbaar wat wij gewijzigd hebben. Dit bestand wordt na style.css
   geladen. */

/* 1. Hero-inhoud verticaal en horizontaal in het midden van de banner.
      style.css centreert .hero_content al horizontaal, maar de container zat
      bovenaan main vastgeplakt waardoor alles te hoog stond. De kop staat ook
      in main en is fixed gepositioneerd; met een gewone flex-verdeling zou zijn
      resthoogte de inhoud een halve menubalk te laag duwen. Daarom centreert de
      container tegen de volledige banner. */
main {
    position: relative;
}

main > .container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. Navbar (revised 11-09-2026 at Yannick's request): one fixed geometry,
      edge to edge at the very top, both before and while scrolling. Scrolling
      only switches the background to black: no resize, no shadow, no blur, no
      animation. style.css moved the bar from an inset (top 20px, max-width
      calc(100% - 55px), extra navbar padding) to full width with a 0.5s
      "all" transition and a shadow; all of that is neutralised here. */
body header#navbar {
    margin: 0;
}

body header#navbar .container {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px 28px !important;
    border-radius: 0 !important;
    background-color: transparent;
    box-shadow: none !important;
    transition: none !important;
}

body header#navbar .navbar {
    padding: 0;
}

/* Black as soon as the visitor scrolls, and also while the mobile menu is open
   at the top of the page, so the bar and the menu panel read as one piece. */
body header#navbar.scrolled .container,
body header#navbar:has(.navbar-collapse.show) .container,
body header#navbar:has(.navbar-collapse.collapsing) .container {
    background-color: var(--dark_color);
}

@media screen and (max-width: 1199px) {
    body header#navbar .container {
        padding: 14px 16px !important;
    }

    /* The collapsed menu hangs flush under the bar, edge to edge. Its
       containing block is the fixed .container, so 100% is the bar's bottom. */
    body header#navbar .navbar-collapse {
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
    }
}

/* 3. Ruimte tussen de items van de aanbod-carrousel. De marge zelf staat in
      site.js (owlCarousel margin), want Owl rekent de itembreedte daarmee uit;
      hier alleen wat de randen netjes houdt. */
.offer_slider .owl-item .offer_img {
    overflow: hidden;
}

/* Offer photos at 1600px and below (requested 11-09-2026); style.css had 450px
   there. The lower bound keeps style.css's own 300px for phones (<= 767px),
   which would otherwise lose to this rule because this file loads later. */
@media screen and (min-width: 768px) and (max-width: 1600px) {
    .offer_img img {
        height: 350px;
    }
}

/* Carousel arrows (requested 22-09-2026): they were 20px chevrons squeezed
   against the screen edge. Now 100px and centred over the photos. The extra
   .owl-theme in the selector is needed to outweigh owl.theme's own
   ".owl-theme .owl-nav [class*='owl-']". */
/* The bar carries the class "disabled" (site.js runs the carousel with
   nav: false), so style.css matches it through ".offer_section .owl-nav.disabled"
   and outweighs a plain ".offer_section .owl-nav". Hence the same pair here. */
.offer_section .owl-nav.disabled,
.offer_section .owl-nav {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    /* style.css stretches the bar 60px past the carousel and pulls it back with
       a negative margin; that is what pinned the arrows to the screen edge. */
    width: 100%;
    margin: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Only the arrows themselves take the mouse; the strip between them has to
       stay clickable for the slides underneath. */
    pointer-events: none;
}

.offer_section .owl-theme .owl-nav [class*="owl-"] {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    margin: 0 32px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-size: 100px;
    line-height: 1;
    color: var(--white_text);
    /* The photos behind them are light in places; a soft shadow keeps the
       arrow readable without drawing a box around it. */
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
    opacity: 0.85;
    transition: var(--transition);
}

.offer_section .owl-theme .owl-nav [class*="owl-"]:hover,
.offer_section .owl-theme .owl-nav [class*="owl-"]:focus-visible {
    background: transparent;
    color: var(--white_text);
    opacity: 1;
}

/* Smaller photos need smaller arrows, or they cover the picture. */
@media screen and (max-width: 1199px) {
    .offer_section .owl-theme .owl-nav [class*="owl-"] {
        font-size: 72px;
        margin: 0 20px;
    }
}

@media screen and (max-width: 575px) {
    .offer_section .owl-theme .owl-nav [class*="owl-"] {
        font-size: 52px;
        margin: 0 10px;
    }
}

/* ------------------------------------------------------------------
   Gevraagd door Yannick op 27-08-2026: het venster met de Club Planner-
   tools moet aanvoelen als een onderdeel van de site.
   ------------------------------------------------------------------ */

/* Donkere waas over de site zolang het venster openstaat. */
.cp_modal.modal-backdrop,
.modal-backdrop.show {
    background-color: #000;
    opacity: 0.75;
}

/* Breed genoeg voor de zeven dagkolommen van het lessenoverzicht; bij 1080px
   moest de bezoeker daarvoor horizontaal scrollen. */
.cp_modal .modal-dialog {
    max-width: 1440px;
    width: calc(100% - 3rem);
    margin: 1.5rem auto;
}

.cp_modal .modal-content {
    position: relative;
    background-color: var(--dark_color);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    /* De iframe heeft zelf afgeronde hoeken nodig; die knipt de container af. */
    overflow: hidden;
}

/* Geen omlijsting of witruimte rond de iframe: de tool vult het venster. */
.cp_modal .modal-body {
    padding: 0;
    background-color: var(--dark_color);
    overflow: hidden;
}

.cp_modal iframe {
    display: block;
    width: 100%;
    border: 0;
    /* Hoog genoeg om de wizard comfortabel te gebruiken, maar nooit hoger dan
       het scherm; dvh houdt rekening met de adresbalk op gsm. */
    height: min(760px, calc(100vh - 3rem));
    height: min(760px, calc(100dvh - 3rem));
}

/* Eigen kruisje in plaats van dat van Bootstrap: dat is zwart, en met een
   filter erop verbleekt ook de cirkel eronder. Zo blijft de knop leesbaar,
   of de tool erachter nu een lichte of een donkere achtergrond heeft. */
.cp_modal .btn-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(15, 15, 15, 0.75);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    opacity: 1;
    filter: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: var(--transition);
}

.cp_modal .btn-close:hover {
    background-color: rgba(15, 15, 15, 0.95);
}

/* Op gsm mag het venster zo goed als het volledige scherm innemen. */
@media screen and (max-width: 767px) {
    .cp_modal .modal-dialog {
        width: calc(100% - 1rem);
        margin: 0.5rem auto;
    }

    .cp_modal .modal-content {
        border-radius: 10px;
    }

    .cp_modal iframe {
        height: calc(100vh - 1rem);
        height: calc(100dvh - 1rem);
    }
}

/* The secondary button: "Webshop" in the navbar, "Meer info" in the content
   blocks and the banner button. One class for all of them, so they cannot drift
   apart. Outlined, so the filled "Afspraak maken" stays the primary action. */
.btn.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--white_text);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0;
    font-size: var(--fs_xs);
    font-weight: var(--fw_regular);
    line-height: 1.5;
    padding: 8px 24px;
    transition: var(--transition);
}

.btn.btn-outline:hover,
.btn.btn-outline:focus-visible,
.btn.btn-outline:active {
    background-color: var(--white_color);
    color: var(--dark_color);
    border-color: var(--white_color);
}

.btn.btn-outline:focus-visible {
    outline: 2px solid var(--white_color);
    outline-offset: 3px;
    box-shadow: none;
}

/* Banner: primary and secondary button side by side. The secondary one takes the
   exact box of the primary (style.css: 24px 60px, 16px, weight 500; 15px 40px
   from 991px down) so the pair lines up; only colour and border differ. */
.hero_btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.hero_btns .btn.btn-outline {
    padding: 24px 60px;
    font-size: var(--fs_sm);
    font-weight: 500;
    line-height: 1.5;
}

/* style.css gives the primary button line-height from the body; pin both so
   the two boxes are exactly the same height. */
.hero_btns .btn.btn-primary {
    line-height: 1.5;
}

/* Equal widths as well, whatever the two labels are. */
.hero_btns .btn {
    min-width: 240px;
}

@media screen and (max-width: 991px) {
    .hero_btns .btn.btn-outline {
        padding: 15px 40px;
    }

    .hero_btns .btn {
        min-width: 200px;
    }
}

/* Phones: stacked, equally wide, so neither button wraps its text. */
@media screen and (max-width: 575px) {
    .hero_btns {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: min(100%, 320px);
    }

    .hero_btns .btn {
        width: 100%;
    }
}

/* "Meer info" sits under a paragraph whose bottom margin already spaces it. */
.fitness_journey_content_flex_right .btn.btn-outline {
    margin-top: 0.25rem;
}

.header_btns {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* "Locaties" dropdown: a solid dark panel, so the names stay readable over any
   photo (style.css made it transparent), with room around both items and a clear
   hover state. Opening on hover lives in site.js. */
.header_drop .dropdown-menu {
    min-width: 190px;
    padding: 6px;
    background-color: var(--dark_color);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}

/* Bootstrap does not use Popper inside a navbar, so data-bs-offset has no effect
   there; the distance to the label is set here instead. */
@media screen and (min-width: 1200px) {
    .header_drop .dropdown-menu {
        margin-top: 12px;
    }
}

/* Invisible strip over the gap between label and panel: the pointer stays
   "inside" while crossing it, so the menu does not close on the way down. */
.header_drop .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}

.header_drop .dropdown-menu li + li {
    margin-top: 2px;
}

.header_drop .dropdown-item {
    display: block;
    padding: 10px 14px;
    border-radius: 5px;
    color: var(--white_text);
    font-size: var(--fs_sm);
    line-height: 1.3;
    transition: background-color 0.15s ease;
}

.header_drop .dropdown-item:hover,
.header_drop .dropdown-item:focus-visible,
.header_drop .dropdown-item:active {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white_text);
    outline: none;
}

/* The page you are on: bold with a small marker, not Bootstrap's blue. */
.header_drop .dropdown-item.is-current {
    font-weight: var(--fw_bold);
    background-color: transparent;
}

.header_drop .dropdown-item.is-current::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: var(--white_color);
    vertical-align: middle;
}

.header_drop .dropdown-item.is-current:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Inside the collapsed mobile menu the panel sits in the flow, not floating. */
@media screen and (max-width: 1199px) {
    .header_drop .dropdown-menu {
        box-shadow: none;
    }

    .header_drop .dropdown-menu::before {
        content: none;
    }
}

/* Opening hours in the footer (compacted 11-09-2026): the same markup and
   classes as on the landing page cards, so there is one style to maintain.
   Only the wrapper lives here. */
.footer_hours {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* style.css gives every footer list item a flex row with a max width; the hour
   columns must keep their own label-above-time stacking. */
.footer_flex .footer_hours .loc_hours_list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    max-width: none;
}

/* Geen horizontale schuifbalk door de bredere voettekst op smalle schermen. */
@media screen and (max-width: 991px) {
    .footer_left_prnt {
        flex-wrap: wrap;
    }
}

/* ------------------------------------------------------------------
   Startpagina: het keuzescherm met de vestigingen. Eigen klassennamen,
   los van de .new_loc_* van de oorspronkelijke bouwer, zodat er niets
   van die oude regels doorlekt.
   ------------------------------------------------------------------ */

/* On :root rather than .loc_picker: the footer reuses the hour classes. */
:root {
    --loc_card_bg: #141414;
    --loc_label: #ffffff;
    --loc_text: rgba(255, 255, 255, 0.62);
}

/* Full width since 11-09-2026: about 10px around the edge and 10px between the
   two cards, and the cards fill the height of the screen, so there are no empty
   bands anywhere. The photo takes whatever height the text leaves over. */
.loc_picker {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 10px;
    background-color: #232323;
}

/* Two shared rows: the photos share the first, the text blocks the second. When
   one location has less text (Puurs has no access info yet), both photos still
   end at the same height and both names line up. */
.loc_picker_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(260px, 1fr) auto;
    column-gap: 10px;
    row-gap: 0;
    width: 100%;
}

.loc_card {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    background-color: var(--loc_card_bg);
    overflow: hidden;
}

/* De foto is meteen de link naar de vestiging; de naam ligt erover. */
.loc_card_media {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

/* Waas onder de naam, zodat die leesbaar blijft op elke foto. */
.loc_card_shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
    transition: var(--transition);
}

.loc_card_media:hover .loc_card_shade {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.loc_card_name {
    position: relative;
    z-index: 2;
    margin: 0;
    color: var(--white_text);
    font-size: clamp(32px, 4vw, 64px);
    font-weight: var(--fw_bold);
    line-height: 1;
    text-align: center;
}

.loc_card_body {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
}

/* Address and contact next to each other on a card, stacked on phones. */
.loc_card_row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2rem;
}

.loc_contact a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.loc_contact a:hover,
.loc_contact a:focus-visible {
    color: var(--white_text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.loc_block_title {
    margin: 0 0 0.4rem 0;
    color: var(--loc_label);
    font-size: var(--fs_sm);
    font-weight: var(--fw_bold);
    line-height: 1.3;
}

.loc_block_text {
    margin: 0;
    color: var(--loc_text);
    font-size: var(--fs_sm);
    font-weight: var(--fw_regular);
    line-height: 1.55;
}

/* De uren links, de knop rechts; mt-auto duwt het geheel naar de onderrand,
   zodat twee kaarten met ongelijke tekst toch even hoog eindigen. */
.loc_card_foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    flex-wrap: wrap;
}

.loc_hours_list {
    display: flex;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.loc_hours_list li {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Two classes deep on purpose: in the footer these spans also match style.css's
   ".footer_flex li span" (font size 18px, opacity), which must not win. */
.loc_hours_list .loc_hours_day {
    color: var(--loc_text);
    opacity: 1;
    font-size: var(--fs_xs);
    font-weight: var(--fw_regular);
    line-height: 1.2;
    white-space: nowrap;
}

.loc_hours_list .loc_hours_time {
    color: var(--white_text);
    opacity: 1;
    font-size: var(--fs_sm);
    font-weight: var(--fw_bold);
    line-height: 1.2;
    white-space: nowrap;
}

.loc_book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Vaste ondergrens, anders wordt de knop van de ene vestiging breder dan die
       van de andere en staan de twee kaarten scheef ten opzichte van elkaar. */
    min-width: 200px;
    padding: 1.15rem 2.25rem;
    background-color: var(--white_color);
    color: var(--dark_color);
    font-size: var(--fs_xs);
    font-weight: var(--fw_regular);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    transition: var(--transition);
}

.loc_book:hover {
    background-color: var(--dark_color);
    color: var(--white_text);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}

/* One card per row from tablet down. The cards keep the full width with the
   same 10px margins, but no longer stretch to the screen height: stacked,
   that would make each card a screen tall. The photo gets a fixed ratio. */
@media screen and (max-width: 991px) {
    .loc_picker {
        min-height: 0;
    }

    .loc_picker_grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        row-gap: 10px;
    }

    .loc_card {
        display: flex;
        flex-direction: column;
        grid-row: auto;
    }

    .loc_card_media {
        flex: 0 0 auto;
        min-height: 0;
        aspect-ratio: 16 / 7;
    }
}

@media screen and (max-width: 575px) {
    .loc_card_media {
        aspect-ratio: 16 / 9;
    }

    .loc_card_body {
        gap: 1.25rem;
        padding: 1.375rem;
    }

    .loc_card_row {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .loc_card_foot {
        align-items: stretch;
        gap: 1.25rem;
    }

    .loc_hours_list {
        gap: 1.75rem;
    }

    /* Volle breedte, want naast de uren blijft er te weinig plaats over. */
    .loc_book {
        width: 100%;
    }
}