/* Submenu close — override */
.firsttracks-hamburger-menu .wp-block-navigation__responsive-container
.wp-block-navigation__submenu-container {
	display: none !important;
}

.firsttracks-hamburger-menu .wp-block-navigation__responsive-container
li.has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"]
~ .wp-block-navigation__submenu-container {
	display: flex !important;
	flex-direction: column;
}

nav.is-responsive.wp-block-navigation.is-layout-flex.wp-block-navigation-is-layout-flex {
    color: #252121;
}

/* Hide hamburger menu */
@media (width >= 1100px) {

    .firsttracks-hamburger-menu {
        display: none;
    }
}
 
@media (width <= 1099px) {

    .firsttracks-hamburger-menu {
        display: block;
    }

    .firsttracks-hamburger-menu .wp-block-navigation__responsive-container-open {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Replace WordPress's default hamburger icon with the custom 3-line icon.
       WP renders its own inline SVG inside the open button; hide it and draw
       ours via a mask so it inherits currentColor. */
    .firsttracks-hamburger-menu .wp-block-navigation__responsive-container-open svg {
        display: none;
    }

    .firsttracks-hamburger-menu .wp-block-navigation__responsive-container-open::before {
        content: "";
        width: 32px;
        height: 32px;
        background-color: var(--color-black);
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M20%2017C20.5523%2017%2021%2017.4477%2021%2018C21%2018.5128%2020.6136%2018.9354%2020.1162%2018.9932L20%2019H4C3.44772%2019%203%2018.5523%203%2018C3%2017.4872%203.38645%2017.0646%203.88379%2017.0068L4%2017H20ZM20%2011C20.5523%2011%2021%2011.4477%2021%2012C21%2012.5128%2020.6136%2012.9354%2020.1162%2012.9932L20%2013H4C3.44772%2013%203%2012.5523%203%2012C3%2011.4872%203.38645%2011.0646%203.88379%2011.0068L4%2011H20ZM20%205C20.5523%205%2021%205.44772%2021%206C21%206.51284%2020.6136%206.9354%2020.1162%206.99316L20%207H4C3.44772%207%203%206.55228%203%206C3%205.48716%203.38645%205.0646%203.88379%205.00684L4%205H20Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M20%2017C20.5523%2017%2021%2017.4477%2021%2018C21%2018.5128%2020.6136%2018.9354%2020.1162%2018.9932L20%2019H4C3.44772%2019%203%2018.5523%203%2018C3%2017.4872%203.38645%2017.0646%203.88379%2017.0068L4%2017H20ZM20%2011C20.5523%2011%2021%2011.4477%2021%2012C21%2012.5128%2020.6136%2012.9354%2020.1162%2012.9932L20%2013H4C3.44772%2013%203%2012.5523%203%2012C3%2011.4872%203.38645%2011.0646%203.88379%2011.0068L4%2011H20ZM20%205C20.5523%205%2021%205.44772%2021%206C21%206.51284%2020.6136%206.9354%2020.1162%206.99316L20%207H4C3.44772%207%203%206.55228%203%206C3%205.48716%203.38645%205.0646%203.88379%205.00684L4%205H20Z'/%3E%3C/svg%3E");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    /* When the overlay is open (.is-overlay-open toggled by
       header-navigation.js), the same header button becomes the
       Close control — swap the mask from hamburger to ✕. */
    .firsttracks-hamburger-menu.is-overlay-open .wp-block-navigation__responsive-container-open::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6.7%205.29a1%201%200%200%200-1.41%201.42L10.59%2012l-5.3%205.29a1%201%200%201%200%201.41%201.42L12%2013.41l5.3%205.3a1%201%200%200%200%201.41-1.42L13.41%2012l5.3-5.29a1%201%200%201%200-1.41-1.42L12%2010.59%206.7%205.29Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6.7%205.29a1%201%200%200%200-1.41%201.42L10.59%2012l-5.3%205.29a1%201%200%201%200%201.41%201.42L12%2013.41l5.3%205.3a1%201%200%200%200%201.41-1.42L13.41%2012l5.3-5.29a1%201%200%201%200-1.41-1.42L12%2010.59%206.7%205.29Z'/%3E%3C/svg%3E");
    }

    /* Hide the desktop nav block when hamburger is active */
    header .wp-block-navigation:not(.firsttracks-hamburger-menu .wp-block-navigation) {
        display: none;
    }
 
    /* Force full-width overlay */
    .firsttracks-hamburger-menu .wp-block-navigation__responsive-container,
    .firsttracks-hamburger-menu .wp-block-navigation__responsive-close,
    .firsttracks-hamburger-menu .wp-block-navigation__responsive-dialog,
    .firsttracks-hamburger-menu .wp-block-navigation__responsive-container-content,
    .firsttracks-hamburger-menu .wp-block-navigation__container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
 
    .firsttracks-hamburger-menu .wp-block-navigation__container {
        display: flex !important;
        flex-direction: column;
    }
 
    .firsttracks-hamburger-menu .wp-block-navigation__container > li {
        width: 100% !important;
        box-sizing: border-box;
    }
 
    /* Grid layout for items with children (label + chevron tap target) */
    .firsttracks-hamburger-menu li.has-child {
        display: grid !important;
        grid-template-columns: 1fr 44px;
        grid-template-rows: auto auto;
        width: 100% !important;
        box-sizing: border-box;
    }
 
    .firsttracks-hamburger-menu li.has-child > .wp-block-navigation-item__content {
        grid-column: 1;
        grid-row: 1;
        padding: 14px 20px;
        display: block;
        min-width: 0;
    }
 
    /* Chevron tap target */
    .firsttracks-hamburger-menu li.has-child > .wp-block-navigation-submenu__toggle {
        grid-column: 2 !important;
        grid-row: 1;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }
 
    .firsttracks-hamburger-menu li.has-child > .wp-block-navigation-submenu__toggle svg {
        width: 16px;
        height: 16px;
        transition: transform 0.2s ease;
    }
 
    .firsttracks-hamburger-menu li.has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }
 
    /* Submenu spans full grid width below the label row */
    .firsttracks-hamburger-menu li.has-child > .wp-block-navigation__submenu-container {
        grid-column: 1 / -1;
        grid-row: 2;
    }
 
    /* Submenu hidden by default */
    .firsttracks-hamburger-menu .wp-block-navigation__responsive-container
    .wp-block-navigation__submenu-container {
        display: none !important;
        width: 100%;
        flex-direction: column;
        background: #f5f5f5;
        padding-left: 16px;
    }
 
    /* Submenu shown when toggle is expanded */
    .firsttracks-hamburger-menu .wp-block-navigation__responsive-container
    li.has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"]
    ~ .wp-block-navigation__submenu-container {
        display: flex !important;
    }
 
    /* Submenu link styles */
    .firsttracks-hamburger-menu .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
        padding: 10px 20px;
        font-size: 0.9em;
        border-bottom: 1px solid #eee;
        display: block;
    }
}