/* ============================================================================
   vision-landing.css
   Styling for the Clean-Vision and ISP-Vision landing pages.

   HOW IT WORKS
   - All rules are scoped under `body.vision-landing` so the rest of the site is
     never affected.
   - The accent colour is a CSS variable (`--accent`) set per page:
        body.vision-clean  -> teal  #00b4c8  (the new "Blue/Green")
        body.vision-isp    -> green #80c800  (existing brand light-green)
   - The pages are built from the normal uSkinned blocks (split components,
     pods, accordions, banner, vertical tabs). This file only RESTYLES that
     markup to match the Figma design; it does not change the content.

   TO ACTIVATE on a page (Umbraco backoffice, no code):
     Advanced tab -> "Custom body classes":
        Clean-Vision : vision-landing vision-clean
        ISP-Vision   : vision-landing vision-isp
     Advanced tab -> tick "Hide website header section" + "Hide website footer section"
   See docs/vision-landing/README.md for the full checklist.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. New brand colour token + utilities (the "Blue/Green" that did not exist)
   --------------------------------------------------------------------------- */
:root {
    --blue-green: #00b4c8;
    --blue-green-rgb: 0, 180, 200;
}

.blue-green-bg { background-color: var(--blue-green) !important; }
.blue-green-text { color: var(--blue-green) !important; }
.blue-green-border { border-color: var(--blue-green) !important; }

/* ---------------------------------------------------------------------------
   1. Per-page accent
   --------------------------------------------------------------------------- */
body.vision-landing { --accent: #00b4c8; --accent-rgb: 0, 180, 200; --accent-dark: #009eb0; }
body.vision-clean   { --accent: #00b4c8; --accent-rgb: 0, 180, 200; --accent-dark: #009eb0; }
body.vision-isp     { --accent: #80c800; --accent-rgb: 128, 200, 0; --accent-dark: #6fb000; }

/* Section vertical rhythm (re-added so the page does not depend on the
   `tree-nursery-page` body class for spacing). */
body.vision-landing .tree-nursery-wrapper,
body.vision-landing .faq-wrapper,
body.vision-landing .optimize-section { padding: 100px 0 !important; }
body.vision-landing .infogren-detail-wrapper { padding: 80px 0 !important; }

/* ---------------------------------------------------------------------------
   2. Buttons + links -> accent
   --------------------------------------------------------------------------- */
body.vision-landing .btn.boxed-btn {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-family: Saira, Arial, sans-serif;
    font-weight: 500 !important;
    padding: 10px 24px !important;
}
body.vision-landing .btn.boxed-btn:hover {
    background-color: var(--accent-dark) !important;
    border-color: var(--accent-dark) !important;
    color: #fff !important;
}

/* Keep body copy links from inheriting the global green (a{color:#80C800}). */
body.vision-landing .item_block .text a:not(.btn) { color: var(--accent); }
body.vision-landing .item_block .text a:not(.btn):hover { color: var(--accent-dark); }

/* ---------------------------------------------------------------------------
   3. Hero banner  (.page-banner / .page-banne-style-1)
      Card + 80px corner already exist in custom.css; only the colour of the
      left overlay strip and the slider dots need to follow the accent.
   --------------------------------------------------------------------------- */
body.vision-landing .page-banne-style-1 .item:before { background-color: var(--accent) !important; }
body.vision-landing .page-banne-style-1.usn_cmp_banner .slick-slider .slick-dots li.slick-active > button { background: var(--accent) !important; }
body.vision-landing .page-banne-style-1.usn_cmp_banner .slick-slider .slick-dots li:not(.slick-active) > button:hover { background: var(--accent) !important; }

/* ---------------------------------------------------------------------------
   4. "Herken jij deze uitdagingen?"  (.challenges-face-section)
      4 pods rendered as white cards with an accent icon-tile.
   --------------------------------------------------------------------------- */
body.vision-landing .challenges-face-section .left-side { max-width: 416px; flex: 0 0 416px; }
body.vision-landing .challenges-face-section .right-side { max-width: 740px; flex: 0 0 740px; }

body.vision-landing .challenges-face-section .listing-pods {
    margin: 0;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
}
body.vision-landing .challenges-face-section .listing-pods .item {
    max-width: none !important;
    flex: none !important;
    width: auto !important;
    padding: 0 !important;
}
/* The challenge icons are complete tiles in the SVG assets — leave them as-is
   (the design keeps these unchanged); no card wrapper. */
body.vision-landing .challenges-face-section .usn_pod_textimage .info .heading {
    font-family: Saira, Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #000 !important;
    line-height: 1.2;
}
body.vision-landing .challenges-face-section .usn_pod_textimage .info .text { margin-top: 8px; }
body.vision-landing .challenges-face-section .usn_pod_textimage .info .text p { color: #000 !important; font-size: 16px; line-height: normal; }

/* ---------------------------------------------------------------------------
   5. "Waarom kiezen ... ?"  (.custom-vertical-tabs)
      Active tab becomes an accent pill; active icon turns white.
   --------------------------------------------------------------------------- */
body.vision-landing .custom-vertical-tabs .vertical-tab-button[aria-selected="true"],
body.vision-landing .custom-vertical-tabs .vertical-tab-button.active {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 8px;
}
body.vision-landing .custom-vertical-tabs .vertical-tab-button[aria-selected="true"] .tab-title,
body.vision-landing .custom-vertical-tabs .vertical-tab-button.active .tab-title { color: #fff !important; }
body.vision-landing .custom-vertical-tabs .vertical-tab-button[aria-selected="true"] .tab-icon,
body.vision-landing .custom-vertical-tabs .vertical-tab-button.active .tab-icon { filter: brightness(0) invert(1); }
body.vision-landing .custom-vertical-tabs .vertical-tab-button:hover { background: var(--accent) !important; }
body.vision-landing .custom-vertical-tabs .vertical-tab-button:hover * { color: #fff !important; }

/* ---------------------------------------------------------------------------
   6. "Kies de bundel die bij je past"  (standalone usn_cmp_pods)
      Generic bordered cards. Applies to the bundles pods only because the
      other pod sections (.challenges-face-section / .nursery-future-proof-section)
      override this below / above.
   --------------------------------------------------------------------------- */
/* Clean-Vision bundles only (plain usn_cmp_pods, 2 cards). ISP-Vision bundles
   use the site's existing `.solution-for-you-section` styling (correct already),
   so they are explicitly excluded here to avoid double borders / inflated height. */
body.vision-landing section.usn_cmp_pods:not(.solution-for-you-section) > .component-inner .listing-pods {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
}
body.vision-landing section.usn_cmp_pods:not(.solution-for-you-section) > .component-inner .listing-pods .item {
    max-width: none !important;
    flex: none !important;
    width: auto !important;
    padding: 0 !important;
}
body.vision-landing section.usn_cmp_pods:not(.solution-for-you-section) .listing-pods .usn_pod_textimage .inner {
    border: 1px solid #e7e4df;
    border-radius: 20px 0 20px 0;
    padding: 36px;
    height: 100%;
}
body.vision-landing section.usn_cmp_pods:not(.solution-for-you-section) .listing-pods .usn_pod_textimage .info .heading {
    font-family: Saira, Arial, sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #000 !important;
}
body.vision-landing section.usn_cmp_pods:not(.solution-for-you-section) .listing-pods .usn_pod_textimage .info .text { margin-top: 8px; }
body.vision-landing section.usn_cmp_pods:not(.solution-for-you-section) .listing-pods .usn_pod_textimage .info .text p { color: #000 !important; }

/* ---------------------------------------------------------------------------
   7. "Hoe werkt overstappen ... ?"  (.infogren-detail-wrapper)
      Accent panel (was hard-coded green #00AA6E in custom.css).
   --------------------------------------------------------------------------- */
body.vision-landing .infogren-detail-wrapper .component-main { background: var(--accent) !important; }
body.vision-landing .infogren-detail-wrapper .infogren-image .component-main { background: transparent !important; }
/* numbered step links/arrows stay white on the accent panel */
body.vision-landing .infogren-detail-wrapper .accordion .link-wrapper a { color: #fff !important; }

/* ---------------------------------------------------------------------------
   8. FAQ accordion  (.faq-accordion-section / .accordion-style-2)
   --------------------------------------------------------------------------- */
/* The accordion shell + the +/- toggle box already exist (accordion-style-2,
   border-radius 40px 0); only the toggle box colour needs the accent. */
body.vision-landing .faq-accordion-section .repeatable.accordion .tab .nav-link::after {
    background-color: var(--accent) !important;
}

/* ---------------------------------------------------------------------------
   9. "Hoe maakt ... toekomstbestendig?"  (.nursery-future-proof-section)
      Two-column accent check-list. The check icon (frame-114.svg) is supplied
      by the content; tint it to the accent colour.
   --------------------------------------------------------------------------- */
body.vision-landing .nursery-future-proof-section { background-color: #f2f0ed !important; }
body.vision-landing .nursery-future-proof-section .right-side { max-width: 632px; flex: 0 0 632px; }
body.vision-landing .nursery-future-proof-section .listing-pods {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 24px;
    margin: 0;
}
body.vision-landing .nursery-future-proof-section .listing-pods .item {
    max-width: none !important;
    flex: none !important;
    width: auto !important;
    padding: 0 0 16px 0 !important;
}
body.vision-landing .nursery-future-proof-section .usn_pod_textimage .inner {
    border: 0;
    padding: 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
body.vision-landing .nursery-future-proof-section .usn_pod_textimage .image,
body.vision-landing .nursery-future-proof-section .usn_pod_textimage .image img {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
}
body.vision-landing .nursery-future-proof-section .usn_pod_textimage .info .text p { color: #000 !important; font-size: 16px; }
body.vision-landing .nursery-future-proof-section .usn_pod_textimage .info .text strong { color: #000; }

/* ---------------------------------------------------------------------------
   10. Form section  (.optimize-section / .optimize-detail-section)
       Grey card with the 80px corner already exists; nothing colour-specific
       needed except keeping the heading on brand.
   --------------------------------------------------------------------------- */
body.vision-landing .optimize-detail-section .heading { font-family: Saira, Arial, sans-serif; font-weight: 600; }

/* Optional CTA strip carried over from the old template (not in the Figma).
   Kept on-brand in case the editor leaves it on the page. */
body.vision-landing .control-wrapper .left-side.footer-sides { background-color: var(--accent) !important; }

/* ---------------------------------------------------------------------------
   11. ActiveCampaign demo form  (#_form_68_)
       The form ships its own <style>; these rules only neutralise the site's
       global CSS that was overriding it (the "styling gets deleted" problem):
       Bootstrap resets, custom.css `a{color:#80C800!important}`,
       `.black-text *{color:#000!important}`, and global form-input styles.
   --------------------------------------------------------------------------- */
body.vision-landing #_form_68_,
body.vision-landing #_form_68_ * { box-sizing: border-box; }

/* undo .black-text */ /* and global link colour inside the form */
body.vision-landing #_form_68_ ._form-label,
body.vision-landing #_form_68_ label,
body.vision-landing #_form_68_ span { color: #142341 !important; }
body.vision-landing #_form_68_ a { color: inherit !important; }

/* inputs: let the AC styles win, undo global form resets */
body.vision-landing #_form_68_ input[type="text"],
body.vision-landing #_form_68_ input[type="tel"],
body.vision-landing #_form_68_ input[type="email"],
body.vision-landing #_form_68_ textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #979797 !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #142341 !important;
    font-family: Saira, Arial, sans-serif !important;
    height: auto !important;
}
body.vision-landing #_form_68_ input::placeholder,
body.vision-landing #_form_68_ textarea::placeholder { color: #9aa0ab !important; }

/* submit button -> accent (form defaults to teal; ISP needs green) */
body.vision-landing #_form_68_ ._submit {
    background: var(--accent) !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-family: Saira, Arial, sans-serif !important;
    padding: 10px 20px !important;
    cursor: pointer;
}
body.vision-landing #_form_68_ ._submit:hover { background: var(--accent-dark) !important; }

/* grey rounded container + 2-column field layout, enforced independently of
   AC's script-added `.iyrEzJ` wrapper so it looks right with or without JS. */
body.vision-landing #_form_68_ {
    background: #f2f0ed !important;
    border-radius: 80px 0 !important;
    padding: 44px 52px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}
body.vision-landing #_form_68_ .iyrEzJ {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
body.vision-landing #_form_68_ ._form-content { display: flex; flex-wrap: wrap; gap: 16px; }
body.vision-landing #_form_68_ ._form_element { width: calc(50% - 8px) !important; margin: 0 !important; float: none !important; }
/* full-width rows: Bedrijfsnaam, the question textarea, and the button */
body.vision-landing #_form_68_ ._form_element._x89223205,
body.vision-landing #_form_68_ ._form_element._x04033179,
body.vision-landing #_form_68_ ._button-wrapper,
body.vision-landing #_form_68_ ._clear-element { width: 100% !important; }

/* ---------------------------------------------------------------------------
   12. Custom header  (.vision-header)  — paste-in snippet styled here
   --------------------------------------------------------------------------- */
/* The header/footer Code blocks sit inside a normal uSkinned code section that
   has 60px vertical padding and a max-width container. Strip both so the bar is
   flush to the top of the page and spans full width. */
body.vision-landing #site-content section.usn_cmp_code:has(.vision-header),
body.vision-landing #site-content section.usn_cmp_code:has(.vision-footer) {
    padding: 0 !important;
    background: transparent !important;
}
body.vision-landing section.usn_cmp_code:has(.vision-header) .component-inner,
body.vision-landing section.usn_cmp_code:has(.vision-header) .container,
body.vision-landing section.usn_cmp_code:has(.vision-header) .code-item,
body.vision-landing section.usn_cmp_code:has(.vision-footer) .component-inner,
body.vision-landing section.usn_cmp_code:has(.vision-footer) .container,
body.vision-landing section.usn_cmp_code:has(.vision-footer) .code-item {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.vision-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
}
.vision-header .vision-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 40px;
    display: flex;
    align-items: center;
    gap: 40px;
}
.vision-header__logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.vision-header__logo img { height: 48px; width: auto; display: block; }
.vision-header__leaf { color: var(--accent, #00b4c8); flex: 0 0 auto; }
.vision-header__logo-text { font-family: Saira, Arial, sans-serif; font-weight: 700; font-size: 24px; color: var(--accent, #00b4c8); line-height: 1; }
.vision-header__nav { display: flex; align-items: center; gap: 32px; margin-left: 20px; }
.vision-header__nav a {
    font-family: Saira, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #000 !important;
    text-decoration: none;
    white-space: nowrap;
}
.vision-header__nav a:hover { color: var(--accent, #00b4c8) !important; }
.vision-header__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.vision-header__btn {
    font-family: Saira, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 4px;
    white-space: nowrap;
}
.vision-header__btn--ghost { color: #000 !important; border: 1px solid #d9d6d1; background: #fff; }
.vision-header__btn--solid { color: #fff !important; background: var(--accent, #00b4c8); border: 1px solid var(--accent, #00b4c8); }
.vision-header__btn--solid:hover { background: var(--accent-dark, #009eb0); }
.vision-header__burger { display: none; }

/* ---------------------------------------------------------------------------
   13. Custom footer  (.vision-footer)  — paste-in snippet styled here
   --------------------------------------------------------------------------- */
.vision-footer { background: #fff; border-top: 1px solid #eceae6; }
.vision-footer .vision-footer__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.vision-footer__copy { font-family: Saira, Arial, sans-serif; font-size: 14px; color: #000; }
.vision-footer__links { display: flex; gap: 28px; }
.vision-footer__links a { font-family: Saira, Arial, sans-serif; font-size: 14px; color: #000; text-decoration: none; }
.vision-footer__links a:hover { color: var(--accent, #00b4c8); }

/* ---------------------------------------------------------------------------
   14. Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
    body.vision-landing .page-banne-style-1 { height: auto !important; }
    body.vision-landing .page-banne-style-1 .item:before { width: 100%; opacity: .08; }
    body.vision-landing .page-banne-style-1 .inner .row .info { max-width: 100% !important; flex: 0 0 100% !important; }

    body.vision-landing .challenges-face-section .left-side,
    body.vision-landing .challenges-face-section .right-side,
    body.vision-landing .nursery-future-proof-section .right-side { max-width: 100%; flex: 0 0 100%; }

    .vision-header .vision-header__inner { padding: 12px 20px; gap: 16px; }
    .vision-header__nav { display: none; }
    .vision-footer .vision-footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
    body.vision-landing .challenges-face-section .listing-pods,
    body.vision-landing .nursery-future-proof-section .listing-pods,
    body.vision-landing section.usn_cmp_pods:not(.solution-for-you-section) > .component-inner .listing-pods {
        grid-template-columns: 1fr !important;
    }
    body.vision-landing .infogren-detail-wrapper .component-main { padding: 32px !important; }
    body.vision-landing #_form_68_ { padding: 28px 24px !important; border-radius: 40px 0 !important; }
    body.vision-landing #_form_68_ ._form_element { width: 100% !important; }
    body.vision-landing .heading { font-size: 30px !important; }
}