@tailwind base;
@tailwind components;
@tailwind utilities;

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    /* Joey Brand Colors */
    --primary: 191 84% 44%;          /* Brand Teal #008FB3 */
    --primary-glow: 191 84% 54%;     /* Lighter teal for gradients */
    --primary-light: 191 84% 96%;    /* Very light teal backgrounds */
    --primary-foreground: 0 0% 100%; /* White text on teal */

    --brand-navy: 225 39% 25%;       /* Navy Blue #2C3E50 */
    --brand-yellow: 48 100% 50%;     /* Yellow/Gold #FFD700 */

    /* Traffic Light System (Safety Status) */
    --status-danger: 0 84% 60%;          /* Red - Not Trusted */
    --status-danger-bg: 0 84% 96%;       /* Light red background */
    --status-warning: 45 100% 51%;       /* Yellow - Caution */
    --status-warning-bg: 45 100% 96%;    /* Light yellow background */
    --status-success: 142 71% 45%;       /* Green - Trusted */
    --status-success-bg: 142 71% 96%;    /* Light green background */

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96%;                /* Light gray */
    --muted-foreground: 215 16% 47%;     /* Medium gray text */

    --accent: 210 40% 96%;               /* Accent highlight */
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214 32% 91%;               /* Light border */
    --input: 214 32% 91%;
    --ring: 194 100% 33%;                /* Ring uses brand teal */

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;

    /* Custom section colors */
    --section-light: 0 0% 95.3%;

    /* Joey brand colors - keeping legacy names for backwards compatibility */
    --joey-navy: 225 39% 25%;        /* Updated to match brand navy */
    --joey-cyan: 194 100% 33%;       /* #0082A8 */

    /* Extended brand palette */
    --brand-dark-navy: 207 31% 24%;  /* #2A3D4F */
    --brand-teal-mid: 194 100% 33%;  /* #0082A8 */
    --brand-teal-light: 193 78% 56%; /* #34C4E9 */
    --brand-sky-light: 201 76% 85%;  /* #BBE5F6 */
    --brand-sky-pale: 203 87% 97%;   /* #F0F9FE */
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 191 84% 44%;          /* Brand Teal consistent in dark mode */
    --primary-glow: 191 84% 54%;     /* Lighter teal for gradients */
    --primary-light: 191 84% 96%;    /* Very light teal backgrounds */
    --primary-foreground: 0 0% 100%; /* White text on teal */

    --brand-navy: 225 39% 25%;       /* Navy Blue #2C3E50 */
    --brand-yellow: 48 100% 50%;     /* Yellow/Gold #FFD700 */

    /* Traffic Light System (Safety Status) - Dark Mode */
    --status-danger: 0 84% 60%;
    --status-danger-bg: 0 84% 15%;
    --status-warning: 45 100% 51%;
    --status-warning-bg: 45 100% 15%;
    --status-success: 142 71% 45%;
    --status-success-bg: 142 71% 15%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 191 84% 44%;                 /* Ring uses brand teal in dark mode */
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    /* Custom section colors */
    --section-light: 0 0% 95.3%;

    /* Joey brand colors - keeping legacy names for backwards compatibility */
    --joey-navy: 225 39% 25%;        /* Updated to match brand navy */
    --joey-cyan: 191 84% 44%;        /* Updated to match brand teal */
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans;
  }
}

/* Optimized floating animations for chips with hardware acceleration */
@keyframes float1 {
  0%, 100% { 
    transform: translateY(0px) translateZ(0); 
    will-change: transform;
  }
  50% { 
    transform: translateY(-20px) translateZ(0); 
  }
}

@keyframes float2 {
  0%, 100% { 
    transform: translateY(0px) translateZ(0); 
    will-change: transform;
  }
  50% { 
    transform: translateY(-15px) translateZ(0); 
  }
}

@keyframes float3 {
  0%, 100% { 
    transform: translateY(0px) translateZ(0); 
    will-change: transform;
  }
  50% { 
    transform: translateY(-25px) translateZ(0); 
  }
}

@keyframes float4 {
  0%, 100% { 
    transform: translateY(0px) translateZ(0); 
    will-change: transform;
  }
  50% { 
    transform: translateY(-18px) translateZ(0); 
  }
}

@keyframes float5 {
  0%, 100% { 
    transform: translateY(0px) translateZ(0); 
    will-change: transform;
  }
  50% { 
    transform: translateY(-12px) translateZ(0); 
  }
}

@keyframes float6 {
  0%, 100% { 
    transform: translateY(0px) translateZ(0); 
    will-change: transform;
  }
  50% { 
    transform: translateY(-22px) translateZ(0); 
  }
}

/* Circle movement animations - avoiding center text area */
@keyframes circleMove1 {
  0% { top: 5%; left: 5%; }
  25% { top: 15%; left: 85%; }
  50% { top: 5%; left: 90%; }
  75% { top: 15%; left: 15%; }
  100% { top: 5%; left: 5%; }
}

@keyframes circleMove2 {
  0% { top: 15%; right: 5%; }
  25% { top: 80%; right: 10%; }
  50% { top: 85%; right: 5%; }
  75% { top: 25%; right: 15%; }
  100% { top: 15%; right: 5%; }
}

@keyframes circleMove3 {
  0% { top: 80%; left: 5%; }
  25% { top: 25%; left: 10%; }
  50% { top: 15%; left: 5%; }
  75% { top: 85%; left: 15%; }
  100% { top: 80%; left: 5%; }
}

@keyframes circleMove4 {
  0% { bottom: 5%; left: 15%; }
  25% { bottom: 15%; left: 85%; }
  50% { bottom: 5%; left: 90%; }
  75% { bottom: 15%; left: 25%; }
  100% { bottom: 5%; left: 15%; }
}

/* Hero graphic entry animation */
@keyframes heroSlideUp {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scanning animation for grid effect */
@keyframes scan {
  0% { 
    transform: translateX(-100%); 
  }
  100% { 
    transform: translateX(100%); 
  }
}

/* Progress bar animation for How It Works section - 15s total with 5s hold */
@keyframes progressFlow {
  0%, 10% { width: 0%; }
  27% { width: 50%; }
  33% { width: 50%; }
  53% { width: 100%; }
  93% { width: 100%; }
  100% { width: 0%; }
}

@keyframes actionBorderShift {
  0% {
    background-position: 0 0, 0% 50%;
  }
  50% {
    background-position: 0 0, 100% 50%;
  }
  100% {
    background-position: 0 0, 0% 50%;
  }
}

/* Step 1 fill */
@keyframes circle1Fill {
  0% { transform: translateY(100%); }
  10% { transform: translateY(0%); }
  92% { transform: translateY(0%); }
  100% { transform: translateY(100%); }
}

/* Step 2 fill */
@keyframes circle2Fill {
  0%, 26% { transform: translateY(100%); }
  33% { transform: translateY(0%); }
  92% { transform: translateY(0%); }
  100% { transform: translateY(100%); }
}

/* Step 3 fill - holds for 5 seconds before reset */
@keyframes circle3Fill {
  0%, 52% { transform: translateY(100%); }
  60% { transform: translateY(0%); }
  92% { transform: translateY(0%); }
  100% { transform: translateY(100%); }
}

/* Text color changes per step */
@keyframes textColor1 {
  0%, 9% { color: #6b7280; }
  10%, 95% { color: white; }
  100% { color: #6b7280; }
}
@keyframes textColor2 {
  0%, 32% { color: #6b7280; }
  33%, 95% { color: white; }
  100% { color: #6b7280; }
}
@keyframes textColor3 {
  0%, 59% { color: #6b7280; }
  60%, 95% { color: white; }
  100% { color: #6b7280; }
}

/* Critical hero styles moved to inline CSS in index.html for faster LCP */
/* This section now contains only non-critical animations and effects */

/* Hero background */
.hero-bg {
  background: linear-gradient(135deg, #F0F9FE 0%, #BBE5F6 60%, #BBE5F6 100%);
  background-size: cover;
  background-position: center;
}

.hero-home {
  min-height: clamp(820px, 88vh, 1000px);
  min-height: clamp(820px, 88svh, 1000px);
  overflow: hidden;
}

.hero-title {
  font-size: clamp(42px, 5vw, 48px);
  line-height: 1.05;
}

.hero-content {
  padding-top: clamp(92px, 10vh, 110px);
  padding-top: clamp(92px, 10svh, 110px);
}

.hero-scene {
  min-height: 500px;
}

.hero-mascot {
  width: 360px;
}

@media (min-width: 1536px) {
  .hero-home {
    min-height: clamp(900px, 88vh, 1000px);
    min-height: clamp(900px, 88svh, 1000px);
  }
}

@media (max-height: 800px) and (min-width: 1024px) {
  .hero-home {
    min-height: clamp(800px, 88vh, 880px);
    min-height: clamp(800px, 88svh, 880px);
  }

  .hero-content {
    padding-top: 86px;
  }

  .hero-scene {
    min-height: 420px;
  }

  .hero-mascot {
    width: 300px;
  }
}

@media (max-width: 1023px) {
  .hero-home {
    min-height: auto;
  }

  .hero-content {
    padding-top: 84px;
  }

  .hero-scene {
    min-height: clamp(320px, 48vw, 430px);
  }

  .hero-mascot {
    width: clamp(260px, 48vw, 320px);
  }

  .hero-floating-card,
  .hero-floating-pill {
    display: none;
  }
}

/* ── Hero notification cards ─────────────────────────────────────────────────
   Layout sourced from iOS lock-screen notification banners:
     [● circle icon]  App Name                          now
                      Notification Title (bold)
                      Body detail text (light, muted)
   No dividers. One flat surface. Icon is left column; text is right column.
   Visual ring + glow + frosted glass all live here — component is structural.
────────────────────────────────────────────────────────────────────────────── */

.hero-notification-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  width: 100%;
  border-radius: 18px;
  /* Frosted-glass white surface */
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* Teal outline ring + soft bloom + depth shadow */
  box-shadow:
    0 0 0 2.5px rgba(52, 196, 233, 0.55),
    0 0 20px 6px  rgba(52, 196, 233, 0.10),
    0 12px 36px   rgba(52, 196, 233, 0.08);
  transition: transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 800ms ease;
  cursor: default;
}

.hero-notification-card:hover {
  transform: scale(1.09);
  box-shadow:
    0 0 0 2.5px rgba(52, 196, 233, 0.85),
    0 0 36px 14px rgba(52, 196, 233, 0.22),
    0 20px 56px   rgba(52, 196, 233, 0.16);
}

/* Pause the float animation while the card is hovered */
.hero-notification-wrapper:has(.hero-notification-card:hover) > div {
  animation-play-state: paused;
}

/* ── Left column: circular app icon ─────────────────────────────────────── */

.hero-notif-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Right column: text ──────────────────────────────────────────────────── */

.hero-notif-content {
  flex: 1;
  min-width: 0;
}

/* Row 1 — app name + timestamp/badge */
.hero-notif-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}

.hero-notif-source {
  font-family: 'Urbanist', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(42, 61, 79, 0.52);
  text-align: left;
  line-height: 1.2;
  white-space: nowrap;
}

.hero-notif-time {
  flex-shrink: 0;
  font-family: 'Lexend', sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: rgba(42, 61, 79, 0.40);
  line-height: 1;
}

/* Row 2 — bold notification title */
.hero-notif-title {
  font-family: 'Urbanist', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #34C4E9;
  line-height: 1.25;
  text-align: left;
  margin: 0 0 3px;
}

/* Row 3 — supporting body text */
.hero-notif-text {
  font-family: 'Lexend', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #2A3D4F;
  line-height: 1.45;
  text-align: left;
  margin: 0;
}

/* ── Live badge (replaces "now" on alert cards) ──────────────────────────── */

.hero-notif-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-family: 'Lexend', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #dc2626;
  line-height: 1;
}

.hero-notif-dot {
  position: relative;
  display: flex;
  width: 7px;
  height: 7px;
}

.hero-notif-dot-ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #f87171;
  opacity: 0.75;
  animation: notifPing 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes notifPing {
  75%, 100% { transform: scale(2.2); opacity: 0; }
}

.hero-notif-dot-core {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
}

/* Reduced-motion: kill the pulsing dot */
@media (prefers-reduced-motion: reduce) {
  .hero-notif-dot-ping { animation: none; opacity: 0; }
}

/* Mobile-first padding to reveal art and keep copy readable */
@media (max-width: 767px) {
  .hero-bg {
    padding-top: clamp(24px, 4vh, 40px) !important;
    padding-top: clamp(24px, 4svh, 40px) !important;
    padding-bottom: clamp(48px, 8vh, 80px) !important;
    padding-bottom: clamp(48px, 8svh, 80px) !important;
  }

  .hero-title {
    font-size: clamp(34px, 9vw, 42px);
    line-height: 1.05;
  }

  .hero-content {
    padding-top: clamp(68px, 10vh, 84px);
    padding-top: clamp(68px, 10svh, 84px);
  }

  .hero-scene {
    min-height: clamp(300px, 72vw, 390px);
  }

  .hero-mascot {
    width: clamp(240px, 72vw, 300px);
  }
}

/* Mobile hero now ships text-only; decorative artwork stays desktop-only */

/* No overlay needed — light background has sufficient text contrast */

/* Make scan effect easy to target and respect reduced motion */
.hero-scan { animation: scan 6s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .hero-scan { animation: none !important; }
}

/* Short viewport scaling for hero typography */
@media (max-height: 900px) and (min-width: 768px) {
  .text-hero {
    font-size: clamp(44px, 4.5vw, 60px);
    line-height: 1.1;
  }

  .text-title {
    font-size: clamp(36px, 3.2vw, 44px);
    line-height: 1.15;
  }

  .text-subtitle {
    font-size: clamp(18px, 2vw, 22px);
  }
}

@layer components {
  .joey-section {
    @apply w-full bg-white px-5 py-16 md:px-8 md:py-24 lg:px-[100px];
  }

  .joey-section-compact {
    @apply w-full bg-white px-5 py-12 md:px-8 md:py-16 lg:px-[100px];
  }

  .joey-section-sky {
    @apply w-full bg-brand-sky-pale px-5 py-16 md:px-8 md:py-24 lg:px-[100px];
  }

  .joey-container {
    @apply mx-auto w-full max-w-[1400px];
  }

  .joey-container-narrow {
    @apply mx-auto w-full max-w-[900px];
  }

  .joey-section-header {
    @apply mx-auto mb-10 max-w-[860px] space-y-3 text-center;
  }

  .joey-section-title {
    @apply text-4xl font-medium leading-[1.15] text-brand-navy md:text-title;
    text-wrap: balance;
  }

  .joey-section-subtitle {
    @apply text-lg leading-relaxed text-brand-navy/80 md:text-subtitle;
  }

  .joey-page-hero {
    @apply relative flex w-full flex-col items-center overflow-hidden bg-white px-5 pb-8 pt-36 md:px-8 md:pb-10 md:pt-40 lg:px-[100px];
  }

  .joey-page-hero__content {
    @apply relative z-10 mx-auto w-full max-w-[1000px] text-center;
  }

  .joey-page-title {
    @apply text-hero text-brand-navy max-md:text-title;
    text-wrap: balance;
  }

  .joey-page-subtitle {
    @apply mb-6 text-subtitle text-primary max-md:text-lg;
    text-wrap: balance;
  }

  .joey-page-copy {
    @apply mx-auto mb-6 max-w-[800px] text-center text-body text-brand-navy max-md:text-base;
  }

  .joey-hero-media {
    @apply relative z-10 mx-auto w-full max-w-[1500px] md:px-8 lg:px-[100px];
  }

  .joey-hero-image {
    @apply h-auto w-full rounded-2xl border border-brand-sky-light/60 bg-white object-cover shadow-[0_20px_60px_rgba(42,61,79,0.10)] md:rounded-[28px];
  }

  .joey-primary-cta {
    @apply inline-flex min-h-12 items-center justify-center gap-2 rounded-full bg-brand-teal-mid px-6 py-3 text-base font-semibold text-white shadow-[0_12px_28px_rgba(0,130,168,0.22)] transition-all duration-200 hover:-translate-y-0.5 hover:bg-brand-teal-mid/90 hover:shadow-[0_16px_34px_rgba(0,130,168,0.28)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-teal-mid focus-visible:ring-offset-2;
  }

  .joey-secondary-cta {
    @apply inline-flex min-h-12 items-center justify-center gap-2 rounded-full border border-brand-navy/20 bg-white px-6 py-3 text-base font-semibold text-brand-navy transition-colors duration-200 hover:border-brand-teal-mid/40 hover:bg-brand-sky-pale hover:text-brand-teal-mid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-teal-mid focus-visible:ring-offset-2;
  }

  .joey-text-link {
    @apply inline-flex items-center gap-1 font-semibold text-brand-teal-mid underline decoration-brand-teal-light/60 underline-offset-4 transition-colors duration-200 hover:text-brand-dark-navy hover:decoration-brand-dark-navy;
  }

  .joey-card-cta {
    @apply inline-flex min-h-10 items-center justify-center gap-2 rounded-full border border-brand-navy/20 bg-white px-4 py-2 text-sm font-semibold text-brand-navy transition-colors duration-200 hover:border-brand-teal-mid/40 hover:bg-brand-sky-pale hover:text-brand-teal-mid;
  }

  .joey-gradient-button {
    background-image: linear-gradient(
      120deg,
      hsl(var(--brand-navy)) 0%,
      hsl(var(--primary)) 55%,
      hsl(var(--primary-glow)) 100%
    );
  }

  .joey-feature-card {
    @apply flex h-full flex-col rounded-2xl border border-brand-sky-light/70 bg-white p-6 text-brand-navy shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:border-brand-teal-mid/40 hover:shadow-lg;
  }

  .joey-media-frame {
    @apply rounded-2xl border border-brand-sky-light/60 bg-white shadow-[0_20px_60px_rgba(42,61,79,0.10)] md:rounded-[28px];
  }

  .joey-info-callout {
    @apply rounded-2xl border border-brand-sky-light/70 bg-brand-sky-pale p-6 text-brand-navy shadow-sm;
  }

  .joey-list-dot {
    @apply mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-brand-teal-light;
  }

  .action-border {
    position: relative;
    border-radius: 2rem;
    border: 1px solid transparent;
    --action-gradient: linear-gradient(
      135deg,
      rgba(0, 178, 255, 0.8) 0%,
      rgba(0, 116, 209, 0.7) 45%,
      rgba(20, 54, 110, 0.8) 100%
    );
    --action-shadow: rgba(17, 89, 160, 0.16);
    --action-shadow-hover: rgba(17, 89, 160, 0.24);
    background:
      linear-gradient(0deg, hsl(var(--card)) 0%, hsl(var(--card)) 100%) padding-box,
      var(--action-gradient) border-box;
    background-size: 100% 100%, 260% 260%;
    animation: actionBorderShift 10s ease-in-out infinite;
    transition: box-shadow 300ms ease, animation-duration 300ms ease;
    box-shadow: 0 16px 44px var(--action-shadow);
  }

  .action-border:hover {
    animation-duration: 7s;
    box-shadow: 0 22px 52px var(--action-shadow-hover);
  }

  .action-border--child {
    --action-gradient: linear-gradient(
      135deg,
      rgba(0, 204, 255, 0.95) 0%,
      rgba(33, 161, 241, 0.85) 45%,
      rgba(14, 74, 136, 0.9) 100%
    );
    --action-shadow: rgba(25, 134, 214, 0.2);
    --action-shadow-hover: rgba(25, 134, 214, 0.28);
  }

  .action-border--alerts {
    --action-gradient: linear-gradient(
      135deg,
      rgba(20, 220, 202, 0.9) 0%,
      rgba(34, 148, 196, 0.85) 40%,
      rgba(23, 51, 111, 0.92) 100%
    );
    --action-shadow: rgba(18, 102, 142, 0.2);
    --action-shadow-hover: rgba(18, 102, 142, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .action-border {
    animation: none;
    background-position: 0 0, 50% 50%;
  }
}


/* Article content styles */
.article-content blockquote {
  position: relative;
  background: linear-gradient(135deg, hsl(var(--primary-light)) 0%, hsl(191 84% 92%) 100%);
  border-left: 4px solid hsl(var(--primary));
  border-radius: 0 1rem 1rem 0;
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  box-shadow: 0 4px 20px hsl(var(--primary) / 0.15);
}

.article-content blockquote p {
  margin: 0;
  color: hsl(var(--brand-navy));
  font-size: 1.05rem;
  line-height: 1.7;
}

.article-content blockquote p:first-child strong {
  display: block;
  font-size: 1.1rem;
  color: hsl(var(--primary));
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}