/*
    STYLE GUIDE

    Heading Font: Mrs Saint Delafield // MRS SAINT DELAFIELD
    Body: Raleway

    Navy: #113452
    Orange: #ff9900

*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

html, body {
    
    scroll-behavior: smooth;
}

a[href^="tel"] {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Use the current text color */
    cursor: pointer; /* Ensure it's still clickable but without link styling */
}

:root {
    --header-bg: #f5f5f5; /* Header background color */
    --navy: #113452;
    --orange: #ff9900;
}

/* Change placeholder text color */
input::placeholder, .ContactControl::placeholder {
    color: var(--navy); /* Set your desired color */
}


/* Standard parallax for desktop */
.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* iOS-specific fix */
@supports (-webkit-overflow-scrolling: touch) {
    .parallax {
        background-attachment: scroll;
        -webkit-transform: translate3d(0, 0, 0); /* Use this only for iOS */
        will-change: transform;
        background-size: cover;
    }
}

a, a:link, a:active, a:visited {
    color: var(--navy);
    text-decoration: none;
    position: relative; /* Necessary for positioning the pseudo-element */
}

    /* Apply underline effect only to text links, not images */
    a:not(:has(img))::after {
        content: ''; /* Empty content for the pseudo-element */
        position: absolute; /* Position it absolutely */
        left: 0; /* Start from the left */
        bottom: 0; /* Align to the bottom of the text */
        height: 1px; /* Thickness of the underline */
        width: 0; /* Start with width 0 */
        background-color: var(--orange); /* Underline color */
        transition: width 0.3s ease; /* Smooth transition for width */
    }

    a:not(:has(img)):hover::after {
        width: 100%; /* Full-width underline on hover */
    }

    /* Optional: Ensure nested <span> inherits link styles */
    a span {
        color: inherit; /* Inherits color from the parent <a> */
        text-decoration: inherit; /* Inherits text decoration */
    }


/*---------------------Buttons---------------------------*/
.ButtonOrange {
    background-color: #ff9900; /* Button background color */
    padding: 10px 20px; /* Padding around the text */
    text-align: center; /* Center the text */
    color: #ffffff !important; /* Text color */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Make it behave like a block-level element */
    border-radius: 4px; /* Optional: rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
}

    .ButtonOrange:hover {
        background-color: #113452; /* Color on hover */
    }

.ButtonOrangeContact {
    background-color: #ff9900; /* Button background color */
    padding: 10px 20px; /* Padding around the text */
    text-align: center; /* Center the text */
    color: #ffffff !important; /* Text color */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Make it behave like a block-level element */
    border-radius: 4px; /* Optional: rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
    width: 100%;
    text-align: left;
    text-transform: uppercase;
    border: none !important; /* Remove border */
    box-shadow: none !important; /* Remove box shadow */
}

    .ButtonOrangeContact:hover {
        background-color: #113452; /* Color on hover */
    }

/*---------------------Blog---------------------------*/

/* Ensures the container prevents overflow */
.BlogHomeWrap {
    position: relative;
    overflow: hidden; /* Prevents the image from scaling outside the container */
    border-radius: 0; /* No rounded corners */
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Image scaling effect */
.BlogHomeImage img {
    transition: transform 0.3s ease; /* Smooth scaling effect */
    display: block; /* Ensures proper behavior inside the container */
    width: 100%; /* Ensures the image fills the container */
    height: auto; /* Maintains aspect ratio */
}

/* Combined hover effect: applies to the entire container */
.BlogHomeWrap:hover .BlogHomeImage img {
    transform: scale(1.3); /* Scales the image slightly on hover */
}

.BlogHomeWrap:hover .BlogHomeContainer h3 a {
    color: var(--orange); /* Change text color on hover */
}

/* Link and text styling */
a, a:link, a:visited {
    color: var(--navy); /* Default text color */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth color transition */
}

    a:hover, a:active {
        color: var(--orange); /* Change text color on hover */
    }

/* Optional: For h3 text styling */
.BlogHomeContainer h3 {
    font-size: 1.25rem; /* Adjust font size as needed */
    margin: 0; /* Remove margin for consistency */
    line-height: 1.4; /* Adjust line height */
    padding: 5px;
    border-top: solid 1px var(--orange);
    border-bottom: solid 1px var(--orange);
}



/*--------------------Contact Control-----------------------*/
.ContactControl{
    padding:10px;
    margin-bottom:10px;
    color: var(--navy);
}
/*---------------------Footer----------------------------*/
footer a, footer a:link, footer a:active, footer a:visited, .footerbase a {
    position: relative; /* Position relative for pseudo-element */
    display: inline-block; /* Make the element inline-block to fit the text */
    color: white; /* Start color */
    text-decoration: none; /* Remove default underline */
    transition: color 0.3s ease; /* Smooth color transition */
}

    footer a::after, .footerbase a::after {
        content: ''; /* Empty content for the pseudo-element */
        position: absolute; /* Position it absolutely */
        left: 0; /* Start from the left */
        bottom: 0; /* Align to the bottom of the text */
        height: 1px; /* Thickness of the underline */
        width: 0; /* Start with width 0 */
        background-color: var(--orange); /* Underline color */
        transition: width 0.3s ease; /* Smooth transition for width */
    }

    /* Underline effect for main nav item on hover, but not for images */
    footer a:not(:has(img)), .footerbase a:not(:has(img)) {
        color: white; /* Start color */
    }

        /* Underline effect on hover */
        footer a:not(:has(img)):hover, .footerbase a:not(:has(img)):hover {
            color: var(--orange); /* Change text color on hover */
        }

            /* Underline for text links on hover */
            footer a:not(:has(img)):hover::after, .footerbase a:not(:has(img)):hover::after {
                content: ""; /* Create an empty content for the pseudo-element */
                position: absolute;
                left: 0;
                bottom: 0; /* Position at the bottom of the anchor */
                width: 100%; /* Expand to full width on hover */
                height: 1px; /* Height of the border */
                background-color: var(--orange); /* Border color */
                transition: width 0.3s; /* Smooth transition for width */
            }

    /* For images within anchor tags in the footer */
    footer a img {
        transition: transform 0.3s ease; /* Smooth scaling transition */
    }

    /* Scale images on hover */
    footer a:hover img {
        transform: scale(1.1); /* Slightly scale the image */
    }

.footerbase {
    color: #fff;
    background-color: #103758;
    padding: 10px 0;
    font-size: 9pt;
}

/*------------------------------Navigation Bar & Header------------------------------*/
/* Initial state of header */
.header {
    display:flex;
    position: fixed; /* Makes the header sticky */
    top: 0; /* Stick to the top of the viewport */
    left:0;
    width:100%;
    z-index: 1030; /* Ensure it stays above other elements */
    background-color: none;
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/ /* Optional: Add a subtle shadow */
    transition: all 0.3s ease; /* Smooth transition for scroll effects */
}
.active {
    background-color: rgba(34,54,89,0.7);
    background-color: var(--header-bg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  /*Optional: Add a subtle shadow */
    padding: 10px 0;
    height: 100px;
}


    /* Container */
    .header .container {
        max-width: 1320px; /* Bootstrap default for container */
        display: flex;
        flex-direction: row; /* Align logo and navbar horizontally */
        align-items: center;
        justify-content: flex-start;
        transition: all 0.3s ease;
        
    }

    /* Border or shadow for the navbar */
    .header .navbar {
        border-bottom: 1px solid rgba(33, 37, 41, 0.5); /* Border under the navbar */
        transition: all 0.3s ease;
        /*background-color: var(--header-bg);*/
    }

/* Header content - layout change when scrolled */
.header-content {
    display: flex;
    flex-direction: column; /* Stack the navigation and logo vertically */
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Logo container - initially aligned left, 100px below navbar */
.logo-container {
    transition: all 0.3s ease;
    z-index: 1040;
}
    .logo-container img{
        max-width:120px;
    }

@media (max-width: 991px) {
    .logo-container {
        transition: all 0.3s ease;
        z-index: 1040;
        position:fixed;
        left:20px;
        top:20px;
    }
}

    /* Navbar container - aligned to left initially */
    .navbar {
        flex: 1;
        justify-content: flex-start; /* Align navbar to the left */
        transition: all 0.3s ease;
    }

    /* When scrolled: Adjust logo and navbar layout */
    .header.scrolled .header-content {
        flex-direction: row; /* Align logo and navbar horizontally */
        justify-content: flex-start; /* Align items to the left */
    }

    .header.scrolled .logo-container {
        margin-top: 0; /* Remove the margin when scrolling */
        position: absolute; /* Fix logo at top-left */
        top: 10px; /* Position logo close to top */
        left: 10px; /* Position logo left */
    }

    .header.scrolled .logo-img {
        height: 40px; /* Smaller logo on scroll */
    }

    .header.scrolled .navbar {
        position: fixed; /* Make navbar fixed on scroll */
        left: 60px; /* Position navbar beside the logo */
        top: 10px; /* Align navbar top */
        width: auto;
        justify-content: flex-start; /* Keep navbar items aligned beside logo */
    }

    /* Container becomes full width on scroll */
    .header.scrolled .container {
        max-width: 100%; /* Full width on scroll */
    }

    /* Navbar dropdown menu */
    .navbar .dropdown-menu {
        background-color: var(--header-bg);
        display: none; /* Hidden by default */
        opacity: 0; /* For fade-in effect */
        transition: opacity 0.3s ease, transform 0.3s ease;
        transform: translateY(10px); /* Slight offset for animation */
        border: none; /* Remove default border */
        border-radius: 0; /* Remove curved corners */
        border-top: solid 1px #ff9900;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add subtle shadow */
        padding: 5px 10px;
    }

        .navbar .dropdown-menu .dropdown-item {
            padding: 0.5rem 1rem;
            white-space: normal; /* Allow text wrapping */
            transition: background-color 0.3s ease, color 0.3s ease;
        }

            .navbar .dropdown-menu .dropdown-item:hover {
                background-color: #ff9900; /* Orange hover background */
                color: #fff; /* Optional: Ensure text is readable */
            }

    /* Horizontal dropdown hover alignment */
    .navbar .dropdown:hover .dropdown-menu {
        display: flex; /* Display as a flex container for horizontal layout */
        opacity: 1; /* Make it visible */
        transform: translateY(0); /* Remove offset */
    }

        .navbar .dropdown:hover .dropdown-menu.show {
            top: 100%; /* Adjust for proper alignment */
            left: 0; /* Align dropdown horizontally */
            right: auto; /* Prevent dropdown from overlapping */
        }

    .navbar .dropdown-menu {
        display: flex;
        flex-wrap: wrap;
        width: 780px; /* Adjust width to fit three columns */
        padding: 10px;
    }

        .navbar .dropdown-menu li {
            width: 33.33%; /* Divide into three equal columns */
            list-style: none;
        }

        .navbar .dropdown-menu a {
            display: block;
            padding: 8px 10px;
            white-space: normal; /* Allows multi-line wrapping */
            word-break: break-word; /* Ensures long words break correctly */
            overflow-wrap: break-word; /* Alternative for better browser support */
            max-width: 95%; /* Prevents items from exceeding their container */
        }



    /* Sticky header shadow */
    .sticky-top {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Adjust the search bar */
    .navbar form .form-control {
        max-width: 200px;
    }

    .navbar form .btn {
        white-space: nowrap;
    }

    /* Add border-bottom to top-level nav items on hover */
    .navbar-nav .nav-link {
        position: relative;
        transition: all 0.3s ease;
    }

        .navbar-nav .nav-link:hover {
            color: #ff9900;
        }

            .navbar-nav .nav-link:hover::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: #ff9900;
            }



    /* Ensure the navbar-toggler (burger and X) is styled properly */
    .navbar-toggler {
        border: none; /* Remove border if needed */
        background-color: transparent; /* Keep background transparent */
        z-index: 1051; /* Ensure it sits above the navbar */
        position: relative;
    }

    /* Customize the navbar-toggler icon for both states */
    .navbar-toggler-icon {
        width: 24px; /* Adjust size */
        height: 24px;
        background-size: contain;
        background-repeat: no-repeat;
        background-color: transparent; /* Ensure no background color */
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"%3E%3Cpath stroke="%23113452" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E');
    }

    /* Add custom style for the "X" icon when the menu is open */
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"%3E%3Cpath stroke="%23113452" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 8l22 14M4 22L26 8"/%3E%3C/svg%3E');
    }

    .navbar-toggler:focus {
        outline: none;
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.5); /* Subtle glow */
    }

    .dropdown-arrow {
        display: none;
    }


    /* Mobile: Hide submenu initially */
    @media (max-width: 991px) {
        /* Full-screen mobile menu */
        .navbar-collapse {
            background-color: var(--header-bg);
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 999;
            padding-top: 20px;
            overflow-y: auto;
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
            color: var(--navy);
        }

            .navbar-collapse.show {
                transform: translateX(0);
            }

        /* Ensure the navigation items fill the width */
        .navbar-nav {
            width: 100%;
            text-align: center;
            padding: 20px 0;
        }

            /* NAV ITEM - Ensure <a> and arrow are inline */
            .navbar-nav .nav-item {
                position: relative; /* Required for dropdown positioning */
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                padding: 10px 15px;
            }

            /* NAV LINK - Left-aligned text */
            .navbar-nav .nav-link {
                flex-grow: 1;
                text-align: left;
                display: block;
            }

        /* DROPDOWN ARROW - Positioned on the right */
        .dropdown-arrow {
            margin-left: auto;
            cursor: pointer;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            transition: transform 0.3s ease-in-out;
        }

            .dropdown-arrow.rotated {
                transform: rotate(90deg);
            }

        /* Ensure the dropdown menu appears BELOW the link + arrow */
        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            z-index: 1000;
            display: block; /* Initially hidden */
            opacity: 0;
            transform: translateY(5px); /* Smooth dropdown */
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
            visibility: hidden; /* Ensures it's fully hidden */
        }

        /* Show dropdown when toggled */
        .nav-item.dropdown .dropdown-menu.dropdown-open {
            display: block !important;
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
        }

        .navbar .dropdown-menu li {
            width: 95%; /* Divide into three equal columns */
            list-style: none;
        }
    }


    .password-wrapper {
        position: relative;
    }

    .toggle-password {
        position: absolute;
        right: 12px;
        top: 30%;
        transform: translateY(-50%);
        cursor: pointer;
        font-size: 1.2em;
        color: #666;
        user-select: none;
    }


    /*-----Mobiel Nav----*/
    /* Burger button styles */
    .burger-btn {
        width: 30px;
        height: 22px;
        position: fixed;
        right: 20px;
        top: 20px;
        cursor: pointer;
        border: none;
        background: none;
        padding: 0;
        z-index: 10010;
    }

        .burger-btn .bar {
            display: block;
            width: 100%;
            height: 4px;
            background-color: var(--orange);
            border-radius: 2px;
            position: absolute;
            left: 0;
            transition: all 0.3s ease;
        }

    .bar1 {
        top: 0;
    }

    .bar2 {
        top: 9px;
    }

    .bar3 {
        bottom: 0;
    }

    /* When open, transform bars into an X */
    .burger-btn.open .bar1 {
        transform: rotate(45deg);
        top: 9px;
    }

    .burger-btn.open .bar2 {
        opacity: 0;
    }

    .burger-btn.open .bar3 {
        transform: rotate(-45deg);
        bottom: 9px;
    }

    /* Overlay */
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 10000;
    }

        .overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

    /* Mobile menu container */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: 0;
        padding-top: 20px;
        height: 100%;
        width: 100vw;
        max-width: 400px;
        background: white;
        box-shadow: -2px 0 8px rgba(0,0,0,0.2);
        overflow: hidden;
        z-index: 10005;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        display: flex;
    }

        .mobile-menu.active {
            transform: translateX(0);
        }

    /* .mobile-menu a, .mobile-menu a:link, .mobile-menu a:visited {
        color: var(--navy);
        font-family: "Ubuntu", sans-serif;
        font-weight:400;
        
    }*/
    /* Each menu level (screen) */
    .menu-level {
        min-width: 100%;
        padding: 1em;
        overflow-y: auto;
        transition: transform 0.3s ease;
        position: absolute;
        top: 0;
        bottom: 0;
        background: white;
        left: 0;
        transform: translateX(100%);
        /* Hide offscreen by default */
        visibility: hidden;
    }

        .menu-level.active {
            transform: translateX(0);
            visibility: visible;
            position: relative;
            height:100vh;
        }

        /* When going forward, slide left */
        .menu-level.slide-in {
            animation: slideIn 0.3s forwards;
        }

        /* When going back, slide right */
        .menu-level.slide-out {
            animation: slideOut 0.3s forwards;
        }

    @keyframes slideIn {
        from {
            transform: translateX(100%);
            visibility: visible;
        }

        to {
            transform: translateX(0);
        }
    }

    @keyframes slideOut {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(100%);
            visibility: hidden;
        }
    }

    /* Back button */
    .back-btn {
        background: none;
        border: none;
        font-size: 1.1em;
        cursor: pointer;
        margin-bottom: 1em;
        color: var(--navy);
        position: fixed;
        left: 10px;
        top: 0px;
        transition: color 0.3s ease;
    }

        .back-btn:hover {
            color: var(--blue);
        }

            /* Arrow animation only */
            .back-btn:hover .back-arrow {
                animation: arrowWiggleLeft 1s ease infinite;
                display: inline-block; /* Needed to animate properly */
            }

    @keyframes arrowWiggleLeft {
        0% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(-5px);
        }
        /* Wiggle left for back arrow */
        100% {
            transform: translateX(0);
        }
    }



    /* Lists */
    .menu-level ul {
        list-style: none;
        padding: 0;
        margin: 40px 0 0 0;
    }

    .menu-level li {
        display: flex; /* Make children (e.g. link and button) line up horizontally */
        align-items: center; /* Vertically center content */
        justify-content: space-between; /* Push button to the right */
        /*margin-bottom: 0.5em;*/
        border-bottom: solid 1px var(--navy);
        text-align: left;
        padding: 0.5em;
        min-height: 50px;
    }

        /* Hover effect on the entire li */
        .menu-level li:hover {
            background-color: var(--navy);
        }

            /* Change link and button text to white when li is hovered */
            .menu-level li:hover a,
            .menu-level li:hover .submenu-btn {
                color: white;
            }

    .menu-level li,
    .menu-level a,
    .menu-level .submenu-btn {
        transition: background-color 0.3s ease, color 0.3s ease;
    }


    .menu-level a {
        color: var(--navy);
        font-family: "Ubuntu", sans-serif;
        font-weight: 400;
        text-decoration: none;
        flex: 1; /* Allow the link to take up available space */
    }

    /* Submenu buttons */
    .submenu-btn {
        background: none;
        border: none;
        font-size: 1.2em;
        cursor: pointer;
        color: var(--navy);
        font-weight: bold;
        padding-left: 1em;
        display: inline-block; /* So transform affects it properly */
        transition: color 0.3s ease;
    }


    .menu-level li:hover .submenu-btn {
        animation: arrowWiggle 1s ease infinite;
    }

    @keyframes arrowWiggle {
        0% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(10px);
        }

        100% {
            transform: translateX(0);
        }
    }