/*
Theme Name: Mamoda Webdesign
Theme URI: https://mamoda.nl
Author: Mamoda Nederland
Author URI: https://mamoda.nl
Description: Thema van Mamoda
*/

:root {
    --color-primary: #1b2330;
    --color-secondary: #f4f1ea;

    --color-text-primary: #1b2330;
    --color-text-primary-tint: #2a3242;
    --color-text-accent: #8a7345;


    --color-text-light: #f4f1ea;
}




body {
    font-family: 'Newsreader', sans-serif;
    /* font-family: 'Sora', sans-serif; */
    /* overflow-x: hidden; */
    background-color: var(--color-secondary);
}

::selection {
    background-color: var(--color-primary);
    color: var(--color-secondary);
}


@media (min-width: 1600px) {
    .container {
        max-width: 1200px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1120px;
    }
}

.g-6 {
    gap: 5rem;
}

@media (min-width: 992px) {
    .pe-lg-10 {
        padding-right: 6rem !important;
    }
}

/*
 ===========================
 Text
 ===========================
*/
.text-primary {
    color: var(--color-text-primary) !important;
}

.text-primary-tint {
    color: var(--color-text-primary-tint) !important;
}

.text-accent {
    color: var(--color-text-accent) !important;
}

h1 {
    font-weight: 300;
    font-size: clamp(40px, 5.6vw, 73px);
    line-height: 1.04;
    letter-spacing: -.01em;
    margin: 0 0 28px;
}

h1 strong {
    font-style: italic;
    font-weight: 400;
    color: var(--color-text-accent);
}

h2 {
    font-size: clamp(28px, 3vw, 40px);
}

.leading {
    font-size: clamp(17px, 1.4vw, 19px);
    line-height: 1.6;
}

.side-by-side p {
    font-size: clamp(17px, 1.4vw, 19px);
    line-height: 1.6;
}

/*
 ===========================
 Buttons
 ===========================
*/
button,
.btn {
    padding: 12px 36px;
    font-size: 16px;
    border: none;
    border-radius: 0;
    font-weight: 600;
}

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

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

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

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

@media (max-width: 767.98px) {
    .hero .btn {
        width: 100%;
    }
}


/*
 ===========================
 Header
 ===========================
*/
header,
.offcanvas {
    background-color: var(--color-secondary);
}

header .menu-item a {
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: 18px;
    padding: 6px 0;
    margin: 0 12px;
    position: relative;
}

header .menu-item a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

header .menu-item a:hover::after {
    transform: scaleX(1);
}

/*
 ===========================
 Hero
 ===========================
*/
.hero {
    margin-top: 10rem;
}


/*
 ===========================
 Side by side
 ===========================
*/
.side-by-side__ratio {
    --bs-aspect-ratio: 100%;
}

/* Sticky afbeelding - werkt alleen op desktop */
@media (min-width: 992px) {
    .side-by-side__sticky {
        position: sticky;
        top: 4rem;
        /* afstand vanaf bovenkant viewport, pas aan indien je een vaste header hebt */
    }
}



/*
 ===========================
 USPS
 ===========================
*/
@media (max-width: 767.98px) {
    .usps .row>div {
        border-left: 0 !important;
        /* linkerlijn weg op telefoon */
        border-top: 1px solid #dee2e6;
        /* lijn boven elke USP */
    }

    .usps .row>div:first-child {
        border-top: 0;
        /* eerste niet dubbel met section border-top */
    }
}





/*
 ===========================
 Footer
 ===========================
*/
footer {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

footer .menu-item {
    margin-bottom: 10px;
}


footer .menu-item a {
    text-decoration: none;
    color: var(--color-text-light);
    font-size: 18px;
    padding: 6px 0;
    position: relative;
}

footer .menu-item a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

footer .menu-item a:hover::after {
    transform: scaleX(1);
}

footer a.link {
    text-decoration: none;
    font-size: 1rem;
    color: var(--color-text-light);
}