/* ============================================================
   Mobiele/tablet-overrides voor Bouwbedrijf Rooijakkers.
   Laadt ALS LAATSTE (media: max-width 1199px) → wint van template.css.
   ============================================================ */

/* Geen horizontale overflow: houdt de vaste hamburger altijd in beeld
   (voorkwam dat hij op vervolgpagina's uit het scherm viel). */
html,
body { overflow-x: hidden; }

@media (max-width: 991px) {

    /* ---- Hamburger zichtbaar + uitgelijnd met het logo ---- */
    .nav-toggle { display: flex !important; top: 17px; }
    body.home .nav-toggle { top: 27px; } /* homepage-logo staat lager (py-4) */

    /* ---- Horizontale menu's + vaandel verbergen (offcanvas neemt het over) ---- */
    .header-content .col-8,
    .header-overlay-content .col-8,
    .header-compact-content .col-8 { display: none !important; }
    .header-content [class*="vaandel"],
    .header-content img[src*="vaandel"],
    .header-overlay-content [class*="vaandel"],
    .header-overlay-content img[src*="vaandel"],
    .header-compact-content [class*="vaandel"],
    .header-compact-content img[src*="vaandel"] { display: none !important; }

    /* ---- Logo: verhouding behouden ---- */
    .header-content .col-2 a img {
        height: 58px !important; width: auto !important; max-width: none !important;
    }
    .header-overlay-content .col-2 a img,
    .header-compact-content .col-2 a img {
        height: 54px !important; width: auto !important; max-width: none !important;
    }

    /* ---- Scroll-indicator verbergen (overlapte de hero-tekst) ---- */
    .scroll-indicator,
    .scroll-indicator-over { display: none !important; }

    /* ---- Homepage hero-tekst schalen ---- */
    .site-header .header-footer {
        left: 16px; right: 16px; bottom: 26px; white-space: normal;
    }
    .site-header .header-footer .container { padding-left: 0; padding-right: 0; max-width: 100%; }
    .site-header .header-footer .pe-4 { padding-right: 0 !important; }
    .site-header .header-footer h1 {
        font-size: clamp(2rem, 9vw, 3.2rem) !important; line-height: 1.05 !important; margin-bottom: 0.4rem;
    }
    .site-header .header-footer h1 span { font-size: inherit !important; line-height: 1.05 !important; }
    .site-header .header-footer h2 {
        font-size: clamp(1.15rem, 5.2vw, 1.7rem) !important; line-height: 1.15 !important; padding-left: 0 !important;
    }

    /* ---- Footer: kolommen netjes onder elkaar (was overlappende chaos) ---- */
    footer.container-fluid > .row > div {
        flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
    }
    footer .col-6 .row > div {
        flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; margin-left: 0 !important;
    }
    footer .col-4 { text-align: left; }
    footer .col-4 .footer-legal,
    footer .col-4 .small { text-align: left; }
    footer .footer-2 { margin-top: 1.75rem; }

    /* Rode merkblok: tekst links minder ver inspringen */
    footer .col-4 .p-5 { padding: 2.25rem 2.25rem 2.25rem 1.5rem !important; }
    /* Grijze vlak: zelfde inspringing (1.5rem) als de tekst in het rode vlak */
    footer .col-6 .py-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    footer .col-6 .py-5 .row { margin-left: 0 !important; margin-right: 0 !important; }
    footer .col-6 .py-5 .row > div { padding-left: 0 !important; padding-right: 0 !important; }
}

@media (max-width: 360px) {
    .header-content .col-2 a img { height: 50px !important; }
    .site-header .header-footer h1 { font-size: 1.85rem !important; }
    .site-header .header-footer h2 { font-size: 1.05rem !important; }
}

/* ============================================================
   Mobiele typografie (geldt voor ALLE pagina's/templates):
   1) lange woorden in koppen mogen afbreken zodat niets buiten
      beeld valt (bv. "Projectontwikkeling", "Utiliteitsbouw");
   2) koppen schalen vloeiend mee op kleinere schermen.
   ============================================================ */

/* 1) Afbreken van lange woorden in koppen (alle schermen <= 1199px) */
h1, h2, h3, h4, h5, h6,
.albert,
.section-title, .page-title, .disciplines-title, .contact-title,
.form-title, .story-title, .cta-title, .quote-text,
.discipline-card-title, .dienst-title, .project-title,
.project-card-title, .discipline-subtitel, .breadcrumb {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* 2) Koppen schalen (<= 991px) */
@media (max-width: 991px) {
    h1 { font-size: clamp(1.8rem, 7.5vw, 2.8rem) !important; line-height: 1.1 !important; }
    h2 { font-size: clamp(1.5rem, 6vw, 2.2rem) !important; line-height: 1.2 !important; }
    h3 { font-size: clamp(1.2rem, 5vw, 1.7rem) !important; line-height: 1.25 !important; }

    /* Specifieke titel-klassen met een eigen (te) grote font-size */
    .page-title { font-size: clamp(1.9rem, 8vw, 2.5rem) !important; }
    .disciplines-title { font-size: clamp(1.9rem, 8vw, 2.8rem) !important; }
    .section-title { font-size: clamp(1.6rem, 6.5vw, 2.3rem) !important; }
    .contact-title { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
    .form-title,
    .story-title,
    .cta-title,
    .discipline-card-title,
    .project-title { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
    .story-number,
    .highlight-number { font-size: clamp(2rem, 9vw, 3rem) !important; }
    .quote-mark { font-size: 4rem !important; }
}

/* Rich-text blok: minder ruimte boven/onder op mobiel (was 8rem) */
@media (max-width: 991px) {
    .m-rich-text { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}
@media (max-width: 575px) {
    .m-rich-text { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

/* ============================================================
   v3.3 — bredere responsive hardening (telefoons + tablets,
   portret én landschap)
   ============================================================ */

/* Tablet-landschap / klein desktop binnen dit stylesheet-bereik
   (992-1199px): horizontaal menu compacter zodat niets wrapt */
@media (min-width: 992px) and (max-width: 1199px) {
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        font-size: 14px !important;
        padding-left: 9px !important;
        padding-right: 9px !important;
    }
    .header-content .col-2 a img,
    .header-compact-content .col-2 a img,
    .header-overlay-content .col-2 a img {
        height: 72px !important; width: auto !important; max-width: none !important;
    }
}

/* Telefoon liggend / lage schermen: hero's en koppen compacter */
@media (max-width: 991px) and (max-height: 540px) {
    .site-header .header-footer { bottom: 12px; }
    .site-header .header-footer h1 { font-size: clamp(1.5rem, 7vh, 2.1rem) !important; }
    .site-header .header-footer h2 { font-size: clamp(0.95rem, 4.5vh, 1.25rem) !important; }
    .over-hero, .disciplines-hero, .projecten-hero { padding: 84px 0 70px !important; }
    .m-rich-text { padding-top: 2rem; padding-bottom: 2rem; }
}

/* Formuliervelden minimaal 16px: voorkomt ongewenst inzoomen op iOS */
@media (max-width: 991px) {
    input, select, textarea { font-size: 16px !important; }
}

/* Afbeeldingen in content nooit breder dan het scherm */
main img { max-width: 100%; }

/* Kleinste telefoons (<= 380px): iets krapper */
@media (max-width: 380px) {
    .offcanvas-nav { width: 92vw; }
    .offcanvas-nav-scroll { padding-left: 22px; padding-right: 22px; }
    .offcanvas-nav-footer { padding-left: 28px; padding-right: 22px; }
    .offcanvas-menu > li > a,
    .offcanvas-menu > li > .offcanvas-item-row > a { font-size: 1.2rem; }
    .filter-btn { padding: 8px 12px !important; font-size: 0.8rem !important; }
}