/*! MenuBuilder 1.2.0 — Copyright (c) 2026 BoholwebWP (https://boholwebwp.com) · MIT License */

/* Every colour and size comes from a theme (.mb-theme-{slug} sets the variables); these are the fallbacks. */
.mb {
    --mb-bar-bg: transparent; --mb-text: inherit; --mb-text-hover: #2563eb; --mb-item-hover-bg: transparent; --mb-active: #2563eb;
    --mb-panel-bg: #fff; --mb-panel-text: #1f2937; --mb-panel-muted: #6b7280; --mb-panel-heading: #111827; --mb-panel-border: #e5e7eb;
    --mb-accent: #2563eb; --mb-accent-text: #fff; --mb-radius: 10px; --mb-gap: 4px; --mb-item-padding: 10px 14px; --mb-font-size: 15px;
    --mb-font-weight: 500; --mb-shadow: 0 12px 32px rgba(15, 23, 42, .12); --mb-mobile-bg: #fff; --mb-mobile-text: #111827;
    --mb-overlay: rgba(15, 23, 42, .45); --mb-speed: .18s;

    position: relative;
    background: var(--mb-bar-bg);
    color: var(--mb-text);
    font-size: var(--mb-font-size);
    line-height: 1.35;
}
.mb *, .mb *::before, .mb *::after { box-sizing: border-box; }
.mb ul { list-style: none; margin: 0; padding: 0; }
.mb-sticky { position: sticky; top: 0; z-index: 60; }
/* A menu with an open panel or drawer goes above everything else on the page, other menus included. */
.mb.mb-active, .mb.mb-drawer-open { z-index: 1000; }
.mb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mb-error { padding: 8px 12px; border: 1px solid #dc2626; border-radius: 6px; color: #b91c1c; background: #fef2f2; font-size: 14px; }
[data-mb-replaced] { display: none !important; }

/* ── Bar & items ─────────────────────────────────────────────────────────────────────── */
.mb-menu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mb-gap); }
.mb-align-center > .mb-drawer > .mb-menu { justify-content: center; }
.mb-align-end > .mb-drawer > .mb-menu { justify-content: flex-end; }
.mb-align-between > .mb-drawer > .mb-menu { justify-content: space-between; }
.mb-layout-vertical .mb-menu { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }

.mb-item { position: relative; }
.mb-row { display: flex; align-items: center; }
.mb-link {
    display: inline-flex; align-items: center; gap: .5em; flex: 1 1 auto;
    padding: var(--mb-item-padding); border: 0; border-radius: var(--mb-radius); background: none;
    color: inherit; font: inherit; font-weight: var(--mb-font-weight); text-decoration: none; text-align: start; cursor: pointer;
    transition: color var(--mb-speed), background-color var(--mb-speed);
}
.mb-nolink { cursor: default; }
.mb-depth-0 > .mb-row > .mb-link:hover, .mb-depth-0.mb-open > .mb-row > .mb-link { color: var(--mb-text-hover); background: var(--mb-item-hover-bg); }
.mb-depth-0.mb-current > .mb-row > .mb-link, .mb-depth-0.mb-ancestor > .mb-row > .mb-link { color: var(--mb-active); }
.mb-text { display: inline-flex; flex-direction: column; min-width: 0; }
.mb-desc { font-size: .82em; font-weight: 400; color: var(--mb-panel-muted); line-height: 1.3; }
.mb-layout-horizontal:not(.mb-is-mobile) .mb-depth-0 > .mb-row .mb-desc { display: none; }
.mb-item-icon { width: 1.15em; height: 1.15em; flex: none; }
.mb-link:has(.mb-icon-above) { flex-direction: column; gap: .25em; text-align: center; }
.mb-link:has(.mb-icon-above) .mb-text { align-items: center; }

.mb-badge {
    display: inline-block; padding: .1em .5em; border-radius: 999px; font-size: .72em; font-weight: 600; line-height: 1.5;
    letter-spacing: .02em; white-space: nowrap; background: var(--mb-accent); color: var(--mb-accent-text);
}
.mb-badge-success { background: #16a34a; color: #fff; }
.mb-badge-warning { background: #f59e0b; color: #1f2937; }
.mb-badge-danger { background: #dc2626; color: #fff; }
.mb-badge-neutral { background: rgba(127, 127, 127, .18); color: inherit; }

.mb-highlight > .mb-row > .mb-link, .mb-highlight > .mb-row > .mb-link:hover {
    background: var(--mb-accent); color: var(--mb-accent-text); padding-inline: 1.1em;
}
.mb-highlight > .mb-row > .mb-link:hover { filter: brightness(1.08); }

.mb-sub-toggle {
    display: inline-flex; align-items: center; justify-content: center; margin-inline-start: -.55em; padding: .35em;
    border: 0; border-radius: 6px; background: none; color: inherit; cursor: pointer;
}
.mb-arrow { width: .95em; height: .95em; transition: transform var(--mb-speed); }
.mb-link-button .mb-arrow { margin-inline-start: -.15em; }
.mb-open > .mb-row .mb-arrow { transform: rotate(180deg); }
.mb-no-arrows .mb-depth-0 > .mb-row .mb-arrow { display: none; }
.mb-no-arrows .mb-depth-0 > .mb-row .mb-sub-toggle { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.mb-no-arrows .mb-depth-0 > .mb-row .mb-sub-toggle:focus-visible { opacity: 1; pointer-events: auto; inset: auto 0 auto auto; position: static; }
.mb-sub .mb-arrow { transform: rotate(-90deg); }
.mb-sub .mb-open > .mb-row .mb-arrow { transform: rotate(-90deg); }
[dir="rtl"] .mb-sub .mb-arrow { transform: rotate(90deg); }

.mb a:focus-visible, .mb button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ── Dropdowns (desktop, horizontal) ─────────────────────────────────────────────────── */
.mb-sub, .mb-mega-panel {
    background: var(--mb-panel-bg); color: var(--mb-panel-text);
    border: 1px solid var(--mb-panel-border); border-radius: min(var(--mb-radius), 16px); box-shadow: var(--mb-shadow);
}
.mb-layout-horizontal:not(.mb-is-mobile) .mb-sub {
    position: absolute; top: 100%; inset-inline-start: 0; min-width: 230px; padding: 6px; z-index: 30;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity var(--mb-speed), transform var(--mb-speed), visibility 0s linear var(--mb-speed);
}
.mb-layout-horizontal:not(.mb-is-mobile) .mb-sub .mb-sub { top: -7px; inset-inline-start: 100%; margin-inline-start: 4px; }
.mb-layout-horizontal:not(.mb-is-mobile) .mb-flip > .mb-sub { inset-inline-start: auto; inset-inline-end: 0; }
.mb-layout-horizontal:not(.mb-is-mobile) .mb-sub .mb-flip > .mb-sub { inset-inline-end: 100%; margin-inline: 0 4px; }
.mb-layout-horizontal:not(.mb-is-mobile) .mb-open > .mb-sub,
.mb:not(.mb-js).mb-layout-horizontal .mb-item:hover > .mb-sub,
.mb:not(.mb-js).mb-layout-horizontal .mb-item:focus-within > .mb-sub {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.mb-sub .mb-link { display: flex; width: 100%; padding: 8px 12px; border-radius: max(0px, min(var(--mb-radius), 16px) - 4px); }
.mb-sub .mb-link:hover, .mb-sub .mb-open > .mb-row > .mb-link {
    background: color-mix(in srgb, var(--mb-accent) 10%, transparent); color: var(--mb-panel-heading);
}
.mb-sub .mb-current > .mb-row > .mb-link { color: var(--mb-panel-heading); font-weight: 600; background: color-mix(in srgb, var(--mb-accent) 12%, transparent); }
.mb-sub .mb-sub-toggle { margin-inline-start: 0; }

/* ── Mega panels ─────────────────────────────────────────────────────────────────────── */
.mb-layout-horizontal:not(.mb-is-mobile) .mb-mega:not(.mb-mega-auto) { position: static; }
.mb-layout-horizontal:not(.mb-is-mobile) .mb-mega-panel {
    position: absolute; top: 100%; z-index: 30; margin-top: 6px;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--mb-speed), transform var(--mb-speed), visibility 0s linear var(--mb-speed);
}
.mb-layout-horizontal:not(.mb-is-mobile) .mb-mega-panel::before { content: ""; position: absolute; inset: -8px 0 auto; height: 8px; }
.mb-layout-horizontal:not(.mb-is-mobile) .mb-w-container { inset-inline: 0; }
.mb-layout-horizontal:not(.mb-is-mobile) .mb-w-full { left: var(--mb-full-left, 0); width: var(--mb-full-width, 100vw); border-radius: 0; border-inline: 0; }
.mb-layout-horizontal:not(.mb-is-mobile) .mb-w-auto { inset-inline-start: 0; width: max-content; max-width: min(92vw, 960px); }
.mb-layout-horizontal:not(.mb-is-mobile) .mb-open > .mb-mega-panel,
.mb:not(.mb-js).mb-layout-horizontal .mb-mega:hover > .mb-mega-panel,
.mb:not(.mb-js).mb-layout-horizontal .mb-mega:focus-within > .mb-mega-panel {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.mb-mega-inner { display: flex; gap: 28px; padding: 24px; }
.mb-w-full .mb-mega-inner, .mb-w-full .mb-mega-footer { max-width: var(--mb-mega-max, 1200px); margin-inline: auto; }
.mb-mega-columns { flex: 1 1 auto; display: grid; grid-template-columns: repeat(var(--mb-cols, 4), minmax(0, 1fr)); gap: 20px 28px; }
.mb-mega-custom { flex: 1 1 auto; min-width: 0; }
.mb-mega-columns + .mb-mega-custom { flex: 0 0 min(320px, 34%); padding-inline-start: 24px; border-inline-start: 1px solid var(--mb-panel-border); }
.mb-mega-custom img { max-width: 100%; height: auto; border-radius: calc(var(--mb-radius) - 2px); }
.mb-mega-custom a { color: var(--mb-accent); font-weight: 600; }
.mb-mega-custom > :first-child { margin-top: 0; }
.mb-mega-custom > :last-child { margin-bottom: 0; }
.mb-col-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 10px; border-radius: calc(var(--mb-radius) - 2px); }
.mb-col-heading .mb-link { padding: 4px 0; color: var(--mb-panel-heading); font-weight: 650; }
.mb-col-heading .mb-link:hover { color: var(--mb-accent); background: none; }
.mb-col-list { margin-top: 6px !important; display: grid; gap: 2px; }
.mb-col-list .mb-link, .mb-col-sublist .mb-link { padding: 5px 0; font-weight: 400; color: var(--mb-panel-text); border-radius: 0; }
.mb-col-list .mb-link:hover { color: var(--mb-accent); background: none; }
.mb-col-item.mb-current > .mb-link { color: var(--mb-panel-heading); font-weight: 650; text-decoration: underline; text-decoration-color: var(--mb-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mb-col-sublist { padding-inline-start: 12px !important; }
.mb-mega-col .mb-desc { margin-top: 1px; }
.mb-mega-footer { padding: 12px 24px; border-top: 1px solid var(--mb-panel-border); font-size: .92em; }
.mb-mega-footer a { color: var(--mb-accent); font-weight: 600; text-decoration: none; }
.mb-mega-footer a:hover { text-decoration: underline; }

/* Animations */
.mb-anim-slide.mb-layout-horizontal:not(.mb-is-mobile) .mb-sub, .mb-anim-slide.mb-layout-horizontal:not(.mb-is-mobile) .mb-mega-panel { transform: translateY(14px); }
.mb-anim-slide.mb-layout-horizontal:not(.mb-is-mobile) .mb-open > .mb-sub, .mb-anim-slide.mb-layout-horizontal:not(.mb-is-mobile) .mb-open > .mb-mega-panel { transform: none; }
.mb-anim-none, .mb-anim-none * { --mb-speed: 0s; }

/* ── Vertical layout & every phone menu: an accordion ───────────────────────────────── */
.mb-layout-vertical .mb-sub, .mb-layout-vertical .mb-mega-panel,
.mb-is-mobile .mb-sub, .mb-is-mobile .mb-mega-panel {
    position: static; display: none; margin: 2px 0 6px; padding: 4px 0; padding-inline-start: 14px;
    background: none; color: inherit; border: 0; border-inline-start: 2px solid var(--mb-panel-border); border-radius: 0; box-shadow: none;
}
.mb-layout-vertical .mb-open > .mb-sub, .mb-layout-vertical .mb-open > .mb-mega-panel,
.mb-is-mobile .mb-open > .mb-sub, .mb-is-mobile .mb-open > .mb-mega-panel,
.mb:not(.mb-js) .mb-sub, .mb:not(.mb-js) .mb-mega-panel { display: block; }
.mb:not(.mb-js).mb-layout-horizontal .mb-sub, .mb:not(.mb-js).mb-layout-horizontal .mb-mega-panel { display: block; }
.mb-layout-vertical .mb-row, .mb-is-mobile .mb-row { justify-content: space-between; }
.mb-layout-vertical .mb-sub-toggle, .mb-is-mobile .mb-sub-toggle { margin-inline-start: 4px; padding: .55em; }
.mb-layout-vertical .mb-sub .mb-arrow, .mb-is-mobile .mb-sub .mb-arrow { transform: none; }
.mb-layout-vertical .mb-open > .mb-row .mb-arrow, .mb-is-mobile .mb-open > .mb-row .mb-arrow { transform: rotate(180deg); }
.mb-layout-vertical .mb-link-button, .mb-is-mobile .mb-link-button { justify-content: space-between; width: 100%; }
.mb-layout-vertical .mb-mega-inner, .mb-is-mobile .mb-mega-inner { display: block; padding: 0; }
.mb-layout-vertical .mb-mega-columns, .mb-is-mobile .mb-mega-columns { display: block; }
.mb-layout-vertical .mb-mega-col, .mb-is-mobile .mb-mega-col { margin-bottom: 8px; }
.mb-layout-vertical .mb-col-image, .mb-is-mobile .mb-col-image { display: none; }
.mb-layout-vertical .mb-mega-custom, .mb-is-mobile .mb-mega-custom { padding: 6px 0; border: 0; }
.mb-layout-vertical .mb-mega-footer, .mb-is-mobile .mb-mega-footer { padding: 6px 0; border: 0; }
.mb-layout-vertical .mb-sub .mb-link, .mb-is-mobile .mb-sub .mb-link { padding: 7px 10px; }
.mb-layout-vertical .mb-sub .mb-link:hover, .mb-is-mobile .mb-sub .mb-link:hover { background: color-mix(in srgb, var(--mb-accent) 8%, transparent); color: inherit; }

/* ── Phone menu ──────────────────────────────────────────────────────────────────────── */
.mb-toggle {
    display: none; align-items: center; gap: .45em; padding: .55em .85em; border: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 30%, transparent); border-radius: var(--mb-radius);
    background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer;
}
.mb-drawer-head { display: none; }
.mb-is-mobile .mb-toggle { display: inline-flex; }
.mb-is-mobile .mb-menu { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; }
.mb-is-mobile .mb-depth-0 > .mb-row > .mb-link { padding-inline: 12px; }
.mb-is-mobile .mb-depth-0 > .mb-row .mb-desc { display: block; }

.mb-is-mobile.mb-mobile-accordion > .mb-drawer { display: none; margin-top: 8px; padding: 6px; border-radius: min(var(--mb-radius), 16px); background: var(--mb-mobile-bg); color: var(--mb-mobile-text); box-shadow: var(--mb-shadow); }
.mb-is-mobile.mb-mobile-accordion.mb-drawer-open > .mb-drawer { display: block; }

.mb-is-mobile.mb-mobile-offcanvas > .mb-drawer {
    position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 1001; width: min(360px, 88vw); height: 100dvh;
    overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 24px;
    background: var(--mb-mobile-bg); color: var(--mb-mobile-text); box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
    transform: translateX(100%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
}
[dir="rtl"] .mb-is-mobile.mb-mobile-offcanvas > .mb-drawer { transform: translateX(-100%); }
.mb-is-mobile.mb-mobile-offcanvas.mb-drawer-open > .mb-drawer { transform: none; visibility: visible; transition-delay: 0s; }
.mb-is-mobile.mb-mobile-offcanvas .mb-drawer-head {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
    margin: 0 -12px 8px; padding: 12px 12px 12px 16px; background: inherit; border-bottom: 1px solid var(--mb-panel-border);
}
.mb-drawer-title { font-weight: 650; }
.mb-close { display: inline-flex; padding: 8px; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; }
.mb-overlay { position: fixed; inset: 0; z-index: 1000; background: var(--mb-overlay); opacity: 0; transition: opacity .25s; }
.mb-drawer-open > .mb-overlay { opacity: 1; }
.mb-overlay[hidden] { display: none; }
html.mb-lock, html.mb-lock body { overflow: hidden; }

/* ── Icons, badges and buttons added to a menu the template draws itself ──────────────── */
.mb-decorated a .mb-tpl-icon { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }
.mb-decorated a .mb-tpl-icon-before { margin-inline-end: .45em; }
.mb-decorated a .mb-tpl-icon-after { margin-inline-start: .45em; }
.mb-decorated a.mb-tpl-above { display: inline-flex; flex-direction: column; align-items: center; gap: .25em; }
.mb-decorated a.mb-tpl-above .mb-tpl-icon { margin: 0; }
.mb-decorated a .mb-badge {
    margin-inline-start: .45em; vertical-align: .1em; text-transform: none; letter-spacing: .02em;
    background: var(--mb-accent, #2563eb); color: var(--mb-accent-text, #fff);
}
.mb-decorated a .mb-badge-success { background: #16a34a; color: #fff; }
.mb-decorated a .mb-badge-warning { background: #f59e0b; color: #1f2937; }
.mb-decorated a .mb-badge-danger { background: #dc2626; color: #fff; }
.mb-decorated a .mb-badge-neutral { background: rgba(127, 127, 127, .25); color: inherit; }
.mb-decorated a.mb-tpl-highlight {
    padding: .45em 1em; border-radius: var(--mb-radius, 8px);
    background: var(--mb-accent, #2563eb); color: var(--mb-accent-text, #fff) !important;
}

/* "Follow the template": badges and buttons are drawn in the menu's own text colour, so they suit any header. */
.mb-decorated.mb-theme-inherit a .mb-badge-accent { background: color-mix(in srgb, currentColor 20%, transparent); color: inherit; }
.mb-decorated.mb-theme-inherit a.mb-tpl-highlight {
    background: transparent; color: inherit !important; box-shadow: inset 0 0 0 1.5px currentColor; border-radius: 999px;
}
.mb-decorated.mb-theme-inherit a.mb-tpl-highlight:hover { background: color-mix(in srgb, currentColor 14%, transparent); }

/* ── Device rules (CSS only, so cached pages are right on every screen) ─────────────── */
@media (max-width: 599.98px) { .mb-hide-mobile { display: none !important; } }
@media (min-width: 600px) and (max-width: 1023.98px) { .mb-hide-tablet { display: none !important; } }
@media (min-width: 1024px) { .mb-hide-desktop { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
    .mb, .mb * { --mb-speed: 0s; }
    .mb-is-mobile.mb-mobile-offcanvas > .mb-drawer, .mb-overlay { transition: none; }
}
@media print { .mb-toggle, .mb-sub, .mb-mega-panel, .mb-overlay { display: none !important; } }