/* =========================================================
   GOZEN KB — extra.css (Production - Brand Updated)
   Brand tokens + header CTA + home components + dark mode polish
   ========================================================= */

/* =========================================================
   BRAND TOKENS - Synced with Main Astro Site
   Source: gozen.host.5/tailwind.config.mjs & globals.css
   ========================================================= */

:root {
    /* Brand Colors (from globals.css) */
    --brand-primary: #2563eb;
    --brand-dark: #1d4ed8;
    --brand-light: #2563eb;

    /* Navy Scale */
    --navy-950: #020617;
    --navy-925: #0B1120;
    --navy-900: #0F172A;
    --navy-800: #1E293B;

    /* Cool Scale */
    --cool-50: #F8FAFC;
    --cool-100: #F1F5F9;
    --cool-200: #E2E8F0;

    /* UI Backgrounds */
    --bg-main: #f8fafc;
    --card-glass: rgba(255, 255, 255, 0.8);
    --border-main: #cbd5e1;

    /* Logo colors - Light mode */
    --logo-gozen: #0F172A;
    --logo-host: #2563eb;

    /* Legacy aliases */
    --gozen-primary: var(--brand-primary);
    --gozen-primary-300: #60a5fa;
    --gozen-primary-600: var(--brand-dark);
    --gozen-secondary: var(--brand-primary);
    --gozen-secondary-300: #3b82f6;
    --gozen-secondary-600: var(--brand-dark);

    /* UI Tokens */
    --gozen-radius: 12px;
    /* 0.75rem */
    --gozen-radius-sm: 8px;
    --gozen-shadow: 0 4px 24px rgba(37, 99, 235, 0.08);
    --gozen-shadow-hover: 0 8px 32px rgba(37, 99, 235, 0.12);
    --shadow-glow-blue: 0 4px 24px rgba(37, 99, 235, 0.3);

    /* MkDocs Material core tokens */
    --md-primary-fg-color: var(--brand-primary);
    --md-primary-fg-color--light: var(--gozen-primary-300);
    --md-primary-fg-color--dark: var(--brand-dark);
    --md-accent-fg-color: var(--brand-primary);
    --md-accent-fg-color--transparent: rgba(37, 99, 235, 0.12);

    /* Typography */
    --md-text-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-md-color-scheme="slate"] {
    /* Dark mode backgrounds (from globals.css) */
    --bg-main: #020617;
    --card-glass: rgba(30, 41, 59, 0.4);
    --border-main: #334155;

    /* Logo colors - Dark mode */
    --logo-gozen: #FFFFFF;
    --logo-host: #2563eb;

    /* MkDocs overrides */
    --md-primary-fg-color: 255, 255, 255;
    --md-primary-fg-color--light: var(--gozen-primary-300);
    --md-primary-fg-color--dark: var(--brand-dark);
    --md-accent-fg-color: var(--brand-primary);
    --md-accent-fg-color--transparent: rgba(37, 99, 235, 0.16);
}

/* Links: brand blue */
.md-typeset a {
    color: var(--gozen-primary);
}

.md-typeset a:hover {
    color: var(--gozen-primary-600);
}


/* ---  */


/* Wider shell on desktop */
@media (min-width: 76.25em) {
    .md-grid {
        max-width: 1440px;
    }
}


/* =========================================================
   HEADER (Logo + CTAs)
   Synced with Main Site: 72px height, glassmorphism
   ========================================================= */

/* Light mode header: frosted glass */
.md-header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(203, 213, 225, 0.5);
}

/* Dark mode header: navy-950 glassmorphism */
[data-md-color-scheme="slate"] .md-header {
    background: rgba(2, 6, 23, 0.9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(51, 65, 85, 0.5);
}

/* Header height - matching main site (72px) */
.md-header__inner {
    height: 72px;
    gap: 0.75rem;
    align-items: center;
}

/* Fix header text colors for light mode */
.md-header__topic,
.md-header__title {
    color: #0F172A;
}

[data-md-color-scheme="slate"] .md-header__topic,
[data-md-color-scheme="slate"] .md-header__title {
    color: #f8fafc;
}

/* Fix header icons/buttons visibility in light mode */
.md-header .md-header__button {
    color: #404040;
    /* neutral-700 */
}

.md-header .md-header__button:hover {
    color: #171717;
    /* neutral-900 */
}

[data-md-color-scheme="slate"] .md-header .md-header__button {
    color: #f5f5f5;
    /* neutral-100 */
}

[data-md-color-scheme="slate"] .md-header .md-header__button:hover {
    color: #ffffff;
}

/* Search input styling */
.md-header .md-search__input {
    background: rgba(241, 245, 249, 0.8);
    color: #0F172A;
}

[data-md-color-scheme="slate"] .md-header .md-search__input {
    background: rgba(30, 41, 59, 0.8);
    color: #f8fafc;
}


/* Hide the navigation drawer logo - only show header logo */
.md-nav__button.md-logo {
    display: none;
}

/* Logo sizing - reduced by 30% from main site */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    height: 2.1rem;
    width: auto;
}

@media (min-width: 60em) {

    .md-header__button.md-logo img,
    .md-header__button.md-logo svg {
        height: 2.5rem;
    }
}



/* GOZEN header CTAs injected via extra.js */
/* Matches main site Button.astro: h-10 px-5 text-sm font-bold rounded */
.gozen-header-cta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: 8px;
    flex: 0 0 auto;
}

/* Base button style - using fixed pixels to avoid MkDocs rem scaling */
.gozen-header-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    /* h-10 */
    padding: 0 20px;
    /* px-5 */
    font-size: 14px;
    /* text-sm */
    font-weight: 700;
    /* font-bold */
    border-radius: 4px;
    /* rounded */
    white-space: nowrap;
    text-decoration: none !important;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Secondary/Neutral style - matching button--neutral outline */
/* Light mode: bg-neutral-50 text-neutral-700 border-neutral-700 */
.gozen-header-cta a {
    background: #fafafa;
    /* neutral-50 */
    color: #404040 !important;
    /* neutral-700 */
    border: 1px solid #d4d4d4;
    /* neutral-300 */
}

.gozen-header-cta a:hover {
    background: #f5f5f5;
    /* neutral-100 */
    border-color: #a3a3a3;
    /* neutral-400 */
}

/* Primary CTA: Brand Blue - matching button--primary */
/* bg-primary-500 text-white hover:bg-primary-700 */
.gozen-header-cta a.cta-primary {
    background: #3b82f6;
    /* primary-500 / blue-500 */
    color: #fff !important;
    border-color: transparent;
}

.gozen-header-cta a.cta-primary:hover {
    background: #1d4ed8;
    /* primary-700 / blue-700 */
}

/* Dark mode: light text/borders on dark header */
/* Matching button--neutral outline dark variant */
[data-md-color-scheme="slate"] .gozen-header-cta a {
    background: transparent;
    color: #a3a3a3 !important;
    /* neutral-400 */
    border: 1px solid #525252;
    /* neutral-600 */
}

[data-md-color-scheme="slate"] .gozen-header-cta a:hover {
    color: #737373 !important;
    /* neutral-500 */
    border-color: #737373;
    /* neutral-500 */
}

[data-md-color-scheme="slate"] .gozen-header-cta a.cta-primary {
    background: #3b82f6;
    /* primary-500 */
    color: #fff !important;
    border-color: transparent;
}

[data-md-color-scheme="slate"] .gozen-header-cta a.cta-primary:hover {
    background: #1d4ed8;
    /* primary-700 */
}

/* When space gets tight, drop CTAs */
@media (max-width: 900px) {
    .gozen-header-cta {
        display: none;
    }
}


/* =========================================================
   GLOBAL BUTTON STYLES
   Synced with Main Site .primary-action class:
   px-6 py-3, rounded-lg, min-h-[48px], font-bold
   ========================================================= */

/* Base button styling - all .md-button elements */
.md-typeset .md-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    /* min-h-[48px] */
    padding: 12px 24px;
    /* py-3 px-6 */
    font-size: 14px;
    font-weight: 700;
    /* font-bold */
    border-radius: 12px;
    /* rounded-lg */
    white-space: nowrap;
    letter-spacing: 0.025em;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Primary button - bg-primary-500 text-white */
.md-typeset .md-button--primary {
    background: #3b82f6;
    /* blue-500 / primary-500 */
    color: #ffffff !important;
    border: none;
}

.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
    background: #1d4ed8;
    /* blue-700 / primary-700 */
    color: #ffffff !important;
}

/* Secondary button (non-primary) - outline style */
.md-typeset .md-button:not(.md-button--primary) {
    background: #fafafa;
    /* neutral-50 */
    color: #404040;
    /* neutral-700 */
    border: 1px solid #d4d4d4;
    /* neutral-300 */
}

.md-typeset .md-button:not(.md-button--primary):hover,
.md-typeset .md-button:not(.md-button--primary):focus {
    background: #f5f5f5;
    /* neutral-100 */
    color: #171717;
    /* neutral-900 */
    border-color: #a3a3a3;
    /* neutral-400 */
}

/* Dark mode button styling */
[data-md-color-scheme="slate"] .md-typeset .md-button--primary {
    background: #3b82f6;
    /* blue-500 */
    color: #ffffff !important;
}

[data-md-color-scheme="slate"] .md-typeset .md-button--primary:hover,
[data-md-color-scheme="slate"] .md-typeset .md-button--primary:focus {
    background: #1d4ed8;
    /* blue-700 */
}

[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary) {
    background: transparent;
    color: #a3a3a3;
    /* neutral-400 */
    border: 1px solid #525252;
    /* neutral-600 */
}

[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary):hover,
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary):focus {
    background: rgba(37, 99, 235, 0.15);
    color: #ffffff;
    border-color: #3b82f6;
    /* blue-500 */
}


/* =========================================================
   HOME (GOZEN)
   ========================================================= */

.gozen-hero {
    border-radius: var(--gozen-radius);
    border: 1px solid rgba(37, 99, 235, .15);
    background:
        radial-gradient(1200px circle at 10% 10%, rgba(37, 99, 235, .15), transparent 45%),
        radial-gradient(900px circle at 90% 20%, rgba(37, 99, 235, .08), transparent 40%),
        url("../assets/images/hero-bg.webp") center/cover no-repeat;
    overflow: hidden;
}

.gozen-hero__inner {
    padding: 1.35rem 1.55rem;
    /* Frosted glass feel */
    background: linear-gradient(135deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .70));
}

/* Hero layout grid */
.gozen-hero__grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 1rem;
    align-items: stretch;
}

@media (max-width: 60em) {
    .gozen-hero__grid {
        grid-template-columns: 1fr;
    }
}

.gozen-hero__kicker {
    font-weight: 800;
    color: var(--gozen-primary);
    letter-spacing: .02em;
    opacity: 1;
    /* Make it pop like brand */
    margin-bottom: .35rem;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.gozen-hero__title {
    margin: 0 0 .35rem 0;
    font-weight: 950;
    letter-spacing: -.012em;
    color: #0F172A;
    /* Navy-900 */
}

.gozen-hero__lead {
    margin: .25rem 0 0 0;
    max-width: 60ch;
    color: #334155;
    /* slate-700 - solid, readable */
}

.gozen-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .85rem;
}

.gozen-hero__note {
    margin-top: .85rem;
    font-size: .92rem;
    color: #475569;
    /* slate-600 - solid, readable */
}

/* Right-side hero box */
.gozen-hero__aside {
    border: var(--gozen-border);
    border-radius: var(--gozen-radius);
    padding: 1rem;
    background: rgba(255, 255, 255, .60);
    backdrop-filter: blur(10px);
}

.gozen-hero__asideTitle {
    font-weight: 900;
    margin-bottom: .7rem;
    color: #0F172A;
}

/* Quick links */
.gozen-quicklink {
    display: block;
    padding: .75rem .85rem;
    border-radius: var(--gozen-radius-sm);
    border: var(--gozen-border);
    background: rgba(255, 255, 255, .80);
    text-decoration: none !important;
    margin-bottom: .6rem;
}

.gozen-quicklink__title {
    display: block;
    font-weight: 800;
    line-height: 1.2;
    color: var(--gozen-primary);
}

.gozen-quicklink__desc {
    display: block;
    font-size: .92rem;
    margin-top: .15rem;
    color: #475569;
    /* slate-600 - solid, readable */
}

/* Chip row */
.gozen-chiprow {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .75rem;
}

.gozen-chip {
    display: inline-block;
    border-radius: 999px;
    padding: .25rem .55rem;
    font-weight: 700;
    font-size: .78rem;
    border: var(--gozen-border);
    background: rgba(255, 255, 255, .80);
    color: var(--gozen-primary);
}

/* Home grid */
.gozen-home-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: .75rem;
}


@media (min-width: 60em) {
    .gozen-home-grid {
        grid-template-columns: 1fr 1fr;
    }

    .gozen-card--feature {
        grid-column: 1 / -1;
    }
}

/* Cards */
.gozen-card {
    display: grid;
    grid-template-columns: 1fr;
    border: var(--gozen-border);
    border-radius: var(--gozen-radius);
    background: #fff;
    overflow: hidden;
    box-shadow: var(--gozen-shadow);
}

@media (min-width: 48em) {
    .gozen-card {
        grid-template-columns: 1.2fr .8fr;
    }

    .gozen-card--feature {
        grid-template-columns: 1.4fr .6fr;
    }
}

.gozen-card__content {
    padding: 1.05rem 1.15rem;
}

.gozen-card__title {
    font-weight: 900;
    margin-bottom: .25rem;
    color: #0F172A;
}

.gozen-card__text {
    margin-bottom: .75rem;
    color: #475569;
    /* slate-600 - solid, readable */
}

.gozen-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.gozen-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem;
    /* Light blue tint background */
    background: linear-gradient(135deg, rgba(37, 99, 235, .03), rgba(37, 99, 235, .06));
}

.gozen-card__media img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Fix it fast mini grid */
.gozen-home-fixgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: .75rem 0 1.25rem 0;
}

@media (max-width: 60em) {
    .gozen-home-fixgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 38em) {
    .gozen-home-fixgrid {
        grid-template-columns: 1fr;
    }
}

.gozen-mini {
    border: var(--gozen-border);
    border-radius: var(--gozen-radius);
    background: #fff;
    padding: 1rem;
    box-shadow: var(--gozen-shadow);
    display: flex;
    flex-direction: column;
}

.gozen-mini__title {
    margin: 0 0 .35rem 0;
    font-weight: 900;
    font-size: 1rem;
    color: #0F172A;
}

.gozen-mini__text {
    margin: 0 0 .85rem 0;
    opacity: .85;
    font-size: .92rem;
    color: #334155;
}


/* Make mini-tile button consistent */
.gozen-mini .md-button {
    margin-top: auto;
    width: 100%;
    text-align: center;
}

/* Popular guides */
.gozen-home-two {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 1rem;
    margin-top: .75rem;
}

@media (max-width: 60em) {
    .gozen-home-two {
        grid-template-columns: 1fr;
    }
}

.gozen-panel {
    border: var(--gozen-border);
    border-radius: var(--gozen-radius);
    background: #fff;
    padding: 1rem;
    box-shadow: var(--gozen-shadow);
}

.gozen-panel__title {
    font-weight: 900;
    margin-bottom: .6rem;
    color: #0F172A;
}

.gozen-panel__text {
    margin: 0;
    opacity: .85;
}

.gozen-checklist {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.gozen-checklist li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin: .45rem 0;
}

.gozen-check {
    font-weight: 900;
    color: var(--gozen-primary);
    /* Checkmarks now brand blue */
    line-height: 1.2;
}

/* Nice kbd */
.md-typeset kbd {
    border-radius: 8px;
    padding: .15rem .35rem;
}

/* Desktop-only hover polish */
@media (hover:hover) and (pointer:fine) {

    .gozen-card:hover,
    .gozen-mini:hover,
    .gozen-panel:hover {
        box-shadow: var(--gozen-shadow-hover);
        transform: translateY(-1px);
        transition: box-shadow .18s ease, transform .18s ease;
    }

    .gozen-quicklink:hover {
        transform: translateY(-1px);
        transition: transform .18s ease;
    }
}



/* =========================================================
   DARK MODE (Mapped to Midnight #020617)
   ========================================================= */

:root[data-md-color-scheme="slate"],
[data-md-color-scheme="slate"] {
    --md-default-bg-color: #020617 !important;
    /* Midnight */
    --md-default-fg-color: #f8fafc;
    /* Cool-50 */
    --md-default-fg-color--light: #cbd5e1;
    --md-default-fg-color--lighter: #94a3b8;
    --md-typeset-a-color: var(--gozen-primary-300);
    --md-code-bg-color: #0f172a;
    /* Navy-900 for code blocks */

    /* Additional Material theme backgrounds */
    --md-default-bg-color--light: #0f172a;
    --md-default-bg-color--lighter: #1e293b;
}

/* Typography and hierarchy */
[data-md-color-scheme="slate"] .md-typeset {
    color: #f8fafc;
}

[data-md-color-scheme="slate"] .md-typeset p,
[data-md-color-scheme="slate"] .md-typeset li {
    color: #cbd5e1;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3 {
    color: #f8fafc;
}

/* Sidebar clarity */
[data-md-color-scheme="slate"] .md-sidebar__scrollwrap {
    border-right: 1px solid rgba(148, 163, 184, .1);
}

[data-md-color-scheme="slate"] .md-nav__title,
[data-md-color-scheme="slate"] .md-nav__item--section>.md-nav__link {
    color: #f1f5f9;
}

[data-md-color-scheme="slate"] .md-nav__link {
    color: #94a3b8;
}

[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav__link:focus {
    color: #f8fafc;
}

/* Surfaces - Updated to Navy-800/900 mix */
[data-md-color-scheme="slate"] .gozen-card,
[data-md-color-scheme="slate"] .gozen-mini,
[data-md-color-scheme="slate"] .gozen-panel {
    background: rgba(15, 23, 42, 0.6);
    /* Navy-900 with transparency */
    border-color: rgba(51, 65, 85, 0.5);
    /* Border-main */
    box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}

/* Hero overlay for Dark Mode */
[data-md-color-scheme="slate"] .gozen-hero {
    position: relative;
    border-color: rgba(51, 65, 85, 0.5);
}

[data-md-color-scheme="slate"] .gozen-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Mesh-dark gradient simulation */
    background:
        radial-gradient(at 40% 20%, rgba(37, 99, 235, 0.15) 0px, transparent 50%),
        radial-gradient(at 80% 80%, rgba(37, 99, 235, 0.1) 0px, transparent 50%),
        linear-gradient(rgba(2, 6, 23, 0.85), rgba(2, 6, 23, 0.85)),
        url("../assets/images/hero-bg.webp") center/cover no-repeat;
}

[data-md-color-scheme="slate"] .gozen-hero__inner {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, rgba(2, 6, 23, .8), rgba(2, 6, 23, .6));
    border: 1px solid rgba(51, 65, 85, 0.3);
}

[data-md-color-scheme="slate"] .gozen-hero__title {
    color: #f8fafc;
}

[data-md-color-scheme="slate"] .gozen-hero__lead,
[data-md-color-scheme="slate"] .gozen-hero__note {
    color: #cbd5e1;
}

[data-md-color-scheme="slate"] .gozen-hero__kicker {
    color: var(--gozen-primary-300);
}

/* Aside + quick links */
[data-md-color-scheme="slate"] .gozen-hero__aside {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(51, 65, 85, 0.5);
}

[data-md-color-scheme="slate"] .gozen-hero__asideTitle {
    color: #f8fafc;
}

[data-md-color-scheme="slate"] .gozen-quicklink {
    background: rgba(30, 41, 59, 0.4);
    /* card-glass dark */
    border-color: rgba(51, 65, 85, 0.5);
}

[data-md-color-scheme="slate"] .gozen-quicklink__title {
    color: #f8fafc;
}

[data-md-color-scheme="slate"] .gozen-quicklink__desc,
[data-md-color-scheme="slate"] .gozen-panel__text {
    color: #94a3b8;
}

/* Chips */
[data-md-color-scheme="slate"] .gozen-chip {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(51, 65, 85, 0.5);
    color: var(--gozen-primary-300);
}


/* =========================================================
   MESH GRADIENT BACKGROUNDS (from Main Site)
   ========================================================= */

.bg-mesh-light {
    background-image:
        radial-gradient(at 40% 20%, rgba(59, 130, 246, 0.08) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgba(6, 182, 212, 0.08) 0px, transparent 50%),
        radial-gradient(at 0% 50%, rgba(139, 92, 246, 0.05) 0px, transparent 50%),
        radial-gradient(at 80% 80%, rgba(59, 130, 246, 0.06) 0px, transparent 50%);
}

.bg-mesh-dark {
    background-image:
        radial-gradient(at 40% 20%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgba(6, 182, 212, 0.12) 0px, transparent 50%),
        radial-gradient(at 0% 50%, rgba(139, 92, 246, 0.10) 0px, transparent 50%),
        radial-gradient(at 80% 80%, rgba(59, 130, 246, 0.12) 0px, transparent 50%);
}

/* Apply mesh gradient to main content area in dark mode */
[data-md-color-scheme="slate"] .md-main {
    background: var(--bg-main);
    position: relative;
}

[data-md-color-scheme="slate"] .md-main::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        radial-gradient(at 40% 20%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgba(6, 182, 212, 0.12) 0px, transparent 50%),
        radial-gradient(at 80% 80%, rgba(59, 130, 246, 0.12) 0px, transparent 50%);
}


/* =========================================================
   CONTENT READABILITY (from Main Site)
   ========================================================= */

/* Optimal line height for documentation */
.md-typeset {
    line-height: 1.75;
}

/* Optimal measure (line length) for readability */
.md-typeset p,
.md-typeset li {
    max-width: 75ch;
}

/* But allow admonition content to fill full width */
.md-typeset .admonition p,
.md-typeset details p {
    max-width: none;
}

/* Heading typography - use Plus Jakarta Sans */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
    font-family: 'Plus Jakarta Sans', var(--md-text-font);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.md-typeset h1 {
    font-weight: 800;
    letter-spacing: -0.03em;
}


/* =========================================================
   SCROLL-TO-TOP BUTTON
   ========================================================= */

.md-top {
    background: var(--brand-primary) !important;
    color: #fff !important;
    border-radius: 12px;
    box-shadow: var(--shadow-glow-blue);
    transition: all 0.3s ease;
}

.md-top:hover {
    background: var(--brand-dark) !important;
    transform: translateY(-2px);
}

.md-top svg {
    color: #fff;
}


/* =========================================================
   GLASS CARD UTILITY (from Main Site)
   ========================================================= */

.glass-card {
    background: var(--card-glass);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid var(--border-main);
    border-radius: var(--gozen-radius);
    padding: 32px;
    box-shadow: 0 0 40px -10px rgba(37, 99, 235, 0.1);
    transition: all 0.3s ease;
}

.glass-card:hover {
    transform: scale(1.01);
    box-shadow: 0 0 60px -10px rgba(37, 99, 235, 0.15);
}

/* =========================================================
   DARK MODE - COMPREHENSIVE FIXES
   ========================================================= */

/* Main body with data attribute */
body[data-md-color-scheme="slate"] {
    background-color: #020617 !important;
}

/* All major layout containers */
body[data-md-color-scheme="slate"] .md-container,
body[data-md-color-scheme="slate"] .md-main,
body[data-md-color-scheme="slate"] .md-main__inner,
body[data-md-color-scheme="slate"] .md-content,
body[data-md-color-scheme="slate"] .md-content__inner,
body[data-md-color-scheme="slate"] .md-typeset {
    background-color: #020617 !important;
}

/* Sidebar - dark background and proper text colors */
body[data-md-color-scheme="slate"] .md-sidebar,
body[data-md-color-scheme="slate"] .md-sidebar--primary,
body[data-md-color-scheme="slate"] .md-sidebar--secondary,
body[data-md-color-scheme="slate"] .md-sidebar__scrollwrap,
body[data-md-color-scheme="slate"] .md-nav {
    background-color: #020617 !important;
}

body[data-md-color-scheme="slate"] .md-sidebar__inner,
body[data-md-color-scheme="slate"] .md-nav--primary,
body[data-md-color-scheme="slate"] .md-nav--secondary {
    background-color: #020617 !important;
}

/* Card titles and text in dark mode */
[data-md-color-scheme="slate"] .gozen-card__title,
[data-md-color-scheme="slate"] .gozen-mini__title,
[data-md-color-scheme="slate"] .gozen-panel__title {
    color: #f8fafc;
}

[data-md-color-scheme="slate"] .gozen-card__text,
[data-md-color-scheme="slate"] .gozen-mini__text {
    color: #cbd5e1;
}

/* Checklist items in dark mode */
[data-md-color-scheme="slate"] .gozen-checklist li,
[data-md-color-scheme="slate"] .gozen-checklist a {
    color: #93c5fd;
}

[data-md-color-scheme="slate"] .gozen-checklist a:hover {
    color: #bfdbfe;
}

[data-md-color-scheme="slate"] .gozen-check {
    color: #4ade80;
}

/* Buttons in dark panels/cards */
[data-md-color-scheme="slate"] .gozen-card .md-button,
[data-md-color-scheme="slate"] .gozen-mini .md-button,
[data-md-color-scheme="slate"] .gozen-panel .md-button {
    background: rgba(37, 99, 235, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
    color: #93c5fd;
}

[data-md-color-scheme="slate"] .gozen-card .md-button:hover,
[data-md-color-scheme="slate"] .gozen-mini .md-button:hover,
[data-md-color-scheme="slate"] .gozen-panel .md-button:hover {
    background: rgba(37, 99, 235, 0.4);
    border-color: rgba(59, 130, 246, 0.8);
    color: #ffffff;
}

/* Card images/illustrations - brighten in dark mode */
[data-md-color-scheme="slate"] .gozen-card__image img {
    opacity: 0.9;
    filter: brightness(1.1);
}

/* Fix it fast section headers */
[data-md-color-scheme="slate"] .gozen-home-four .gozen-mini__title {
    color: #f8fafc;
}

/* Support links in dark mode */
[data-md-color-scheme="slate"] .gozen-panel a {
    color: #93c5fd;
}

[data-md-color-scheme="slate"] .gozen-panel a:hover {
    color: #bfdbfe;
}


/* =========================================================
   MOBILE RESPONSIVENESS
   ========================================================= */

@media (max-width: 768px) {

    /* Larger touch targets */
    .md-typeset .md-button {
        min-height: 48px;
        padding: 14px 20px;
    }

    /* Readable font sizes on mobile */
    .md-typeset {
        font-size: 16px;
    }

    /* Full-width buttons on mobile */
    .gozen-hero .md-button {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================
   ADMONITION FIXES
   Ensure title and content fill full width of box
   ========================================================= */

/* Fix admonition box and content not filling full width */
.md-typeset .admonition,
.md-typeset details {
    display: block;
    width: 100%;
    overflow: hidden;
}

.md-typeset .admonition-title,
.md-typeset summary {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Ensure admonition content paragraph fills full width */
.md-typeset .admonition>p,
.md-typeset .admonition>*:not(.admonition-title),
.md-typeset details>p,
.md-typeset details>*:not(summary) {
    max-width: 100% !important;
    width: auto;
}

/* Override the 75ch limit inside admonitions */
.md-typeset .admonition p,
.md-typeset .admonition li,
.md-typeset details p,
.md-typeset details li {
    max-width: none !important;
}