/* =================================================================
   FONT DECLARATIONS
   ================================================================= */

/* MinionPro (Serif font) */
@font-face {
  font-family: "MinionPro";
  src: url("/fonts/MinionPro_Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MinionPro";
  src: url("/fonts/MinionPro_It.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "MinionPro";
  src: url("/fonts/MinionPro_Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MinionPro";
  src: url("/fonts/MinionPro_BoldIt.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* MyriadPro (Sans-serif font) */
@font-face {
  font-family: "MyriadPro";
  src: url("/fonts/MyriadPro_Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MyriadPro";
  src: url("/fonts/MyriadPro_It.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "MyriadPro";
  src: url("/fonts/MyriadPro_Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MyriadPro";
  src: url("/fonts/MyriadPro_BoldIt.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Devanagari fonts with auto-detection via unicode-range */
@font-face {
  font-family: "DevanagariAuto";
  src: url("/fonts/Martel-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0900-097F, U+200C-200D; /* Devanagari block + zero-width joiners */
}

@font-face {
  font-family: "DevanagariAuto";
  src: url("/fonts/Martel-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+200C-200D;
}

@font-face {
  font-family: "DevanagariAuto";
  src: url("/fonts/Martel-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+200C-200D;
}

@font-face {
  font-family: "DevanagariAuto";
  src: url("/fonts/Martel-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+200C-200D;
}

@font-face {
  font-family: "DevanagariAuto";
  src: url("/fonts/Martel-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+200C-200D;
}

/* =================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ================================================================= */

:root {
  /* Font stacks */
  --font-sans: "DevanagariAuto", "MyriadPro", system-ui, sans-serif;
  --font-serif: "DevanagariAuto", "MinionPro", Georgia, serif;
  --font-devanagari: "DevanagariAuto", "Noto Sans Devanagari", sans-serif;

  /* Starlight overrides */
  --sl-font-system: var(--font-sans);
  --sl-font: var(--font-sans);

  /* Light theme - warm paper-like background */
  --sl-color-bg: #fefcf8; /* Warm off-white, like aged paper */
  --sl-color-bg-nav: #faf8f4; /* Slightly darker for navigation */
  --sl-color-bg-sidebar: #f8f6f2; /* Even softer for sidebar */
  --sl-color-bg-inline-code: #f4f2ee; /* Subtle for inline code */

  /* Custom accent color */
  --sl-color-accent: #336699;
  --sl-color-accent-low: #336699;
  --sl-color-accent-high: #336699;

  /* Gender badge colors */
  /* Cyan for masculine */
  --sl-badge-note-bg: #3399cc;
  --sl-badge-note-border: #3388bb;
  /* Magenta for feminine */
  --sl-badge-tip-bg: #cc3366;
  --sl-badge-tip-border: #bb3355;
}

/* Dark theme overrides */
[data-theme="dark"] {
  --sl-color-bg: #1a1814; /* Dark warm background */
  --sl-color-bg-nav: #1e1c18;
  --sl-color-bg-sidebar: #16140f;
  --sl-color-bg-inline-code: #2a2620;

  --sl-color-accent: #5ba3c4; /* Warmer blue-teal for dark theme */
  --sl-color-accent-low: #5ba3c4;
  --sl-color-accent-high: #6bb4d5;
  --sl-color-text-invert: #1a1814;
}

/* =================================================================
   BASE STYLES
   ================================================================= */

body {
  font-family: var(--font-sans);
  background-color: var(--sl-color-bg);
}

/* Content areas use serif font */
p,
.sl-markdown-content p,
blockquote,
.content,
.prose,
.sl-markdown-content {
  font-family: var(--font-serif);
  font-size: 1.25rem; /* 18px, up from default 16px */
}

/* UI elements remain sans-serif */
.sl-nav,
.sidebar-content,
.sl-page-title,
.card,
.starlight-card,
button,
.sl-search-box,
nav,
header,
footer {
  font-family: var(--font-sans);
}

/* Headings */
h1,
.sl-markdown-content h1,
h2,
.sl-markdown-content h2,
h3,
.sl-markdown-content h3,
h4,
.sl-markdown-content h4 {
  font-family: var(--font-sans);
  font-weight: 700;
}

h5,
.sl-markdown-content h5,
h6,
.sl-markdown-content h6 {
  font-family: var(--font-sans);
  font-weight: 400;
}

.gender-badge {
  margin-left: 0.5rem;
  vertical-align: middle;
  font-family: var(--font-sans);
}

.word-entry {
  margin-bottom: 2em;
}

.icon-inline {
  display: inline-block;
  vertical-align: text-top;
  position: relative;
  top: -0.1em;
}

.sl-markdown-content a,
.tagline a {
  text-decoration: none;
  color: var(--sl-color-accent);
}
.sl-markdown-content a:hover,
.tagline a:hover {
  text-decoration: underline;
}

.tagline {
  max-width: max-content;
}

mark {
  background-color: rgba(255, 255, 0, 0.2);
}

/* Override the exact Starlight rule that's causing issues */
.sl-markdown-content
  [yaml-editor]
  :not(a, strong, em, del, span, input, code, br)
  + :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
  margin-top: 0 !important;
}

/* Also target if the YAMLEditor itself is within sl-markdown-content */
.sl-markdown-content
  :not(a, strong, em, del, span, input, code, br)
  + [yaml-editor]:not(
    a,
    strong,
    em,
    del,
    span,
    input,
    code,
    br,
    :where(.not-content *)
  ) {
  margin-top: 0 !important;
}

/* =================================================================
   LANGUAGE-SPECIFIC STYLES
   ================================================================= */

/* Devanagari text optimization */
[lang="hi"],
[lang="sa"],
.devanagari {
  font-family: var(--font-devanagari) !important;
  font-feature-settings:
    "kern" 1,
    "liga" 1;
  text-rendering: optimizeLegibility;
}

/* =================================================================
   UTILITY CLASSES
   ================================================================= */

/* Font family utilities */
.serif {
  font-family: var(--font-serif);
}
.sans {
  font-family: var(--font-sans);
}
.devanagari-font {
  font-family: var(--font-devanagari);
}

/* Font weight utilities */
.font-light {
  font-weight: 300;
}
.font-regular {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.font-black {
  font-weight: 900;
}

/* Combined font family + weight utilities */
.serif-regular {
  font-family: var(--font-serif);
  font-weight: 400;
}
.serif-bold {
  font-family: var(--font-serif);
  font-weight: 700;
}
.sans-regular {
  font-family: var(--font-sans);
  font-weight: 400;
}
.sans-bold {
  font-family: var(--font-sans);
  font-weight: 700;
}

/* Devanagari-specific weight utilities */
.hindi-light {
  font-family: var(--font-devanagari);
  font-weight: 300;
}
.hindi-regular {
  font-family: var(--font-devanagari);
  font-weight: 400;
}
.hindi-semibold {
  font-family: var(--font-devanagari);
  font-weight: 600;
}
.hindi-bold {
  font-family: var(--font-devanagari);
  font-weight: 700;
}
.hindi-black {
  font-family: var(--font-devanagari);
  font-weight: 900;
}

/* Legacy aliases */
.minion-regular {
  font-family: var(--font-serif);
  font-weight: 400;
}
.minion-bold {
  font-family: var(--font-serif);
  font-weight: 700;
}
.myriad-regular {
  font-family: var(--font-sans);
  font-weight: 400;
}
.myriad-bold {
  font-family: var(--font-sans);
  font-weight: 700;
}

/* =================================================================
   THEME ENHANCEMENTS
   ================================================================= */

.sl-markdown-content,
main {
  background-color: var(--sl-color-bg);
}