/* ==========================================================================
   Site header nav (layouts/global/navbar.blade.php + js/site-nav.js)
   Replaces menuzord + mmenu-light. Everything that must stay hidden until JS
   runs (dropdowns, drawer) is hidden here, so nothing flashes on page load.
   ========================================================================== */
:root {
    --snav-bg: #0f5e33;
    --snav-bg-2: #119c4d;
    --snav-ink: #ffffff;
    --snav-ink-soft: rgba(255, 255, 255, .82);
    --snav-hover: rgba(255, 255, 255, .12);
    --snav-accent: #f7c948;
    --snav-drop-bg: #ffffff;
    --snav-drop-ink: #1f2d25;
    --snav-drop-hover: #eaf6ef;
    --snav-drop-accent: #0d7a3c;
    --snav-h: 54px;
    --snav-radius: 12px;
    --snav-ease: cubic-bezier(.2, .7, .2, 1);
}

.snav-anchor { position: relative; z-index: 1000; min-height: var(--snav-h); }

.snav-bar {
    background: linear-gradient(180deg, var(--snav-bg-2) 0%, var(--snav-bg) 100%);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
    transition: box-shadow .25s ease;
}
.snav-bar.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    animation: snav-drop-in .28s var(--snav-ease);
}
@keyframes snav-drop-in { from { transform: translateY(-100%); } to { transform: none; } }

.snav-inner {
    display: flex;
    align-items: center;
    min-height: var(--snav-h);
    gap: 8px;
}
.snav-inner:before, .snav-inner:after { display: none; } /* bootstrap clearfix on .container */

.snav svg, .snav-drawer svg, .snav-toggle svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- desktop menu ---------- */
.snav { flex: 1 1 auto; min-width: 0; }
.snav-menu, .snav-menu ul, .snav-tree, .snav-tree ul { list-style: none; margin: 0; padding: 0; }

.snav-menu { display: flex; flex-wrap: wrap; align-items: center; }
.snav-menu > .snav-item { position: relative; }
.snav-row { display: flex; align-items: center; }

.snav-menu > .snav-item > .snav-row > .snav-link,
.snav-menu > .snav-item > .snav-link {
    display: block;
    padding: 0 14px;
    line-height: var(--snav-h);
    color: var(--snav-ink);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    position: relative;
}
.snav-menu .snav-link:hover, .snav-menu .snav-link:focus { color: var(--snav-ink); text-decoration: none; }

/* the chevron sits right next to its label and turns when open */
.snav-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: transform .22s var(--snav-ease), background-color .2s;
}
.snav-caret svg { width: 14px; height: 14px; }
.snav-menu > .has-sub > .snav-row > .snav-link { padding-right: 2px; }
.snav-menu > .has-sub > .snav-row > .snav-caret { color: var(--snav-ink-soft); margin-right: 8px; }
body.rtl .snav-menu > .has-sub > .snav-row > .snav-link { padding-right: 14px; padding-left: 2px; }
body.rtl .snav-menu > .has-sub > .snav-row > .snav-caret { margin-right: 0; margin-left: 8px; }
.snav-menu .has-sub:hover > .snav-row > .snav-caret,
.snav-menu .has-sub:focus-within > .snav-row > .snav-caret,
.snav-menu .has-sub.is-open > .snav-row > .snav-caret { transform: rotate(180deg); }

/* dropdown panels
   Open: the panel's background (::after) grows from the middle of its top edge
   down and out to both sides, then its items fade in one after another. Only the
   background layer is transformed, so nested flyouts are never clipped or scaled. */
.snav-menu .snav-sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    padding: 8px;
    visibility: hidden;
    transition: visibility 0s linear .22s;
    z-index: 10;
}
.snav-menu .snav-sub:after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: var(--snav-drop-bg);
    border-radius: var(--snav-radius);
    box-shadow: 0 14px 36px rgba(16, 40, 26, .18), 0 2px 6px rgba(16, 40, 26, .08);
    opacity: 0;
    transform: scale(.55, .2);
    transform-origin: 50% 0;
    transition: transform .2s ease-in, opacity .18s ease-in;
    will-change: transform, opacity;
}
/* bridge the gap so the pointer can travel from item to panel */
.snav-menu .snav-sub:before {
    content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.snav-menu .has-sub:hover > .snav-sub,
.snav-menu .has-sub:focus-within > .snav-sub,
.snav-menu .has-sub.is-open > .snav-sub {
    visibility: visible;
    /* a short hover-intent delay, so passing over an item does not pop it open */
    transition-delay: .06s;
}
.snav-menu .has-sub:hover > .snav-sub:after,
.snav-menu .has-sub:focus-within > .snav-sub:after,
.snav-menu .has-sub.is-open > .snav-sub:after {
    opacity: 1;
    transform: none;
    transition: transform .38s var(--snav-ease) .06s, opacity .16s ease .06s;
}
.snav-menu .has-sub.is-open > .snav-sub, .snav-menu .has-sub.is-open > .snav-sub:after { transition-delay: 0s; }

/* items drift in after the panel starts opening */
.snav-menu .snav-sub > .snav-item {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .12s ease, transform .12s ease;
}
.snav-menu .has-sub:hover > .snav-sub > .snav-item,
.snav-menu .has-sub:focus-within > .snav-sub > .snav-item,
.snav-menu .has-sub.is-open > .snav-sub > .snav-item {
    opacity: 1;
    transform: none;
    transition: opacity .26s ease .14s, transform .32s var(--snav-ease) .14s;
}
.snav-menu .has-sub:hover > .snav-sub > .snav-item:nth-child(2), .snav-menu .has-sub.is-open > .snav-sub > .snav-item:nth-child(2) { transition-delay: .17s; }
.snav-menu .has-sub:hover > .snav-sub > .snav-item:nth-child(3), .snav-menu .has-sub.is-open > .snav-sub > .snav-item:nth-child(3) { transition-delay: .2s; }
.snav-menu .has-sub:hover > .snav-sub > .snav-item:nth-child(4), .snav-menu .has-sub.is-open > .snav-sub > .snav-item:nth-child(4) { transition-delay: .23s; }
.snav-menu .has-sub:hover > .snav-sub > .snav-item:nth-child(5), .snav-menu .has-sub.is-open > .snav-sub > .snav-item:nth-child(5) { transition-delay: .26s; }
.snav-menu .has-sub:hover > .snav-sub > .snav-item:nth-child(n+6), .snav-menu .has-sub.is-open > .snav-sub > .snav-item:nth-child(n+6) { transition-delay: .29s; }

.snav-menu .snav-sub .snav-item { position: relative; }
.snav-menu .snav-sub .snav-link {
    display: block;
    flex: 1 1 auto;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--snav-drop-ink);
    font-size: 14px;
    line-height: 1.6;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.snav-menu .snav-sub .snav-item:hover > .snav-link,
.snav-menu .snav-sub .snav-item:hover > .snav-row > .snav-link,
.snav-menu .snav-sub .snav-link:focus {
    background: var(--snav-drop-hover);
    color: var(--snav-drop-accent);
}
.snav-menu .snav-sub .snav-row { border-radius: 8px; }
.snav-menu .snav-sub .snav-caret { color: #7a8a80; margin: 0 4px; }
.snav-menu .snav-sub .snav-caret svg { transform: rotate(90deg); }      /* ltr: points to the side it opens */
body.rtl .snav-menu .snav-sub .snav-caret svg { transform: rotate(-90deg); }
.snav-menu .snav-sub .has-sub:hover > .snav-row > .snav-caret,
.snav-menu .snav-sub .has-sub:focus-within > .snav-row > .snav-caret,
.snav-menu .snav-sub .has-sub.is-open > .snav-row > .snav-caret { transform: none; }

/* deeper levels fly out sideways, revealed from the edge next to their parent */
.snav-menu .snav-sub .snav-sub {
    top: -8px;
    left: 100%;
    margin-left: 6px;
}
.snav-menu .snav-sub .snav-sub:before { top: 0; bottom: 0; height: auto; width: 10px; left: auto; right: 100%; }
body.rtl .snav-menu .snav-sub .snav-sub:before { right: auto; left: 100%; }
/* rtl mirror */
body.rtl .snav-menu .snav-sub { left: auto; right: 0; }
body.rtl .snav-menu .snav-sub .snav-sub { right: 100%; margin-left: 0; margin-right: 6px; }
/* flipped by JS when a panel would leave the viewport */
.snav-menu .snav-sub .snav-sub.is-flipped { left: auto; right: 100%; margin-left: 0; margin-right: 6px; }
body.rtl .snav-menu .snav-sub .snav-sub.is-flipped { right: auto; left: 100%; margin-right: 0; margin-left: 6px; }
/* flyouts grow from the edge that touches their parent */
.snav-menu .snav-sub .snav-sub:after { transform: scale(.2, .55); transform-origin: 0 50%; }
body.rtl .snav-menu .snav-sub .snav-sub:after,
.snav-menu .snav-sub .snav-sub.is-flipped:after { transform-origin: 100% 50%; }
body.rtl .snav-menu .snav-sub .snav-sub.is-flipped:after { transform-origin: 0 50%; }
.snav-menu .snav-sub .has-sub:hover > .snav-sub:after,
.snav-menu .snav-sub .has-sub:focus-within > .snav-sub:after,
.snav-menu .snav-sub .has-sub.is-open > .snav-sub:after { transform: none; }
.snav-menu > .snav-item > .snav-sub.is-flipped { left: auto; right: 0; }
body.rtl .snav-menu > .snav-item > .snav-sub.is-flipped { right: auto; left: 0; }

/* ---------- mobile toggle ---------- */
.snav-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 14px 0 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: var(--snav-ink);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.snav-toggle:active { background: rgba(255, 255, 255, .16); }
.snav-burger { display: inline-flex; flex-direction: column; gap: 4px; width: 20px; }
.snav-burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.snav-burger i:nth-child(2) { width: 70%; }

/* ---------- drawer ---------- */
.snav-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 2000;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .3s;
}
.snav-drawer.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.snav-backdrop {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(8, 24, 15, .5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .3s ease;
}
.snav-drawer.is-open .snav-backdrop { opacity: 1; }
.snav-panel {
    position: absolute;
    top: 0; bottom: 0;
    left: 0;
    width: 86vw;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: var(--snav-drop-ink);
    box-shadow: 0 0 40px rgba(0, 0, 0, .25);
    transform: translateX(-100%);
    transition: transform .32s var(--snav-ease);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    outline: none;
}
/* rtl: keep the scroll container ltr so its scrollbar sits on the right, at the
   screen edge, and lay the content itself out rtl */
body.rtl .snav-panel { left: auto; right: 0; transform: translateX(100%); direction: ltr; }
body.rtl .snav-panel > * { direction: rtl; }
/* thin overlay-style scrollbar (the site-wide one in style.css is 12px with a track) */
.snav-panel { scrollbar-width: thin; scrollbar-color: rgba(15, 94, 51, .35) transparent; }
.snav-panel::-webkit-scrollbar { width: 3px; }
.snav-panel::-webkit-scrollbar-track { background: transparent; box-shadow: none; border-radius: 0; }
.snav-panel::-webkit-scrollbar-thumb { background: rgba(15, 94, 51, .35); border-radius: 3px; }
.snav-drawer.is-open .snav-panel { transform: none; }
body.snav-locked { overflow: hidden; }

.snav-panel-head {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px 12px 16px;
    background: linear-gradient(180deg, var(--snav-bg-2) 0%, var(--snav-bg) 100%);
}
.snav-panel-brand img { height: 44px; width: auto; max-width: 220px; filter: brightness(0) invert(1); }
.snav-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    color: #fff; cursor: pointer;
}
.snav-close svg { width: 20px; height: 20px; }

.snav-panel-account { display: flex; gap: 8px; padding: 14px 16px 6px; }
.snav-btn {
    flex: 1 1 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 42px; padding: 0 12px;
    border-radius: 10px;
    font-size: 14px; font-weight: 600;
    text-decoration: none !important;
}
.snav-btn-primary { background: var(--snav-bg-2); color: #fff !important; }
.snav-btn-warning { background: #f0ad4e; color: #fff !important; }
.snav-btn-danger { background: #d9534f; color: #fff !important; }
.snav-btn-block { display: flex; margin: 8px 16px 0; }

.snav-tree { padding: 8px 8px 12px; }
.snav-tree .snav-item { border-bottom: 1px solid #eef2ef; }
.snav-tree .snav-item:last-child { border-bottom: 0; }
.snav-tree .snav-row { justify-content: space-between; }
/* rows with children open on a tap anywhere on the row (site-nav.js) */
.snav-tree .has-sub > .snav-row { cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 10px; transition: background-color .2s; }
.snav-tree .has-sub > .snav-row:active { background: #f2f7f3; }
.snav-tree .is-open > .snav-row > .snav-link { color: var(--snav-drop-accent); font-weight: 600; }
.snav-tree .snav-link {
    display: block;
    flex: 1 1 auto;
    padding: 13px 10px;
    color: var(--snav-drop-ink);
    font-size: 15px;
    text-decoration: none;
}
.snav-tree .snav-link:active, .snav-tree .snav-link:hover { color: var(--snav-drop-accent); }
.snav-tree .snav-caret { width: 40px; height: 40px; border-radius: 10px; color: #6b7c72; }
.snav-tree .snav-caret svg { width: 18px; height: 18px; }
.snav-tree .snav-caret { transition: transform .3s var(--snav-ease), background-color .2s, color .2s; }
.snav-tree .snav-caret[aria-expanded="true"] { transform: rotate(180deg); background: var(--snav-drop-hover); color: var(--snav-drop-accent); }
/* accordion: height is animated by site-nav.js (0 -> content height -> auto) */
.snav-tree .snav-sub {
    height: 0;
    overflow: hidden;
    margin: 0 8px;
    padding: 0 8px;
    border-radius: 10px;
    background: #f5f9f6;
    opacity: 0;
    transition: height .32s var(--snav-ease), opacity .24s ease, margin-bottom .32s var(--snav-ease);
}
.snav-tree .is-open > .snav-sub { height: auto; opacity: 1; margin-bottom: 8px; }
.snav-tree .snav-item-parent .snav-link { font-weight: 600; color: var(--snav-drop-accent); }
.snav-tree .snav-sub .snav-item { border-color: #e6ede8; }
.snav-tree .snav-sub .snav-link { font-size: 14px; padding: 11px 6px; }

.snav-panel-foot {
    margin-top: auto;
    display: flex; flex-wrap: wrap; gap: 6px 18px;
    padding: 14px 18px 22px;
    border-top: 1px solid #eef2ef;
    font-size: 14px;
}
.snav-panel-foot a { color: var(--snav-drop-accent); }

/* ---------- breakpoints ---------- */
@media (max-width: 991px) {
    .snav { display: none; }
    .snav-toggle { display: inline-flex; }
}
@media (min-width: 992px) {
    .snav-drawer { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .snav-bar.is-fixed { animation: none; }
    .snav-menu .snav-sub, .snav-menu .snav-sub:after, .snav-menu .snav-sub > .snav-item,
    .snav-panel, .snav-backdrop, .snav-caret, .snav-tree .snav-sub { transition: none !important; }
}