/* ============================================================================================
   Site header (tsh-*) — loaded on every page by _Layout. Uses the exact tokens of the tdx system
   (tsl-directory.css) so the header matches the home page and event pages: white bar, gradient
   primary button, light rounded Solutions panel. In normal page flow (not the theme's fixed navbar).
   ============================================================================================ */

.tsh {
    --tsh-accent: var(--base-color, #3c2fc0);
    --tsh-accent-2: #7c3aed;
    --tsh-ink: #0f172a;
    --tsh-text: #334155;
    --tsh-muted: #64748b;
    --tsh-line: #e7eaf3;
    --tsh-soft: #f5f7fc;
    --tsh-shadow-lg: 0 24px 60px rgba(15, 23, 42, .14);
    position: relative;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid var(--tsh-line);
    font-family: var(--primary-font, 'Plus Jakarta Sans', sans-serif);
}
.tsh *, .tsh *::before, .tsh *::after { box-sizing: border-box; }
.tsh a { text-decoration: none; }

.tsh-bar { position: relative; display: flex; align-items: center; gap: 28px; height: 76px; }
.tsh-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.tsh-logo img { display: block; width: auto; height: 28px; }

/* ── Desktop links ─────────────────────────────────────────────────────────────────────────── */
.tsh-nav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; }
.tsh-link {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent;
    color: var(--tsh-text); font: 600 15px/1 var(--primary-font, 'Plus Jakarta Sans', sans-serif);
    white-space: nowrap; cursor: pointer; transition: color .15s ease, background-color .15s ease;
}
.tsh-link:hover, .tsh-link[aria-expanded="true"] { color: var(--tsh-accent); background: var(--tsh-soft); }
.tsh-link.is-active { color: var(--tsh-accent); }
.tsh-link.is-active::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px;
    background: linear-gradient(135deg, var(--tsh-accent), var(--tsh-accent-2));
}
.tsh-link:focus-visible, .tsh-btn:focus-visible, .tsh-item:focus-visible, .tsh-burger:focus-visible, .tsh-mlink:focus-visible {
    outline: 3px solid rgba(60, 47, 192, .35); outline-offset: 2px;
}
.tsh-drop-toggle i { font-size: 14px; transition: transform .2s ease; }
.tsh-drop-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

/* ── Solutions panel ───────────────────────────────────────────────────────────────────────── */
/* The panel is placed against the header bar (not the button), centred and never wider than the bar. */
.tsh-drop { position: static; }
.tsh-panel {
    position: absolute; top: calc(100% - 2px); left: 50%; transform: translateX(-50%);
    width: min(920px, 100%);
    background: #fff; border: 1px solid var(--tsh-line); border-radius: 18px; box-shadow: var(--tsh-shadow-lg);
    overflow: hidden;
}
.tsh-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; } /* hover bridge from the button */
.tsh-panel[hidden] { display: none; }
.tsh-panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 20px; }
.tsh-group-title {
    padding: 4px 12px 8px; color: var(--tsh-muted);
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.tsh-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; transition: background-color .15s ease; }
.tsh-item:hover { background: var(--tsh-soft); }
.tsh-panel .tsh-item { min-height: 78px; } /* equal rows across the three columns */
.tsh-item-icon {
    flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(60, 47, 192, .08); color: var(--tsh-accent); font-size: 17px;
}
.tsh-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tsh-item-title { color: var(--tsh-ink); font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.tsh-item-text { color: var(--tsh-muted); font-size: 13px; line-height: 1.4; }
.tsh-item:hover .tsh-item-title { color: var(--tsh-accent); }
.tsh-panel-foot {
    display: flex; gap: 24px; padding: 14px 32px; background: var(--tsh-soft); border-top: 1px solid var(--tsh-line);
}
.tsh-panel-foot a, .tsh-msub-all { display: inline-flex; align-items: center; gap: 6px; color: var(--tsh-accent); font-size: 14px; font-weight: 700; }
.tsh-panel-foot a:hover, .tsh-msub-all:hover { color: var(--tsh-accent-2); }

/* ── Buttons (identical to .tdx-btn--primary / --outline) ─────────────────────────────────── */
.tsh-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.tsh-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px; padding: .65rem 1.25rem; border-radius: 999px; border: 1px solid transparent;
    font-size: .92rem; font-weight: 700; line-height: 1.1; white-space: nowrap; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.tsh-btn:hover { transform: translateY(-1px); }
.tsh-btn--primary { background: linear-gradient(135deg, var(--tsh-accent), var(--tsh-accent-2)); color: #fff !important; box-shadow: 0 10px 22px -8px var(--tsh-accent); }
.tsh-btn--primary:hover { box-shadow: 0 16px 30px -10px var(--tsh-accent); }
.tsh-btn--outline { background: #fff; border-color: var(--tsh-line); color: var(--tsh-ink) !important; }
.tsh-btn--outline:hover { border-color: var(--tsh-accent); color: var(--tsh-accent) !important; }

/* ── Mobile / tablet ───────────────────────────────────────────────────────────────────────── */
.tsh-burger {
    display: none; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--tsh-line); border-radius: 12px;
    background: #fff; color: var(--tsh-ink); font-size: 20px; align-items: center; justify-content: center; cursor: pointer;
}
.tsh-burger-close { display: none; }
.tsh-burger[aria-expanded="true"] .tsh-burger-open { display: none; }
.tsh-burger[aria-expanded="true"] .tsh-burger-close { display: inline; }

.tsh-mobile {
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain;
    background: #fff; border-top: 1px solid var(--tsh-line); box-shadow: 0 24px 40px -12px rgba(15, 23, 42, .18);
    padding: 8px 0 20px;
}
.tsh-mobile[hidden] { display: none; }
.tsh-mlink {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 14px 4px; border: 0; border-bottom: 1px solid var(--tsh-line); background: transparent;
    color: var(--tsh-ink); font: 600 16px/1.2 var(--primary-font, 'Plus Jakarta Sans', sans-serif); text-align: left; cursor: pointer;
}
.tsh-mlink.is-active { color: var(--tsh-accent); }
.tsh-mdrop i { font-size: 18px; color: var(--tsh-muted); transition: transform .2s ease; }
.tsh-mdrop[aria-expanded="true"] i { transform: rotate(180deg); }
.tsh-msub { padding: 8px 0 12px; border-bottom: 1px solid var(--tsh-line); }
.tsh-msub[hidden] { display: none; }
.tsh-msub .tsh-group-title { padding: 12px 4px 4px; }
.tsh-msub .tsh-item { align-items: center; padding: 8px 4px; }
.tsh-msub-all { padding: 12px 4px 0; }
.tsh-mactions { display: grid; gap: 10px; padding-top: 18px; }
.tsh-mactions .tsh-btn { width: 100%; min-height: 48px; font-size: 15px; }

/* Theme pages offset themselves for the old fixed navbar; the header is now in page flow. */
.top-space-margin { margin-top: 0 !important; }

@media (max-width: 1199.98px) {
    .tsh-bar { gap: 16px; }
    .tsh-link { padding: 0 9px; }
    .tsh-demo { display: none; }
}
@media (max-width: 991.98px) {
    .tsh-bar { height: 64px; }
    .tsh-nav, .tsh-actions { display: none; }
    .tsh-burger { display: inline-flex; }
}
@media (max-width: 767.98px) {
    .tsh .container { padding-left: 15px !important; padding-right: 15px !important; } /* = theme gutter */
}
@media (max-width: 575.98px) {
    .tsh-logo img { height: 24px; }
}