/* ============================================================
   Noordkop Groen — responsive + hover patch (static site)
   Loaded LAST, after custom.css, so it wins.
   Desktop (>=992px) layout is left untouched EXCEPT the single
   brown-button hover-colour fix in section 1.
   ============================================================ */

/* --- 1. Brown "Contact opnemen" button (regelnublok): -------
   was: hover turned background AND text green (text invisible).
   now: hover background stays green, text becomes brown.
   Applies at every width (desktop included), as requested.      */
.regelnublok .sppb-btn:hover,
.regelnublok a.sppb-btn:hover {
  color: #613f34 !important;
}

/* ============================================================
   TABLET & MOBILE  (<= 991px)
   ============================================================ */
@media (max-width: 991.98px) {

  /* 2a. hard stop any sideways scrolling */
  html, body { max-width: 100%; overflow-x: hidden; }
  .sppb-row { margin-left: 0 !important; margin-right: 0 !important; }

  /* 2b. buttons never wider than the screen, text never clipped */
  .sppb-btn {
    max-width: 100% !important;
    white-space: normal !important;
    height: auto !important;
    padding: 16px 64px 16px 28px !important;
    line-height: 22px !important;
  }

  /* 2c. big display headings scale down so they fit */
  .quickscanblok h3 { font-size: 30px !important; line-height: 1.15 !important; }
  .quickscanblok p  { font-size: 17px !important; }

  /* ----------------------------------------------------------
     3. PROJECTS grid (raxo "allmode-columns")
     Desktop overlays the white caption on the photo using a
     -200px margin inside a 840px-tall box. Stacked on small
     screens that clipped the box and the projects overlapped
     the client-logos + CTA below. Here: one column, photo on
     top, caption on a solid brown panel underneath.
     ---------------------------------------------------------- */
  .nieuweprojecten {
    max-height: none !important;
    height: auto !important;
    background: #edece8 !important;
    padding: 30px 0 30px 0 !important;
  }
  .allmode-columns .allmode-wrapper,
  .allmode-columns .gt880 .allmode-wrapper {
    width: 100% !important;
    float: none !important;
    display: block !important;
    margin: 0 0 22px 0 !important;
  }
  .allmode-columns .allmode-topitem {
    position: relative !important;
    background: #613f34 !important;      /* brown panel behind caption */
    overflow: hidden !important;
  }
  .allmode-img { margin-bottom: 0 !important; }
  .allmode-columns .allmode-topitem .allmode-title {
    min-height: 0 !important;
    padding: 16px 24px 0 24px !important;
  }
  .allmode-columns .allmode-topitem .allmode-title a {
    font-size: 22px !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
  }
  .allmode-columns .allmode-topitem .allmode-text {
    padding: 8px 24px 20px 24px !important;
    text-shadow: none !important;
    line-height: 22px !important;
  }

  /* ----------------------------------------------------------
     4. CLIENT LOGOS slider (opdrachtgevers / widgetkit)
     ---------------------------------------------------------- */
  .opdrachtgevers { padding: 0 0 20px 0 !important; }
  .opdrachtgevers .headingrow h2 { padding: 30px 0 !important; }
  .uk-scope .uk-dotnav { flex-wrap: wrap !important; justify-content: center !important; }

  /* ----------------------------------------------------------
     5. "Regel nu" CTA block — keep it clear of the footer
     ---------------------------------------------------------- */
  .regelnublok { padding: 25px 15px 30px 15px !important; }
  .regelnublok h3 { font-size: 22px !important; line-height: 30px !important; }

  /* ----------------------------------------------------------
     6. FOOTER — trim the huge empty green gap
     ---------------------------------------------------------- */
  .footerrij2 { padding: 0 0 40px 0 !important; }
  .footerrij2 p { padding: 25px 0 0 0 !important; }
  .footerrij1 { padding: 20px !important; }
  .copyrij ul li { display: block; padding: 5px 0 !important; }
}

/* ============================================================
   MOBILE only (<= 600px) — extra tightening
   ============================================================ */
@media (max-width: 600px) {
  .quickscanblok h3 { font-size: 26px !important; }
  .allmode-columns .allmode-topitem .allmode-title a { font-size: 20px !important; }
  .sppb-btn { padding: 15px 56px 15px 22px !important; font-size: 15px !important; }
}

/* ============================================================
   HEADER, HERO HEADING & SERVICES SWITCHER  (mobile/tablet)
   Fixes: logo running off screen, green hero heading overflow
   (long words like "faunarapportage"), and the services list
   which was a hard-coded 600px-wide cubeportfolio switcher.
   ============================================================ */
@media (max-width: 991.98px) {

  /* 7. Logo — never wider than the screen (was fixed 250px).
        Use an explicit width (not auto) so its column keeps sizing. */
  .logorij img,
  .logorij .sppb-addon-single-image img,
  .astroid-logo img {
    width: 200px !important;
    max-width: 60vw !important;
    height: auto !important;
  }

  /* 8. Green hero heading — just scale it down; overflow-wrap lets a
        too-long word break WITHOUT collapsing the flex column
        (word-break would shrink the column to one letter per line). */
  .headerrij .sppb-addon-title,
  .sloganrij .sppb-addon-title,
  .headerrij h1, .headerrij h2, .headerrij h3,
  .sloganrij h1, .sloganrij h2, .sloganrij h3 {
    font-size: 30px !important;
    line-height: 1.15 !important;
    overflow-wrap: break-word !important;
  }

  /* 9. Services switcher (shortcode-ultimate / cubeportfolio).
        Desktop is a flex "tabs beside content" layout with a
        hard-coded 600px filter. On mobile: de-flex so the filter
        list and the content stack full-width, and let text wrap. */
  .su-switcher { display: block !important; }
  .su-swt-filter {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    float: none !important; padding-right: 0 !important;
  }
  .cbp-filter-item,
  .cbp-filter-item-inner,
  .su-swt-title {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
  .cbp-filter-item { padding-left: 15px !important; padding-right: 15px !important; }

  /* Content area (cubeportfolio grid). cubeportfolio's own tab JS is
     unreliable in the static export (all cards render at once, boxed
     at a fixed height = the "white space"). switcher-fix.js drives a
     simple click-to-switch instead: it flags the chosen card with
     .nkg-shown. Here we flatten the grid to normal flow, hide every
     card, and show only the flagged one so the height fits it. */
  .su-switcher .cbp,
  .su-switcher .cbp-wrapper-outer,
  .su-switcher .cbp-wrapper,
  .su-switcher .cbp-item-wrapper {
    position: static !important;
    width: 100% !important; max-width: 100% !important;
    height: auto !important; min-height: 0 !important;
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .su-switcher .cbp-item {
    position: static !important; left: auto !important; top: auto !important;
    width: 100% !important; max-width: 100% !important; height: auto !important;
    opacity: 1 !important; transform: none !important; transition: none !important;
    display: none !important;
  }
  .su-switcher .cbp-item.nkg-shown { display: block !important; }
  /* cubeportfolio hides inactive cards with visibility:hidden — the
     shown card and everything inside it must be forced visible, or it
     renders blank even though display/opacity look fine. */
  .su-switcher .cbp-item.nkg-shown,
  .su-switcher .cbp-item.nkg-shown * { visibility: visible !important; }
  .su-switcher .uk-transition-scale-up { transform: none !important; opacity: 1 !important; }
  .su-switcher .cbp-item h1, .su-switcher .cbp-item h2, .su-switcher .cbp-item h3,
  .su-switcher .cbp-item p, .su-switcher .cbp-item strong,
  .su-switcher .cbp-item span, .su-switcher .cbp-item li {
    white-space: normal !important; overflow-wrap: break-word !important; max-width: 100% !important;
  }
}

@media (max-width: 600px) {
  .headerrij .sppb-addon-title,
  .sloganrij .sppb-addon-title,
  .headerrij h1, .headerrij h2,
  .sloganrij h1, .sloganrij h2 { font-size: 23px !important; }
  .logorij img,
  .logorij .sppb-addon-single-image img,
  .astroid-logo img { width: 165px !important; max-width: 62vw !important; }
}

@media (max-width: 380px) {
  .headerrij .sppb-addon-title,
  .sloganrij .sppb-addon-title,
  .headerrij h1, .headerrij h2,
  .sloganrij h1, .sloganrij h2 { font-size: 21px !important; }
}