/* Font loaded via <link> in index.html — no @import needed here (avoids render-blocking) */
/* NOTE: @font-face declarations removed — Google Fonts <link> + preload in index.html
   already delivers the font; duplicate @font-face caused double-download of woff2 files. */

/* Font fallback dimension tuning — eliminates CLS during Montserrat font-swap.
   These values match Montserrat 600/700 metrics so the system font renders
   at the exact same size/line-height before the web font loads. */
@font-face {
  font-family: 'Montserrat-Fallback';
  src: local('Arial');
  size-adjust: 94.7%;
  ascent-override: 85%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  --font-heading-fallback: 'Montserrat-Fallback', ui-sans-serif, system-ui, Arial, sans-serif;
  --font-body-fallback: 'Montserrat-Fallback', ui-sans-serif, system-ui, Arial, sans-serif;
}

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 214 32% 18%;
    --card: 0 0% 100%;
    --card-foreground: 214 32% 18%;
    --popover: 0 0% 100%;
    --popover-foreground: 214 32% 18%;
    --primary: 194 68% 48%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 20% 96%;
    --secondary-foreground: 214 32% 18%;
    --muted: 210 20% 96%;
    --muted-foreground: 214 14% 50%;
    --accent: 194 68% 48%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 214 20% 90%;
    --input: 214 20% 90%;
    --ring: 194 68% 48%;
    --radius: 9999px;
    --font-heading: 'Montserrat', 'Montserrat-Fallback', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'Montserrat', 'Montserrat-Fallback', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Montserrat', 'Montserrat-Fallback', ui-sans-serif, system-ui, sans-serif;
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 214 32% 18%;
    --sidebar-primary: 194 68% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 210 20% 96%;
    --sidebar-accent-foreground: 214 32% 18%;
    --sidebar-border: 214 20% 90%;
    --sidebar-ring: 194 68% 48%;
  }

  .dark {
    --background: 0 0% 100%;
    --foreground: 214 32% 18%;
    --card: 0 0% 100%;
    --card-foreground: 214 32% 18%;
    --popover: 0 0% 100%;
    --popover-foreground: 214 32% 18%;
    --primary: 194 68% 48%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 20% 96%;
    --secondary-foreground: 214 32% 18%;
    --muted: 210 20% 96%;
    --muted-foreground: 214 14% 50%;
    --accent: 194 68% 48%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 214 20% 90%;
    --input: 214 20% 90%;
    --ring: 194 68% 48%;
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 214 32% 18%;
    --sidebar-primary: 194 68% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 210 20% 96%;
    --sidebar-accent-foreground: 214 32% 18%;
    --sidebar-border: 214 20% 90%;
    --sidebar-ring: 194 68% 48%;
  }
}



@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-white text-foreground font-body;
    font-size: 1rem;
    line-height: 1.6;
  }
}

@layer utilities {
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }
  @keyframes pulse-glow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.05); }
  }
  .animate-float { animation: float 6s ease-in-out infinite; }
  .animate-float-delayed { animation: float 6s ease-in-out infinite 3s; }
  .animate-pulse-glow { animation: pulse-glow 4s ease-in-out infinite; }

  /* Disable decorative animations on mobile to cut repaint cost */
  @media (max-width: 767px) {
    .animate-float, .animate-float-delayed, .animate-pulse-glow {
      animation: none;
    }
  }
}

/* content-visibility removed — it caused unpredictable CLS on mobile */

/* Blog post content styling */
.blog-content p {
  margin-bottom: 1.25rem;
  line-height: 1.75;
  color: #4b5563;
}

.blog-content p + p {
  margin-top: 0;
}