/* Roboto is enqueued by ffiq-mega-menu.php (weights 300, 400, 500 only).
   The @import below is kept as a fallback for the standalone index.html prototype. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
    /* Colors */
    --primary-bg:         #fff;
    --text-primary:       #3B6EB6;
    --text-secondary:     #666;
    --border-color:       #e0e0e0;
    --hover-color:        #F16D24;
    --hover-bg:           #f5f5f5;
    --hover-bg-primary:   #F3F6FA;
    --hover-bg-secondary: #E8EEF6;
    --content-bg:         #F3F6FA;

    /* Layout */
    --header-height: 70px;
    --container-max: 1240px;

    /* Border Radius */
    --radius-pill: 50px;
    --radius-xl:   16px;
    --radius-lg:   12px;
    --radius-md:    8px;
    --radius-sm:    6px;

    /* Typography — rem values respect the user's browser font-size preference */
    --font-nav:  1.125rem;   /* 18px */
    --font-body: 1rem;       /* 16px at default browser font-size */
    --font-sm:   0.875rem;   /* 14px */
    --font-xs:   0.75rem;    /* 12px */

    /* Transitions */
    --transition-speed: 200ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Search field */
    --search-field-height: 48px;
}

/* ============================================================
   RESET
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--primary-bg);
}

/* ============================================================
   DESKTOP NAVIGATION
   ============================================================ */
.desktop-nav {
    flex: 1;
    display: flex;
    align-items: center;
    height: var(--header-height);
    justify-content: space-between;
}

.nav-primary {
    display: flex;
    list-style: none;
    align-items: stretch;
    align-self: stretch;
}

.nav-item {
    display: flex;
    align-items: stretch;
    position: relative;
}

.nav-trigger {
    background: none;
    border: none;
    font-size: var(--font-nav);
    font-weight: 500;
    color: white;
    cursor: pointer;
    padding: 0 clamp(0.75rem, calc(2.892vw - 1.103rem), 1.5rem);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color var(--transition-speed) var(--ease),
                background var(--transition-speed) var(--ease);
    letter-spacing: 0.031em;
    border-radius: 0!important;
}

.nav-trigger::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    flex-shrink: 0;
    transition: transform 0.25s var(--ease);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.nav-trigger:hover,
.nav-trigger[aria-expanded="true"] {
    color: var(--text-primary);
    background: white;
}

.nav-trigger[data-menu="products"] {
    border-left: solid 1px var(--text-primary);
}

.nav-trigger[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.contact-btn {
    padding: 12px 24px;
    background: var(--hover-color);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-size: var(--font-sm);
    font-weight: 500;
    transition: background var(--transition-speed) var(--ease),
                color var(--transition-speed) var(--ease);
    white-space: nowrap;
    border: 2px solid var(--hover-color);
    display: inline-block;
    text-align: center;
    line-height: 1;
}

.contact-btn:hover {
    background: white;
    color: var(--hover-color);
}

.hamburger {
    display: none;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    border-radius: 0!important;
    transition: background 0.3s var(--ease);
}

.hamburger:hover {
    background: rgba(255, 255, 255, 0.12);
}

.hamburger:focus {
    background: rgba(255, 255, 255, 0.22);
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: white;
    position: absolute;
    left: 13px;
    transition: all 0.3s var(--ease);
}

.hamburger span:nth-child(1) { top: 17px; }
.hamburger span:nth-child(2) { top: 24px; }
.hamburger span:nth-child(3) { top: 31px; }

.hamburger[aria-expanded="true"]           { background: white; }
.hamburger[aria-expanded="true"] span      { background: #3B6EB6; }

.hamburger[aria-expanded="true"] span:nth-child(1) { top: 24px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { top: 24px; transform: rotate(-45deg); }

/* ============================================================
   MEGA MENU STRUCTURE
   ============================================================ */
.mega-menu-overlay {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-speed) var(--ease);
    z-index: 998;
}

.mega-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.mega-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--header-height));
    overflow: visible;
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-speed) var(--ease),
                opacity var(--transition-speed) var(--ease);
    z-index: 999;
    background: #FFF;
    border-bottom: 0.5px solid #3B6EB6;
    box-shadow: 0 5px 40px 0 rgba(106, 143, 197, 0.20);
}

.mega-menu.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.mega-content {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 18px 0;
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
}

.mega-panel        { display: none; }
.mega-panel.active { display: block; }

/* ============================================================
   PRODUCTS PANEL — 3-COLUMN GRID
   ============================================================ */
.products-grid {
    display: grid;
    grid-template-columns: 330px auto 1fr;
    align-items: stretch;
    gap: 0;
}

/* — Column 2: crypto-type selector — */
.col-2 { display: none; }

.col-2[data-active="true"] {
    display: block;
    background-color: var(--content-bg);
    min-width: 202px;
    padding: 0.75rem 1.25rem;
    padding-right: 0;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

.col-2 .menu-btn {
    font-weight: 300;
}

/* — Column 3: content area — */
.col-3 {
    position: relative;
    max-height: calc(100dvh - 200px);
    overflow-y: auto;
    background-color: var(--content-bg);
    border-radius: var(--radius-xl);
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
}

/* Show overview background image only when overview sub-panel is active */
.col-3:has(.sub-panel[data-content="overview"].active) .bg-image { opacity: 1; }

.col-3 .bg-image {
    border-radius: var(--radius-xl);
    z-index: 0;
}

.col-3::-webkit-scrollbar       { width: 6px; }
.col-3::-webkit-scrollbar-track { background: #f1f1f1; }
.col-3::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; }

/* When col-2 is visible, merge it visually with col-3 */
.col-2[data-active="true"] ~ .col-3 {
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    padding-left: 0;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* — Sub-panels — */
.sub-panel {
    display: none;
    height: 100%;
    border-radius: var(--radius-lg);
}

.sub-panel.active {
    display: block;
    flex: 1;
}
.sub-panel[data-content="overview"] {
    padding: 8px 0;
}

.sub-panel[data-content="overview"] p,
.sub-panel[data-content="overview"] a {
    margin-left: 1rem;
}

.col-2[data-active="true"] ~ .col-3 .sub-panel {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.col-3 .sub-panel[data-content="hardware"] {
    padding: 0;
    border-radius: 0;
}

/* — Content area — */
.content-area {
    position: relative;
    border-radius: var(--radius-lg);
    flex: 1;
    z-index: 1;
}

.col-2[data-active="true"] ~ .col-3 .content-area {
    background-color: var(--hover-bg-secondary);
    border-radius: var(--radius-lg);
}

/* Square the corner adjacent to the active first/last col-1 item */
.products-grid:has(.col-1 li:first-child .menu-btn.active) .col-3 { border-top-left-radius: 0; }
.products-grid:has(.col-1 li:last-child  .menu-btn.active) .col-3 { border-bottom-left-radius: 0; }

/* ============================================================
   MENU BUTTONS — SHARED BASE
   ============================================================ */
.menu-list { list-style: none; }

.menu-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 12px;
    font-size: var(--font-nav);
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-speed) var(--ease);
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    display: flex;
    gap: 8px;
}

.mega-panel[data-panel="products"] .col-1 .menu-btn { padding: 12px; }

/* Active state — always applied */
.menu-btn.active {
    background: var(--hover-bg-primary);
    border-right: solid 2px var(--hover-color);
    color: var(--hover-color);
}

/* Hover state — only on devices with a real pointer (not touch).
   Prevents sticky-hover artifacts on mobile after a tap. */
@media (hover: hover) {
    .menu-btn:hover {
        /* background: var(--hover-bg-primary); */
        border-right: solid 2px var(--hover-color);
        color: var(--hover-color);
    }
}

/* — Crypto-type split rows (mobile/tablet) — */
.crypto-type-item {
    display: flex;
    align-items: stretch;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    border-right: solid 2px transparent;
    transition: all var(--transition-speed) var(--ease);
}

.crypto-type-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: var(--font-nav);
    font-weight: 300;
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--transition-speed) var(--ease);
}

.crypto-type-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background: none;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--transition-speed) var(--ease);
}

.crypto-type-chevron::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    flex-shrink: 0;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* — Product category split rows (col-1, mobile/tablet) — */
.product-cat-item {
    display: flex;
    align-items: stretch;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    border-right: solid 2px transparent;
    transition: all var(--transition-speed) var(--ease);
}

.product-cat-link {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: var(--font-nav);
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--transition-speed) var(--ease);
}

.product-cat-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background: none;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--transition-speed) var(--ease);
}

.product-cat-chevron::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    flex-shrink: 0;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* — Crypto-type buttons (col-2, desktop) — */

.col-2 .menu-btn:hover,
.col-2 .menu-btn.active { background: var(--hover-bg-secondary); }

.mm-icon {
    fill: currentColor;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

.crypto-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* ============================================================
   PRODUCTS — PER-CRYPTO-TYPE COLORS (desktop)
   ============================================================ */
.col-2 .menu-btn[data-crypto="pqc"]:hover,
.col-2 .menu-btn[data-crypto="pqc"].active         { color: #19CAE6!important; border-right-color: #19CAE6; }
.col-2 .menu-btn[data-crypto="aes"]:hover,
.col-2 .menu-btn[data-crypto="aes"].active         { color: #3F869B!important; border-right-color: #3F869B; }
.col-2 .menu-btn[data-crypto="hmac"]:hover,
.col-2 .menu-btn[data-crypto="hmac"].active        { color: #0799CB!important; border-right-color: #0799CB; }
.col-2 .menu-btn[data-crypto="ecc"]:hover,
.col-2 .menu-btn[data-crypto="ecc"].active         { color: #747CBC!important; border-right-color: #747CBC; }
.col-2 .menu-btn[data-crypto="cryptoboxes"]:hover,
.col-2 .menu-btn[data-crypto="cryptoboxes"].active { color: #1BA2B4!important; border-right-color: #1BA2B4; }
.col-2 .menu-btn[data-crypto="roots"]:hover,
.col-2 .menu-btn[data-crypto="roots"].active       { color: #864EA6!important; border-right-color: #864EA6; }

/* ============================================================
   PRODUCTS — ACCORDIONS & CRYPTO SECTIONS
   ============================================================ */
.accordion-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

.crypto-section          { display: none; height: 100%; }
.crypto-section.active   { display: block; }

.crypto-section[data-crypto-section] {
    background-color: var(--hover-bg-secondary);
    padding: 12px;
    border-radius: var(--radius-lg);
}

/* Square the corner adjacent to the active first/last crypto-type item */
.products-grid:has(.col-2 .menu-btn[data-crypto="pqc"].active)   .crypto-section.active { border-top-left-radius: 0; }
.products-grid:has(.col-2 .menu-btn[data-crypto="roots"].active) .crypto-section.active { border-bottom-left-radius: 0; }

.accordion {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.acc-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-xs);
    font-weight: 300;
    text-align: left;
    color: var(--text-primary);
    border-radius: var(--radius-md)!important;
    transition: background var(--transition-speed) var(--ease);
}

.acc-header:hover { background: var(--hover-bg-primary); color: var(--hover-color); }

.acc-icon {
    flex-shrink: 0;
    transition: transform var(--transition-speed) var(--ease);
}

.accordion.active .acc-icon { transform: rotate(180deg); }

.acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-in-out;
}

.accordion.active .acc-body {
    max-height: 1000px; /* fallback; JS overrides inline with scrollHeight */
}

.link-list {
    list-style: none;
    padding: 0 20px 0 32px;
}

.link-list a {
    color: var(--text-primary)!important;
    text-decoration: none;
    font-size: var(--font-xs);
    display: block;
    padding: 3px 0;
    transition: color var(--transition-speed) var(--ease);
}

.link-list a:hover { color: #0066cc!important; }

.desc-text {
    font-size: var(--font-body);
    line-height: 1.7;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    max-width: 60%;
}

/* ============================================================
   SHARED CONTENT COMPONENTS — Cards, Grids
   ============================================================ */
.card-grid { display: grid; gap: 0; }
.card-grid.grid-2-cols { grid-template-columns: repeat(2, 1fr); }

.info-card {
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0.75rem;
    text-decoration: none;
    transition: all var(--transition-speed) var(--ease);
    cursor: pointer;
}

.info-card:hover          { background-color: var(--hover-bg-secondary); }
.info-card:hover h3       { font-weight: 400; }

.info-card h3 {
    font-size: var(--font-nav);
    font-weight: 300;
    line-height: 1.16;
    color: var(--text-primary);
}

.info-card p {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    line-height: 1.3;
}

/* Applications grid */
.apps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-auto-flow: column;
}

.app-card {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 0 12px;
    align-items: start;
    padding: 8px;
    text-decoration: none;
    transition: all var(--transition-speed) var(--ease);
    border-radius: var(--radius-xl);
}

.app-card:hover { background: var(--hover-bg-primary); }

.app-card .app-card-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    grid-row: 1 / 3;
    color: var(--text-primary);
    transition: color var(--transition-speed) var(--ease);
}

.app-card .app-card-icon svg { width: 32px; height: 32px; }

.app-card:hover .app-card-icon { color: var(--hover-color); }

.app-card .app-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 5px;
}

.app-card h4 {
    font-size: var(--font-nav);
    font-weight: 400;
    line-height: 1.16;
    color: var(--text-primary);
    transition: color var(--transition-speed) var(--ease);
}

.app-card:hover h4 { color: var(--hover-color); }

.app-card p {
    font-size: var(--font-xs);
    font-weight: 300;
    line-height: 1.16;
    color: var(--text-secondary);
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* ============================================================
   SIDEBAR PANELS — Insights / Newsroom / Company
   ============================================================ */
.sidebar-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width, 242px) 1fr;
    gap: 0;
}

.sidebar .menu-list {
    display: flex;
    flex-direction: column;
}

.sidebar .menu-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

.sidebar .menu-btn .sidebar-icon     { width: 32px; height: 32px; flex-shrink: 0; }
.sidebar .menu-btn .sidebar-icon svg { width: 32px; height: 32px; color: inherit; }

.content-panel {
    position: relative;
    padding: 1.25rem 2rem;
    background-color: var(--content-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Square the corner adjacent to the active first/last sidebar item */
.sidebar-layout:has(.sidebar li:first-child .menu-btn.active) .content-panel { border-top-left-radius: 0; }
.sidebar-layout:has(.sidebar li:last-child  .menu-btn.active) .content-panel { border-bottom-left-radius: 0; }

/* Tab content panels */
.tab-content        { display: none; animation: fadeIn 0.3s var(--ease); }
.tab-content.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.text-content { position: relative; z-index: 2; }

.text-content p {
    font-size: var(--font-body);
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    max-width: 60%;
}

.learn-more-btn {
    display: inline-block;
    background: var(--hover-color);
    color: white!important;
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-size: var(--font-sm);
    font-weight: 500;
    transition: background var(--transition-speed) var(--ease),
                color var(--transition-speed) var(--ease);
    border: 2px solid var(--hover-color);
    white-space: nowrap;
    text-align: center;
    line-height: 1.16;
    padding: 6px 24px;
}

.learn-more-btn:hover {
    background: white;
    color: var(--hover-color)!important;
}

/* Background images — sidebar panels & col-3 */
.bg-image {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    pointer-events: none;
    z-index: 1;
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}

.bg-image.active { opacity: 1; }

[data-panel="newsroom"] .bg-image {
    background-size: cover;
    background-position: center center;
}

/* ============================================================
   MOBILE / TABLET MENU
   ============================================================ */
.mobile-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 999;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease);
    display: flex;
    flex-direction: column;
}

.mobile-menu.active { transform: translateX(0); }

.mobile-header { display: none; }

.mobile-close {
    background: none;
    border: none;
    font-size: 2.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-primary);
    padding: 8px;
}

.mobile-breadcrumb {
    padding: 24px 24px 0;
    display: none;
}

.mobile-breadcrumb.active { display: flex; }

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 6px 8px;
    font-size: 1rem;
    font-weight: 400;
    border-radius: var(--radius-md)!important;
    transition: background var(--transition-speed) var(--ease);
}

.breadcrumb-item:hover { background: var(--hover-bg); }

.breadcrumb-item .breadcrumb-chevron { flex-shrink: 0; color: var(--text-primary); }

.mobile-content { flex: 1; overflow: hidden; }

/* iOS-style slide animations */
@keyframes slideInRight {
    from { transform: translateX(30%);  opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-30%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.slide-in-right { animation: slideInRight 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
.slide-in-left  { animation: slideInLeft  0.3s cubic-bezier(0.25, 0.1, 0.25, 1) both; }

.mobile-nav-col,
.mobile-detail-col {
    height: 100%;
    overflow-y: auto;
    padding: 20px;
}

.mobile-nav-col .menu-list,
.mobile-detail-col .menu-list { list-style: none; }

.mobile-nav-col .menu-btn,
.mobile-detail-col .menu-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 16px 4px;
    font-size: 1rem;
    color: var(--text-primary);
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-nav-col .menu-btn:after,
.mobile-detail-col .menu-btn[data-has-children]:after {
    content: '›';
    font-size: 1.5rem;
    color: inherit;
}

.mobile-nav-col .menu-btn.active { background: var(--hover-bg); }

.mobile-detail-col .link-item {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.mobile-detail-col .link-item a {
    color: var(--text-primary);
    text-decoration: none;
    display: block;
}

/* Tablet/mobile card grids */
.tablet-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 8px 20px;
}

.tablet-card-grid--single { grid-template-columns: 1fr; }

.tablet-app-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--text-primary);
    border-radius: var(--radius-lg);
    transition: all var(--transition-speed) var(--ease);
}

@media (hover: hover) {
    .tablet-app-card:hover {
        background: var(--hover-bg-secondary);
        color: var(--hover-color);
    }
}

.tablet-app-card--detail { align-items: flex-start; }

.tablet-card-icon     { width: 24px; height: auto; flex-shrink: 0; }
.tablet-card-icon svg { width: 24px; height: 24px; }

.tablet-card-title {
    font-size: var(--font-body);
    font-weight: 400;
}

.tablet-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tablet-card-desc {
    font-size: var(--font-xs);
    font-weight: 300;
    line-height: 1.4;
    color: var(--text-secondary);
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tablet-info-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: all var(--transition-speed) var(--ease);
}

@media (hover: hover) {
    .tablet-info-card:hover    { background: var(--hover-bg-secondary); }
    .tablet-info-card:hover h3 { color: var(--hover-color); }
}

.tablet-info-card h3 {
    font-size: var(--font-sm);
    font-weight: 300;
    color: var(--text-primary);
    transition: color var(--transition-speed) var(--ease);
}

.tablet-info-card p {
    font-size: var(--font-xs);
    font-weight: 300;
    line-height: 1.4;
    color: var(--text-secondary);
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mobile-menu-footer {
    display: none;
    padding: 1rem 20px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.mobile-menu-footer .contact-btn {
    display: block;
    width: 100%;
    padding: 14px 24px;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* — ≤ 1024px: hide desktop nav, show hamburger — */
@media (max-width: 1024px) {
    .desktop-nav { display: none; }

    .hamburger {
        display: flex;
    }

    .mega-menu,
    .mega-menu-overlay { display: none; }

    .mobile-menu { display: flex; }
}

/* — 768–1024px: tablet two-column menu — */
@media (min-width: 768px) and (max-width: 1024px) {
    :root { --header-height: 60px; }

    .hamburger {
        width: var(--header-height);
        height: var(--header-height);
        border-radius: 0;
    }

    .hamburger span { left: 19px; }
    .hamburger span:nth-child(1) { top: 23px; }
    .hamburger span:nth-child(2) { top: 30px; }
    .hamburger span:nth-child(3) { top: 37px; }

    .hamburger[aria-expanded="true"] span:nth-child(1) { top: 30px; }
    .hamburger[aria-expanded="true"] span:nth-child(3) { top: 30px; }

    .mobile-menu {
        bottom: auto;
        transform: translateY(-20px);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    }

    .mobile-menu.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-content {
        display: grid;
        grid-template-columns: auto 1fr;
        padding: 24px;
    }

    .mobile-nav-col {
        border-right: none;
        padding: 0;
    }

    .mobile-detail-col {
        padding: 8px 0;
        background-color: var(--content-bg);
        border-radius: var(--radius-xl);
        overflow: hidden;
    }

    /* Square the corner adjacent to the active first/last nav item */
    .mobile-content:has(.mobile-nav-col li:first-child .menu-btn.active) .mobile-detail-col { border-top-left-radius: 0; }
    .mobile-content:has(.mobile-nav-col li:last-child  .menu-btn.active) .mobile-detail-col { border-bottom-left-radius: 0; }

    /* Square the corner adjacent to the active first/last crypto-type item */
    .mobile-content:has(.mobile-nav-col .crypto-type-item[data-crypto="pqc"].active)   .mobile-detail-col { border-top-left-radius: 0; }
    .mobile-content:has(.mobile-nav-col .crypto-type-item[data-crypto="roots"].active) .mobile-detail-col { border-bottom-left-radius: 0; }

    .mobile-nav-col .menu-btn,
    .mobile-detail-col .menu-btn {
        padding: 12px 36px 12px 12px;
        font-size: 1rem;
        border-bottom: none;
        border-radius: var(--radius-xl) 0 0 var(--radius-xl);
        justify-content: flex-start;
        border-right: solid 2px white;
    }

    .mobile-detail-col .menu-btn,
    .mobile-detail-col .crypto-type-link {
        padding-left: 32px;
        color: var(--text-primary);
    }

    @media (hover: hover) {
        .mobile-detail-col .menu-btn:hover { color: var(--hover-color) !important; }
    }

    /* Suppress mobile › chevron in left nav col */
    .mobile-nav-col .menu-btn:after { content: none; }

    /* Right-pointing chevron for second-column navigable items */
    .mobile-detail-col .menu-btn[data-has-children]::after {
        content: '';
        color: inherit;
        display: block;
        width: 12px;
        height: 12px;
        background-color: currentColor;
        margin-left: auto;
        flex-shrink: 0;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
    }

    .mobile-detail-col .menu-btn[data-has-children] { padding-right: 16px; }

    /* Tablet crypto-type split rows */
    .mobile-nav-col .crypto-type-item,
    .mobile-detail-col .crypto-type-item {
        border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    }
    .mobile-nav-col .crypto-type-item    { border-right: solid 2px white; }
    .mobile-detail-col .crypto-type-item { border-right-color: transparent; }

    .mobile-nav-col .crypto-type-link {
        padding: 12px;
        font-size: 1rem;
    }
    .mobile-nav-col .crypto-type-chevron,
    .mobile-detail-col .crypto-type-chevron { padding: 0 20px; color: var(--text-primary); background-color: transparent; }
    @media (hover: hover) {
        .mobile-detail-col .crypto-type-chevron:hover { color: var(--hover-color); background-color: transparent; }
    }

    /* Tablet product-category split rows */
    .mobile-nav-col .product-cat-item,
    .mobile-detail-col .product-cat-item {
        border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    }
    .mobile-nav-col .product-cat-item    { border-right: solid 2px white; }
    .mobile-detail-col .product-cat-item { border-right-color: transparent; }

    .mobile-nav-col .product-cat-link,
    .mobile-detail-col .product-cat-link { padding: 12px 12px 12px 32px; font-size: 1rem; color: var(--text-primary); }
    .mobile-nav-col .product-cat-link { padding: 12px; }
    .mobile-nav-col .product-cat-chevron,
    .mobile-detail-col .product-cat-chevron { padding: 0 20px; color: var(--text-primary); background-color: transparent; }
    @media (hover: hover) {
        .mobile-detail-col .product-cat-link:hover { color: var(--hover-color); }
        .mobile-nav-col .product-cat-link:hover { padding: 12px; color: var(--hover-color); }
        .mobile-nav-col .product-cat-chevron:hover,
        .mobile-detail-col .product-cat-chevron:hover { color: var(--hover-color); background-color: transparent; }
    }

    /* Active state — product-category row */
    .mobile-nav-col .product-cat-item.active,
    .mobile-detail-col .product-cat-item.active {
        background: var(--hover-bg-primary);
        border-right-color: var(--hover-color);
    }
    .mobile-nav-col .product-cat-item.active .product-cat-link,
    .mobile-nav-col .product-cat-item.active .product-cat-chevron,
    .mobile-detail-col .product-cat-item.active .product-cat-link,
    .mobile-detail-col .product-cat-item.active .product-cat-chevron {
        color: var(--hover-color);
        font-weight: 400;
    }

    @media (hover: hover) {
        .mobile-nav-col .menu-btn:hover,
        .mobile-detail-col .menu-btn:hover { color: var(--hover-color); }
        .mobile-nav-col .menu-btn:hover    { border-right: solid 2px var(--hover-color); }
        .mobile-detail-col .menu-btn:hover { border-right-color: transparent; }
    }

    .mobile-nav-col .menu-btn.active,
    .mobile-detail-col .menu-btn.active {
        background: var(--hover-bg-primary);
        color: var(--hover-color);
        font-weight: 400;
    }

    /* Active state — nav-col crypto-type row */
    .mobile-nav-col .crypto-type-item.active {
        background: var(--hover-bg-primary);
        border-right-color: var(--hover-color);
    }
    .mobile-nav-col .crypto-type-item.active .crypto-type-link,
    .mobile-nav-col .crypto-type-item.active .crypto-type-chevron {
        color: var(--hover-color);
        font-weight: 400;
    }

    /* Per-crypto-type active colors (tablet nav-col) */
    .mobile-nav-col .crypto-type-item[data-crypto="pqc"].active         { border-right-color: #19CAE6; }
    .mobile-nav-col .crypto-type-item[data-crypto="pqc"].active .crypto-type-link,
    .mobile-nav-col .crypto-type-item[data-crypto="pqc"].active .crypto-type-chevron { color: #19CAE6; }
    .mobile-nav-col .crypto-type-item[data-crypto="aes"].active         { border-right-color: #3F869B; }
    .mobile-nav-col .crypto-type-item[data-crypto="aes"].active .crypto-type-link,
    .mobile-nav-col .crypto-type-item[data-crypto="aes"].active .crypto-type-chevron { color: #3F869B; }
    .mobile-nav-col .crypto-type-item[data-crypto="hmac"].active        { border-right-color: #0799CB; }
    .mobile-nav-col .crypto-type-item[data-crypto="hmac"].active .crypto-type-link,
    .mobile-nav-col .crypto-type-item[data-crypto="hmac"].active .crypto-type-chevron { color: #0799CB; }
    .mobile-nav-col .crypto-type-item[data-crypto="ecc"].active         { border-right-color: #747CBC; }
    .mobile-nav-col .crypto-type-item[data-crypto="ecc"].active .crypto-type-link,
    .mobile-nav-col .crypto-type-item[data-crypto="ecc"].active .crypto-type-chevron { color: #747CBC; }
    .mobile-nav-col .crypto-type-item[data-crypto="cryptoboxes"].active { border-right-color: #1BA2B4; }
    .mobile-nav-col .crypto-type-item[data-crypto="cryptoboxes"].active .crypto-type-link,
    .mobile-nav-col .crypto-type-item[data-crypto="cryptoboxes"].active .crypto-type-chevron { color: #1BA2B4; }
    .mobile-nav-col .crypto-type-item[data-crypto="roots"].active       { border-right-color: #864EA6; }
    .mobile-nav-col .crypto-type-item[data-crypto="roots"].active .crypto-type-link,
    .mobile-nav-col .crypto-type-item[data-crypto="roots"].active .crypto-type-chevron { color: #864EA6; }

    .mobile-nav-col  .menu-btn.active  { border-right: solid 2px var(--hover-color); }
    .mobile-detail-col .menu-btn.active { border-right-color: transparent; }

    /* Active state — detail-col crypto-type row */
    .mobile-detail-col .crypto-type-item.active { background: var(--hover-bg-secondary); }

    /* Per-crypto-type active colors (tablet detail-col) */
    .mobile-detail-col .crypto-type-item[data-crypto="pqc"].active .crypto-type-link,
    .mobile-detail-col .crypto-type-item[data-crypto="pqc"].active .crypto-type-chevron         { color: #19CAE6; }
    .mobile-detail-col .crypto-type-item[data-crypto="aes"].active .crypto-type-link,
    .mobile-detail-col .crypto-type-item[data-crypto="aes"].active .crypto-type-chevron         { color: #3F869B; }
    .mobile-detail-col .crypto-type-item[data-crypto="hmac"].active .crypto-type-link,
    .mobile-detail-col .crypto-type-item[data-crypto="hmac"].active .crypto-type-chevron        { color: #0799CB; }
    .mobile-detail-col .crypto-type-item[data-crypto="ecc"].active .crypto-type-link,
    .mobile-detail-col .crypto-type-item[data-crypto="ecc"].active .crypto-type-chevron         { color: #747CBC; }
    .mobile-detail-col .crypto-type-item[data-crypto="cryptoboxes"].active .crypto-type-link,
    .mobile-detail-col .crypto-type-item[data-crypto="cryptoboxes"].active .crypto-type-chevron { color: #1BA2B4; }
    .mobile-detail-col .crypto-type-item[data-crypto="roots"].active .crypto-type-link,
    .mobile-detail-col .crypto-type-item[data-crypto="roots"].active .crypto-type-chevron       { color: #864EA6; }

    .mobile-detail-col .accordion-list {
        border-radius: var(--radius-lg);
        padding: 12px;
    }

    .tablet-card-grid--apps   { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(7, auto); grid-auto-flow: column; }
    .tablet-card-grid--single { grid-template-columns: 1fr 1fr; }
    .acc-header { padding: 0.875rem 2rem; }
    .link-list a { padding: 10px 24px; }
}


/* — < 768px: mobile full-screen menu — */
@media (max-width: 767px) {
    :root { --header-height: 60px; }

    .hamburger {
        width: 60px;
        height: 60px;
    }

    .hamburger span { left: 19px; }
    .hamburger span:nth-child(1) { top: 23px; }
    .hamburger span:nth-child(2) { top: 30px; }
    .hamburger span:nth-child(3) { top: 37px; }

    .hamburger[aria-expanded="true"] span:nth-child(1) { top: 30px; }
    .hamburger[aria-expanded="true"] span:nth-child(3) { top: 30px; }

    .mobile-menu-footer { display: block; }

    .mobile-content { position: relative; }

    .mobile-nav-col,
    .mobile-detail-col {
        position: absolute;
        inset: 0;
        background: white;
        transition: transform 0.3s var(--ease);
    }

    .mobile-nav-col               { transform: translateX(0); }
    .mobile-nav-col.hidden        { transform: translateX(-100%); }
    .mobile-detail-col            { transform: translateX(100%); }
    .mobile-detail-col.active     { transform: translateX(0); }

    .mobile-nav-col .menu-btn,
    .mobile-detail-col .menu-btn {
        background: none;
        border-bottom: 1px solid #EBF1F8;
        border-radius: 0;
    }

    .mobile-nav-col .menu-btn.active { background: none; }

    /* Mobile crypto-type rows: flat, border-based, no radius */
    .mobile-detail-col .crypto-type-item {
        border-radius: 0;
        border-right: none;
        border-bottom: 1px solid #EBF1F8;
    }
    .mobile-detail-col .crypto-type-link  { padding: 12px 12px 12px 4px; font-size: 1rem; }
    .mobile-detail-col .crypto-type-chevron { border-left-color: #EBF1F8; padding: 0 16px; border-radius: 0;}
    .mobile-detail-col .crypto-type-chevron:hover { color: var(--hover-color); }

    /* Mobile product-category rows: flat, border-based, no radius */
    .mobile-detail-col .product-cat-item,
    .mobile-nav-col .product-cat-item {
        border-radius: 0;
        border-right: none;
        border-bottom: 1px solid #EBF1F8;
    }
    .mobile-detail-col .product-cat-link,
    .mobile-nav-col .product-cat-link { padding: 12px 12px 12px 4px; font-size: 1rem; }
    .mobile-detail-col .product-cat-link:hover,
    .mobile-nav-col .product-cat-link:hover { color: var(--hover-color); }
    .mobile-detail-col .product-cat-chevron,
    .mobile-nav-col .product-cat-chevron { border-left-color: #EBF1F8; padding: 0 16px; border-radius: 0;}
    .mobile-detail-col .product-cat-chevron:hover,
    .mobile-nav-col .product-cat-chevron:hover { color: var(--hover-color); }

    .tablet-card-grid {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .tablet-app-card,
    .tablet-app-card--detail {
        background: none;
        border-bottom: 1px solid #EBF1F8;
        border-radius: 0;
        padding: 16px 4px;
    }

    @media (hover: hover) {
        .tablet-app-card:hover,
        .tablet-app-card--detail:hover { background: none; }

        .tablet-app-card:hover .tablet-card-title,
        .tablet-app-card--detail:hover .tablet-card-title,
        .tablet-app-card:hover .tablet-card-icon,
        .tablet-app-card--detail:hover .tablet-card-icon { color: var(--hover-color); }
    }

    .tablet-info-card {
        background: none;
        border-bottom: 1px solid #EBF1F8;
        border-radius: 0;
        padding: 14px 20px;
    }

    @media (hover: hover) {
        .tablet-info-card:hover { background: none; }
    }

    .mobile-detail-col .link-item            { border-bottom: 1px solid #EBF1F8; }
    .mobile-detail-col .link-list li         { border-bottom: 1px solid #EBF1F8; }
    .mobile-detail-col .link-list li:last-child { border-bottom: none; }
    .mobile-detail-col .link-list a          { padding: 16px 0; }

    .mobile-detail-col .accordion {
        border-bottom: 1px solid #EBF1F8;
        margin-bottom: 0;
        border-radius: 0;
    }

    .mobile-detail-col .accordion-list {
        background: none;
        border-radius: 0;
        padding: 0;
    }

    .acc-header { padding: 12px; }
    .link-list  { padding: 0 0 12px 20px; }
}

/* ============================================================
   UTILITIES & ACCESSIBILITY
   ============================================================ */
button:focus-visible,
a:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.hidden    { display: none !important; }
.no-scroll { overflow: hidden; }

/* ============================================================
   SEARCH — TOGGLE BUTTONS
   ============================================================ */

/* Shared base for both desktop and mobile toggle */
.search-toggle,
.search-toggle--mobile {
    width: var(--search-field-height);
    height: var(--search-field-height);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    padding: 0;
    transition: background var(--transition-speed) var(--ease);
}

/* Orange background while search is open */
.search-toggle[aria-expanded="true"],
.search-toggle--mobile[aria-expanded="true"] {
    background: var(--hover-color);
}

@media (hover: hover) {
    .search-toggle:hover,
    .search-toggle--mobile:hover {
        background: rgba(255, 255, 255, 0.12);
    }

    .search-toggle:focus,
    .search-toggle--mobile:focus {
        background: rgba(255, 255, 255, 0.22);
    }

    .search-toggle[aria-expanded="true"]:hover,
    .search-toggle--mobile[aria-expanded="true"]:hover {
        background: var(--hover-color);
    }
}

/* Desktop toggle lives inside .desktop-nav — hidden on mobile via parent */
/* Mobile toggle sits between logo and hamburger — hidden on desktop */
.search-toggle--mobile {
    display: none;
}

@media (max-width: 1024px) {
    .search-toggle--mobile {
        display: flex;
    }
}

/* ============================================================
   SEARCH — DESKTOP INLINE EXPANSION
   ============================================================ */

/* Search wrap: always visible — just shows the toggle when search is closed.
   When search is active: expands to fill available space and gains a pill border. */
.nav-search-wrap {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    position: relative;
    gap: 10px;
    margin: 0 1.5rem;
    padding: 3px;
}

.desktop-nav.search-active .nav-primary {
    display: none;
}

.desktop-nav.search-active .nav-search-wrap {
    flex: 1;
    min-width: 0;
    /* height: 48px; */
    border: 1px solid #FFFFFF80;
    border-radius: var(--radius-pill);
    /* No overflow:hidden — keeps the results dropdown visible below */
}

/* Form hidden by default inside the wrap; revealed when search is active */
.nav-search-wrap .nav-search-form {
    display: none;
}

.desktop-nav.search-active .nav-search-wrap .nav-search-form {
    display: flex;
}

/* Shrink toggle to fit the 48px pill; round its right edge to match the pill */
.desktop-nav.search-active .search-toggle {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
}

/* ============================================================
   SEARCH — FORM & INPUT
   ============================================================ */

.nav-search-form {
    display: flex;
    flex: 1;
    min-width: 0;
    position: relative;
    padding: 0;
}

.nav-search-input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    border: none!important;
    border-radius: var(--radius-pill);
    background: white;
    font-size: var(--font-body);
    color: var(--text-primary);
    outline: none;
}

.nav-search-input::placeholder {
    color: #999;
}

/* ============================================================
   SEARCH — LIVE RESULTS DROPDOWN
   ============================================================ */

.nav-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    z-index: 1002;
    display: none;
    max-height: 360px;
    overflow-y: auto;
}

.nav-search-results.has-results {
    display: block;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-speed) var(--ease);
}

.search-result-item:last-child {
    border-bottom: none;
}

@media (hover: hover) {
    .search-result-item:hover {
        background: var(--hover-bg-primary);
    }
}

.search-result-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--border-color);
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-type {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    margin-top: 2px;
}

.search-result-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

/* ============================================================
   SEARCH — MOBILE/TABLET BAR (fixed panel below header)
   ============================================================ */

.mobile-search-bar {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: white;
    padding: 12px 16px;
    z-index: 1001;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    gap: 12px;
    align-items: center;
}

.mobile-search-bar.active {
    display: flex;
}

.mobile-search-bar .nav-search-form {
    padding: 0;
}

.mobile-search-bar .nav-search-results {
    top: calc(100% + 8px);
}