/* ================================
Responsive Content Margins
================================ */

@media (max-width: 1024px) {
    /* Reduce main content margins */
    .header-wrapper {
        margin-left: var(--wp--preset--spacing--40) !important;
        margin-right: var(--wp--preset--spacing--40) !important;
    }

    .site-footer > .wp-block-group {
        padding-left: var(--wp--preset--spacing--40)!important;
        padding-right: var(--wp--preset--spacing--40)!important;
    }

    main {
        margin-left: 0;
        margin-right: 0;
        margin-top: var(--wp--preset--spacing--50);
        margin-bottom: var(--wp--preset--spacing--50);
        padding-left: var(--wp--preset--spacing--40) !important;
        padding-right: var(--wp--preset--spacing--40) !important;
    }
    
    /* Adjust alignwide elements */
    .alignwide {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 760px) {
    .resident-name-wrapper {
        align-items: flex-start;
        flex-direction: column;
    }
}   

/* ================================
   Responsive Header Styles
   ================================ */

/* Revert core styles at default breakpoint */
@media (min-width: 600px) {
	/* Keep hiding the expanded menu */
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* Keep showing the button to open the menu */
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Apply core styles at custom breakpoint */

@media (min-width: 1150px) {
	/* Show the expanded menu */
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block;
	}

	/* Hide the button to open the menu */
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

@media (max-width: 1500px) {
    .site-header nav:not(.languages) *{
        font-size: var(--wp--preset--font-size--base)!important;
    }
}

@media (max-width: 1350px) {
    .site-header nav:not(.languages) *{
        font-size: var(--wp--preset--font-size--small)!important;
    }
    nav ul.wp-block-navigation li a {
        padding: 0 var(--wp--preset--spacing--40) !important;
    }
}

@media (max-width: 1205px) {
    .wp-block-site-tagline {
        font-size: 2.8rem!important;
    }
}

@media (max-width: 1149px) {
    /* HEADER */
    .site-header .header-wrapper > div {
        gap: 0;
    }

    .site-header .header-wrapper > div:not(:first-child):not(:last-child) {
        border-bottom-width: 2px!important;
        border-bottom-color: var(--wp--preset--color--primary)!important;
        border-bottom-style: solid!important;
    }

    .site-header .header-logo {
        padding: 0 var(--wp--preset--spacing--50)!important;
    }
    .site-header .site-logo {
        padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50)!important;
    }
    .site-header img {
        height: 45px!important;
        width: auto!important;
        max-width: fit-content;
    }
    
    .wp-block-site-tagline {
        font-size: 3.8vw !important;
    }

    .site-header .header-wrapper > div:last-child {
        background-color: #fff;
        border: 2px solid var(--wp--preset--color--primary)!important;
        position: absolute;
        top: 9px;
        height: 28px;
        width: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .site-header .header-wrapper > div:last-child svg {
        height: 20px;
        width: auto;
    }

    /* NAVIGATION */
    .wp-block-navigation__responsive-container-close {
        top: var(--wp--preset--spacing--40);
        right: var(--wp--preset--spacing--40);
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        padding-top: var(--wp--preset--spacing--60);
    }

    .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
        background-color: var(--wp--preset--color--primary);
        color: var(--wp--preset--color--base)!important;
        height: 100%;
        width: 100%;
        max-width: 400px;

        /* default */
        display: flex;
        flex-direction: column;
        overflow: auto;
        padding: clamp(1rem, var(--wp--style--root--padding-top), 20rem) clamp(1rem, var(--wp--style--root--padding-right), 20rem) clamp(1rem, var(--wp--style--root--padding-bottom), 20rem) clamp(1rem, var(--wp--style--root--padding-left), 20rem);
        z-index: 100000;
    }

    .site-header nav ul.wp-block-navigation, .site-header nav ul.wp-block-navigation__submenu-container {
        box-shadow: none;
    }

    .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open ul{
        height: auto;
        width: 100%!important;
        padding: 0 var(--wp--preset--spacing--60) !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
        padding-right: 0!important;
    }

    .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle,
    .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open ul li {
        border-bottom: 2px solid var(--wp--preset--color--base)!important;
        height: auto;
        padding: var(--wp--preset--spacing--40) 0!important;
        width: 100%!important;   
    }

    .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle{
        padding-top:0!important;
    }

    .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open ul li:last-child {
        border-bottom:none!important;
    }
    .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__submenu-container li:last-child {
        padding-bottom:0!important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
        padding-top: var(--wp--preset--spacing--40);
    }

    nav:not(.languages) ul.wp-block-navigation li {
        border:none!important;
        padding: 0 var(--wp--preset--spacing--60);
    }
}

/* ================================
   Responsive Footer Styles
   ================================ */

/* General margin reduction for mobile */
@media (max-width: 1130px) {
    .site-footer nav {
        height: auto;
        min-width: 60%;
    }
   
    .site-footer nav ul{
        flex-direction: column;
        flex-wrap: nowrap;
        height: auto;
    }
    .site-footer nav ul li{
        border-style: solid!important;
        margin-top: var(--wp--preset--spacing--30);
        justify-content: center;
        width: 100%;
    }

    .site-footer .wp-block-column:first-child nav ul li:last-child{
        border-bottom-width: 2px;
    }

    .site-footer .footer-logos {
        border-bottom-width: 2px!important;
        border-bottom-color: var(---wp--preset--color--base)!important;
        border-bottom-style: solid!important;
        margin-bottom: 0!important;
    }

    .site-footer .footer-logos > div > div:last-child > div {
        margin-bottom: 0!important;
    }
    .site-footer .footer-logos .wp-block-column > div{
        gap: var(--wp--preset--spacing--70)!important;
    }

    .site-footer .wp-block-group:last-child .wp-block-columns{
        gap: 0;
    }

    .site-footer .footer-logos .wp-block-columns{
        gap: var(--wp--preset--spacing--60)!important;
    }
}

@media (max-width: 1000px) {
    /* Footer margin adjustments */
    .site-footer .wp-block-group{
        padding-left: 0!important;
        padding-right: 0!important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-direction: column;
        gap: var(--wp--preset--spacing--30);
        text-align: center;
        margin-top: 0 !important;
    }

    .site-footer > .wp-block-group:first-child {
        padding-top: 0!important;
        padding-bottom: 0!important;
        padding-left: var(--wp--preset--spacing--40)!important;
        padding-right: var(--wp--preset--spacing--40)!important;
    }

    .site-footer > .wp-block-group > .wp-block-group {
        padding-top: var(--wp--preset--spacing--60)!important;
        padding-bottom: var(--wp--preset--spacing--60)!important;
    }
    
    /* Stack footer columns on mobile */
    .site-footer *:not(.footer-logos) > .wp-block-columns {
        flex-direction: column;
        gap: var(--wp--preset--spacing--40);
    }

    .site-footer .footer-logos .wp-block-columns .wp-block-column .wp-block-group {
        flex-direction: row;
    }
    
    .site-footer .wp-block-column {
        flex-basis: 100%;
    }

    .site-footer .wp-block-column .is-layout-flex,
    .site-footer  .wp-block-social-links {
        justify-content: center;
    }

    .site-footer  .wp-block-social-links {
        gap: var(--wp--preset--spacing--50);
    }
    
    /* Center navigation on mobile */
    .site-footer .wp-block-navigation {
        justify-content: center !important;
    }
    
    /* Stack social media section */
    .site-footer > .wp-block-group > .wp-block-group:last-child {
        border-bottom: none !important;
        padding-top: var(--wp--preset--spacing--40);
    }

    .site-footer p{
        text-align: left;
    }
}

@media (max-width: 960px) {
    .wp-block-site-tagline {
        padding-left: var(--wp--preset--spacing--40);
    }

     /* FOOTER */
    .site-footer p{
        text-align: center;
        white-space: nowrap;
    }
}

@media (max-width: 760px) {
    .site-header .header-logos {
        border-bottom: none;
    }
    .site-header .header-wrapper > div p {
        display: none;
    }
    .lejad-column-item .column-icon {
        width: 90px;
    }

    .site-footer p {
        white-space: wrap;
    }
}