/* ===========================================================
 * OPUS MUNDI — Navigation CSS
 * Styles the cybernetic navbar, sidebar, hamburger,
 * language panel, and OJS {load_menu} output.
 *
 * OJS injects `.pkp_navigation_primary` and `.pkp_navigation_user`
 * as <ul> elements. We remap them to the .om-nav-links style.
 * =========================================================== */

/* ── OJS NUCLEAR OVERRIDES ──────────────────────────────────────── */
/* Hide the default OJS header structure — replaced by .om-navbar */
.pkp_structure_head,
header.pkp_structure_head,
#headerNavigationContainer,
#pkpAdminBar,
.pkp_adminBar,
.pkp_structure_adminBar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* ── SHELL LAYOUT ───────────────────────────────────────────────────
   Full-height flex container: sidebar (80px) | main (rest)
──────────────────────────────────────────────────────────────────── */
.om-shell {
    display: flex;
    flex-direction: row;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(135deg, #0d1117 0%, #141820 50%, #0d1520 100%);
}

[data-theme="light"] .om-shell {
    background: linear-gradient(135deg, #ffffff 0%, #fdfcf0 50%, #f5f0e8 100%);
}

/* ── SIDEBAR ─────────────────────────────────────────────────────── */
.om-sidebar {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
    background: rgba(10, 14, 22, 0.85);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 100;
    flex-shrink: 0;
}

[data-theme="light"] .om-sidebar {
    background: rgba(253, 252, 240, 0.92);
    border-right: 1px solid rgba(179, 139, 0, 0.12);
}

/* Hamburger button */
.om-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 36px;
    align-items: center;
}

.om-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    transition: background 0.2s, transform 0.3s;
}

[data-theme="light"] .om-hamburger span {
    background: rgba(13, 31, 45, 0.6);
}

.om-hamburger:hover span,
.om-hamburger[aria-expanded="true"] span {
    background: #00d4ff;
}

[data-theme="light"] .om-hamburger:hover span,
[data-theme="light"] .om-hamburger[aria-expanded="true"] span {
    background: #b38b00;
}

/* Social vertical links */
.om-socials {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.om-socials a {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    transition: color 0.2s;
}

[data-theme="light"] .om-socials a {
    color: rgba(13, 31, 45, 0.35);
}

.om-socials a:hover {
    color: #00d4ff;
}

[data-theme="light"] .om-socials a:hover {
    color: #b38b00;
}

/* ── MAIN AREA ───────────────────────────────────────────────────── */
.om-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ── TOP NAVBAR ──────────────────────────────────────────────────── */
.om-navbar {
    background: rgba(13, 17, 23, 0.96);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 64px;
    height: 80px;
    min-height: 80px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 50;
    flex-shrink: 0;
    transition: background 0.3s;
}

[data-theme="light"] .om-navbar {
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid rgba(179, 139, 0, 0.15);
}

/* Force navbar-left to allow column stacking of logo + tagline */
.om-navbar-left {
    display: flex;
    align-items: center;
    gap: 40px;
}

.om-navbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Logo wrap is a vertical column — OPUS MUNDI on top, tagline below */
.om-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    text-decoration: none !important;
}

/* Kill any potential pipe / separator injected by old CSS */
.om-logo-tagline::before,
.om-logo-tagline::after {
    content: none !important;
    display: none !important;
}

.om-logo-tagline {
    display: block !important;
    font-size: 8px;
    font-style: italic;
    font-family: var(--om-font-sans, 'Inter', 'Outfit', sans-serif);
    font-weight: 400;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap;
    user-select: none;
    transition: color 0.3s;
    opacity: 0;
    animation: tagline-appear 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.6s;
    line-height: 1;
}

[data-theme="light"] .om-logo-tagline {
    color: rgba(13, 31, 45, 0.55);
}

@keyframes tagline-appear {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}

.om-logo-text {
    display: block !important;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 5px;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
    transition: color 0.2s;
    /* 3D depth: layered text-shadow for a raised metallic look */
    text-shadow:
        0 1px 0  rgba(0,0,0,0.6),
        0 2px 4px rgba(0,0,0,0.5),
        0 4px 10px rgba(0,0,0,0.35),
        0 0 20px rgba(0, 212, 255, 0.12);
}

[data-theme="light"] .om-logo-text {
    color: #0d1f2d;
}

.om-logo-dot {
    color: #00d4ff;
}

[data-theme="light"] .om-logo-dot {
    color: #b38b00;
}

.om-logo-text:hover {
    color: #00d4ff;
    text-decoration: none;
}

[data-theme="light"] .om-logo-text:hover {
    color: #b38b00;
}

/* ── PRIMARY NAV — OJS {load_menu} output ───────────────────────── */
/* OJS renders: <ul class="om-nav-links" id="om-primary-nav">     */
/*                <li><a href="...">Label</a></li> ...             */
.om-nav-links,
ul.om-nav-links,
.pkp_navigation_primary,
ul.pkp_navigation_primary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 0;
    padding: 0;
}

.om-nav-links li,
.pkp_navigation_primary li {
    margin: 0;
    padding: 0;
}

.om-nav-links a,
.pkp_navigation_primary a {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

[data-theme="light"] .om-nav-links a,
[data-theme="light"] .pkp_navigation_primary a {
    color: rgba(13, 31, 45, 0.6);
}

.om-nav-links a:hover,
.om-nav-links a.active,
.pkp_navigation_primary a:hover,
.pkp_navigation_primary li.current > a {
    color: #00d4ff;
    border-bottom-color: #00d4ff;
    text-decoration: none;
}

[data-theme="light"] .om-nav-links a:hover,
[data-theme="light"] .om-nav-links a.active,
[data-theme="light"] .pkp_navigation_primary a:hover,
[data-theme="light"] .pkp_navigation_primary li.current > a {
    color: #b38b00;
    border-bottom-color: #b38b00;
}

/* ── DROPDOWN SUBMENUS (OJS {load_menu} nested <ul>) ───────────── */
/* OJS wraps sub-items in: li > ul.pkp_nav_level2 or li > ul          */
.om-nav-links li,
.pkp_navigation_primary li {
    position: relative;   /* anchor for absolute submenu */
}

/* The submenu: hidden by default */
.om-nav-links li > ul,
.pkp_navigation_primary li > ul {
    display: none;
    position: absolute;
    top: calc(100% + 4px);   /* 4px below parent — bridged by padding-bottom below */
    left: 0;
    min-width: 180px;
    background: rgba(6, 18, 30, 0.97);
    border: 1px solid rgba(0, 212, 255, 0.18);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 200;
    padding: 6px 0;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    pointer-events: all;
}

[data-theme="light"] .om-nav-links li > ul,
[data-theme="light"] .pkp_navigation_primary li > ul {
    background: rgba(250, 250, 250, 0.98);
    border-color: rgba(0, 120, 160, 0.2);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

/* Hover bridge: extend hover area so gap between item and submenu is covered */
.om-nav-links li:hover > a,
.pkp_navigation_primary li:hover > a {
    color: #00d4ff;
    border-bottom-color: #00d4ff;
    padding-bottom: 8px;    /* bridge overlaps gap to submenu */
}

[data-theme="light"] .om-nav-links li:hover > a,
[data-theme="light"] .pkp_navigation_primary li:hover > a {
    color: #b38b00;
    border-bottom-color: #b38b00;
}

/* Show submenu on parent li hover OR when submenu itself is hovered */
.om-nav-links li:hover > ul,
.pkp_navigation_primary li:hover > ul,
.om-nav-links li > ul:hover,
.pkp_navigation_primary li > ul:hover {
    display: flex;
}

/* Submenu items */
.om-nav-links li > ul li,
.pkp_navigation_primary li > ul li {
    width: 100%;
    padding: 0;
    margin: 0;
}

.om-nav-links li > ul li a,
.pkp_navigation_primary li > ul li a {
    display: block;
    padding: 10px 18px;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.65);
    border-bottom: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

[data-theme="light"] .om-nav-links li > ul li a,
[data-theme="light"] .pkp_navigation_primary li > ul li a {
    color: rgba(13, 31, 45, 0.7);
}

.om-nav-links li > ul li a:hover,
.pkp_navigation_primary li > ul li a:hover {
    background: rgba(0, 212, 255, 0.08);
    color: #00d4ff;
}

[data-theme="light"] .om-nav-links li > ul li a:hover,
[data-theme="light"] .pkp_navigation_primary li > ul li a:hover {
    background: rgba(0, 120, 160, 0.06);
    color: #006080;
}

/* Role-specific highlights */
.om-role-highlight {
    color: #00d4ff !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    border-radius: 4px;
    padding: 4px 12px !important;
    background: rgba(0, 212, 255, 0.05);
}

.om-role-highlight:hover {
    background: rgba(0, 212, 255, 0.1) !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}

[data-theme="light"] .om-role-highlight {
    color: #b38b00 !important;
    border-color: rgba(179, 139, 0, 0.3) !important;
    background: rgba(179, 139, 0, 0.05);
}

/* ORCID badge in nav */
.orcid-badge,
.om-nav-links a.orcid-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(166, 206, 57, 0.4);
    border-radius: 3px;
    padding: 4px 10px !important;
    color: #a6ce39 !important;
    border-bottom: 1px solid rgba(166, 206, 57, 0.4) !important;
    font-size: 10px !important;
}

.orcid-badge:hover {
    background: rgba(166, 206, 57, 0.08) !important;
    text-decoration: none !important;
}

.orcid-icon {
    background: #a6ce39;
    color: #000;
    font-size: 9px;
    font-weight: 900;
    padding: 2px 4px;
    border-radius: 2px;
    letter-spacing: 0;
}

/* ── USER NAV — OJS {load_menu name="user"} output ──────────────── */
.om-user-nav,
ul.om-user-nav,
.pkp_navigation_user,
ul.pkp_navigation_user {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
}

.om-user-nav a,
.pkp_navigation_user a {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.2s;
}

.om-user-nav a:hover,
.pkp_navigation_user a:hover {
    color: #00d4ff;
}

[data-theme="light"] .om-user-nav a,
[data-theme="light"] .pkp_navigation_user a {
    color: rgba(13, 31, 45, 0.55);
}

[data-theme="light"] .om-user-nav a:hover,
[data-theme="light"] .pkp_navigation_user a:hover {
    color: #b38b00;
}

/* ── SEARCH PILL ────────────────────────────────────────────────── */
.om-search-wrap {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    padding: 8px 18px;
    gap: 12px;
    min-width: 300px;
    transition: border-color 0.3s, background 0.3s;
}

[data-theme="light"] .om-search-wrap {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(179, 139, 0, 0.15);
}

.om-search-wrap:focus-within {
    border-color: #00d4ff;
    background: rgba(0, 212, 255, 0.04);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08);
}

[data-theme="light"] .om-search-wrap:focus-within {
    border-color: #b38b00;
    background: rgba(179, 139, 0, 0.04);
}

.om-search-wrap input[type="text"] {
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 13px !important;
    width: 100%;
    padding: 0 !important;
    letter-spacing: 0.5px;
}

[data-theme="light"] .om-search-wrap input[type="text"] {
    color: #0d1f2d !important;
}

.om-search-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="light"] .om-search-wrap input::placeholder {
    color: rgba(13, 31, 45, 0.35) !important;
}

.om-search-icon {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: color 0.2s;
    line-height: 1;
}

.om-search-wrap:focus-within .om-search-icon {
    color: #00d4ff;
}

[data-theme="light"] .om-search-icon {
    color: rgba(13, 31, 45, 0.4);
}

[data-theme="light"] .om-search-wrap:focus-within .om-search-icon {
    color: #b38b00;
}

/* ── THEME TOGGLE BUTTON ─────────────────────────────────────────── */
.om-theme-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, transform 0.3s;
    flex-shrink: 0;
    padding: 0;
}

.om-theme-btn:hover {
    border-color: #00d4ff;
    color: #00d4ff;
    transform: rotate(30deg);
}

[data-theme="light"] .om-theme-btn {
    border-color: rgba(179, 139, 0, 0.2);
    color: rgba(13, 31, 45, 0.6);
}

[data-theme="light"] .om-theme-btn:hover {
    border-color: #b38b00;
    color: #b38b00;
}

/* ── LANGUAGE PANEL ──────────────────────────────────────────────── */
.om-lang-panel {
    position: fixed;
    top: 0;
    left: 80px;
    width: 260px;
    height: 100vh;
    background: rgba(10, 14, 22, 0.97);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 200;
    display: none;           /* Hidden by default */
    flex-direction: column;
    padding: 28px 0 20px;
    transform: translateX(-110%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
}

[data-theme="light"] .om-lang-panel {
    background: rgba(253, 252, 240, 0.98);
    border-right: 1px solid rgba(179, 139, 0, 0.15);
}

.om-lang-panel.open {
    display: flex;
    transform: translateX(0);
    opacity: 1;
}

.om-lang-panel-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    padding: 0 20px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 8px;
}

[data-theme="light"] .om-lang-panel-title {
    color: rgba(13, 31, 45, 0.4);
    border-bottom-color: rgba(179, 139, 0, 0.1);
}

.om-lang-group-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 10px 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background 0.2s;
    text-align: left;
}

[data-theme="light"] .om-lang-group-btn {
    color: rgba(13, 31, 45, 0.6);
}

.om-lang-group-btn:hover {
    background: rgba(0, 212, 255, 0.06);
}

.om-lang-group-btn .arrow {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    transition: transform 0.25s;
}

.om-lang-group.expanded .om-lang-group-btn .arrow {
    transform: rotate(90deg);
}

.om-lang-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.om-lang-group.expanded .om-lang-items {
    max-height: 300px;
}

.om-lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px 8px 32px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

[data-theme="light"] .om-lang-item {
    color: rgba(13, 31, 45, 0.5);
}

.om-lang-item:hover {
    color: #00d4ff;
    background: rgba(0, 212, 255, 0.05);
}

[data-theme="light"] .om-lang-item:hover {
    color: #b38b00;
    background: rgba(179, 139, 0, 0.05);
}

.om-lang-item.active {
    color: #00d4ff;
    font-weight: 600;
}

[data-theme="light"] .om-lang-item.active {
    color: #b38b00;
}

.om-lang-item .flag {
    font-size: 16px;
}

.om-lang-panel-close {
    margin-top: auto;
    padding: 10px 20px;
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    text-align: left;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.2s;
}

.om-lang-panel-close:hover {
    color: #00d4ff;
}

[data-theme="light"] .om-lang-panel-close {
    border-top-color: rgba(179, 139, 0, 0.1);
    color: rgba(13, 31, 45, 0.35);
}

.om-lang-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 190;
    background: transparent;
}

.om-lang-backdrop.open { display: block; }

/* ── PAGE BODY & OJS SIDEBAR WIDGET ─────────────────────────────── */
.om-page-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: row;
    min-height: 0;
}

.om-page-body .pkp_structure_main {
    flex: 1;
    min-width: 0;
}

.om-sidebar-widgets {
    width: 260px;
    flex-shrink: 0;
    padding: 24px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── COPYRIGHT STRIP ─────────────────────────────────────────────── */
.om-copyright {
    background: transparent;
    border: none;
    text-align: center;
    padding: 8px 16px 12px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

[data-theme="light"] .om-copyright {
    color: rgba(13, 31, 45, 0.3);
}

.om-tagline-footer {
    display: block;
    font-size: 10px;
    font-family: var(--om-font-sans, 'Inter', 'Outfit', sans-serif);
    font-weight: 300;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 5px;
    font-style: italic;
    transition: color 0.3s;
}

[data-theme="light"] .om-tagline-footer {
    color: rgba(13, 31, 45, 0.45);
}

.om-pkp-brand {
    display: none;              /* Hidden visually — kept for a11y compliance */
}

/* ── BREADCRUMBS ─────────────────────────────────────────────────── */
.om-breadcrumbs,
.cmp_breadcrumbs,
nav[aria-label="breadcrumb"] {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    padding: 16px 0 8px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.om-breadcrumbs a,
.cmp_breadcrumbs a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
}

.om-breadcrumbs a:hover,
.cmp_breadcrumbs a:hover {
    color: #00d4ff;
}

.om-breadcrumbs .separator {
    opacity: 0.3;
}

[data-theme="light"] .om-breadcrumbs,
[data-theme="light"] .cmp_breadcrumbs,
[data-theme="light"] nav[aria-label="breadcrumb"] {
    color: rgba(13, 31, 45, 0.35);
}

[data-theme="light"] .om-breadcrumbs a,
[data-theme="light"] .cmp_breadcrumbs a {
    color: rgba(13, 31, 45, 0.5);
}

[data-theme="light"] .om-breadcrumbs a:hover,
[data-theme="light"] .cmp_breadcrumbs a:hover {
    color: #b38b00;
}

[data-theme="light"] .om-breadcrumbs .separator {
    opacity: 0.25;
}

/* ── MOBILE RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .om-shell { flex-direction: column; height: auto; overflow: auto; }
    .om-sidebar {
        width: 100%; min-width: unset; max-width: unset;
        flex-direction: row; height: 52px; padding: 0 20px;
        border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .om-socials { flex-direction: row; gap: 16px; }
    .om-socials a { writing-mode: horizontal-tb; transform: none; }
    .om-navbar { padding: 0 20px; height: 64px; min-height: 64px; }
    .om-search-wrap { min-width: 160px; }
    .om-nav-links, .pkp_navigation_primary {
        display: none; /* Hidden on mobile — shown via hamburger */
    }
    .om-lang-panel { left: 0; width: 100%; }
    .om-page-body { flex-direction: column; overflow: auto; }
    .om-sidebar-widgets { width: 100%; border-left: none; border-top: 1px solid rgba(255,255,255,0.06); }
}

/* -- NAV DROPDOWN (primaryNavMenu.tpl & standard OJS load_menu) ----- */
.om-nav-item,
.om-nav-links > li,
#om-primary-nav > li,
.pkp_navigation_primary > li {
    position: relative !important;
}

.om-nav-dropdown,
.om-nav-links > li > ul,
#om-primary-nav > li > ul,
.pkp_navigation_primary > li > ul {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 200px !important;
    background: #0d121a !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    list-style: none !important;
    list-style-type: none !important;
    padding: 6px 0 !important;
    margin: 5px 0 0 0 !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-6px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
    display: block !important; /* Keep display block but toggle visibility and opacity */
}

[data-theme="light"] .om-nav-dropdown,
[data-theme="light"] .om-nav-links > li > ul,
[data-theme="light"] #om-primary-nav > li > ul,
[data-theme="light"] .pkp_navigation_primary > li > ul {
    background: #fdfcf0 !important;
    border-color: rgba(179, 139, 0, 0.2) !important;
}

/* Ensure no bullets on any list item inside the menu */
.om-nav-links ul,
.om-nav-links li,
#om-primary-nav ul,
#om-primary-nav li,
.pkp_navigation_primary ul,
.pkp_navigation_primary li {
    list-style: none !important;
    list-style-type: none !important;
    background-image: none !important;
}

/* Show on hover, focus-within, and Superfish sfHover class */
.om-nav-item:hover .om-nav-dropdown,
.om-nav-item:focus-within .om-nav-dropdown,
.om-nav-links > li:hover > ul,
.om-nav-links > li:focus-within > ul,
#om-primary-nav > li:hover > ul,
#om-primary-nav > li:focus-within > ul,
.pkp_navigation_primary > li:hover > ul,
.pkp_navigation_primary > li:focus-within > ul,
.om-nav-links > li.sfHover > ul,
#om-primary-nav > li.sfHover > ul,
.pkp_navigation_primary > li.sfHover > ul {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
    transform: translateY(0) !important;
    left: 0 !important;
}

.om-nav-dropdown li a,
.om-nav-links > li > ul a,
#om-primary-nav > li > ul a,
.pkp_navigation_primary > li > ul a {
    display: block !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    color: var(--color-muted) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border-bottom: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: color 0.15s, background 0.15s !important;
}

[data-theme="light"] .om-nav-dropdown li a,
[data-theme="light"] .om-nav-links > li > ul a,
[data-theme="light"] #om-primary-nav > li > ul a,
[data-theme="light"] .pkp_navigation_primary > li > ul a {
    color: #0d1f2d !important;
}

.om-nav-dropdown li a:hover,
.om-nav-links > li > ul a:hover,
#om-primary-nav > li > ul a:hover,
.pkp_navigation_primary > li > ul a:hover {
    color: var(--color-accent) !important;
    background: rgba(0,212,255,0.06) !important;
}

[data-theme="light"] .om-nav-dropdown li a:hover,
[data-theme="light"] .om-nav-links > li > ul a:hover,
[data-theme="light"] #om-primary-nav > li > ul a:hover,
[data-theme="light"] .pkp_navigation_primary > li > ul a:hover {
    color: #b38b00 !important;
    background: rgba(179, 139, 0, 0.05) !important;
}


.om-nav-caret {
    font-size: 9px;
    margin-left: 4px;
    opacity: 0.6;

    position: relative;
    top: -1px;
}

/* About + Announcement page */
.om-about-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    padding: 32px 64px 48px;
}
.om-about-section { margin-bottom: 24px; padding: 28px; }
.om-about-body { font-size: 14px; line-height: 1.8; color: var(--color-muted); }
.om-about-body h2, .om-about-body h3 { color: var(--color-heading); margin: 1em 0 0.5em; }
.om-about-body p { margin-bottom: 1em; }
.om-about-body a { color: var(--color-accent); }
.om-journal-meta-card { padding: 20px; margin-bottom: 20px; }
.om-meta-card-title { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--color-muted); margin-bottom: 16px; }
.om-meta-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.om-meta-key { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--color-muted); display: block; }
.om-meta-val { font-size: 14px; color: var(--color-text); }
.om-cta-block { display: block; text-align: center; padding: 12px; }

/* Announcements */
.om-announcements-list { padding: 24px 64px 48px; display: flex; flex-direction: column; gap: 24px; }
.om-announcement-card { padding: 24px; }
.om-announcement-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.om-announcement-title { font-size: 18px; font-weight: 600; color: var(--color-heading); margin-bottom: 12px; }
.om-announcement-link { color: inherit; text-decoration: none; }
.om-announcement-link:hover { color: var(--color-accent); }
.om-announcement-excerpt { font-size: 13px; line-height: 1.7; color: var(--color-muted); margin-bottom: 16px; }
.om-badge-accent { background: rgba(0,212,255,0.12); color: var(--color-accent); border: 1px solid rgba(0,212,255,0.25); border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: 1px; }

@media (max-width: 900px) {
    .om-about-grid { grid-template-columns: 1fr; padding: 20px; }
    .om-announcements-list { padding: 20px; }
}