/* ============================================================
   Oliviero Fast Food — Custom Styles
   Palette #7 Orange/Teal | Fonts #7 Lora/Inter
   ============================================================ */

/* --- Base resets --- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Focus states (accessibility) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Line clamp utilities --- */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Hero overlay gradient --- */
.hero-overlay {
  background: linear-gradient(
    135deg,
    rgba(28,25,23,0.82) 0%,
    rgba(28,25,23,0.45) 50%,
    rgba(28,25,23,0.2) 100%
  );
}

/* --- Article card image hover --- */
.card-img {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.group:hover .card-img {
  transform: scale(1.05);
}

/* --- Smooth transitions --- */
a, button {
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* --- Section split image overlay --- */
.split-overlay {
  background: linear-gradient(
    to right,
    rgba(28,25,23,0.88) 0%,
    rgba(28,25,23,0.6) 60%,
    rgba(28,25,23,0.25) 100%
  );
}

/* --- Reading progress bar --- */
.reading-progress {
  height: 3px;
  background: linear-gradient(90deg, #ea580c, #14b8a6);
  transform-origin: left;
  transition: transform 0.1s linear;
}

/* --- Separator line --- */
.sep-line {
  width: 48px;
  height: 3px;
  border-radius: 2px;
}

/* --- Article typography enhancements --- */

/* Drop cap on first paragraph */
.article-prose > p:first-of-type::first-letter {
  float: left;
  font-family: 'Lora', Georgia, serif;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 0.8;
  padding-right: 0.12em;
  padding-top: 0.08em;
  color: #1c1917;
}

/* Subtle left accent on H2 */
.article-prose h2 {
  position: relative;
}

/* Blockquote enhanced styling */
.article-prose blockquote {
  position: relative;
  border-left-width: 4px;
  border-left-color: #14b8a6;
  background-color: #fafaf9;
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 1.25rem 1.5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-style: normal;
}

/* List item markers */
.article-prose ul > li::marker {
  color: #ea580c;
}
.article-prose ol > li::marker {
  color: #ea580c;
  font-weight: 600;
}

/* --- Print styles --- */
@media print {
  header, footer, nav, .no-print, .reading-progress { display: none !important; }
  main { padding: 0 !important; }
  .prose { max-width: 100%; }
  img { max-width: 100%; page-break-inside: avoid; }
}