/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://slaapmakend.nl
Description: Child theme voor Slaapmakend
Author: Slaapmakend
Author URI: https://slaapmakend.nl
Template: twentytwentyfive
Version: 1.0.0
*/

/* ==========================================================================
   1. FONTS
   ========================================================================== */

@font-face {
    font-family: 'Ubuntu';
    src: url('assets/fonts/ubuntu/Ubuntu-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('assets/fonts/ubuntu/Ubuntu-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. BASE STYLES
   ========================================================================== */

body {
    padding-top: 82px;
}

body.wpfront-notification-bar-top {
    padding-top: 114px;
}

body:has(.transparent-header) {
    padding-top: 0;
}

/* Offset for anchor links */
:target {
    scroll-margin-top: 100px;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    color: #4A86AA;
}

/* ==========================================================================
   4. SITE TITLE
   ========================================================================== */

.wp-block-site-title,
.wp-block-site-title a {
    font-family: 'Ubuntu', sans-serif;
    text-decoration: none;
}

.titel-slaap {
    font-weight: 700;
}

.titel-makend {
    font-weight: 500;
}

/* ==========================================================================
   5. HEADER - Base
   ========================================================================== */

.site-header {
    position: fixed;
	top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    max-width: 100% !important;
    width: 100% !important;
    height: 82px;
    padding: 0 2rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: #ffffff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    transition: background 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
}

.site-header .wp-block-site-title a,
.site-header .wp-block-navigation a,
.site-header .wp-block-navigation-item__content {
    color: #4b86aa !important;
    transition: color 0.3s ease;
}

/* Header - Scrolled */
.site-header.scrolled {
    height: 62px;
}

/* Header - Offsets for admin bar and notification bar */
.admin-bar .site-header {
    top: var(--wp-admin--admin-bar--height, 32px);
}

body.wpfront-notification-bar-top .site-header {
    top: 32px;
}

body.admin-bar.wpfront-notification-bar-top .site-header {
    top: calc(var(--wp-admin--admin-bar--height, 32px) + 32px);
}

/* ==========================================================================
   6. HEADER - Transparent (for pages with hero image)
   Add class "transparent-header" to the hero Cover block
   ========================================================================== */

body:has(.transparent-header) {
    padding-top: 0;
}

body:has(.transparent-header) .site-header {
    background: transparent;
    box-shadow: none;
}

body:has(.transparent-header) .site-header .wp-block-site-title a,
body:has(.transparent-header) .site-header .wp-block-navigation a,
body:has(.transparent-header) .site-header .wp-block-navigation-item__content {
    color: #ffffff !important;
}

/* Transparent header after scroll */
body:has(.transparent-header) .site-header.scrolled {
    background: #ffffff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

body:has(.transparent-header) .site-header.scrolled .wp-block-site-title a,
body:has(.transparent-header) .site-header.scrolled .wp-block-navigation a,
body:has(.transparent-header) .site-header.scrolled .wp-block-navigation-item__content {
    color: #4b86aa !important;
}

/* ==========================================================================
   7. NAVIGATION
   ========================================================================== */

/* Hide desktop menu by default (mobile first) */
.wp-block-navigation__container {
    display: none !important;
}

/* Show hamburger button by default */
.wp-block-navigation__responsive-container-open {
    display: flex !important;
}

/* Mobile menu button color */
.site-header .wp-block-navigation__responsive-container-open {
    color: #4b86aa;
}

/* Mobile menu button on transparent header */
body:has(.transparent-header) .site-header .wp-block-navigation__responsive-container-open {
    color: #ffffff;
}

/* Mobile menu button after scroll */
body:has(.transparent-header) .site-header.scrolled .wp-block-navigation__responsive-container-open {
    color: #4b86aa;
}

/* Typography */


/* ==========================================================================
   8. HERO IMAGE & TEXT
   ========================================================================== */

.transparent-header {
    margin-top: 0;
    padding-top: 0;
}

.hero-image img.wp-block-cover__image-background {
    object-position: 65% 50% !important;
}

.hero-text {
    margin-top: 140px;
    max-width: 70vw;
}

.hero-text h2 {
    margin-bottom: 30px;
}

/* ==========================================================================
   9. COMPONENTS
   ========================================================================== */

/* Green checkmark list */
.green-checks {
    list-style: none;
    padding-left: 0;
}

.green-checks li {
    position: relative;
    padding-left: 1.5em;
}

.green-checks li::before {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #bbe601;
    position: absolute;
    left: 0;
}

/* Block spacing fix */
.wp-block-group .alignfull,
.wp-block-group .alignwide {
    margin-bottom: -20px;
}

/* ==========================================================================
   10. RESPONSIVE - Large phones (480px+)
   ========================================================================== */

@media (min-width: 480px) {
    .wp-block-site-title a {
        font-size: 20px;
    }
}

/* ==========================================================================
   11. RESPONSIVE - Small tablets (640px+)
   ========================================================================== */

@media (min-width: 640px) {
    .hero-text {
        max-width: 45vw;
        margin-left: 2vw;
    }
}

/* ==========================================================================
   12. RESPONSIVE - Tablets (768px+)
   ========================================================================== */

@media (min-width: 768px) {
    .hero-text {
        max-width: 55vw;
    }
}

/* ==========================================================================
   13. RESPONSIVE - Small laptops (1024px+)
   ========================================================================== */

@media (min-width: 1024px) {
    .hero-text {
        max-width: 45vw;
        margin-top: 200px;
        margin-bottom: 100px !important;
    }
}

/* ==========================================================================
   14. RESPONSIVE - Desktops (1280px+)
   ========================================================================== */

@media (min-width: 1280px) {
    .wp-block-site-title a {
        font-size: 24px;
    }
    
    .hero-text {
        margin-left: 4vw;
        max-width: 35vw;
    }
    
    .hero-text h1 {
        font-size: 3em !important;
    }
    
    /* Show desktop navigation */
    .wp-block-navigation__container {
        display: flex !important;
    }
    
    .wp-block-navigation__responsive-container-open {
        display: none !important;
    }
}

/* ==========================================================================
   15. RESPONSIVE - Large desktops (1680px+)
   ========================================================================== */

@media (min-width: 1680px) {
    .wp-block-site-title a {
        font-size: 24px;
    }
    
    .hero-text {
        margin-top: 7vw;
        margin-left: 9vw;
        margin-bottom: 5vw;
        max-width: 30vw;
    }
    
    .hero-text h1 {
        font-size: 3em !important;
    }
}

/* ==========================================================================
   16. RESPONSIVE - Full HD (1920px+)
   ========================================================================== */

@media (min-width: 1920px) {
    .hero-text {
        margin-left: 15vw;
    }
}

/* ==========================================================================
   17. RESPONSIVE - Ultra wide / 4K (2560px+)
   ========================================================================== */

@media (min-width: 2560px) {
    .hero-text {
        margin-left: 20vw;
    }
}