/*
Theme Name: Brouwerij De Duijnen
Theme URI: https://brouwerijdeduijnen.nl
Author: Huib Hoek & ChatGPT
Author URI: https://brouwerijdeduijnen.nl
Description: Maatwerk WordPress thema voor Brouwerij De Duijnen.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brouwerijdeduijnen
Tags: brewery, craft beer, custom-theme, responsive, woocommerce-ready
*/

/* ==========================================================================
   BROUWERIJ DE DUIJNEN
   Hoofd stylesheet
   ========================================================================== */

:root{

    /* Kleuren */

    --primary:#111111;
    --secondary:#F8F7F3;
    --white:#FFFFFF;

    --tripel:#B22A24;
    --dubbel:#3558A8;
    --blond:#D88A18;
    --blondbakkie:#C99A1D;

    --text:#333333;
    --border:#ECECEC;

    /* Lettertypes */

    --heading:'Cormorant Garamond', serif;
    --body:'Inter', sans-serif;

    /* Breedtes */

    --container:1280px;

    /* Schaduw */

    --shadow:0 10px 35px rgba(0,0,0,.08);

    /* Overgangen */

    --transition:all .3s ease;

}

/* Reset */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:var(--secondary);

    color:var(--text);

    font-family:var(--body);

    font-size:18px;

    line-height:1.7;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}

img{

    max-width:100%;

    height:auto;

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

ul{
    list-style:none;
}

.container{

    width:min(92%,var(--container));

    margin:auto;

}

section{

    padding:90px 0;

}

h1,h2,h3,h4,h5,h6{

    font-family:var(--heading);

    color:var(--primary);

    font-weight:700;

    line-height:1.1;

}

h1{

    font-size:72px;

}

h2{

    font-size:52px;

}

h3{

    font-size:34px;

}

p{

    margin-top:20px;

}

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 34px;

    background:#111111;

    color:#fff;

    border-radius:40px;

    transition:var(--transition);

    font-weight:600;

}

.button:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}

@media(max-width:992px){

    h1{
        font-size:52px;
    }

    h2{
        font-size:40px;
    }

}

@media(max-width:768px){

    section{

        padding:65px 0;

    }

    h1{

        font-size:42px;

    }

    h2{

        font-size:34px;

    }

    body{

        font-size:16px;

    }

}