/* ============================================================
   CannabisJapan.com — Design System
   ============================================================
   Typography: Noto Sans JP (headings), Source Sans 3 (body)
   Palette: Crimson (torii red), indigo (shibori), stone, white
   Framework: Bootstrap 5.3 + custom overrides
   ============================================================ */

:root {
    --jp-red-900: #7F1D1D;
    --jp-red-800: #991B1B;
    --jp-red-700: #B91C1C;
    --jp-red-600: #DC2626;
    --jp-red-500: #EF4444;
    --jp-red-400: #F87171;
    --jp-red-100: #FEE2E2;
    --jp-red-50:  #FEF2F2;

    --jp-indigo-900: #1E1B4B;
    --jp-indigo-800: #312E81;
    --jp-indigo-700: #3730A3;
    --jp-indigo-600: #4338CA;
    --jp-indigo-500: #6366F1;
    --jp-indigo-100: #E0E7FF;
    --jp-indigo-50:  #EEF2FF;

    --jp-stone-900: #1C1917;
    --jp-stone-800: #292524;
    --jp-stone-700: #44403C;
    --jp-stone-600: #57534E;
    --jp-stone-500: #78716C;
    --jp-stone-400: #A8A29E;
    --jp-stone-300: #D6D3D1;
    --jp-stone-200: #E7E5E4;
    --jp-stone-100: #F5F5F4;
    --jp-stone-50:  #FAFAF9;

    --jp-dark: #1C1917;
    --jp-accent: #B91C1C;
    --jp-accent-hover: #991B1B;
    --jp-primary: var(--jp-indigo-600);
    --jp-primary-hover: var(--jp-indigo-700);

    --jp-text: var(--jp-stone-800);
    --jp-text-heading: var(--jp-stone-900);
    --jp-text-muted: var(--jp-stone-500);
    --jp-bg: #FFFFFF;
    --jp-bg-alt: var(--jp-stone-50);
    --jp-border: var(--jp-stone-200);
    --jp-link: var(--jp-indigo-700);
    --jp-link-hover: var(--jp-indigo-900);

    --jp-font-body: 'Source Sans 3', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --jp-font-heading: 'Noto Sans JP', 'Source Sans 3', -apple-system, sans-serif;

    --jp-body-size: 1.125rem;
    --jp-body-leading: 1.75;
    --jp-section-gap: 4rem;
    --jp-radius: 6px;
    --jp-radius-lg: 10px;
    --jp-shadow: 0 2px 8px rgba(28, 25, 23, 0.08);
    --jp-shadow-lg: 0 4px 16px rgba(28, 25, 23, 0.1);
}

*, *::before, *::after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: var(--jp-font-body);
    font-size: var(--jp-body-size);
    line-height: var(--jp-body-leading);
    color: var(--jp-text);
    background: var(--jp-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--jp-font-heading);
    color: var(--jp-text-heading);
    font-weight: 600;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; margin-top: 2.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--jp-border); }
h3 { font-size: 1.25rem; margin-top: 2rem; }

a { color: var(--jp-link); }
a:hover { color: var(--jp-link-hover); }

.skip-link {
    position: absolute;
    top: -100px;
    left: 10px;
    background: var(--jp-accent);
    color: #fff;
    padding: 8px 16px;
    z-index: 10000;
    border-radius: var(--jp-radius);
}
.skip-link:focus { top: 10px; color: #fff; }

/* ─── Top Bar ─────────────────────────────────────── */
.top-bar {
    background: var(--jp-red-700);
    color: #fff;
    padding: 6px 0;
    font-size: 0.8rem;
    font-weight: 500;
}
.top-bar-text { color: rgba(255,255,255,0.9); }
.top-bar-link { color: #fff; text-decoration: underline; }
.top-bar-link:hover { color: rgba(255,255,255,0.8); }

/* ─── Navbar ──────────────────────────────────────── */
.navbar { padding: 0.75rem 0; }
.brand-name { font-family: var(--jp-font-heading); font-weight: 700; font-size: 1.25rem; color: #fff; }
.brand-tld { color: var(--jp-red-400); }
.brand-ext { color: var(--jp-stone-400); font-weight: 400; }
.navbar-dark .nav-link { color: rgba(255,255,255,0.85); font-weight: 500; }
.navbar-dark .nav-link:hover, .navbar-dark .nav-link.active { color: #fff; }

/* ─── Page Hero ───────────────────────────────────── */
.page-hero {
    background: linear-gradient(135deg, var(--jp-stone-900) 0%, var(--jp-indigo-900) 100%);
    color: #fff;
    padding: 3rem 0;
}
.page-hero h1 { color: #fff; border: none; padding: 0; margin: 0 0 0.5rem 0; font-size: 2.25rem; }
.page-hero .lead { color: rgba(255,255,255,0.85); font-size: 1.15rem; margin-bottom: 0; }

.home-hero {
    background: linear-gradient(135deg, var(--jp-stone-900) 0%, var(--jp-red-900) 50%, var(--jp-indigo-900) 100%);
    color: #fff;
    padding: 4rem 0;
}
.home-hero h1 { color: #fff; border: none; padding: 0; font-size: 2.5rem; }
.home-hero .lead { color: rgba(255,255,255,0.85); font-size: 1.2rem; }

/* ─── Content Pages ───────────────────────────────── */
.content-page { padding: var(--jp-section-gap) 0; }
.content-body { font-size: var(--jp-body-size); line-height: var(--jp-body-leading); }
.content-body p { margin-bottom: 1.25rem; }
.content-body ul, .content-body ol { margin-bottom: 1.25rem; }
.content-body li { margin-bottom: 0.5rem; }

/* ─── Cards ───────────────────────────────────────── */
.card { border: 1px solid var(--jp-border); border-radius: var(--jp-radius); box-shadow: var(--jp-shadow); }
.pathway-card .card { transition: transform 0.15s, box-shadow 0.15s; }
.pathway-card:hover .card { transform: translateY(-2px); box-shadow: var(--jp-shadow-lg); }

/* ─── Alerts/Warnings ─────────────────────────────── */
.alert { border-radius: var(--jp-radius); }
.research-citation {
    background: var(--jp-stone-50);
    border-left: 4px solid var(--jp-stone-300);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    font-style: italic;
}
.research-citation cite { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.875rem; color: var(--jp-text-muted); }

/* ─── Tables ──────────────────────────────────────── */
.table { font-size: 0.95rem; }
.table th { background: var(--jp-stone-100); font-weight: 600; }

/* ─── Related Pages Sidebar ───────────────────────── */
.related-pages { position: sticky; top: 1rem; }
.related-pages .card-title { font-size: 0.9rem; font-weight: 600; color: var(--jp-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.related-pages a { color: var(--jp-text); font-size: 0.95rem; }
.related-pages a:hover { color: var(--jp-accent); }

/* ─── Age Gate ────────────────────────────────────── */
.age-gate {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(28, 25, 23, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.age-gate-content {
    background: #fff;
    padding: 3rem;
    border-radius: var(--jp-radius-lg);
    max-width: 480px;
    text-align: center;
}
.age-gate-content h1 { font-size: 1.75rem; margin-bottom: 1rem; }

/* ─── Footer ──────────────────────────────────────── */
.site-footer {
    background: var(--jp-stone-900);
    color: var(--jp-stone-400);
    padding: 3rem 0 1.5rem;
    font-size: 0.9rem;
}
.site-footer a { color: var(--jp-stone-300); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-heading { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--jp-red-400); font-weight: 600; margin-bottom: 0.75rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.4rem; }
.footer-tagline { color: var(--jp-stone-300); font-size: 0.9rem; }
.footer-trust { color: var(--jp-stone-400); font-size: 0.8rem; }
.footer-disclaimer { border-top: 1px solid var(--jp-stone-700); padding: 1.5rem 0; margin-top: 1rem; }
.footer-disclaimer p { font-size: 0.8rem; color: var(--jp-stone-400); margin: 0; }
.footer-bottom { border-top: 1px solid var(--jp-stone-800); padding-top: 1rem; margin-top: 1rem; }
.footer-bottom p { font-size: 0.8rem; color: var(--jp-stone-500); }
.footer-bottom-links a { margin-left: 1rem; font-size: 0.8rem; }

/* ─── Badges ──────────────────────────────────────── */
.badge { font-weight: 500; }

/* ─── Section Label ───────────────────────────────── */
.section-label {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--jp-accent);
    margin-bottom: 0.5rem;
}

/* ─── Print ───────────────────────────────────────── */
@media print {
    .top-bar, .navbar, .site-footer, .age-gate, .related-pages { display: none !important; }
    .page-hero { background: #fff !important; color: #000 !important; padding: 1rem 0; }
    .page-hero h1, .page-hero .lead { color: #000 !important; }
    body { font-size: 12pt; }
}

/* ─── Responsive ──────────────────────────────────── */
@media (max-width: 991px) {
    .page-hero h1 { font-size: 1.75rem; }
    .home-hero h1 { font-size: 2rem; }
    h2 { font-size: 1.3rem; }
}
@media (max-width: 575px) {
    .page-hero { padding: 2rem 0; }
    .home-hero { padding: 2.5rem 0; }
    body { font-size: 1rem; }
}