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

/* ===== Text-to-Speech Highlighting Style ===== */
body {
  @apply bg-gradient-to-br from-indigo-50 to-blue-100;
  top: 0 !important;
}

body {
  cursor: auto !important;
}


/* By Devika Harshey */
/* This hides scrollbar for entire body element. */
body::-webkit-scrollbar {
  display: none;
}

/* This single, powerful class is used to highlight the exact word being spoken. */
.speaking-word {
  background-color: #fef08a; /* A bright, distinct yellow */
  color: #1f2937;
  border-radius: 0.25rem;
  padding: 0.1rem 0.2rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-color 50ms ease-in-out;
}

/* By Devika Harshey */
/* This class hides the scrollbar of the element to which it is applied. */
@layer utilities {
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }
}

/* Scroll and selection UI - multilingual Support */
html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background-color: var(--background-color);
}
::-webkit-scrollbar-thumb {
  background-color: purple;
  border-radius: 20px;
}
*::selection {
  color: rgb(255, 255, 255);
  background-color: purple;
}

/* Google Translate Styles */
.google-translate-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 50;
}
.goog-logo-link,
.goog-te-banner-frame,
.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.VIpgJd-ZVi9od-ORHb-OEVmcd {
  display: none !important;
}
.goog-te-gadget {
  color: transparent !important;
}
.goog-te-gadget .goog-te-combo {
  background-color: purple !important;
  color: white !important;
  font-size: 15px;
  border: 2px dotted #ffffff;
  border-radius: 5px;
  padding: 4px;
}
.goog-te-gadget .goog-te-combo option {
  color: white;
}
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}
.google-translate-container.hidden {
  display: none !important;
}

/* ===== Print / PDF styles for Recipe Card ===== */
@page {
  /* A4 by default; most browsers map to Letter on US locales */
  size: A4;
  margin: 16mm;
}

@media print {
  /* Force light colors on paper */
  :root { color-scheme: only light; }
  html, body { background: #ffffff !important; }
  body { color: #111827 !important; } /* near-black */

  /* Hide non-essential UI */
  .no-print,
  .navbar,
  header .btn,
  .btn,
  .badge,
  [class*="btn-"],
  [class*="badge-"] {
    display: none !important;
  }

  /* Remove app chrome styles so it looks clean on paper */
  .bg-base-100,
  .bg-base-200,
  .bg-base-300 {
    background: #ffffff !important;
  }
  [class*="shadow"] { box-shadow: none !important; }
  [class*="rounded"] { border-radius: 0 !important; }

  /* Make the main content use the full printable width */
  .max-w-4xl { max-width: 100% !important; }
  .p-6, .p-8, .p-10, .p-12 { padding: 0 !important; }
  .mt-20, .my-6 { margin: 0 !important; }

  /* One-column flow; avoid weird breaks */
  img { max-width: 100% !important; height: auto !important; break-inside: avoid; }
  h1, h2, h3, h4, h5, h6 { color: #111827 !important; break-after: avoid; }
  ol, ul, table, p, section, div { break-inside: avoid; }

  /* Ingredients table: visible borders, readable spacing */
  table { width: 100% !important; border-collapse: collapse !important; }
  th, td {
    border: 1px solid #e5e7eb !important; /* gray-200 */
    padding: 6px 8px !important;
    color: #111827 !important;
    background: #ffffff !important;
  }
  thead th { font-weight: 700 !important; }

  /* Don’t print highlight backgrounds from TTS */
  .speaking-word { background: transparent !important; color: inherit !important; }

  /* Links appear as normal text */
  a, a:visited { color: #111827 !important; text-decoration: none !important; }
}
/* Sticky Ingredients on DESKTOP only (#263) */
@media (min-width: 768px) {
  .ingredients-sticky {
    position: sticky;
    top: 6rem;                            /* clears navbar; adjust if needed */
    max-height: calc(100vh - 6rem);       /* independent scroll if tall */
    overflow: auto;
    align-self: flex-start;               /* avoid flex stretch */
    z-index: 1;                           /* stay above backgrounds */
  }
}
