/* ═══════════════════════════════════════════════════════════════
   SANETRIX — PUBLIC SITE STYLES
   Single source of truth for all public pages (nav, footer,
   buttons, design tokens, micro-interactions).
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens come from _tokens.css (single source of truth) ── */

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background .3s, color .3s;
    overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
.grad {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Container ────────────────────────────────────────────────── */
.pub-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════════════ */
.pub-nav {
    background: rgba(248, 250, 251, .85);
    border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background .25s, border-color .25s, box-shadow .25s;
}
[data-theme="dark"] .pub-nav { background: rgba(5, 8, 16, .82); }
.pub-nav.scrolled { box-shadow: 0 1px 0 var(--border), 0 8px 32px rgba(0, 0, 0, .04); }
[data-theme="dark"] .pub-nav.scrolled { box-shadow: 0 1px 0 var(--border), 0 8px 32px rgba(0, 0, 0, .35); }

.pub-nav__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Brand */
.pub-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: opacity .2s;
}
.pub-brand:hover { opacity: .82; }
.pub-brand img { height: 26px; width: auto; }
[data-theme="dark"] .pub-brand img { filter: brightness(0) invert(1); }

/* Links */
.pub-nav__links {
    display: flex;
    gap: .25rem;
    align-items: center;
    margin-left: auto;
    list-style: none;
}
.pub-nav__links a {
    position: relative;
    color: var(--text-muted);
    font-size: .9rem;
    font-weight: 500;
    padding: .5rem .9rem;
    border-radius: var(--radius-sm);
    transition: color .2s;
}
.pub-nav__links a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 0;
    height: 2px;
    background: var(--gradient);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width .25s ease;
}
.pub-nav__links a:hover { color: var(--text); }
.pub-nav__links a:hover::after,
.pub-nav__links a.active::after { width: 24px; }
.pub-nav__links a.active { color: var(--text); }

/* Actions (right side) */
.pub-nav__actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-shrink: 0;
}

/* Icon buttons */
.pub-iconbtn {
    width: 38px;
    height: 38px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: color .2s, border-color .2s, background .2s;
    flex-shrink: 0;
}
.pub-iconbtn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(2, 136, 209, .06);
}
[data-theme="dark"] .pub-iconbtn:hover { background: rgba(79, 195, 247, .08); }

.pub-hamburger { display: none; }

/* Mobile-only nav items */
.pub-nav__mobile-only { display: none; }

/* Backdrop overlay for mobile menu */
.pub-nav__backdrop {
    display: none;
    position: fixed;
    inset: var(--nav-height) 0 0 0;
    background: rgba(5, 8, 16, .35);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 99;
}
.pub-nav__backdrop.open {
    display: block;
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTON SYSTEM
   ═══════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: inherit;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .25s ease, opacity .2s, background .2s, border-color .2s, color .2s;
    user-select: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
.btn:active { transform: translateY(1px); }

/* Sizes */
.btn--sm { padding: .45rem .9rem; font-size: .82rem; border-radius: 9px; min-height: 36px; }
.btn--md { padding: .65rem 1.25rem; font-size: .9rem; min-height: 42px; }
.btn--lg { padding: .85rem 1.85rem; font-size: 1rem; min-height: 50px; }

/* Variants */
.btn--primary {
    background: var(--gradient);
    color: #fff;
    box-shadow: 0 4px 14px rgba(79, 195, 247, .25);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(79, 195, 247, .38); color: #fff; }

.btn--secondary {
    background: var(--bg-card);
    color: var(--text);
    border-color: var(--border-strong);
}
.btn--secondary:hover { border-color: var(--accent); color: var(--accent); }

.btn--ghost {
    background: transparent;
    color: var(--text-muted);
}
.btn--ghost:hover { color: var(--text); background: var(--bg-alt); }

.btn--icon { padding: 0; width: 42px; height: 42px; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.pub-footer {
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    padding: 4rem 1.5rem 2rem;
    margin-top: 5rem;
    color: var(--text-muted);
    font-size: .9rem;
}
.pub-footer__inner {
    max-width: var(--container);
    margin: 0 auto;
}
.pub-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: 2.5rem;
    margin-bottom: 3rem;
}
.pub-footer__brand img { height: 28px; margin-bottom: 1rem; }
[data-theme="dark"] .pub-footer__brand img { filter: brightness(0) invert(1); }
.pub-footer__brand p {
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 320px;
    margin-bottom: 1.25rem;
}
.pub-footer__social {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.pub-footer__social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: var(--bg-card);
    transition: color .2s, border-color .2s, transform .2s;
}
.pub-footer__social a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }

.pub-footer__col h4 {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text);
    margin-bottom: 1.1rem;
}
.pub-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.pub-footer__col a {
    color: var(--text-muted);
    font-size: .88rem;
    transition: color .2s, padding-left .2s;
    display: inline-block;
}
.pub-footer__col a:hover { color: var(--accent); padding-left: 3px; }

.pub-footer__bottom {
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: .8rem;
    color: var(--text-secondary);
}
.pub-footer__bottom a { color: var(--text-secondary); }
.pub-footer__bottom a:hover { color: var(--accent); }
.pub-footer__legal { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .pub-footer__grid { grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
    .pub-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .pub-nav__inner { padding: 0 1rem; gap: .75rem; }
    .pub-nav__actions { margin-left: auto; order: 2; }
    .pub-nav__links {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        padding: .5rem 1rem 1rem;
        gap: 0;
        margin-left: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height .3s ease, opacity .25s ease, padding .3s ease;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
        z-index: 100;
    }
    [data-theme="dark"] .pub-nav__links { box-shadow: 0 12px 32px rgba(0, 0, 0, .4); }
    .pub-nav__links.open {
        max-height: 80vh;
        opacity: 1;
        padding: .5rem 1rem 1.25rem;
    }
    .pub-nav__links li { width: 100%; }
    .pub-nav__links a {
        display: block;
        padding: .85rem .5rem;
        font-size: .95rem;
        border-radius: 0;
        border-bottom: 1px solid var(--border);
    }
    .pub-nav__links a::after { display: none; }
    .pub-nav__links li:last-child a { border-bottom: none; }
    .pub-nav__mobile-only { display: list-item; }
    .pub-nav__mobile-only a {
        margin-top: .5rem;
        background: var(--gradient);
        color: #fff !important;
        text-align: center;
        border-radius: var(--radius) !important;
        border-bottom: none !important;
        font-weight: 700;
    }

    /* On mobile: hide desktop CTAs, show only icon buttons + hamburger */
    .pub-nav__actions .btn { display: none; }
    .pub-hamburger { display: inline-flex; }

    .pub-footer { padding: 3rem 1rem 1.5rem; }
    .pub-footer__grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
    .pub-footer__brand { grid-column: 1 / -1; }
    .pub-footer__bottom { justify-content: center; text-align: center; }
}

@media (max-width: 480px) {
    .pub-nav__inner { padding: 0 .9rem; }
    .pub-brand img { height: 24px; }
    .pub-iconbtn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
    .btn { min-height: 44px; }
    .pub-footer__grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .pub-footer__legal { gap: .75rem; justify-content: center; }
}

/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   Long-form content classes (.pub-content, .card, .text-*)
   used by Razor pages migrated from _Layout.cshtml.
   Tokens come from _tokens.css.
   ═══════════════════════════════════════════════════════════════ */

.pub-content {
    max-width: 880px;
    margin: 0 auto;
    padding: 3rem 1.25rem 4rem;
}
.pub-content h1 {
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0 0 .5rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}
.pub-content h2 { font-size: 1.4rem; font-weight: 700; margin: 1.25rem 0 .75rem; color: var(--text); }
.pub-content h3 { font-size: 1.1rem; font-weight: 700; margin: 1rem 0 .5rem; color: var(--accent); }
.pub-content h4 { font-size: 1rem; font-weight: 700; margin: .75rem 0 .35rem; color: var(--text); }
.pub-content p { line-height: 1.75; color: var(--text); margin: 0 0 .75rem; }
.pub-content ul, .pub-content ol { line-height: 1.8; color: var(--text); padding-left: 1.5rem; margin: .5rem 0 1rem; }
.pub-content a { color: var(--accent); text-decoration: none; font-weight: 500; }
.pub-content a:hover { text-decoration: underline; }
.pub-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .92rem; }
.pub-content table td, .pub-content table th {
    padding: .65rem .75rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.pub-content table th { font-weight: 700; background: var(--bg-alt); }

/* Card primitives used by content pages */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .25s ease, border-color .25s ease;
}
.card:hover { box-shadow: var(--shadow); }
.card-body { padding: 1.5rem; }

/* Text helpers */
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }

@media (max-width: 600px) {
    .pub-content { padding: 2rem 1rem 3rem; }
    .card-body { padding: 1.1rem; }
    .pub-content table { font-size: .85rem; }
    .pub-content table td, .pub-content table th { padding: .5rem .4rem; }
}