/**
 * Theme CSS Variables
 *
 * Brand tokens + layout. Semantic light/dark overrides live in theme.css.
 *
 * @package KohaJone
 */
/**
 * Metric-matched fallback faces: until a web font loads (font-display: swap),
 * text is set in a local system font scaled to the web font's metrics, so
 * the swap does not reflow the page. Values are derived from the Google Fonts
 * files (xWidthAvg weighted by English letter frequency vs. Arial / Courier New /
 * Times New Roman; ascent, descent and line gap from hhea) the way
 * next/font and Fontaine compute them.
 */

@font-face {
  font-family: "Libre Franklin Fallback";
  font-style: normal;
  font-weight: 400;
  src: local("Arial"), local("ArialMT");
  size-adjust: 104.49%;
  ascent-override: 92.45%;
  descent-override: 23.54%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Libre Franklin Fallback";
  font-style: normal;
  font-weight: 500;
  src: local("Arial"), local("ArialMT");
  size-adjust: 105.47%;
  ascent-override: 91.59%;
  descent-override: 23.32%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Libre Franklin Fallback";
  font-style: normal;
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 98.56%;
  ascent-override: 98.01%;
  descent-override: 24.96%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Libre Franklin Fallback";
  font-style: normal;
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 99.56%;
  ascent-override: 97.03%;
  descent-override: 24.71%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Libre Franklin Fallback";
  font-style: normal;
  font-weight: 800;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 100.57%;
  ascent-override: 96.05%;
  descent-override: 24.46%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Libre Franklin Fallback";
  font-style: normal;
  font-weight: 900;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 101.49%;
  ascent-override: 95.18%;
  descent-override: 24.24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Space Mono Fallback";
  font-style: normal;
  font-weight: 400;
  src: local("Courier New"), local("CourierNewPSMT");
  size-adjust: 101.98%;
  ascent-override: 109.82%;
  descent-override: 35.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Space Mono Fallback";
  font-style: normal;
  font-weight: 700;
  src: local("Courier New Bold"), local("CourierNewPS-BoldMT");
  size-adjust: 101.98%;
  ascent-override: 109.82%;
  descent-override: 35.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "IBM Plex Serif Fallback";
  font-style: normal;
  font-weight: 400;
  src: local("Times New Roman"), local("TimesNewRomanPSMT");
  size-adjust: 117.03%;
  ascent-override: 87.58%;
  descent-override: 23.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "IBM Plex Serif Fallback";
  font-style: normal;
  font-weight: 600;
  src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT");
  size-adjust: 113.6%;
  ascent-override: 90.23%;
  descent-override: 24.21%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "IBM Plex Serif Fallback";
  font-style: normal;
  font-weight: 700;
  src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT");
  size-adjust: 115.33%;
  ascent-override: 88.88%;
  descent-override: 23.85%;
  line-gap-override: 0%;
}

:root {
  /* Brand colours (same in both themes) */
  --color-white: #ffffff;
  --color-blue: #4063db;
  --black: #000;
  --green: #00905b;
  --color-red: #ff001e;
  --caption: #990f3d;
  --color-gray: #5a5a5a;
  --color-amber: #7a4e00;
  --color-purple: #6b21a8;

  /* Theme colours — light values; dark overrides in [data-theme="dark"] */
  --bg-primary: #ffffff;
  --bg-tint: #f2f4fb; /* tinted homepage bands */
  --header-bg: var(--bg-primary);
  --text-primary: #000000;
  --text-secondary: #000000;
  --text-muted: #000000;
  --text-color: #2a2a2a; /* body ink + links */
  --text-soft: color-mix(in srgb, var(--text-primary) 72%, transparent);
  --text-faint: color-mix(in srgb, var(--text-primary) 46%, transparent);
  --rule-color: color-mix(in srgb, var(--text-primary) 14%, transparent);
  --accent-hover: #2a2a2a;
  --border-color: #000000;
  --border-light: #ffffff;
  /* Dark chrome (footer, top bar, modals, dark bands) */
  --surface-dark: #000000;
  --sticky-header-bg: var(--surface-dark);
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --kj-sec-color: var(--text-primary);

  /* Footer */
  --footer-border: #333333;
  --footer-link: #b0b0b0;
  --footer-text: #ffffff;
  --footer-btn-bg: #ffffff;
  --footer-btn-bg-hover: #e8e8e8;
  --footer-btn-text: #000000;

  /* Mobile menu modal follows the header surface */
  --menu-modal-bg: var(--header-bg);
  --menu-modal-fg: var(--text-primary);
  /* Default header logo is the dark SVG; invert on dark / over-hero chrome. */
  --nav-logo-invert: 0;
  /* Menu-open logo is the light SVG; invert on light menu so it reads black. */
  --menu-logo-invert: 1;

  /* Scrollbar */
  --kj-scrollbar-size: 10px;
  --kj-scrollbar-thumb: #e4e4e7;
  --kj-scrollbar-thumb-hover: #d4d4d8;

  color-scheme: light;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Typography */
  --primaryFont: "Public Sans", sans-serif;
  --serifFont:
    "IBM Plex Serif", "IBM Plex Serif Fallback", Georgia, "Times New Roman",
    serif;
  /* Small UI: dates, captions, tags, share labels, category chips */
  --monoFont: "Space Mono", "Space Mono Fallback", monospace;

  /* Section / category headings */
  --kj-heading-size: 32px;
  --kj-heading-size-lg: 38px;
  --kj-heading-size-compact: 24px;
  --kj-heading-weight: 900;
  --kj-heading-tracking: -0.03em;
  --kj-heading-line: 1.05;
  --kj-heading-rule-gap: 20px;
  --kj-heading-rule-opacity: 0.16;
  --kj-subheading-size: 16px;
  --kj-subheading-weight: 400;

  /* Section rhythm + accents (shared with homepage) */
  --kj-section-gap: 48px;
  --kj-ad-bg: color-mix(in srgb, var(--text-primary) 6%, transparent);
  --kj-border: 1px dashed
    color-mix(in srgb, var(--text-primary) 18%, transparent);
  --kj-border-reverse: 1px dashed
    color-mix(in srgb, var(--color-white, #fff) 18%, transparent);

  /* Layout / containers — one gutter scale for header, content, heroes */
  --container-max-width: 1300px;
  --container-padding-x: clamp(13px, 2.5vw + 4px, 32px);
  --section-bleed-x: var(--container-padding-x);

  /* Mobile menu chrome; JS overwrites with the measured bar height */
  --kj-mobile-header-h: 60px;
  --kj-above-site-inset: 0px;
  --kj-side-rail-gap: 16px;
  --kj-side-rail-top: 128px;

  /* Space between article tiles / main+sidebar columns (hero, category lead, layout skins) */
  --kj-article-gap: 12px;
  --kj-layout-sidebar-gap: 24px;
  /* Space between stacked items inside an article card body (date, title, chips). */
  --kj-card-body-gap: 7.2px;
  /* Space between a section head (title + rule) and its articles, site-wide. */
  --kj-section-head-gap: 16px;
  --kj-layout-stack-bp: 1180px;
  --kj-sidebar-block-gap: 32px;
  --kj-sidebar-block-gap-mobile: 26px;
  /* Matches block editor layout flow (see .is-layout-flow in post content). */
  --wp--style--block-gap: 1.25em;

  /* Article listing tiles: coupled image + title hover */
  --kj-article-hover-image-opacity: 0.95;
  --kj-article-hover-title-thickness: 0.11em;
  --kj-article-hover-title-offset: 0.2em;

  /* Headline sizes by role. Change sizes here, not in component CSS. */
  --kj-title-article: clamp(36px, 5vw, 52px); /* article page h1 */
  --kj-title-display: clamp(26px, 3.4vw, 44px); /* hero slider */
  --kj-title-page-lead: clamp(26px, 3vw, 36px); /* category featured story */
  --kj-title-section: 24px; /* legacy section headings (spote, studentet, league) */
  --kj-title-lead: clamp(
    20px,
    2.2vw,
    27px
  ); /* lead story (layout hero, rail feature) */
  --kj-title-feature: 20px; /* latest / most-read carousels, home card grid */
  --kj-title-card-lg: 22px; /* card grid, shorts */
  --kj-title-card: 20px; /* strip cards, front latest, editorial, forum */
  --kj-title-item: 18px; /* stack items, hero-left list, popular posts */
  --kj-title-list: 18px; /* text rows, thumb rows, rail lists */
  --kj-title-compact: 17px; /* web TV cards */
  --kj-title-label: 14px; /* small block labels (hero-left, timeline) */

  /* Supporting text around headlines. */
  --kj-text-dek: clamp(18px, 2.2vw, 22px); /* article dek, issue date */
  --kj-text-kicker: 16px; /* section heads, hero overlay date */
  --kj-text-meta: 14px; /* dates, exclusive badge, share header */
}

[data-theme="dark"] {
  --color-blue: #4ed6d6;
  --caption: #d4637a;
  --color-gray: #9a9a9a;
  --color-amber: #d9a441;
  --color-purple: #b98ae6;
  --bg-primary: #0a0a0a;
  --bg-tint: #161616;
  --text-primary: #f1f1f1;
  --text-secondary: #a0a0a0;
  --text-muted: #707070;
  --text-color: var(--text-primary);
  --accent-hover: #ffffff;
  --border-color: #222222;
  --border-light: #1c1c1c;
  --surface-dark: var(--bg-primary);
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --menu-logo-invert: 0;
  --kj-scrollbar-thumb: #27272a;
  --kj-scrollbar-thumb-hover: #3f3f46;
  /* Native controls, scrollbars and form fields follow the dark palette. */
  color-scheme: dark;
}

@media screen and (max-width: 767px) {
  :root {
    --kj-title-article: 36px;
    --kj-title-display: clamp(22px, 5.5vw + 5px, 33px);
    --kj-title-feature: 24px;
    --kj-title-item: 20px;
    --kj-title-compact: 16px;
    --kj-text-kicker: 14px;
  }
}