/* ----------------------------
        Branding & Vars
---------------------------- */
:root {
    --primary-100:#FFE2DE;
    --primary: #FF6F59;
    --primary-600: #CC5947;
    --primary-700:#994335;
    --secondary: #2A324B;
    --secondary-600:#22283C;
    --tertiary:#4136bb;
    --grey:#22283c77;
    --black:#000;
    --white:#fff;
    --hover-on-white: #2b324b0a;
    --background: #FFF3F2;
    --positive--bg:#EDFBF6;

    --font-lg:1.25rem;
    --font-md:1rem;
    --font-sm:0.875rem;
    --font-xs:0.5rem;

    --height--sm:2rem;
    --height-p-section:6rem;
    --height-p-section--sm:4rem;
    --height--btn:3.5rem;

    --text-shadow:#000 0px 0px 5px;

    --placeholder-img:url(/user/themes/onlineambacht/assets/online-ambacht_thumbnail.png);
}

/* ----------------------------
        WCAG > Skip link
---------------------------- */
.skip-link {
    position: absolute;
    top: 0; 
    left: 0;
    background: var(--secondary);
    color: var(--white);
    padding: 1rem;
    z-index: 999999999;
    text-decoration: none;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}
  .skip-link:focus {
    transform: translateY(0); /* Maak zichtbaar bij focus */
  }

/* ----------------------------
        Cookie melding
---------------------------- */
div.cc-window{
    font-family: "Space Grotesk", sans-serif;
    color: var(--secondary)!important;
    font-size:var(--font-md)!important;
    line-height:150%!important;
    background-color:var(--primary-100)!important;
    border-radius:0.5rem;
}

.cc-btn{
    font-size: var(--font-md);
}

.cc-link{
    color: var(--primary-600)!important;
}
    .cc-link:hover{
        color: var(--primary-700)!important;
    }

/* ----------------------------
        Titles
---------------------------- */
h1, h2, h3, h4, h5, h6{
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 600;
}

h1{
    line-height:100%;
    font-size:3.75rem;
    margin-bottom:2rem;
}

h2{
    font-size:2.625rem;
    color: var(--secondary);
    line-height:120%;
    margin-bottom:2rem;
    padding-top:1.25rem;
}
    div h2:first-of-type{
        padding-top:0;
    }
    h2 span.pre-title{
        color: var(--primary-600);
        font-size:var(--font-md);
        line-height: 100%;
        display: block;
        padding-bottom: 0.5rem;
    }

h3,
.footer__title{
    font-size:1.65rem;
    line-height:130%;
    margin-bottom:1rem;
    padding-top:1rem;
}

h4,
.benefit__title{
    font-size: 1.2rem;
    line-height: 130%;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* ----------------------------
        Default paragraphs
---------------------------- */
p, li, ul, ol{
  font-family: "Rethink Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size:18px;
}

p{
    line-height: 180%;
    max-width: 58ch !important;
}
    /* last p of div */
    div p:last-of-type,
    * div li:last-of-type,
    div li:last-of-type,
    div ul:last-of-type,
    div ol:last-of-type{
        margin-bottom:unset;
    }
    
p,ul,ol{
    margin-bottom:1.75rem;
}

li{
    margin-bottom:1rem;
}

code{
    color:#7e7e7e;
    background-color: #7e7e7e20;
}

/* notices */
div.notices{
    padding:1rem;
}

.notices p{
    margin-bottom: unset;
}

p.lead{
    font-size:1.375rem;
}

/* title combinations */
.title-icon-wrapper{
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap:0.5rem;
}
    .title-icon-wrapper h2,
    .title-icon-wrapper h3{
        margin: unset;
        padding: unset;
    }

/* ----------------------------
        Icons
---------------------------- */
.icon{
    display: flex;
    aspect-ratio: 1 / 1;
}

.icon.icon--filled-primary{
    background-color:var(--positive--bg);
    fill: var(--white);
}

.icon--md{
    width: var(--height--btn);
    height: var(--height--btn);
    padding:1rem;
}

.icon--sm{
    width: var(--height--sm);
    height: var(--height--sm);
    padding:0.5rem;
}

.icon--rounded{
    border-radius:100rem;
}

/* ----------------------------
        Bootstrap extra
---------------------------- */
.offset-right-md-1{
    margin-right: 8.333333%;
}

@media (min-width: 768px) {
    .offset-right-md-1 {
        margin-right: 8.33333333%;
    }
}

/* ----------------------------
        Body, mains en sections
---------------------------- */
body{
    /*background-color: var(--background);*/
    margin-bottom:unset !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height:150%;
    font-family: "Space Grotesk", sans-serif;
    color: var(--secondary);
}

.main-content{
    flex-grow: 1;
    margin-top:7rem !important;
    padding-bottom: 4rem;
    padding-top:4rem;
}

*:focus-visible{
    outline:2px dotted var(--primary)!important;
}
.btn.focus, .btn:focus{
    box-shadow: 0 0 0 .1rem var(--primary) !important;
}

section{
    padding-top:var(--height-p-section);
    padding-bottom:var(--height-p-section);
}
    /* voor elementen die ook section padding nodig hebben */
    .p-top-section{
        padding-top:var(--height-p-section)!important;
    }
    .p-bottom-section{
        padding-bottom:var(--height-p-section)!important;
    }

section.container-fluid{
    max-width: calc(100vw - (3rem - -2px));
    padding-top:4rem;
    padding-bottom:4rem;
}

.section__content,
.section__content--row,
.section__content--center{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: stretch;
    gap:2rem;
}

    .section__content--row{
        flex-direction: row;
    }
    .section__content--center{
        flex-direction: column;
        align-items:center;
    }
    .section__content h2{
        margin-bottom: unset;
    }

/* ----------------------------
        Default links
---------------------------- */
a{
    text-decoration: underline;
    background-color: transparent;
    transition: 0.025s ease-in;
}

/* default a */
a{
    color: var(--secondary);
}
    a:hover{
        color: var(--primary-600);
        text-decoration: none;
    }

/* paragraph > a */
p>a{
    color: var(--primary);
}
    p>a:hover{
        color: var(--primary-600);
        text-decoration: none;
    }

a.link{
    display: flex;
    gap:0.5rem;
    flex-wrap: wrap;
}

/* ----------------------------
        Default buttons & hyperlinks
---------------------------- */
.btn,
nav .nav__primary .nav-item:last-of-type > a.nav-link,
button.button,
a.cc-btn{
    background-color: var(--secondary);
    color: var(--white);
    text-decoration: none;
    transition: 0.05s ease-in;
    border-radius: 1rem;
    padding:1rem 1.5rem;
    height: var(--height--btn);
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    border:2px solid var(--secondary)
}
    .btn:hover,
    nav .nav__primary .nav-item:last-of-type > a.nav-link:hover,
    button.button:hover,
    a.cc-btn:hover,
    .cc-color-override--470100148 .cc-btn:hover{
        color: var(--white);
        text-decoration: underline;
        background-color: var(--secondary-600);
    }
    nav .nav__primary .nav-item.active:last-of-type > a.nav-link{
        color: var(--background)!important;
    }

.btn--display{
    font-size: 1.125rem;
    padding: 1rem 1.75rem;
    border-radius: 1rem;
    width: max-content;
    white-space: nowrap;
}

.btn--secondary{
    border: 2px solid;
    background-color:transparent;
    border-color: var(--secondary);
    color: var(--secondary);
}
    .btn--secondary:hover{
        border-color: var(--secondary-600);
        color: var(--secondary-600);
        background-color:transparent;
    }

.btn--hyperlink,
.footer__contact-info{
    padding: 0.5rem;
    display: block;
    margin-bottom: unset;
}
    p + .btn--hyperlink{
        padding:0.5rem 0rem;
    }