/* =============================================================
 * common.css
 * Shared foundation loaded on every page via partials/head.html.
 * Individual pages (homepage.css, agent.css, etc.) load AFTER
 * this file and may override anything here.
 *
 * Naming convention: underscore-separated class/var names
 *   (e.g. .site_header, --text_soft, --nav_height)
 * ============================================================= */


/* ── Design tokens ──────────────────────────────────────────── *
 * Canonical color, spacing, and sizing values for the whole site.
 * Add a new token here when the same literal value appears in more
 * than one place. Prefer tokens over hardcoded literals.
 * Use --blue/--violet/--magenta/--teal for accents; --text_*
 * for copy; --bg_* and --panel_* for surfaces; --border for separators. */
:root {
    --bg:            #070b12;                      /* page base color */
    --bg_soft:       #0d1320;                      /* softer variant for alt sections */
    --panel:         rgba(10, 16, 28, 0.72);       /* default glass panel fill */
    --panel_strong:  rgba(11, 18, 31, 0.88);       /* more opaque panel (popovers, nav) */
    --panel_soft:    rgba(15, 24, 38, 0.82);       /* subtle panel fill for nested cards */
    --border:        rgba(158, 184, 255, 0.16);    /* default hairline border on panels/cards */
    --text:          #eef3ff;                      /* primary body text */
    --text_soft:     #b8c4dc;                      /* secondary / paragraph copy */
    --text_muted:    #8090ac;                      /* tertiary labels, captions, meta */
    --blue:          #52b6ff;                      /* primary brand accent */
    --violet:        #8467ff;                      /* secondary brand accent (gradient partner) */
    --magenta:       #cc59dc;                      /* rare tertiary accent */
    --teal:          #53d0d0;                      /* quaternary accent (method chips, etc.) */
    --shadow:        0 24px 80px rgba(0, 0, 0, 0.45);  /* default drop shadow for elevated surfaces */
    --radius:        22px;                         /* default border radius for cards/panels */
    --radius_sm:     14px;                         /* tighter radius for nested elements */
    --content_width: 1180px;                       /* max content width wrapped by .container */
    --nav_height:    78px;                         /* min-height of the sticky site header (used as sticky offset) */
}


/* ── Reset ──────────────────────────────────────────────────── */

/* Always use border-box so padding/borders don't grow the box. */
* {
    box-sizing: border-box;
}

/* Smooth anchor-link scrolling for in-page navigation. */
html {
    scroll-behavior: smooth;
}

/* Global typography + text color. Per-page body backgrounds are
 * set in homepage.css / agent.css so each page can have its own
 * gradient/image behind the content. */
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    line-height: 1.55;
}

/* All anchors inherit surrounding color and drop underlines.
 * Individual components re-style hover states as needed. */
a {
    color: inherit;
    text-decoration: none;
}

/* Images never overflow their container and behave as blocks. */
img {
    display: block;
    max-width: 100%;
}


/* ── Layout ─────────────────────────────────────────────────── */

/* Site-wide content wrapper. Use on any top-level section that
 * should respect the max content width and have gutters.
 * Usage: <div class="container">…</div>
 * Tightens to 24px gutters on very small screens (see media query). */
.container {
    width: min(var(--content_width), calc(100% - 40px));
    margin: 0 auto;
}


/* ── Site header (rendered by partials/head.html) ───────────── *
 * The markup that uses these classes lives in src/partials/head.html
 * and is injected into every page via {{> partials/head }}. If you
 * change these, visually verify both the homepage and user-agent
 * pages since both render the same header. */

/* Outer <header> element: sticky to top of viewport with a
 * blurred translucent fill so content scrolls under it. */
.site_header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(14px);
    background: linear-gradient(180deg, rgba(5, 9, 16, 0.82), rgba(5, 9, 16, 0.58));
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Row inside .site_header holding brand + nav + CTA.
 * Also sets the canonical header height via --nav_height. */
.nav_inner {
    min-height: var(--nav_height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Left-side brand cluster: logo + name stack. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* The brand logo image itself (<img class="brand_mark">). */
.brand_mark {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 6px 20px rgba(82, 182, 255, 0.18));
    flex: 0 0 auto;
}

/* Two-line text stack next to the logo (.brand_name + .brand_tag). */
.brand_text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

/* Primary brand line (typically the site name in bold caps). */
.brand_name {
    font-size: 0.94rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

/* Secondary brand line under the name (typically a short tagline). */
.brand_tag {
    margin-top: 4px;
    color: var(--text_muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Horizontal nav link row in the header. Collapses on mobile. */
.nav_links {
    display: flex;
    align-items: center;
    gap: 26px;
    color: var(--text_soft);
    font-size: 0.96rem;
}

/* Brighten nav links on hover. */
.nav_links a:hover {
    color: var(--text);
}

/* Pill-shaped call-to-action button on the right of the header.
 * Also used as the standalone header action button; for generic
 * primary/secondary buttons elsewhere see .button_primary / .button_secondary
 * in homepage.css (can be promoted here if needed on more pages). */
.nav_cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(114, 158, 255, 0.28);
    background: linear-gradient(135deg, rgba(82, 182, 255, 0.22), rgba(132, 103, 255, 0.2));
    color: #f7fbff;
    font-weight: 700;
    box-shadow: 0 14px 36px rgba(15, 26, 56, 0.32);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Subtle lift on hover for the header CTA. */
.nav_cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 40px rgba(15, 26, 56, 0.38);
}

/* Hamburger icon that only appears under 820px (see media query).
 * Toggles .is_open on .site_header to reveal .nav_drawer. */
.menu_toggle {
    display: none;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 1.3rem;
    padding: 8px;
    cursor: pointer;
}

/* Mobile slide-down drawer. Hidden by default; shown when
 * .site_header.is_open is set (handled by the menu toggle JS). */
.nav_drawer {
    display: none;
    padding: 0 0 16px;
}

/* Stacked link list inside the mobile drawer. */
.nav_drawer_inner {
    display: grid;
    gap: 10px;
    padding-top: 8px;
}

/* Individual link styling inside the mobile drawer. */
.nav_drawer_inner a {
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text_soft);
}

/* Screen-reader-only text: visually hidden but still announced.
 * Legacy name kept because existing partials/JS use it.
 * Prefer .visually_hidden below for new markup. */
.sr_only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ── Eyebrow tag ─────────────────────────────────────────────── *
 * Small pill-shaped label with a glowing dot, placed above a
 * section title to categorize or introduce content. Used in hero
 * sections on multiple page types. Always pair with .eyebrow_dot
 * as the first child for the colored accent. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid rgba(150, 179, 255, 0.16);
    border-radius: 999px;
    background: rgba(7, 14, 26, 0.45);
    box-shadow: var(--shadow);
    color: #d8e6ff;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}

/* Glowing accent dot shown inside .eyebrow (aria-hidden). */
.eyebrow_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--violet));
    box-shadow: 0 0 18px rgba(82, 182, 255, 0.7);
}


/* ── Label utility ───────────────────────────────────────────── *
 * Small, muted, uppercase text with letter-spacing — use for
 * field labels above stat values, definition terms, and any
 * secondary caption copy. Replaces the page-specific duplicates
 * .summary_stat_label, .mock_key, .small_stat_card .label, etc. */
.label {
    color: var(--text_muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* ── Site footer ────────────────────────────────────────────── *
 * These classes are used by both homepage and user-agent templates.
 * Keep them in sync here rather than duplicating. */

/* Outer <footer> wrapper with top border and muted text color. */
.footer {
    padding: 28px 0 46px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text_muted);
}

/* Row inside .footer holding brand + links, wraps on mobile. */
.footer_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

/* Brand cluster (logo + text) shown on the left of the footer. */
.footer_brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* Smaller footer logo (distinct from .brand_mark in the header). */
.footer_brand img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

/* Horizontal list of footer links on the right. */
.footer_links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

/* Brighten footer links on hover. */
.footer_links a:hover {
    color: var(--text);
}


/* ── Hero icon (user-agent page) ────────────────────────────── *
 * Used in the hero section of user-agent pages to show the bot/agent
 * icon. Image is 128x128 with 2x retina support via srcset. */

/* Wrapper <figure> around the hero icon image. */
.hero_icon {
    margin: 0 0 1rem;
}

/* The hero icon image itself. Fixed 128x128 with a soft rounded corner. */
.hero_icon img {
    display: block;
    width: 128px;
    height: 128px;
    border-radius: 12px;
}


/* ── Accessibility helper ───────────────────────────────────── *
 * Modern alias for .sr_only. Use this on new markup (e.g. a
 * visually-hidden figcaption). Functionally identical. */
.visually_hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* ── Responsive: header + container ─────────────────────────── */

/* Tablet and below: collapse nav into hamburger drawer. */
@media (max-width: 820px) {
    .menu_toggle {
        display: inline-flex;
    }

    .nav_links,
    .nav_cta {
        display: none;
    }

    .site_header.is_open .nav_drawer {
        display: block;
    }
}

/* Phone: tighter gutters and full-width header CTA. */
@media (max-width: 640px) {
    .container {
        width: min(var(--content_width), calc(100% - 24px));
    }

    .nav_cta {
        width: 100%;
    }
}