/* ─── Mobile menu overlay (backdrop) ──────────────────────────── */
.hzo-mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--nav-mobile-overlay-bg, rgba(0, 0, 0, 0.5));
    z-index: var(--z-overlay);
    opacity: 0;
    visibility: hidden;
    overflow: hidden; /* clip the translateX'd panel so it can't cause horizontal scroll */
    transition: opacity 300ms ease, visibility 300ms;
}
.hzo-mobile-menu.is-open { opacity: 1; visibility: visible; }

/* Mobile menu panel (slides from the right) */
.hzo-mobile-menu__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 360px;
    background: var(--nav-mobile-panel-bg, var(--surface, #fff));
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.hzo-mobile-menu.is-open .hzo-mobile-menu__panel { transform: translateX(0); }

/* Sidebar header: logo + close */
.hzo-mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: var(--border-1) solid var(--nav-mobile-divider-color, var(--border));
    flex-shrink: 0;
    min-height: 60px;
}
.hzo-mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--text-body);
    flex-shrink: 0;
}
.hzo-mobile-close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Sidebar nav */
.hzo-mobile-nav {
    flex: 1;
    padding: var(--space-xs) 0;
    overflow-y: auto;
}

/* Base mobile menu link — context wrappers (.hzo-mobile-simple, .hzo-mobile-panel)
   layer padding + background on top; this rule guarantees color + no underline
   even when the class is used standalone. */
.hzo-mobile-menu__link,
.hzo-mobile-menu__link:visited {
    color: var(--text-body);
    text-decoration: none;
    display: block;
    font-weight: var(--fw-600, 600);
}
.hzo-mobile-menu__link:hover,
.hzo-mobile-menu__link:visited:hover { color: var(--nav-link-hover); }
.hzo-mobile-menu__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* Simple (non-accordion) row — a single link.
   !important on color: fights a:visited from per-client main.css. */
.hzo-mobile-simple { border-bottom: var(--border-1) solid var(--nav-mobile-divider-color, var(--border)); }
.hzo-mobile-simple > .hzo-mobile-menu__link {
    display: block;
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-body);
    font-weight: var(--fw-600, 600);
    font-size: 15px;
    color: var(--nav-mobile-link-color, var(--text-body)) !important;
    text-decoration: none;
    transition: color 200ms ease;
}
.hzo-mobile-simple > .hzo-mobile-menu__link:hover { color: var(--nav-link-hover) !important; }

/* Accordion row (nav item with sub-items) */
.hzo-mobile-accordion { border-bottom: var(--border-1) solid var(--nav-mobile-divider-color, var(--border)); }
.hzo-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    border: 0;
    background: transparent;
    font-family: var(--font-body);
    font-weight: var(--fw-600, 600);
    font-size: 15px;
    color: var(--text-body);
    cursor: pointer;
    text-align: left;
}
.hzo-mobile-accordion.is-expanded > .hzo-mobile-toggle { color: var(--nav-link-hover); }
.hzo-mobile-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

.hzo-mobile-chevron {
    flex-shrink: 0;
    display: block;
    opacity: 0.4;
    margin-left: var(--space-smd);
    transition: transform 300ms ease, opacity 200ms ease;
}
.hzo-mobile-accordion.is-expanded > .hzo-mobile-toggle > .hzo-mobile-chevron {
    transform: rotate(180deg);
    opacity: 0.7;
}

/* Accordion collapsible panel */
.hzo-mobile-panel {
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: max-height 300ms ease;
}
/* 2400px (not 600) so an expanded nested sub-accordion — or a long flat
   service list — still fits without silent clipping. The overlay itself
   scrolls, so the cap only needs to exceed real content heights. */
.hzo-mobile-accordion.is-expanded > .hzo-mobile-panel { max-height: 2400px; }

/* Nested sub-accordion (3rd menu level — mirrors the desktop column groups).
   main.js already binds .hzo-mobile-subtoggle. */
.hzo-mobile-subaccordion { border-bottom: var(--border-1) solid var(--nav-mobile-divider-color, var(--border)); }
.hzo-mobile-subaccordion:last-child { border-bottom: 0; }
.hzo-mobile-subtoggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-smd) var(--space-lg) var(--space-smd) var(--space-lg-plus);
    background: transparent;
    border: 0;
    font-family: var(--font-body);
    font-size: var(--fs-100);
    font-weight: var(--fw-600, 600);
    color: var(--text-body);
    cursor: pointer;
    text-align: left;
}
.hzo-mobile-subaccordion.is-expanded > .hzo-mobile-subtoggle { color: var(--nav-link-hover); }
.hzo-mobile-subtoggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.hzo-mobile-subaccordion.is-expanded > .hzo-mobile-subtoggle > .hzo-mobile-chevron {
    transform: rotate(180deg);
    opacity: 0.7;
}
.hzo-mobile-subaccordion.is-expanded > .hzo-mobile-panel { max-height: 600px; }
.hzo-mobile-subaccordion .hzo-mobile-panel > .hzo-mobile-menu__link { padding-left: 44px; }

/* Featured tile (child with menu-item class hzo-mega-featured) — thumbnail +
   label row; the mobile counterpart of the desktop photo card. */
.hzo-mobile-featured {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-smd) var(--space-lg) var(--space-smd) var(--space-lg-plus);
    font-size: var(--fs-100);
    font-weight: var(--fw-600, 600);
    color: var(--text-body);
    text-decoration: none;
    border-bottom: var(--border-1) solid var(--nav-mobile-divider-color, var(--border));
}
.hzo-mobile-featured img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-control);
    flex-shrink: 0;
}
.hzo-mobile-featured:hover { color: var(--nav-link-hover); }

/* !important on color: fights a:visited from per-client main.css. */
.hzo-mobile-panel > .hzo-mobile-menu__link {
    display: block;
    padding: var(--space-smd) var(--space-lg) var(--space-smd) var(--space-lg-plus);
    font-size: var(--fs-100);
    font-weight: var(--fw-500, 500);
    color: var(--nav-mobile-link-color, var(--text-body)) !important;
    text-decoration: none;
    border-bottom: var(--border-1) solid var(--nav-mobile-divider-color, var(--border));
    transition: color 200ms ease, background 200ms ease;
}
.hzo-mobile-panel > .hzo-mobile-menu__link:last-child { border-bottom: 0; }
.hzo-mobile-panel > .hzo-mobile-menu__link:hover {
    color: var(--nav-link-hover) !important;
    background: var(--nav-mobile-link-hover-bg, var(--bg-alt));
}

/* Sidebar footer (contact info) */
.hzo-mobile-menu__footer {
    padding: var(--space-lg);
    border-top: var(--border-1) solid var(--nav-mobile-divider-color, var(--border));
    background: var(--nav-mobile-footer-bg, var(--bg-alt));
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* !important on color: fights a:visited from per-client main.css. */
.hzo-mobile-menu__contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-100);
    font-weight: var(--fw-500, 500);
    color: var(--text-body) !important;
    text-decoration: none;
    transition: color 200ms ease;
}
.hzo-mobile-menu__contact:hover { color: var(--nav-link-hover) !important; }
.hzo-mobile-menu__contact svg { color: var(--accent); flex-shrink: 0; }

/* Prevent body scroll when menu is open */
body.hzo-menu-open { overflow: hidden; }

.hzo-utility-bar {
    background: var(--utility-bar-bg, var(--brand));
    color: var(--utility-bar-text, #fff);
    font-size: var(--fs-75);
    padding: var(--utility-bar-padding, 7px 0);
}
.hzo-utility-bar__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* desktop/tablet: right-aligned */
    gap: var(--space-smd);
}
.hzo-utility-bar__links {
    display: flex;
    align-items: center;
    gap: var(--space-smd);
}
.hzo-utility-bar__divider { color: var(--utility-bar-divider-color, rgba(255,255,255,0.3)); user-select: none; }

/* !important on color: fights a:visited from per-client main.css. */
.hzo-utility-bar a,
.hzo-utility-bar a:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--utility-link) !important;
    text-decoration: none;
    font-weight: var(--fw-700, 700);
    white-space: nowrap;
    transition: color 200ms ease;
}
.hzo-utility-bar a:hover,
.hzo-utility-bar a:visited:hover { color: var(--utility-link-hover) !important; }
.hzo-utility-bar a svg { flex-shrink: 0; }

/* Mobile: center the links (no hours on mobile) */
@media (max-width: 767px) {
    .hzo-utility-bar__inner { justify-content: center; }
}

/* Light utility bar variant — pale background with dark text/links.
   CSS custom properties are scoped to this selector, so --utility-link
   and --utility-link-hover resolve to the lighter-context values for
   everything inside. Apply via: <div class="hzo-utility-bar hzo-utility-bar--light"> */
.hzo-utility-bar--light {
    background: var(--utility-bar-light-bg, var(--bg-alt));
    color: var(--utility-bar-light-text, var(--text-body));
    border-bottom: var(--border-1) solid var(--utility-bar-light-border-color, var(--border));
    --utility-link: var(--utility-light-link, var(--text-muted));
    --utility-link-hover: var(--utility-light-link-hover, var(--brand));
}

.hzo-mega-menu__close:hover { color: var(--brand); }

/* G38: "View all {Section}" — the parent landing link that leads an expanded
   accordion panel. The toggle only expands, so this restores reachability of the
   parent's own page on mobile. Brand-toned + semibold + a trailing arrow so it
   reads as the section overview, distinct from the child links below it. */
.hzo-mobile-panel > .hzo-mobile-viewall {
    color: var(--nav-link-active, var(--brand-text, var(--brand))) !important;
    font-weight: var(--fw-semibold, 600);
}
.hzo-mobile-panel > .hzo-mobile-viewall::after {
    content: "\2192";
    margin-left: 6px;
    display: inline-block;
}