/* =================================================================
   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;
}

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

.tag-badge {
  font-family: var(--font-sans);
  background: transparent;
  color: var(--sl-color-text);
}

.tag-badge:hover {
  background: var(--sl-color-accent);
  color: var(--sl-color-bg);
}

.sl-markdown-content a.badge-link:hover {
  text-decoration: none;
}

.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;
}

.flash-card-activity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.flash-card {
  border: 1px solid var(--sl-color-border);
  border-radius: 8px;
  padding: 1.5rem;
  background-color: var(--sl-color-bg-inline-code);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.flash-card button {
  float: right;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background-color: var(--sl-color-accent);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.flash-card p {
  font-size: 1.5em;
  line-height: 1.5;
}

/* =================================================================
   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);
}