/* ═══════════════════════════════════════════════
   EasyContentFromAI — Base Design System
   Shared across ALL pages: tokens · reset ·
   layout · header · buttons · inputs · footer ·
   toast · print
   ═══════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────────────────── */
:root {
    /* Surfaces */
    --bg:         #f8fafc;
    --surface:    #ffffff;
    --surface-2:  #f1f5f9;

    /* Borders */
    --border:     #e2e8f0;
    --border-md:  #cbd5e1;

    /* Brand */
    --primary:    #3b82f6;
    --primary-dk: #2563eb;
    --primary-bg: #eff6ff;
    --primary-bd: #bfdbfe;

    /* Text */
    --text:   #0f172a;
    --text-2: #475569;
    --text-3: #94a3b8;

    /* Semantic */
    --success:    #16a34a;
    --error:      #dc2626;
    --error-bg:   #fef2f2;
    --error-bd:   #fecaca;

    /* Layout */
    --header-h: 60px;
    --container: 1200px;

    /* Radius */
    --r:    8px;
    --r-sm: 6px;
    --r-lg: 12px;

    /* Typography */
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: ui-monospace, "SF Mono", "Fira Code", Consolas, monospace;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin:  0;
    padding: 0;
}

html {
    scroll-behavior: auto;
}

body {
    font-family:            var(--font);
    background:             var(--bg);
    color:                  var(--text);
    -webkit-font-smoothing: antialiased;
    line-height:            1.5;
    min-height:             100vh;
}

/* ── Utility — Screen reader only ──────────────────────────────────────── */
.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;
}

/* ── Utility — Container ───────────────────────────────────────────────── */
.container {
    width:          100%;
    max-width:      var(--container);
    margin-inline:  auto;
    padding-inline: 48px;
}

/* ── Skip Link (accessibility) ─────────────────────────────────────────── */
.skip-link {
    position:        absolute;
    top:             -100%;
    left:            50%;
    transform:       translateX(-50%);
    padding:         8px 16px;
    background:      var(--primary);
    color:           #fff;
    font-size:       0.875rem;
    font-weight:     600;
    border-radius:   var(--r-sm);
    text-decoration: none;
    z-index:         999;
}
.skip-link:focus {
    top:            8px;
    outline:        2px solid var(--primary);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════
   SITE HEADER / NAVBAR
   ═══════════════════════════════════════════════ */
.site-header {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    height:     var(--header-h);
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--border);
    z-index:    100;
}

.site-header-inner {
    display:        flex;
    align-items:    center;
    height:         100%;
    gap:            8px;
    max-width:      var(--container);
    margin-inline:  auto;
    padding-inline: 48px;
}

/* ── Logo ───────────────────────────────────────────────────────────────── */
.site-logo {
    display:         flex;
    align-items:     center;
    gap:             9px;
    text-decoration: none;
    flex-shrink:     0;
    margin-right:    20px;
}

.logo-mark {
    width:           28px;
    height:          28px;
    background:      var(--primary-bg);
    border:          1px solid var(--primary-bd);
    border-radius:   var(--r-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--primary);
    flex-shrink:     0;
}

.logo-label {
    font-size:      0.9375rem;
    font-weight:    700;
    color:          var(--text);
    letter-spacing: -0.015em;
    white-space:    nowrap;
}

/* ── Navigation Links ───────────────────────────────────────────────────── */
.site-nav {
    display:     flex;
    align-items: center;
    gap:         2px;
    flex:        1;
}

.site-nav-link {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         6px 10px;
    border-radius:   var(--r-sm);
    text-decoration: none;
    font-size:       0.875rem;
    font-weight:     500;
    color:           var(--text-2);
    border:          none;
    background:      none;
    cursor:          pointer;
    font-family:     var(--font);
    white-space:     nowrap;
}
.site-nav-link:hover {
    background: var(--surface-2);
    color:      var(--text);
}
.site-nav-link.active {
    color:      var(--primary-dk);
    background: var(--primary-bg);
}
.site-nav-link.soon {
    opacity:        0.45;
    cursor:         default;
    pointer-events: none;
}

.nav-badge {
    font-size:      0.5rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding:        2px 5px;
    background:     var(--surface-2);
    color:          var(--text-3);
    border:         1px solid var(--border);
    border-radius:  20px;
}

/* ── Header Right Actions ───────────────────────────────────────────────── */
.site-header-actions {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-left: auto;
    flex-shrink: 0;
}

.header-github {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         6px 10px;
    border-radius:   var(--r-sm);
    text-decoration: none;
    font-size:       0.875rem;
    font-weight:     500;
    color:           var(--text-2);
}
.header-github:hover {
    background: var(--surface-2);
    color:      var(--text);
}

.btn-header {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    height:          34px;
    padding:         0 16px;
    background:      var(--primary);
    color:           #fff;
    font-size:       0.875rem;
    font-weight:     600;
    font-family:     var(--font);
    border:          none;
    border-radius:   var(--r-sm);
    cursor:          pointer;
    text-decoration: none;
    white-space:     nowrap;
}
.btn-header:hover {
    background: var(--primary-dk);
}

/* ═══════════════════════════════════════════════
   SITE MAIN WRAPPER
   ═══════════════════════════════════════════════ */
.site-main {
    padding-top:    var(--header-h);
    min-height:     100vh;
    display:        flex;
    flex-direction: column;
}

/* ═══════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════ */

/* Primary */
.btn-primary {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    height:          44px;
    padding:         0 22px;
    background:      var(--primary);
    color:           #fff;
    font-weight:     600;
    font-size:       0.9375rem;
    font-family:     var(--font);
    border:          none;
    border-radius:   var(--r);
    cursor:          pointer;
    flex-shrink:     0;
    white-space:     nowrap;
    text-decoration: none;
}
.btn-primary:hover:not(:disabled) {
    background: var(--primary-dk);
}
.btn-primary:disabled {
    opacity: 0.55;
    cursor:  not-allowed;
}
.btn-primary.btn-lg {
    height:        52px;
    padding:       0 32px;
    font-size:     1rem;
    border-radius: var(--r);
}

/* Outline */
.btn-outline {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    height:          44px;
    padding:         0 22px;
    background:      transparent;
    color:           var(--text-2);
    font-weight:     600;
    font-size:       0.9375rem;
    font-family:     var(--font);
    border:          1px solid var(--border-md);
    border-radius:   var(--r);
    cursor:          pointer;
    flex-shrink:     0;
    white-space:     nowrap;
    text-decoration: none;
}
.btn-outline:hover {
    background:   var(--surface-2);
    color:        var(--text);
    border-color: var(--border-md);
}
.btn-outline.btn-lg {
    height:  52px;
    padding: 0 32px;
    font-size: 1rem;
}

/* White (used on dark backgrounds) */
.btn-white {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    height:          52px;
    padding:         0 32px;
    background:      #fff;
    color:           var(--text);
    font-weight:     700;
    font-size:       1rem;
    font-family:     var(--font);
    border:          none;
    border-radius:   var(--r);
    cursor:          pointer;
    text-decoration: none;
    white-space:     nowrap;
    flex-shrink:     0;
}
.btn-white:hover {
    background: var(--surface-2);
}

/* Small (toolbar / inline actions) */
.btn-sm {
    display:      inline-flex;
    align-items:  center;
    gap:          5px;
    height:       30px;
    padding:      0 10px;
    background:   var(--surface);
    color:        var(--text-2);
    font-size:    0.8125rem;
    font-weight:  500;
    font-family:  var(--font);
    border:       1px solid var(--border);
    border-radius: var(--r-sm);
    cursor:       pointer;
    white-space:  nowrap;
}
.btn-sm:hover {
    background:   var(--surface-2);
    color:        var(--text);
    border-color: var(--border-md);
}

/* ═══════════════════════════════════════════════
   FORM INPUTS
   ═══════════════════════════════════════════════ */
.input-wrap {
    position:    relative;
    flex:        1;
    display:     flex;
    align-items: center;
}

.input-icon {
    position:       absolute;
    left:           12px;
    color:          var(--text-3);
    pointer-events: none;
}

.text-input {
    width:       100%;
    height:      46px;
    padding:     0 14px 0 38px;
    background:  var(--surface);
    border:      1px solid var(--border-md);
    border-radius: var(--r);
    color:       var(--text);
    font-size:   0.9375rem;
    font-family: var(--font);
    outline:     none;
}
.text-input::placeholder {
    color: var(--text-3);
}
.text-input:hover {
    border-color: #94a3b8;
}
.text-input:focus {
    border-color: var(--primary);
    box-shadow:   0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* ═══════════════════════════════════════════════
   SITE FOOTER
   ═══════════════════════════════════════════════ */
.site-footer {
    background:  var(--surface);
    border-top:  1px solid var(--border);
    padding:     56px 0 32px;
}

.footer-inner {
    display:       flex;
    justify-content: space-between;
    gap:           48px;
    margin-bottom: 44px;
}

.footer-brand {
    max-width: 260px;
}

.footer-logo {
    display:         flex;
    align-items:     center;
    gap:             9px;
    text-decoration: none;
    margin-bottom:   14px;
}

.footer-logo-label {
    font-size:      0.9375rem;
    font-weight:    700;
    color:          var(--text);
    letter-spacing: -0.015em;
}

.footer-tagline {
    font-size:   0.875rem;
    color:       var(--text-3);
    line-height: 1.6;
}

.footer-links {
    display: flex;
    gap:     64px;
}

.footer-col {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.footer-col-label {
    font-size:      0.6875rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--text-3);
    margin-bottom:  4px;
}

.footer-link {
    font-size:       0.875rem;
    color:           var(--text-2);
    text-decoration: none;
}
.footer-link:hover {
    color: var(--text);
}
.footer-link.soon {
    color:          var(--text-3);
    pointer-events: none;
    cursor:         default;
}

.footer-bottom {
    border-top:      1px solid var(--border);
    padding-top:     24px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             12px;
}

.footer-copy {
    font-size: 0.8125rem;
    color:     var(--text-3);
}

.footer-legal {
    display: flex;
    gap:     20px;
}
.footer-legal a {
    font-size:       0.8125rem;
    color:           var(--text-3);
    text-decoration: none;
}
.footer-legal a:hover {
    color: var(--text-2);
}

/* ═══════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════ */
#toast-container {
    position:       fixed;
    bottom:         20px;
    right:          20px;
    display:        flex;
    flex-direction: column;
    gap:            6px;
    z-index:        500;
    pointer-events: none;
    max-width:      320px;
}

.toast {
    display:      flex;
    align-items:  center;
    gap:          10px;
    background:   var(--surface);
    border:       1px solid var(--border);
    box-shadow:   0 4px 12px rgba(0, 0, 0, 0.08);
    padding:      10px 14px;
    border-radius: var(--r-sm);
    font-size:    0.875rem;
    font-weight:  500;
    color:        var(--text);
    pointer-events: auto;
}
.toast-success {
    border-left: 3px solid var(--success);
}
.toast-success svg {
    color:       var(--success);
    flex-shrink: 0;
}
.toast-error {
    border-left: 3px solid var(--error);
}
.toast-error svg {
    color:       var(--error);
    flex-shrink: 0;
}
.toast-fadeout {
    display: none;
}

/* ═══════════════════════════════════════════════
   SHARED SECTION PRIMITIVES
   (used by home.css FAQ / how-it-works AND
    transcript.css / md-to-pdf.css info sections)
   ═══════════════════════════════════════════════ */

/* Section eyebrow label */
.section-eyebrow {
    font-size:      0.6875rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--primary);
    margin-bottom:  10px;
}

/* Section heading */
.section-title {
    font-size:      clamp(1.625rem, 3vw, 2.25rem);
    font-weight:    800;
    color:          var(--text);
    letter-spacing: -0.025em;
    line-height:    1.2;
    margin-bottom:  12px;
}

/* Section sub-text */
.section-sub {
    font-size:   1rem;
    color:       var(--text-2);
    line-height: 1.65;
    max-width:   520px;
}

/* Section header block */
.section-header {
    margin-bottom: 48px;
    max-width:     560px;
}
.section-header.centered {
    max-width:  100%;
    text-align: center;
}
.section-header.centered .section-sub {
    margin-inline: auto;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — BASE / GLOBAL
   ═══════════════════════════════════════════════ */

/* ─ Tablet (≤ 1024 px) ──────────────────────── */
@media (max-width: 1024px) {
    .container,
    .site-header-inner {
        padding-inline: 32px;
    }
}

/* ─ Mobile (≤ 768 px) ───────────────────────── */
@media (max-width: 768px) {
    .container,
    .site-header-inner {
        padding-inline: 20px;
    }

    /* Header */
    .site-header-inner {
        gap: 4px;
    }
    .logo-label {
        display: none;
    }
    .site-nav {
        display: none;
    }
    .site-header-actions .header-github span {
        display: none;
    }

    /* Footer */
    .footer-inner {
        flex-direction: column;
        gap: 32px;
    }
    .footer-links {
        gap: 32px;
    }

    /* Toast */
    #toast-container {
        left:      10px;
        right:     10px;
        bottom:    10px;
        max-width: none;
    }
    .toast {
        width: 100%;
    }
}

/* ─ Small Mobile (≤ 480 px) ─────────────────── */
@media (max-width: 480px) {
    #toast-container {
        left:      10px;
        right:     10px;
        bottom:    10px;
        max-width: none;
    }
    .toast {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════
   PRINT — base-level resets
   (page-specific print rules live in each
    page's own CSS file)
   ═══════════════════════════════════════════════ */
@media print {
    .site-header,
    #toast-container {
        display: none !important;
    }

    .site-main {
        padding-top: 0;
    }
}