/* Alef font — unique name to avoid clashes with @remotion/google-fonts */
@font-face {
  font-family: 'AlefDate';
  src: url('/fonts/Alef-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AlefDate';
  src: url('/fonts/Alef-Regular.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Discovery font family */
@font-face {
  font-family: 'Discovery';
  src: url('/fonts/Discovery_Fs-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Discovery';
  src: url('/fonts/Discovery_Fs-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Discovery';
  src: url('/fonts/Discovery_Fs-Ultralight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Dedication spotlight transition */
.duration-400 {
  transition-duration: 400ms;
}

/* Hide static SEO content until React loads */
#root > header, #root > main, #root > footer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Discovery Regular for body text (MUST come first so bold overrides win) */
body, p, span, div, a, label, li {
  font-family: 'Discovery', 'Heebo', sans-serif !important;
  font-weight: 400 !important;
}

/* Discovery Black for headings and all children inside them */
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
  font-family: 'Discovery', 'Heebo', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: normal !important;
  color: #121a32;
}
strong, b, .font-bold, .font-extrabold, .font-black, .font-semibold {
  font-family: 'Discovery', 'Heebo', sans-serif !important;
  font-weight: 900 !important;
}

/* Buttons and inputs: Discovery Black for better usability */
button, input, textarea, select, [role="button"] {
  font-family: 'Discovery', 'Heebo', sans-serif !important;
  font-weight: 900 !important;
}

/* Navigation links: Regular weight */
nav a, nav button {
  font-weight: 400 !important;
}

/* Cooperative font — for video title element overlay (only 400; browser synthesizes bold) */
@font-face {
  font-family: 'Cooperative';
  src: url('/fonts/Cooperative-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TaamulaAAA';
  src: url('/fonts/TaamulaAAA-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Date overlay: AlefDate font (must use !important to beat global div/span Discovery rules) */
.date-overlay-alef {
  font-family: 'AlefDate', sans-serif !important;
  font-weight: 700 !important;
}

/* Title overlay: TaamulaAAA font for video title element (overrides global Discovery) */
.title-overlay-cooperative {
  font-family: 'TaamulaAAA', 'Cooperative', sans-serif !important;
  font-weight: 500 !important;
}
.title-overlay-bold {
  font-weight: 700 !important;
}

/* Lesson card title overrides (must use !important to beat global div/span rules) */
.lesson-date {
  color: #1e3a8a !important;
  font-weight: 900 !important;
}
.lesson-title {
  color: #d97706 !important;
  font-weight: 400 !important;
}

body {
  background-color: #f8fafc;
}

/* Ensure editor content aligns correctly */
.ql-align-right {
  text-align: right;
}
.ql-align-center {
  text-align: center;
}
.ql-align-left {
  text-align: left;
}
/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}