/* ==========================================
   PRIMARY NAVIGATION
   ========================================== */

#primary-navigation {

    background: #01060d;    

    border-top: 2px solid #d3ad57;

    border-bottom: 1px solid #15334a;

    box-shadow:
        inset 0 1px rgba(255,255,255,.08),
        inset 0 -1px rgba(0,0,0,.35);

}

.locallia-menu {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:0;
    margin:0;
    padding:0;
    list-style:none;
}

.locallia-menu li {
    position: relative;
}

/* Top level menu dividers only */
.locallia-menu > li:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 10px;
    right: 0;

    width: 2px;
    height: calc(100% - 20px);

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(216,162,74,.15) 15%,
        rgba(216,162,74,.90) 50%,
        rgba(216,162,74,.15) 85%,
        transparent 100%
    );
}

.locallia-menu-link {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    padding:13px 20px;

    color:#f3f3f3;

    text-decoration:none;

    font-family: "Cormorant Garamond", serif;

    font-size: 1.0rem;

    font-weight:500;

    letter-spacing:.1px;

    text-transform: uppercase;

    transition:
        background .25s,
        color .25s,
        box-shadow .25s;

}


.locallia-menu-link:hover{

    background:rgba(211,173,87,.12);

    color:#ffd977;

    box-shadow:inset 0 -3px #d3ad57;

}

.locallia-menu-link.is-active{

    color:#ffd977;

    background:rgba(211,173,87,.10);

    box-shadow: inset 0 -3px #d3ad57;

}

.menu-icon {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* ======================================================
   DROPDOWN MENU FOUNDATION
   ====================================================== */

/* Every menu item can contain a submenu */
.locallia-menu li {
    position: relative;
}

/* ======================================================
   DROPDOWN PANEL
   ====================================================== */

.locallia-menu ul {

    list-style: none;
    margin: 0;
    padding: 10px 0;

    position: absolute;
    top: 100%;
    left: 0;

    min-width: 260px;

   /* Parchment texture */
background:
    linear-gradient(
        rgba(249,245,235,.98),
        rgba(238,228,210,.96)
    ),
    url("../images/textures/parchment.webp");

background-repeat:
    repeat,
    repeat;

background-size:
    auto,
    512px;

background-blend-mode:
    multiply;

    border: 1px solid #b28a43;
    border-radius: 14px;
    outline: 1px solid rgba(228,196,124,.35);
    outline-offset: -4px;

box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 3px 8px rgba(0,0,0,.18),
    inset 0 1px rgba(255,255,255,.45),
    inset 0 -1px rgba(120,90,30,.08);

    z-index: 1000;
}

/* Hide all dropdowns */
.locallia-menu li > ul {
    display: none;
}

/* Show only the immediate child on hover */
.locallia-menu li:hover > ul,
.locallia-menu li:focus-within > ul {
    display: block;
}

/* Third level menus fly out to the right */
.locallia-menu ul ul {
    top: 0;
    left: 100%;
}

/* ======================================================
   DROPDOWN MENU ITEMS
   ====================================================== */

.locallia-menu ul .locallia-menu-link {

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 14px 22px;

    color: #2f2415;

    font-family: "Cormorant Garamond", serif;
    font-size: 1.35rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;

    background: transparent;
    box-shadow: none;

    text-decoration: none;
    transition: all .2s ease;
}

/* Hover */
.locallia-menu ul .locallia-menu-link:hover {

    background: rgba(184,139,59,.12);
    color: #8b5a14;

}

/* Active page */
.locallia-menu ul .locallia-menu-link.is-active {

    background: rgba(184,139,59,.18);
    color: #8b5a14;
}


/* ======================================================
   DROPDOWN SEPARATORS
   ====================================================== */

.locallia-menu ul li {

    margin: 0;
    padding: 0;

}

.locallia-menu ul li:not(:last-child) {

    border-bottom: 1px solid rgba(184,139,59,.35);

}

/* ======================================================
   SUBMENU ARROWS
   ====================================================== */

/* Any dropdown item with another menu gets an arrow */
.locallia-menu ul li:has(> ul) > .locallia-menu-link::after {

    content: "▶";

    font-size: 0.75rem;

    color: #8b5a14;

    margin-left: auto;

    opacity: .75;

    transition: transform .2s ease;

}

/* Nice little animation */
.locallia-menu ul li:hover > .locallia-menu-link::after {

    transform: translateX(3px);
    opacity: 1;

}