@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700&family=Noto+Sans+Devanagari:wght@400;600;700;800&display=swap');

:root {
  --ink-black: #111111;
  --campaign-yellow: #FFC400;
  --campaign-yellow-hover: #e5b000;
  --paper-ivory: #F5EAD7;
  --paper-white: #FFF9EF;
  --intel-blue: #17469E;
  --political-red: #E32620;
  --editorial-pink: #D41462;
  --ground-green: #07583C;
  --hadoti-orange: #F47721;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--paper-ivory);
  color: var(--ink-black);
  overflow-x: hidden;
}

/* Stipple / Dot Texture Backgrounds */
.bg-stipple-light {
  background-color: #F5EAD7;
  background-image: radial-gradient(#d6c9b4 1.2px, transparent 1.2px);
  background-size: 14px 14px;
}

.bg-[#111111], .bg-stipple-dark {
  background-color: #111111;
  background-image: radial-gradient(#2d2d2d 1.2px, transparent 1.2px);
  background-size: 16px 16px;
}

/* Heading Typography */
.font-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.font-hindi {
  font-family: 'Noto Sans Devanagari', sans-serif;
}

.font-script {
  font-family: 'Caveat', cursive;
  font-weight: 700;
}

/* Highlighters */
.highlight-yellow {
  background-color: var(--campaign-yellow);
  padding: 0.05em 0.3em;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: #111111;
  border-radius: 2px;
}

.highlight-pink {
  background-color: var(--editorial-pink);
  padding: 0.05em 0.3em;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: #ffffff;
  border-radius: 2px;
}

.highlight-blue {
  background-color: var(--intel-blue);
  padding: 0.05em 0.3em;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: #ffffff;
  border-radius: 2px;
}

/* Post-it Note & Tape Strip FX */
.postit-note {
  background-color: #FFF066;
  color: #111111;
  font-family: 'Caveat', cursive;
  box-shadow: 4px 6px 16px rgba(0, 0, 0, 0.2);
  transform: rotate(3deg);
  transition: transform 0.2s ease;
}

.postit-note:hover {
  transform: rotate(0deg) scale(1.03);
}

.tape-strip {
  background: rgba(245, 230, 200, 0.85);
  border: 1px dashed rgba(120, 100, 70, 0.4);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transform: rotate(-4deg);
}

/* Hide Scrollbar for Horizontal Touch Sliders */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Responsive Torn Paper Clip Path */
@media (min-width: 640px) {
  .torn-paper-box {
    clip-path: polygon(
      0% 12px, 2% 2px, 5% 14px, 9% 3px, 13% 12px, 17% 1px, 22% 13px, 26% 3px,
      31% 12px, 35% 1px, 40% 14px, 45% 2px, 50% 12px, 55% 3px, 60% 14px, 65% 1px,
      70% 13px, 75% 2px, 80% 12px, 85% 3px, 90% 14px, 95% 1px, 100% 12px,
      100% calc(100% - 12px), 97% calc(100% - 2px), 93% calc(100% - 14px), 88% calc(100% - 3px), 83% calc(100% - 12px), 78% calc(100% - 1px),
      73% calc(100% - 13px), 68% calc(100% - 2px), 63% calc(100% - 14px), 58% calc(100% - 3px), 53% calc(100% - 12px), 48% calc(100% - 1px),
      43% calc(100% - 13px), 38% calc(100% - 2px), 33% calc(100% - 14px), 28% calc(100% - 3px), 23% calc(100% - 12px), 18% calc(100% - 1px),
      13% calc(100% - 13px), 8% calc(100% - 2px), 4% calc(100% - 14px), 0% calc(100% - 4px)
    );
  }
}

@media (max-width: 639px) {
  .torn-paper-box {
    clip-path: polygon(
      0% 6px, 5% 0px, 10% 6px, 15% 1px, 20% 6px, 25% 0px, 30% 6px, 35% 1px,
      40% 6px, 45% 0px, 50% 6px, 55% 1px, 60% 6px, 65% 0px, 70% 6px, 75% 1px,
      80% 6px, 85% 0px, 90% 6px, 95% 1px, 100% 6px,
      100% calc(100% - 6px), 95% 100%, 90% calc(100% - 6px), 85% 100%, 80% calc(100% - 6px), 75% 100%,
      70% calc(100% - 6px), 65% 100%, 60% calc(100% - 6px), 55% 100%, 50% calc(100% - 6px), 45% 100%,
      40% calc(100% - 6px), 35% 100%, 30% calc(100% - 6px), 25% 100%, 20% calc(100% - 6px), 15% 100%,
      10% calc(100% - 6px), 5% 100%, 0% calc(100% - 6px)
    );
  }
}

/* Custom Yellow CTA Button */
.btn-yellow {
  background-color: var(--campaign-yellow);
  color: #111111;
  font-weight: 800;
  border-radius: 9999px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
}

.btn-yellow:hover {
  background-color: var(--campaign-yellow-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 196, 0, 0.45);
}

/* Dark Outlined Button */
.btn-dark-outline {
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  border-radius: 9999px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
}

.btn-dark-outline:hover {
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

/* Modal Overlay Styling */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
}

.modal-content-box {
  max-height: 85vh;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Card Hover */
.card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--paper-ivory);
}
::-webkit-scrollbar-thumb {
  background: #c7bba8;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a89a85;
}

/* Smooth Tab Transitions */
.tab-content {
  display: none;
  animation: fadeIn 0.3s ease-in-out forwards;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}