body {
    font-family: Verdana, sans-serif;
    font-size: 12px;
    line-height: 1.8;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Hide horizontal overflow to prevent scrollbars */
    min-height: 100vh;
    background: #2d3f70 url(../img/background2.jpg) repeat-y top center;
}

/* Center the content-slate */
.container {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
}

/* Main content area */
#content-slate {
    max-width: 795px;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 auto; /* Center horizontally */
    box-sizing: border-box;
    overflow: visible;
    z-index: 1;
}

/* Background image */
.content-slate-top-background {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: 1049.25px;
    height: 620px;
    background: url(../img/background1.webp) center/cover no-repeat;
    z-index: -1;
    pointer-events: none;
}

/* Ensure the clickable logo has no extra styling from the anchor tag */
.logo {
    position: fixed;
    top: 3px;
    left: calc(50% - 397.5px + 60px); /* Position as before */
    width: 124px;
    height: 124px;
    background: url(../img/logo_nieuw.png) center/cover no-repeat;
    border-radius: 50%; /* Make it circular */
    z-index: 1001; /* Ensure it stays on top */
    display: block; /* Ensure the anchor behaves like a block element */
    text-decoration: none; /* Remove any default anchor styling */
}
/* Sticky top bar for the menus */
#top {
    position: sticky;
    top: 0;
    width: 100%;
    max-width: 795px;
    display: flex;
    flex-direction: column; /* Stack the menus */
    background-color: white;
    z-index: 999;
}

/* Waaghalzen menu with correct 5px inset on both sides */
.waaghalzen-menu-wrapper {
    display: flex;
    justify-content: flex-end; /* Right-align the login menu */
    background-color: #e7e7e7;
    padding-left: 5px; /* 5px inset */
    padding-right: 5px; /* 5px inset */
    height: 48px;
    box-sizing: border-box;
}

/* Main menu properly aligned to avoid logo */
.main-menu-wrapper {
    display: flex;
    justify-content: flex-start; /* Left-align the main menu */
    background-color: gold;
    background: url(/img/bg_menu.png) no-repeat top left;
    background-size: auto 47px; /* Fix the background height to 47px */
    background-position: top center; /* Center the background horizontally */
    height: 47px;
    padding-left: 155px; /* Ensure enough space for the logo on desktop */
    box-sizing: border-box;
}

/* Menu items alignment */
ul.menu {
    margin: 0;
    margin-top: 6px;
    display: flex;
    /*flex-wrap: nowrap;*/ /* Ensure items stay in a row on desktop */
    justify-content: space-between;
    margin-left: 0; /* Remove manual margin */
    list-style: none; /* Remove bullets */
    padding-left: 125px; /* Add padding to move menu items away from the logo */
    padding-right: 5px; /* Add padding-right to ensure no overflow */
    width: 100%;
    transition: padding-left 0.3s ease-in-out; /* Smooth transition */
}

ul.waaghalzen-menu {
    list-style: none; /* Remove bullets */
}

ul.menu li {
    margin-right: 15px; /* Base spacing between items */
}

    ul.menu li:nth-child(2) {
        flex-grow: 1; /* Add flexible spacing after "Agenda" */
    }

    /* Reduced padding between menu items */
    ul.menu li a {
        padding: 5px 10px; /* Reduce padding for closer items */
        color: #d32e39; /* Main menu link color */
        font-weight: bold;
        text-decoration: underline;
    }

    ul.menu li b {
        padding: 5px 10px; /* Reduce padding for closer items */
        color: #555;
        font-weight: bold;
        text-decoration: none;
    }
    
.menu a:hover {
    color: #2a6496; /* Hover color for main menu */
    text-decoration: underline;
}

.waaghalzen-menu a {
    padding: 5px 10px; /* Reduce padding for waaghalzen menu as well */
    color: #2a6496; /* Default color for waaghalzen menu */
    text-decoration: none;
}

    .waaghalzen-menu a:hover {
        color: #d32e39; /* Hover color for waaghalzen menu */
        text-decoration: underline;
    }

/* Scrollable content */
#content-canvas {
    margin-top: 0px;
    margin-left: 5px;
    padding: 20px;
    padding-right: 30px;
    box-sizing: border-box;
    width: calc(100% - 5px);
    overflow-wrap: break-word;
    background-color: white;
    min-height: calc(100vh - 96px); /* Adjust 124px to the height of any fixed elements like headers or logos */
}

    #content-canvas h1 {
        margin-top: 0.3em; /* Reduce the top margin of the h1 */
        /*        justify-self: center;
*/
    }

    #content-canvas img {
        position: relative;
        top: -20px; /* Move the image 20px higher */
        max-width: 100%;
        max-height: 338px; /* Set the max height as per the aspect ratio */
        width: auto;
        height: auto;
        display: block; /* Prevent any inline spacing around the image */
        margin: 0 auto; /* Horizontally center the image */
        margin-bottom: 0.0em; /* Reduce the bottom margin of the img */
    }

/* Fixed/sticky icon bar positioned at the right of content-slate */
.icon-bar {
    position: fixed;
    right: calc(50% - 397.5px); /* Align with the right edge of content-slate */
    top: 95px; /* 95px from the top of the viewport */
    display: flex;
    flex-direction: column; /* Stack icons vertically */
    z-index: 1000; /* Ensure the icons appear above other content */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transition for opacity and position */
    transform: translateY(0); /* Default transform state */
    opacity: 1; /* Default state, fully visible */
}

    /* Style the icon bar links */
    .icon-bar a {
        display: block;
        text-align: center;
        padding: 5px;
        transition: all 0.3s ease;
        color: white;
        font-size: 20px;
    }

        /* Style the social media icons with color, if you want */
        .icon-bar a:hover {
            background-color: #000;
        }

    /* Hide the icon-bar when scrolling */
    .icon-bar.hidden {
        opacity: 0; /* Fade out */
        transform: translateY(20px); /* Shift down for a smoother exit */
        pointer-events: none; /* Disable interaction while hidden */
    }

.facebook {
    background: #3B5998;
    color: white;
}

.instagram {
    background: #f09433;
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
    color: white;
}

.youtube {
    background: #bb0000;
    color: white;
}

/* Responsive styles */
@media (max-width: 768px) {
    #top {
        width: 100%;
    }

    .logo {
        left: -13px; /* Negative offset for mobile */
    }

    .main-menu-wrapper {
        padding-left: 40px; /* Reduce padding on mobile to make space */
        justify-content: flex-start;
        background-size: calc(100% + 40px) 47px; /* Extend background width beyond viewport */
        background-position: -10px top;
    }

    /* On mobile, allow the menu items to wrap */
    ul.menu {
        flex-wrap: wrap; /* Allow items to wrap on narrow screens */
        margin-left: 0; /* No manual margin on mobile */
        padding-left: 77px; /* Add padding to move menu items away from the logo (2px more than strictly needed, for better optics) */
        list-style: none; /* Remove bullets on mobile */
    }

        /* Even tighter padding on mobile to cram more items */
        ul.menu li a {
            padding: 3px 5px; /* Further reduce padding between items on mobile */
        }

        ul.menu li b {
            padding: 3px 5px; /* Further reduce padding between items on mobile */
        }
        
        .icon-bar {
        top: 50%; /* Center the icon-bar vertically in the viewport */
        right: 0px; /* Keep icons closer to the right edge on mobile */
        transform: translateY(-50%); /* Ensure vertical centering */
    }

        .icon-bar a {
            padding: 16px;
        }

    #content-canvas {
        padding-right: 55px;
    }
}

/* Responsive styles for mobile landscape mode */
@media (max-width: 768px) and (orientation: landscape) {
    .icon-bar {
        top: calc(max(50%, 5px + 48px + 50% - 30px)); /* Center the icon-bar vertically, but at least 5px below #top and considering half its height */
    }
}

h1 {
    font: bold 30px 'SalsaRegular', cursive;
    margin: 25px 0 10px 0;
    padding: 0;
}

h2 {
    font: bold 20px 'SalsaRegular', cursive;
    margin: 16px 0 6px 0;
    padding: 0;
}

a {
    font-size: 12px;
    color: #d32e39;
    font-weight: bold;
    text-decoration: none;
}

    a:hover, a:focus {
        color: #2a6496;
        text-decoration: underline;
    }

@font-face {
    font-family: 'SalsaRegular';
    src: url('/fonts/salsa-regular-webfont.eot');
    src: url('/fonts/salsa-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/salsa-regular-webfont.woff') format('woff'), url('/fonts/salsa-regular-webfont.ttf') format('truetype'), url('/fonts/salsa-regular-webfont.svg#SalsaRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* General form styling */
.form-horizontal {
    margin: 0 auto;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white background */
    border-radius: 5px;
}

/* Fieldset styling similar to h2 */
fieldset {
    border: 1px solid #ccc; /* Add a light border */
    margin-bottom: 15px;
    padding: 10px; /* Add some padding around the content */
    border-radius: 5px; /* Rounded corners for a modern look */
}

/* Legend styling to match h2 */
legend {
    font: bold 20px 'SalsaRegular', cursive; /* Match the font used in h2 */
    color: #2d3f70; /* Dark blue similar to h2 */
    padding: 5px 10px;
    border-radius: 4px;
    background-color: #ffffff; /* Add a white background */
    margin-bottom: 10px;
    border: 1px solid #ccc; /* Light border to distinguish it */
}

/* Styling for labels */
.form-horizontal label {
    font-weight: bold;
    color: #2d3f70; /* Match the legend text color */
    font-size: 14px;
    margin-bottom: 5px;
}

/* General input field styles */
.form-horizontal input[type="text"],
.form-horizontal input[type="email"],
.form-horizontal textarea {
    background-color: #f9f9f9; /* Light background */
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    font-family: Verdana, sans-serif; /* Ensure textareas use the same font */
    margin-bottom: 10px;
    transition: border-color 0.3s ease;
}

    /* Focus state for input fields */
    .form-horizontal input:focus,
    .form-horizontal textarea:focus {
        border-color: #d32e39; /* Red border on focus */
        box-shadow: 0 0 5px rgba(211, 46, 57, 0.5); /* Subtle red glow on focus */
        outline: none;
    }

/* Textarea adjustments */
.form-horizontal textarea {
    resize: vertical;
    min-height: 100px; /* Set a minimum height for text area */
}

.form-control {
    width: 100%;
    box-sizing: border-box; /* Ensures padding is included in the width */
    padding: 8px 12px; /* Consistent padding for all controls */
    height: auto; /* Consistent height */
    background-color: #f9f9f9; /* Light background color */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 4px; /* Slight rounding for a modern look */
    font-size: 14px; /* Consistent font size */
    font-family: Verdana, sans-serif; /* Ensure consistent font */
    color: #333; /* Text color */
}

    .form-control:focus {
        border-color: #66afe9; /* Light blue border on focus */
        outline: none; /* Remove default outline */
        box-shadow: 0 0 5px rgba(102, 175, 233, 0.5); /* Subtle glow on focus */
    }

/* Error message styles */
.text-danger {
    font-size: 12px;
    color: #ff4c4c; /* Bright red for errors */
    margin-top: 5px;
    display: block; /* Ensure it's on its own line */
}

/* Recaptcha widget spacing */
.g-recaptcha {
    margin-top: 8px;
    margin-bottom: 15px;
}

/* Submit button */
.btn-primary {
    background-color: #2a6496;
    border: none;
    color: white;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .btn-primary:hover {
        background-color: #a6252d; /* Darker on hover */
    }

/* Compact form layout for mobile */
@media (max-width: 768px) {
    /* Reduce padding and margin for form elements */
    .form-horizontal {
        padding: 10px;
    }

        .form-horizontal input[type="text"],
        .form-horizontal input[type="email"],
        .form-horizontal textarea {
            padding: 6px;
            font-size: 13px;
            margin-bottom: 8px;
        }

    /* Button adjustments for mobile */
    .btn-primary {
        padding: 8px 15px;
        font-size: 13px;
    }
}

/* Placeholder styling for consistency */
::placeholder {
    color: #888;
    font-size: 12px;
}