@import "leaflet/dist/leaflet.css";

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


html, body {
  overflow-x: hidden;
 /* width: 100vw; */
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

@media (max-width: 767px) {
  body {
    /* Set margin and padding to 0 to remove any default spacing */
    margin: 0;
    padding: 0;
  }

    /* Used in Blog Slug Page Content */
  .full-width-element {
    /* Ensure the element takes up the full width of the viewport */
    width: 100%;
    /* Remove any padding or margin on the element itself */
    padding: 1;
    margin: 1;
    /* This ensures content doesn't create horizontal scrollbars */
    box-sizing: border-box; 
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}


/******************************************* 
  Rich Text Styles - Mobile Optimized & Modern
*******************************************/ 

/* Responsive Headers */
.rich-text h1 {
  @apply text-2xl sm:text-3xl md:text-4xl font-bold mb-5 text-primary leading-tight tracking-tight;
}

.rich-text h2 {
  @apply text-xl sm:text-2xl md:text-3xl font-bold mb-5 text-primary leading-tight;
}

.rich-text h3 {
  @apply text-lg sm:text-xl md:text-2xl font-bold mb-4 text-primary leading-tight;
}

.rich-text h4 {
  @apply text-base sm:text-lg md:text-xl font-bold mb-4 text-primary;
}

.rich-text h5 {
  @apply text-sm sm:text-base md:text-lg font-bold mb-3 text-primary;
}

.rich-text h6 {
  @apply text-xs sm:text-sm md:text-base font-bold mb-3 text-primary uppercase tracking-wider;
}

/* Horizontal Rules */
.rich-text hr {
  @apply border-t border-muted-foreground my-6 opacity-70;
}

/* Links - Touch-friendly & Accessible */
.rich-text a {
  @apply text-primary underline underline-offset-2 hover:text-primary/80 
        transition-colors duration-200 break-words;
}

.rich-text a:hover,
.rich-text a:focus {
  @apply opacity-90;
}

/* Paragraphs - Optimized for mobile reading */
.rich-text p {
  @apply mb-5 text-base leading-relaxed text-muted-foreground tracking-normal;
}

/* Emphasis */
.rich-text strong {
  @apply font-bold text-foreground;
}

.rich-text em {
  @apply italic text-foreground;
}

.rich-text del {
  @apply line-through text-muted-foreground;
}

/* Blockquotes - Mobile refined */
.rich-text blockquote {
  @apply border-l-4 border-accent-foreground pl-4 py-3 my-6 bg-muted/30 dark:bg-muted/20 
         rounded-r-lg text-muted-foreground italic leading-relaxed;
}

/* Lists - Mobile spacing & nesting */
.rich-text ul, .rich-text ol {
  @apply pl-5 sm:pl-6 mb-5 space-y-2;
}

.rich-text li {
  @apply leading-relaxed text-muted-foreground text-base text-zinc-600 dark:text-zinc-300;
}

/* Nested lists - better hierarchy */
.rich-text li > ul,
.rich-text li > ol {
  @apply mt-2 mb-0;
}

.rich-text ul ul, .rich-text ol ol,
.rich-text ul ol, .rich-text ol ul {
  @apply mt-2;
}

/* Code Blocks - Mobile scrollable */
.rich-text pre {
  /* Core layout and typography */
  @apply font-mono text-sm leading-relaxed
         bg-gray-100 dark:bg-slate-900 text-gray-800 dark:text-gray-200
         rounded-2xl shadow-md transition-all duration-300;

  /* Spacing and overflow */
  @apply p-0 m-0;

  /* Custom styling for code readability */
  tab-size: 2;
  white-space: pre;

  /* Hover effect for a touch of interactivity */
  &:hover {
    @apply shadow-xl;
  }
}

/* Inline code */
.rich-text code {
  @apply font-mono text-xs sm:text-sm px-0 py-0.5 rounded bg-muted dark:bg-gray-800 
         text-foreground;
}

/* Tables - Responsive & mobile-friendly */
.rich-text table {
  @apply w-full border-collapse my-6 overflow-hidden rounded-lg overflow-x-auto;
}

.rich-text th,
.rich-text td {
  @apply px-3 sm:px-4 py-3 text-left text-sm sm:text-base border-b border-border;
}

.rich-text th {
  @apply bg-muted/50 dark:bg-muted/30 font-semibold text-foreground;
}

.rich-text tr:last-child td {
  @apply border-b-0;
}

/* Make tables scrollable on mobile */
.rich-text table {
  display: block;
  width: 100%;
}

.rich-text thead, .rich-text tbody, .rich-text tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.rich-text th, .rich-text td {
  display: table-cell;
}

/* Images - Full-width, responsive, and safe */
.rich-text img {
  @apply w-full h-auto object-cover rounded-xl my-6 max-w-full 
         shadow-sm transition-shadow duration-300;
}

.rich-text img:hover {
  @apply shadow-md;
}

/* Ensure figures don't add extra margin */
.rich-text figure {
  @apply m-0;
}

.rich-text figure img {
  @apply w-full h-auto;
}

.rich-text figcaption {
  @apply text-center text-sm text-muted-foreground mt-2 italic;
}

/* Custom Containers */
.rich-text .warning {
  @apply bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 
         text-yellow-800 dark:text-yellow-200 p-4 rounded-r-lg my-6;
}

/* Info/Note blocks (optional extension) */
.rich-text .info {
  @apply bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500 
         text-blue-800 dark:text-blue-200 p-4 rounded-r-lg my-6;
}

/* Responsive adjustments for small screens */
@media (max-width: 640px) {
  .rich-text h1 { @apply text-2xl; }
  .rich-text h2 { @apply text-xl; }
  .rich-text h3 { @apply text-lg; }
  .rich-text p { @apply text-base leading-relaxed; }
  .rich-text pre { @apply text-xs p-3; }
  .rich-text code { @apply text-xs; }
  .rich-text blockquote { @apply pl-3; }
  .rich-text ul, .rich-text ol { @apply pl-5; }
}


/* Print & accessibility: Modern, professional link styling */
.rich-text a[href^="http"]:not([href*="localhost"]) {
  position: relative;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
  color: rgba(200, 95, 50, 1);
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

/* External link icon (always present) */
.rich-text a[href^="http"]:not([href*="localhost"]):after {
  content: "↗";
  font-size: 0.9em;
  opacity: 0.7;
  margin-left: 0.25em;
  display: inline-block;
}

/* Hidden URL span (shown on hover) */
.rich-text a[href^="http"]:not([href*="localhost"])::before {
  content: " (" attr(href) ")";
  font-size: 0.9em;
  opacity: 0;
  visibility: hidden;
  margin-left: 0.25em;
  display: inline-block;
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.9);
  color :rgba(255, 255, 250);
  padding: 2px 6px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transform: translateY(-4px);
  transition: all 0.3s ease-in-out;
}

/* Show URL tooltip on hover */
.rich-text a[href^="http"]:not([href*="localhost"]):hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Optional: keep icon subtle */
.rich-text a[href^="http"]:not([href*="localhost"]):hover::after {
  opacity: 0.5;
}

@media print {
  .rich-text pre {
    overflow: visible;
    white-space: pre-wrap;
  }
  .rich-text img {
    max-height: 60vh;
    object-fit: contain;
  }
  .rich-text a[href^="http"]:not([href*="localhost"]):after {
    content: " (" attr(href) ") ";
    font-size: 0.7em;
    opacity: 0.6;
    transform: none;
    margin-left: 0.5em;
  }
  .rich-text a:after {
    color: #000;
  }
}



/* //Hero 3rd word style */

:root {
  /* Light mode colors */
  --text-gradient-light-1: #007aff;
  --text-gradient-light-2: #5856d6;
  --text-gradient-light-3: #ff9500;
  --shadow-light: rgba(0, 0, 0, 0.2);
  --code-text: #3a414c;       /* slate-700 */
  --line-number: #6d7b76;     /* slate-600 */
}

.dark {
  /* Dark mode colors */
  --text-gradient-light-1: #0a84ff;
  --text-gradient-light-2: #5e5ce6;
  --text-gradient-light-3: #ff9f0a;
  --shadow-light: rgba(255, 255, 255, 0.2);
  --code-text: #cbd5e1;       /* slate-300 */
  --line-number: #94a3b8;     /* slate-400 */
}

@keyframes pulseGradient {
  0% {
    background-position: 0% 50%;
    text-shadow: 0px 2px 4px var(--shadow-light);
    opacity: 0.9;
    transform: scale(1);
  }
  50% {
    background-position: 100% 50%;
    text-shadow: 0px 4px 10px var(--shadow-light);
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    background-position: 0% 50%;
    text-shadow: 0px 2px 4px var(--shadow-light);
    opacity: 0.9;
    transform: scale(1);
  }
}

.animate-pulse-gradient {
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: 0.4px;
  text-shadow: 0px 3px 6px var(--shadow-light);
  animation: pulseGradient 4s infinite ease-in-out;
  display: inline-block;
  transition: all 0.3s ease-out;
}


.glassmorphic-card {
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0px 8px 10px rgba(31, 38, 135, 0.2);
  transition: transform 0.3s ease-in-out;
}



/* Leaflet OpenStreetMaps Styles */

.leaflet-container {
  position: relative !important; /* Ensure it's positioned properly */
  z-index: 0 !important; /* Push it below other elements */
}

.custom-cluster-icon {
  z-index: 1000 !important; /* Ensure clusters remain clickable */
}

.leaflet-top,
.leaflet-bottom {
  z-index: 1000 !important; /* Keep controls above the map */
}

