/*
  Hydroplants — kamerplanten & potten op hydrokorrels
  Botanical editorial theme.
*/
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: "DM Sans", "DM Sans Fallback", sans-serif;
  overflow-x: clip;
}

@layer base {
  :root {
    --background: 60 30% 98%;
    --foreground: 140 30% 12%;
    --card: 0 0% 100%;
    --card-foreground: 140 30% 12%;
    --popover: 0 0% 100%;
    --popover-foreground: 140 30% 12%;
    --primary: 145 45% 22%;
    --primary-foreground: 60 30% 98%;
    --secondary: 90 30% 92%;
    --secondary-foreground: 145 45% 22%;
    --muted: 90 25% 94%;
    --muted-foreground: 140 12% 40%;
    --accent: 30 55% 60%;
    --accent-foreground: 140 30% 12%;
    --destructive: 0 72% 45%;
    --destructive-foreground: 0 0% 98%;
    --border: 140 15% 86%;
    --input: 140 15% 86%;
    --ring: 145 45% 22%;
    --radius: 1rem;
    --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%;
  }
  .dark {
    --background: 140 30% 8%;
    --foreground: 60 30% 96%;
    --card: 140 28% 11%;
    --card-foreground: 60 30% 96%;
    --popover: 140 28% 11%;
    --popover-foreground: 60 30% 96%;
    --primary: 90 40% 65%;
    --primary-foreground: 140 30% 10%;
    --secondary: 140 20% 18%;
    --secondary-foreground: 60 30% 96%;
    --muted: 140 20% 18%;
    --muted-foreground: 90 15% 65%;
    --accent: 30 55% 60%;
    --accent-foreground: 140 30% 10%;
    --destructive: 0 62.8% 45%;
    --destructive-foreground: 0 0% 98%;
    --border: 140 18% 22%;
    --input: 140 18% 22%;
    --ring: 90 40% 65%;
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
  .font-display {
    font-family: "Fraunces", "Fraunces Fallback", serif;
  }
}

/* ------------------------------------------------------------------
   Font metric overrides for fallback fonts.
   These match the metrics of the real web fonts (DM Sans / Fraunces)
   so the fallback text occupies the same space as the final font.
   This eliminates the layout shift (CLS) caused by font-display: swap.
   The real Google Fonts <link> still loads and replaces these seamlessly.
--------------------------------------------------------------------- */
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("sans-serif");
  font-display: swap;
  ascent-override: 91.84%;
  descent-override: 24.41%;
  line-gap-override: 0%;
  size-adjust: 100.53%;
}
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Times New Roman"), local("Times"), local("serif");
  font-display: swap;
  ascent-override: 96.00%;
  descent-override: 27.00%;
  line-gap-override: 0%;
  size-adjust: 100.00%;
}

/* ------------------------------------------------------------------
   Google Translate: suppress the top banner bar it injects on translate.
   By default it sets body{position:relative;top:39px} and renders an
   iframe banner, pushing the whole page down => major CLS.
   We hide the banner and force body back to its natural position.
--------------------------------------------------------------------- */
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
iframe.skiptranslate,
.goog-te-gadget-icon,
.goog-logo-link,
.goog-logo {
  display: none !important;
}
body {
  top: 0 !important;
  position: static !important;
}
.goog-tooltip {
  display: none !important;
}
.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}
/* Keep the hidden Translate widget container from taking any space */
#google-translate-element {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .marker-underline {
    background-image: linear-gradient(120deg, hsl(var(--accent) / 0.4) 0%, hsl(var(--accent) / 0.4) 100%);
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 100% 0.4em;
  }
}

/* ------------------------------------------------------------------
   Blog article typography + rich-text editor placeholder.
--------------------------------------------------------------------- */
.blog-content h2 {
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.6rem;
  font-weight: 500;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: hsl(var(--foreground));
}
.blog-content h3 {
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: hsl(var(--foreground));
}
.blog-content p {
  margin-bottom: 1.1rem;
}
.blog-content ul,
.blog-content ol {
  margin: 0 0 1.1rem 1.25rem;
}
.blog-content ul {
  list-style: disc;
}
.blog-content ol {
  list-style: decimal;
}
.blog-content li {
  margin-bottom: 0.4rem;
}
.blog-content a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blog-content img {
  border-radius: 0.75rem;
  margin: 1.25rem 0;
}
.blog-content blockquote {
  border-left: 3px solid hsl(var(--accent));
  padding-left: 1rem;
  font-style: italic;
  color: hsl(var(--muted-foreground));
  margin: 1.25rem 0;
}

.blog-editor:empty::before {
  content: attr(data-placeholder);
  color: hsl(var(--muted-foreground));
  pointer-events: none;
}
.blog-editor h2 {
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.4rem;
  font-weight: 500;
  margin-top: 1rem;
}
.blog-editor p {
  margin-bottom: 0.75rem;
}
.blog-editor ul {
  list-style: disc;
  margin-left: 1.25rem;
}