@import "./fonts.css";

/* =============================================================================
   DESIGN TOKENS
   Central source of truth for all brand colors and semantic aliases.
   Change values here to update the entire theme.
   ============================================================================= */

:root {
    /* --- Brand palette --- */
    --brand-navy: #001838;
    --brand-dark: #191910;
    --brand-yellow: #FFD432;
    --brand-red: #FF6A38;
    --brand-blue: #5773FF;
    --brand-green: #70C038;

    /* --- Neutral palette (Bootstrap-style scale) --- */
    --neutral-white: #F8F6F2;
    --neutral-gray-50: #f8f9fa;
    --neutral-gray-100: #e9ecef;
    --neutral-gray-200: #dee2e6;
    --neutral-gray-700: #495057;
    --neutral-gray-800: #343a40;
    --neutral-gray-900: #212529;

    /* --- GSD scale (site-specific fine-grained grays) --- */
    --gsd-50: #f8f6f2;
    --gsd-100: #f1ede4;
    --gsd-200: #dee0e3;
    --gsd-300: #b2b7bd;
    --gsd-400: #868e93;
    --gsd-500: #5e656e;
    --gsd-600: #383d42;
    --gsd-700: #181f25;
    --gsd-800: #111518;
    --gsd-900: #101519;

    /* --- Semantic aliases (use these in component rules below) --- */
    --text-light: var(--brand-navy);
    --text-dark: white;
    --bg-light: var(--neutral-white);
    --bg-dark: var(--gsd-800);
    --content-bg-light: white;
    --content-bg-dark: var(--gsd-700);

    /* --- Typography --- */
    --font-display: 'Moranga';
}


/* =============================================================================
   LIGHT MODE THEME  [data-md-color-scheme="default"]
   MkDocs Material CSS variable overrides for the light color scheme.
   ============================================================================= */

[data-md-color-scheme="default"] {
    /* Header background & foreground */
    --md-primary-fg-color: var(--neutral-white);
    --md-primary-fg-color--light: var(--neutral-gray-50);
    --md-primary-fg-color--dark: var(--neutral-gray-100);
    --md-primary-bg-color: var(--brand-navy);
    --md-primary-bg-color--light: var(--neutral-gray-700);

    /* Accent (interactive highlights, active links) */
    --md-accent-fg-color: var(--brand-navy);
    --md-accent-fg-color--transparent: rgba(0, 24, 56, 0.1);
    --md-accent-bg-color: var(--brand-yellow);
    --md-accent-bg-color--light: rgba(255, 212, 50, 0.2);

    /* Page & content area backgrounds */
    --md-default-bg-color: var(--bg-light);
    --md-admonition-bg-color: var(--content-bg-light);

    /* Body text */
    --md-default-fg-color: var(--text-light);

    /* Code syntax colors */
    --md-code-hl-string-color: #007A55;
    --md-code-hl-name-color: #7008E7;
    --md-code-hl-keyword-color: #007595;
    --md-code-hl-number-color: var(--brand-red);
    --md-code-hl-constant-color: #007A55;
    --md-code-hl-punctuation-color: #27272A;

    /* Inline and typeset link color */
    --md-typeset-a-color: var(--brand-blue);
}


/* =============================================================================
   DARK MODE THEME  [data-md-color-scheme="slate"]
   MkDocs Material CSS variable overrides for the dark color scheme.
   ============================================================================= */

[data-md-color-scheme="slate"] {
    /* Header background & foreground */
    --md-primary-fg-color: var(--brand-navy);
    --md-primary-fg-color--light: #002451;
    --md-primary-fg-color--dark: #001020;
    --md-primary-bg-color: var(--neutral-white);
    --md-primary-bg-color--light: var(--neutral-gray-200);

    /* Accent */
    --md-accent-fg-color: var(--brand-yellow);
    --md-accent-fg-color--transparent: rgba(255, 212, 50, 0.1);
    --md-accent-bg-color: var(--brand-navy);
    --md-accent-bg-color--light: rgba(0, 24, 56, 0.2);

    /* Page backgrounds */
    --md-default-bg-color: var(--bg-dark);
    --md-default-bg-color--light: #161b22;
    --md-default-bg-color--lighter: #21262d;
    --md-default-bg-color--lightest: #30363d;

    /* Body text */
    --md-typeset-bg-color: var(--neutral-white);
    --md-default-fg-color: var(--text-dark);

    /* Code syntax colors — yellow-forward for YAML readability */
    --md-code-hl-string-color: #79c0ff;
    --md-code-hl-name-color: #d2a8ff;
    --md-code-hl-keyword-color: #eab40a;
    --md-code-hl-number-color: var(--brand-red);
    --md-code-hl-constant-color: #79c0ff;
    --md-code-hl-punctuation-color: #c9d1d9;

    /* Inline link and code colors */
    --md-typeset-a-color: var(--brand-yellow);
    --md-typeset-code-color: var(--brand-yellow);
}

/* =============================================================================
   HEADER
   Top bar: background, title/topic text, icon buttons.
   ============================================================================= */

/*==== Scheme-agnostic ===*/

/* Title and topic text */
.md-header__topic {
    font-family: var(--font-display), 'serif';
}

.md-header__topic:first-child {
    font-weight: normal;
}

/* Logo sizing */
.md-header__button.md-logo {
    padding: 0;
    margin: 0;
}

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

/* Site title sizing */
[dir=ltr] .md-header__title {
    margin-left: 0.5rem;
    font-size: 1.5rem;
}

/*==== Default scheme ===*/
[data-md-color-scheme="default"] .md-header {
    background-color: rgb(54, 148, 0);
    border-bottom: 1px solid var(--gsd-100);
    box-shadow: none;
}

[data-md-color-scheme="default"] .md-header__title,
[data-md-color-scheme="default"] .md-header__topic {
    color: var(--neutral-white);
}

[data-md-color-scheme="default"] .md-header__button {
    color: var(--brand-navy);
}

/*==== Slate scheme ===*/
[data-md-color-scheme="slate"] .md-header {
    background-color: var(--gsd-700);
}

[data-md-color-scheme="slate"] .md-header__title,
[data-md-color-scheme="slate"] .md-header__topic {
    color: var(--neutral-white);
}

[data-md-color-scheme="slate"] .md-header__button {
    color: var(--neutral-white);
}


/* =============================================================================
   LEFT SIDEBAR NAVIGATION
   Left sidebar: section titles, active links, nested nav headings.
   ============================================================================= */

/* Active nav item */
.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code {
    color: var(--md-accent-fg-color);
    font-weight: bold;
}

/* Top-level sidebar title*/
.md-nav--primary .md-nav__title {
    font-family: var(--font-display), 'serif';
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--text-light);
}

[data-md-color-scheme="slate"] .md-nav--primary .md-nav__title {
    color: var(--text-dark);
}


/* =============================================================================
   RIGHT SIDEBAR NAVIGATION
   ============================================================================= */

/* Section headings within the sidebar */
.md-nav__item--section>.md-nav__link>.md-ellipsis,
.md-nav--secondary>.md-nav__title {
    font-family: var(--font-display), 'serif';
    font-weight: 500;
    font-size: 1rem;
}

[data-md-color-scheme="default"] .md-nav--secondary>.md-nav__title {
    color: var(--text-light);
}

[data-md-color-scheme="slate"] .md-nav--secondary>.md-nav__title {
    color: var(--text-dark);
}

/* TOC banner image*/
.md-sidebar--secondary::before {
    content: "";
    display: block;
    width: 100%;
    height: 150px;
    background-image: url('../assets/micipsa_coin.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-bottom: 1rem;
    margin-left: 0.5rem;
}

/* Hide the TOC banner on small screens where the sidebar collapses */
@media screen and (max-width: 76.1875em) {
    .md-sidebar--secondary::before {
        display: none;
    }
}


/* =============================================================================
   CONTENT AREA
   The main article card, headings, body text, and max-width grid.
   ============================================================================= */

/* Max page width */
.md-grid {
    max-width: 1500px;
}

/* Article card (rounded, bordered) */
.md-content .md-typeset {
    padding: 0 1.5rem 1.5rem;
    border-radius: 1.5rem;
    background: var(--content-bg-light);
    border: 1px solid var(--gsd-100);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

[data-md-color-scheme="slate"] .md-content .md-typeset {
    background: var(--content-bg-dark);
    border: none;
}

/* Hide the "edit this page" pencil button */
.md-content__button {
    display: none !important;
}

/* Headings — display font, no bold */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
    font-family: var(--font-display), serif;
    font-weight: 400;
    padding-top: 0.5rem;
    margin: 0;
}

[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3,
[data-md-color-scheme="default"] .md-typeset h4,
[data-md-color-scheme="default"] .md-typeset h5,
[data-md-color-scheme="default"] .md-typeset h6 {
    color: var(--text-light);
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
    color: var(--text-dark);
}

/* Body text rendering */
.md-typeset p {
    text-rendering: optimizeLegibility;
}

/* Call-to-action buttons inside content */
.md-typeset .md-button {
    border-radius: 0.5rem;
    color: var(--md-accent-fg-color);
}

/* Text selection highlight */
::selection {
    background-color: var(--brand-yellow);
    color: var(--brand-navy);
}

::-moz-selection {
    background-color: var(--brand-yellow);
    color: var(--brand-navy);
}


/* =============================================================================
   CODE BLOCKS
   Inline code, fenced code, Pygments syntax classes, filename tabs.
   ============================================================================= */

/* Inline code chips */
.md-typeset code {
    background-color: var(--gsd-50);
    color: var(--text-light);
    border-radius: 0.5rem;
}

[data-md-color-scheme="slate"] .md-typeset code {
    background-color: var(--gsd-600);
    color: var(--gsd-50);
}

/* Fenced code block background (dark mode) */
[data-md-color-scheme="slate"] .md-typeset code,
[data-md-color-scheme="slate"] .md-typeset pre>code {
    background-color: var(--bg-dark);
}

/* Code inside links */
[data-md-color-scheme="default"] .md-typeset a>code {
    color: var(--brand-blue);
}

[data-md-color-scheme="slate"] .md-typeset a>code {
    color: var(--brand-yellow);
}

/* Prevent line-wrapping in table cells */
table code {
    white-space: nowrap;
    word-break: keep-all;
}

/* Filename label above a fenced block */
.highlight span.filename {
    padding: 0.25rem 0.5rem;
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
}

[data-md-color-scheme="default"] .highlight span.filename {
    background-color: var(--gsd-100) !important;
}

[data-md-color-scheme="slate"] .highlight span.filename {
    background-color: var(--gsd-600) !important;
}

/* --- Pygments YAML/code syntax classes --- */

/* Light mode: YAML keys (.nt, .na, .nl) */
[data-md-color-scheme="default"] .highlight .nt,
[data-md-color-scheme="default"] .highlight .na,
[data-md-color-scheme="default"] .highlight .nl {
    color: #996600;
}

/* Light mode: strings (.s, .s1, .s2, .sb, .sc) */
[data-md-color-scheme="default"] .highlight .s,
[data-md-color-scheme="default"] .highlight .s1,
[data-md-color-scheme="default"] .highlight .s2,
[data-md-color-scheme="default"] .highlight .sb,
[data-md-color-scheme="default"] .highlight .sc {
    color: #b8860b;
}

/* Light mode: punctuation */
[data-md-color-scheme="default"] .highlight .p {
    color: var(--neutral-gray-700);
}

/* Dark mode: YAML keys */
[data-md-color-scheme="slate"] .highlight .nt,
[data-md-color-scheme="slate"] .highlight .na,
[data-md-color-scheme="slate"] .highlight .nl {
    color: var(--brand-yellow);
}

/* Dark mode: strings */
[data-md-color-scheme="slate"] .highlight .s,
[data-md-color-scheme="slate"] .highlight .s1,
[data-md-color-scheme="slate"] .highlight .s2,
[data-md-color-scheme="slate"] .highlight .sb,
[data-md-color-scheme="slate"] .highlight .sc {
    color: #ffe066;
}

/* Dark mode: punctuation */
[data-md-color-scheme="slate"] .highlight .p {
    color: var(--neutral-gray-200);
}


/* =============================================================================
   TABBED CONTENT
   Horizontal tab sets — prevents overflow on narrow screens.
   ============================================================================= */

.md-typeset .tabbed-set {
    max-width: 100%;
    overflow-x: auto;
}

.md-typeset .tabbed-labels {
    box-shadow: none;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.md-typeset .tabbed-labels>label {
    white-space: nowrap;
}


/* =============================================================================
   ADMONITIONS  (note / tip / warning / danger)
   Brand-colored left-border + tinted title background.
   ============================================================================= */

.md-typeset .admonition.note,
.md-typeset details.note {
    border-color: var(--brand-blue);
}

.md-typeset .note>.admonition-title,
.md-typeset .note>summary {
    background-color: rgba(87, 115, 255, 0.1);
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
    border-color: var(--brand-green);
}

.md-typeset .tip>.admonition-title,
.md-typeset .tip>summary {
    background-color: rgba(112, 192, 56, 0.1);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
    border-color: var(--brand-yellow);
}

.md-typeset .warning>.admonition-title,
.md-typeset .warning>summary {
    background-color: rgba(255, 212, 50, 0.1);
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
    border-color: var(--brand-red);
}

.md-typeset .danger>.admonition-title,
.md-typeset .danger>summary {
    background-color: rgba(255, 106, 56, 0.1);
}


/* =============================================================================
   CODE ANNOTATION TOOLTIPS
   The popup bubble shown when you click an annotation marker (e.g. (1)).
   ============================================================================= */

.md-tooltip {
    border-radius: 0.5rem;
}

[data-md-color-scheme="default"] .md-tooltip {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.2);
}

[data-md-color-scheme="slate"] .md-tooltip {
    box-shadow: 0 0 0 1px var(--gsd-500);
}

.md-tooltip .md-tooltip__inner.md-typeset {
    padding: 0.375rem 0.5rem;
    border-radius: 0.75rem;
    border: none;
}

/* Tooltip background + text */
[data-md-color-scheme="default"] .md-tooltip,
[data-md-color-scheme="default"] .md-tooltip .md-tooltip__inner.md-typeset {
    background-color: white;
    color: var(--brand-navy);
}

[data-md-color-scheme="slate"] .md-tooltip,
[data-md-color-scheme="slate"] .md-tooltip .md-tooltip__inner.md-typeset {
    background-color: var(--gsd-600);
    color: var(--neutral-white);
}

/* Code chips inside tooltips */
[data-md-color-scheme="default"] .md-tooltip__inner code {
    background-color: var(--gsd-50);
    color: var(--brand-navy);
}

[data-md-color-scheme="slate"] .md-tooltip__inner code {
    background-color: var(--gsd-700);
    color: var(--brand-yellow);
}


/* =============================================================================
   SEARCH
   Search bar and results tray.
   ============================================================================= */

.md-search__form {
    background: none;
}

.md-search__input {
    border-radius: 0.25rem;
}

/* Input, metadata bar, and results tray backgrounds */
[data-md-color-scheme="default"] .md-search__input,
[data-md-color-scheme="default"] .md-search-result__meta,
[data-md-color-scheme="default"] .md-search__output {
    background-color: var(--bg-light);
}

[data-md-color-scheme="slate"] .md-search__input,
[data-md-color-scheme="slate"] .md-search-result__meta,
[data-md-color-scheme="slate"] .md-search__output {
    background-color: var(--bg-dark);
}

/* Individual result item cards */
[data-md-color-scheme="default"] .md-search-result__article {
    background-color: white;
}

[data-md-color-scheme="slate"] .md-search-result__article {
    background-color: var(--gsd-700);
}


/* =============================================================================
   FOOTER
   Footer wrapper, prev/next navigation links, meta bar, logo.
   ============================================================================= */

/* Transparent outer wrapper so the page background shows through */
.md-footer {
    background-color: transparent;
}

.md-footer__inner {
    padding-bottom: 1.5rem;
}

/* Meta bar (copyright row) */
[data-md-color-scheme="default"] .md-footer-meta {
    background-color: white;
    color: var(--text-light);
    border-top: 1px solid var(--gsd-100);
}

[data-md-color-scheme="slate"] .md-footer-meta {
    background-color: var(--gsd-700);
    color: var(--text-dark);
}

/* Links inside the meta bar */
[data-md-color-scheme="default"] .md-footer-meta.md-typeset a {
    color: var(--text-light);
}

[data-md-color-scheme="default"] .md-footer-meta.md-typeset a:hover {
    color: var(--text-light);
    opacity: 0.6;
}

/* Copyright text color */
[data-md-color-scheme="default"] .md-copyright {
    color: var(--gsd-400);
}

/* Prev/next navigation cards */
.md-footer__link {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 4rem;
    padding: 0 1rem;
    border-radius: 1rem;
    font-family: var(--font-display), serif;
}

.md-footer__title {
    padding: 0;
    margin: 0;
}

[data-md-color-scheme="default"] .md-footer__link {
    color: var(--md-accent-fg-color);
    border: 1px solid var(--gsd-100);
}

[data-md-color-scheme="slate"] .md-footer__link {
    background-color: var(--gsd-700);
    color: var(--text-dark);
}

[data-md-color-scheme="default"] .md-footer__link:hover,
[data-md-color-scheme="slate"] .md-footer__link:hover {
    border: 1px solid var(--brand-yellow);
}

/* Brand logo in the footer */
.prefix-logo {
    transform: scale(0.8);
}

/* Swap logo variant based on color scheme */
[data-md-color-scheme="default"] .prefix-logo__dark {
    display: none;
}

[data-md-color-scheme="slate"] .prefix-logo__light {
    display: none;
}

.md-footer-meta__item--prefix-logo {
    height: 2rem;
    margin: 0.5rem 0;
    display: flex;
}

.md-footer-meta__item--prefix-logo img {
    height: 100%;
}

/* Social icon links (center the icon inside the anchor) */
.md-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =============================================================================
   QUOTE SCROLL WIDGET
   A horizontally-scrollable row of pull-quote cards (custom component).
   ============================================================================= */

.quote-scroll-wrapper {
    max-width: 100%;
    overflow-x: auto;
    padding: 1rem 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.quote-scroll {
    display: flex;
    gap: 1rem;
    padding: 0 1rem;
    scroll-behavior: smooth;
}

.quote-card {
    flex: 0 0 320px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 1rem;
    font-style: italic;
}

.quote-card p {
    margin-bottom: 0.5rem;
}