header {
    --color: #77889947;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    background-color: var(--color);
    color: white;
    padding-left: 0.33rem;
    padding-right: 0.33rem;
    box-shadow: 0px 0px 20px 60px var(--color);
}

h1 {
    text-align: center;
    margin-top: -20px;
    margin-bottom: 30px;
    text-shadow: 2px 5px 4px black;
}

.tel-num {
    text-decoration: none;
    color: inherit;
}

.hamburger-toggle {
    background: none;
    border: none;
    padding: 8px; 
    cursor: pointer;
    color: white;
}

.fb-icon {
    width: 40px;
    min-width: 40px;
    /* margin-left: 1rem; */
}
.fb-icon img {
    width: 100%;
}

/* Hamburger button: sits above the overlay so the X stays clickable */
.menu-toggle {
    --size: 40px;
    position: relative;
    z-index: 1001;
    width: calc(var(--size) + 16px);
    height: calc(var(--size) + 16px);
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.menu-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.menu-toggle span {
    position: absolute;
    left: 8px;
    width: var(--size);
    height: calc(var(--size) / 12);
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}
.menu-toggle span:nth-child(1) { top: calc(50% - var(--size) / 4 - var(--size) / 24); }
.menu-toggle span:nth-child(2),
.menu-toggle.is-open span:nth-child(1),
.menu-toggle.is-open span:nth-child(3) { top: calc(50% - var(--size) / 24); }
.menu-toggle span:nth-child(3) { top: calc(50% + var(--size) / 4 - var(--size) / 24); }

.menu-toggle.is-open span:nth-child(1) { transform: rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: rotate(-45deg); }

/* Overlay: full screen, starts off to the right */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 20, 30, 0.85);   /* last value = how see-through (lower = more background visible) */
    backdrop-filter: blur(4px);            /* optional: softens what shows through */
    -webkit-backdrop-filter: blur(4px);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.4s ease, visibility 0s linear 0.4s;
}
.nav-overlay.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.4s ease, visibility 0s;
}

.nav-overlay ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.nav-overlay li + li { margin-top: 3rem; }
.nav-overlay a {
    color: #fff;
    text-decoration: none;
    font-size: 1.75rem;
}
.nav-overlay a:hover,
.nav-overlay a:focus-visible { text-decoration: underline; text-underline-offset: 6px; }

/* Stops the page scrolling behind the open menu */
body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
.menu-toggle span, .nav-overlay, .nav-overlay.is-open { transition: none; }
}