/* -------------------------------
   Stormvloed for headers
-------------------------------- */
@font-face {
    font-family: 'Stormvloed';
    src: url('Stormvloed_Schiedam/StormvloedSchiedamRegular.woff2') format('woff2'),
         url('Stormvloed_Schiedam/StormvloedSchiedamRegular.woff') format('woff'),
         url('Stormvloed_Schiedam/Stormvloed_Schiedam.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Stormvloed', sans-serif;
    line-height: 1.2;
    color: #1C1817; /* Header font color */
}

/* Bigger header sizes for desktop */
h1 { font-size: 3rem; }   
h2 { font-size: 2.5rem; } 
h3 { font-size: 2rem; }   
h4 { font-size: 1.75rem; }
h5 { font-size: 1.5rem; } 
h6 { font-size: 1.25rem; } 

/* -------------------------------
   GT Super for body text
-------------------------------- */
@font-face {
    font-family: 'GT Super';
    src: url('GT-Super/GT-Super-Text-Regular.woff2') format('woff2'),
         url('GT-Super/GT-Super-Text-Regular.woff') format('woff'),
         url('GT-Super/GT-Super-Text-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GT Super';
    src: url('GT-Super/GT-Super-Text-Bold.woff2') format('woff2'),
         url('GT-Super/GT-Super-Text-Bold.woff') format('woff'),
         url('GT-Super/GT-Super-Text-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GT Super';
    src: url('GT-Super/GT-Super-Text-Regular-Italic.woff2') format('woff2'),
         url('GT-Super/GT-Super-Text-Regular-Italic.woff') format('woff'),
         url('GT-Super/GT-Super-Text-Regular-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* -------------------------------
   Responsive: Mobile friendly
-------------------------------- */
@media (max-width: 768px) {
    h1 { font-size: 2.25rem; }  
    h2 { font-size: 2rem; }     
    h3 { font-size: 1.75rem; }  
    h4 { font-size: 1.5rem; }   
    h5 { font-size: 1.25rem; }  
    h6 { font-size: 1.1rem; }   

    body {
        font-size: 1rem; /* ~16px on tablets/mobiles */
    }
}

@media (max-width: 480px) {
    h1 { font-size: 2rem; }   
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; } 
    body { font-size: 0.95rem; } /* ~15px on small phones */
}