/* Canonical brand sites: one distinctive primary header, connected to the company. */

.tna-site-header.is-brand-header {
    padding-block-start: max(6px, env(safe-area-inset-top));
}

.tna-site-header.is-brand-header::before {
    height: 150%;
    background:
        radial-gradient(circle at 18% 0%, rgba(var(--brand-accent-rgb), .22), transparent 35%),
        linear-gradient(180deg, rgba(3, 6, 15, .97), rgba(3, 6, 15, 0));
}

.tna-site-header.is-brand-header .tna-site-nav {
    min-height: 84px;
    border-color: rgba(var(--brand-accent-rgb), .34);
    border-radius: 30px 14px 30px 14px;
    padding: 10px 12px;
    background:
        radial-gradient(circle at 8% 20%, rgba(var(--brand-accent-rgb), .20), transparent 30%),
        linear-gradient(118deg, rgba(var(--brand-accent-rgb), .10), transparent 38%),
        color-mix(in srgb, var(--tnx-surface-strong) 95%, transparent);
    box-shadow:
        0 22px 64px rgba(0, 0, 0, .30),
        0 0 0 1px rgba(var(--brand-accent-rgb), .08) inset;
}

.tna-site-header.is-brand-header .tna-site-brand__mark {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
    border-radius: 19px 10px 19px 10px;
    border-color: rgba(var(--brand-accent-rgb), .46);
    background:
        linear-gradient(145deg, rgba(var(--brand-accent-rgb), .27), rgba(var(--brand-secondary-rgb), .11));
    box-shadow: 0 16px 42px rgba(var(--brand-accent-rgb), .22);
}

.tna-site-header.is-brand-header .tna-site-brand__copy strong {
    color: var(--tnx-text);
    font-size: .98rem;
}

.tna-site-header.is-brand-header .tna-site-brand__context {
    color: var(--brand-accent);
}

.tna-brand-header-utility {
    position: relative;
    z-index: 2;
    margin-block-end: 6px;
}

.tna-brand-header-utility__inner {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-inline: 16px;
}

.tna-brand-header-utility__company,
.tna-brand-header-utility__context {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--tnx-muted);
    font-size: .72rem;
    font-weight: 800;
}

.tna-brand-header-utility__company {
    min-height: 30px;
    border-radius: 999px;
    padding-inline: 10px;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.tna-brand-header-utility__company::before {
    content: "↗";
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 7px;
    background: rgba(var(--brand-accent-rgb), .14);
    color: var(--brand-accent);
    font-size: .72rem;
}

.tna-brand-header-utility__company:hover,
.tna-brand-header-utility__company:focus-visible {
    background: rgba(var(--brand-accent-rgb), .10);
    color: var(--tnx-text);
}

.tna-brand-header-utility__context {
    color: var(--brand-accent);
}

.tna-site-header.is-brand-header .tna-site-desktop-nav > a[aria-current="page"],
.tna-site-header.is-brand-header .tna-site-drawer__nav > a[aria-current="page"] {
    border-color: rgba(var(--brand-accent-rgb), .34);
    background: rgba(var(--brand-accent-rgb), .14);
    color: var(--tnx-text);
    box-shadow: 0 8px 24px rgba(var(--brand-accent-rgb), .12);
}

.tna-site-header.is-brand-header .tna-site-desktop-nav > a.is-brand-home::before,
.tna-site-header.is-brand-header .tna-site-drawer__nav > a.is-brand-home::before {
    content: "⌂";
    margin-inline-end: 5px;
    color: var(--brand-accent);
    font-size: .95em;
}

.tna-site-header[data-brand-site="moshaver"],
body[data-tna-brand-site="moshaver"] {
    --brand-accent: #2dd4bf;
    --brand-accent-rgb: 45, 212, 191;
    --brand-secondary: #22d3ee;
    --brand-secondary-rgb: 34, 211, 238;
}

.tna-site-header[data-brand-site="amooz"],
body[data-tna-brand-site="amooz"] {
    --brand-accent: #38bdf8;
    --brand-accent-rgb: 56, 189, 248;
    --brand-secondary: #60a5fa;
    --brand-secondary-rgb: 96, 165, 250;
}

.tna-site-header[data-brand-site="pro"],
body[data-tna-brand-site="pro"] {
    --brand-accent: #a78bfa;
    --brand-accent-rgb: 167, 139, 250;
    --brand-secondary: #c084fc;
    --brand-secondary-rgb: 192, 132, 252;
}

.tna-site-header[data-brand-site="patent"],
body[data-tna-brand-site="patent"] {
    --brand-accent: #f59e0b;
    --brand-accent-rgb: 245, 158, 11;
    --brand-secondary: #facc15;
    --brand-secondary-rgb: 250, 204, 21;
}

.tna-site-header[data-brand-site="mag"],
body[data-tna-brand-site="mag"] {
    --brand-accent: #f472b6;
    --brand-accent-rgb: 244, 114, 182;
    --brand-secondary: #fb7185;
    --brand-secondary-rgb: 251, 113, 133;
}

.tna-site-header[data-brand-site="mart"],
body[data-tna-brand-site="mart"] {
    --brand-accent: #34d399;
    --brand-accent-rgb: 52, 211, 153;
    --brand-secondary: #22c55e;
    --brand-secondary-rgb: 34, 197, 94;
}

.tna-site-header[data-brand-site="cup"],
body[data-tna-brand-site="cup"] {
    --brand-accent: #fb7185;
    --brand-accent-rgb: 251, 113, 133;
    --brand-secondary: #f97316;
    --brand-secondary-rgb: 249, 115, 22;
}

body[data-tna-brand-site] .tna-card {
    border-color: rgba(var(--brand-accent-rgb), .16);
}

body[data-tna-brand-site] .tna-btn,
body[data-tna-brand-site] button,
body[data-tna-brand-site] input,
body[data-tna-brand-site] select,
body[data-tna-brand-site] textarea {
    min-height: 44px;
}

body[data-tna-brand-site] .tna-btn-primary {
    box-shadow: 0 12px 34px rgba(var(--brand-accent-rgb), .20);
}

.tna-mag-post-actions form {
    margin: 0;
}

.tna-mag-share-feedback {
    min-height: 1.6em;
    margin: -12px 0 22px;
}

[data-tna-share][disabled] {
    cursor: progress;
    opacity: .62;
}

html[data-tna-theme="light"] .tna-site-header.is-brand-header::before {
    background:
        radial-gradient(circle at 18% 0%, rgba(var(--brand-accent-rgb), .14), transparent 36%),
        linear-gradient(180deg, rgba(244, 247, 252, .98), rgba(244, 247, 252, 0));
}

html[data-tna-theme="light"] .tna-site-header.is-brand-header .tna-site-nav {
    border-color: rgba(var(--brand-accent-rgb), .32);
    background:
        radial-gradient(circle at 8% 20%, rgba(var(--brand-accent-rgb), .12), transparent 32%),
        linear-gradient(118deg, rgba(var(--brand-accent-rgb), .07), transparent 40%),
        rgba(255, 255, 255, .94);
    box-shadow:
        0 18px 52px rgba(15, 23, 42, .11),
        0 0 0 1px rgba(var(--brand-accent-rgb), .07) inset;
}

html[data-tna-theme="light"] .tna-brand-header-utility__company,
html[data-tna-theme="light"] .tna-brand-header-utility__context {
    color: #475569;
}

html[data-tna-theme="light"] .tna-brand-header-utility__company:hover,
html[data-tna-theme="light"] .tna-brand-header-utility__company:focus-visible,
html[data-tna-theme="light"] .tna-site-header.is-brand-header .tna-site-desktop-nav > a[aria-current="page"],
html[data-tna-theme="light"] .tna-site-header.is-brand-header .tna-site-drawer__nav > a[aria-current="page"] {
    color: #0f172a;
}

@media (max-width: 1439px) {
    .tna-brand-header-utility__inner {
        width: min(var(--tnx-container), calc(100% - 24px));
        padding-inline: 6px;
    }

    .tna-brand-header-utility__context {
        max-width: 48vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 720px) {
    .tna-site-header.is-brand-header .tna-site-nav {
        min-height: 70px;
        border-radius: 22px 10px 22px 10px;
        padding: 8px;
    }

    .tna-site-header.is-brand-header .tna-site-brand__mark {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .tna-brand-header-utility__inner {
        min-height: 28px;
    }

    .tna-brand-header-utility__company {
        font-size: .68rem;
    }

    .tna-brand-header-utility__context {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tna-brand-header-utility__company {
        transition: none;
    }
}