/* ==========================================================================
   Overlay left menu (#side-menu) — opened by the header hamburger, which is
   shown under 1000px (components/header.css). This site has no permanent
   desktop sidebar, so the whole menu is an under-1000px overlay.
   Markup: includes/sidebar.php. Toggled by body.left-menu-open (main.js).
   (Replaced the unused CV-port sidebar.css, which assumed a permanent
   306px desktop sidebar and would have shifted #content.)
   ========================================================================== */
#side-menu {
    position: fixed;
    top: 53px;                    /* below the fixed mobile header bar */
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999999;
}
body.left-menu-open #side-menu { display: block; }
/* No page scroll behind the open menu overlay. */
body.left-menu-open { overflow: hidden; }

.side-menu-inner {
    height: 100%;
    width: min(360px, 86vw);      /* white panel from the left, dim the rest */
}
.menu-wrap {
    height: 100%;
    overflow-y: auto;
    background-color: #fff;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-weight: 500;
}
.menu-wrap a { text-decoration: none; display: block; }
.menu-wrap ul { list-style: none; margin: 0; padding: 0; }

.menu-wrap .menu ul li { border-bottom: 1px solid #f2f2f2; }
.menu-wrap .menu ul li .sub-page-trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    color: #354649;
    font-size: 17px;
    line-height: 1.3;
    transition: background-color 0.15s;
}
.menu-wrap .menu ul li .sub-page-trigger:hover {
    background-color: #e7e4db;
    color: #45656a;
}
.menu-wrap .menu ul li .sub-page-trigger .menu-icon {
    font-size: 20px;
    width: 28px;
    text-align: center;
    flex: 0 0 auto;
}

/* Current page — green panel + brand pattern + white text (matches the CV
   sidebar's active treatment). Class set by sidebar.php. */
.menu-wrap .menu ul li.active-section > .sub-page-trigger {
    color: #fff;
    background: var(--brand-green) url(/assets/img/icons/patern.webp) center / cover;
}
.menu-wrap .menu ul li.active-section > .sub-page-trigger .menu-icon i,
.menu-wrap .menu ul li.active-section > .sub-page-trigger .menu-name span {
    color: #fff;
}

/* ≥1000px: no burger in the header, so never show the overlay either. */
@media screen and (min-width: 1000px) {
    #side-menu { display: none !important; }
    body.left-menu-open { overflow: auto; }
}

/* "On this page" group — section links cloned from the page's #tabs nav by
   mobile-nav.js. Smaller rows under an uppercase group label. */
.menu-wrap .menu ul li.menu-group-title {
    padding: 16px 18px 6px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a8a8a;
    border-bottom: 0;
}
.menu-wrap .menu ul li.menu-section-link .sub-page-trigger { font-size: 15px; padding: 11px 18px; }
.menu-wrap .menu ul li.menu-section-link .menu-icon { font-size: 14px; color: var(--brand-green); }

/* Highlighted CTA row in the "On this page" group (the Consultation entry —
   sourced from the bar's gold CTA button by mobile-nav.js). */
.menu-wrap .menu ul li.menu-section-cta > .sub-page-trigger {
    background: var(--brand-gold, #eed6a3);
    color: var(--brand-green-dark, #0b3e27);
    font-weight: 700;
}
.menu-wrap .menu ul li.menu-section-cta > .sub-page-trigger:hover {
    background: #e6c98d;
    color: var(--brand-green-dark, #0b3e27);
}
.menu-wrap .menu ul li.menu-section-cta > .sub-page-trigger .menu-icon i {
    color: var(--brand-green-dark, #0b3e27);
}