/*
 * SEMC Customizer — Popup Menu Styles
 *
 * Used by the [semc_popup_menu] shortcode.
 * NO media queries / breakpoints — designed to be fully fluid
 * at any width inside an Elementor popup or off-canvas drawer.
 *
 * Variables (easy to customise):
 *   --pm-accent        Main accent / active colour
 *   --pm-text          Link text colour
 *   --pm-text-sub      Sub-menu link colour
 *   --pm-border        Separator line colour
 *   --pm-toggle-size   Size of the sub-menu arrow toggle button
 */

:root {
    --pm-accent: #810081;
    --pm-text: #111111;
    --pm-text-sub: #444444;
    --pm-border: rgba(0, 0, 0, 0.08);
    --pm-toggle-size: 32px;
}

/* ── Outer wrapper ── */
.semc-popup-menu-wrap {
    width: 100%;
    box-sizing: border-box;
}

/* ── Nav element ── */
.semc-popup-nav {
    width: 100%;
}

/* ── Top-level list ── */
.semc-popup-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: 'Satoshi font', sans-serif;
    font-size: 16px;
}

/* ── Each list item ── */
.semc-popup-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    /* allows sub-menu to break below */
    align-items: center;
    border-bottom: 1px solid var(--pm-border);
    width: 100%;
    box-sizing: border-box;
}

.semc-popup-item:last-child {
    border-bottom: none;
}

/* ── Link ── */
.semc-popup-link {
    flex: 1 1 0;
    /* takes all remaining width beside the toggle */
    display: block;
    padding: 14px 0;
    color: var(--pm-text);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    transition: color 0.2s ease;
    word-break: break-word;
}

.semc-popup-link:hover,
.semc-popup-link:focus {
    color: var(--pm-accent);
    outline: none;
}

/* Active / current page link */
.semc-popup-item--active>.semc-popup-link,
.semc-popup-item--ancestor>.semc-popup-link {
    color: var(--pm-accent);
    font-weight: 700;
}

/* Deeper depth — slightly smaller font */
.semc-popup-link--sub {
    font-size: 14px;
    font-weight: 400;
    color: var(--pm-text-sub);
    padding: 11px 0 11px 16px;
}

.semc-popup-link--sub:hover,
.semc-popup-link--sub:focus {
    color: var(--pm-accent);
}

/* ── Sub-menu toggle button ── */
.semc-popup-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--pm-toggle-size);
    height: var(--pm-toggle-size);
    margin-left: 8px;
    background: transparent;
    border: 1px solid var(--pm-border);
    border-radius: 6px;
    cursor: pointer;
    color: var(--pm-text);
    transition: color 0.2s ease,
        border-color 0.2s ease,
        transform 0.25s ease;
    padding: 0;
    line-height: 1;
}

.semc-popup-toggle:hover,
.semc-popup-toggle:focus {
    color: var(--pm-accent);
    border-color: var(--pm-accent);
    outline: none;
}

/* Rotate arrow when open */
.semc-popup-item--open>.semc-popup-toggle {
    transform: rotate(180deg);
    color: var(--pm-accent);
    border-color: var(--pm-accent);
}

/* ── Sub-menu list ── */
.semc-popup-submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 4px 0;
    width: 100%;
    /* full width of parent item */
    flex-basis: 100%;
    /* force it to its own row inside flex parent */
    box-sizing: border-box;
    border-top: 1px solid var(--pm-border);
}

/* hidden attribute → display none (browser default) */
.semc-popup-submenu[hidden] {
    display: none;
}

/* When open, animate in */
.semc-popup-item--open>.semc-popup-submenu {
    display: block;
}

/* Sub-item separators */
.semc-popup-submenu .semc-popup-item {
    border-bottom: 1px solid var(--pm-border);
    padding-left: 0;
}

.semc-popup-submenu .semc-popup-item:last-child {
    border-bottom: none;
}

/* ── Error message (menu not found) ── */
.semc-popup-menu-error {
    color: #c00;
    font-size: 13px;
    padding: 8px;
    border: 1px dashed #c00;
    border-radius: 4px;
}