/*
Theme Name: PakVisaGuide
Theme URI: https://www.pakvisaguide.com
Author: PakVisaGuide
Author URI: https://www.pakvisaguide.com
Description: SEO/GEO-focused informational theme for Pakistan visa guidance — study, tourist, work, and immigration guides. Built on Tailwind CSS (CDN) with a Deep Forest green palette.
Version: 1.0.0
Text Domain: pakvisaguide
*/

/* ==========================================================================
   PAKVISAGUIDE — SHARED DESIGN SYSTEM
   Tailwind (CDN) handles utility classes; this file holds design tokens and
   the small set of custom/animated components Tailwind utilities can't express.
   Palette: Deep Forest — dark green primary, green accent, white, light gray.
   ========================================================================== */

:root {
  --navy: #0b3d2e;         /* primary dark green */
  --navy-light: #14532d;
  --navy-dark: #062017;
  --pink: #16a34a;         /* green accent */
  --pink-light: #dcfce7;
  --pink-dark: #15803d;
  --mist: #f1f5f4;         /* light gray background */
  --ink: #0f1b14;
  --line: #dfe5e2;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
.font-display {
  font-family: "Fraunces", serif;
}

/* ---------- Decorative shapes ---------- */
.hero-blob {
  border-radius: 200px 200px 200px 40px;
}
.hero-blob-2 {
  border-radius: 40px 200px 40px 200px;
}

.r-card {
  border-radius: 32px;
}
.r-card-lg {
  border-radius: 48px;
}
.r-btn {
  border-radius: 999px;
}
.r-panel {
  border-radius: 100px 32px 100px 32px;
}

.stamp {
  position: relative;
  border: 2px dashed rgba(22, 163, 74, 0.55);
  border-radius: 999px;
  transform: rotate(-6deg);
}
.perforated {
  position: relative;
}
.perforated::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background-image: radial-gradient(
    circle,
    rgba(15, 27, 20, 0.18) 2px,
    transparent 2.4px
  );
  background-size: 1px 14px;
  background-repeat: repeat-y;
}
.stub-notch::before,
.stub-notch::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.stub-notch::before {
  top: -11px;
}
.stub-notch::after {
  bottom: -11px;
}

.timeline-line {
  background: repeating-linear-gradient(
    90deg,
    var(--pink) 0 10px,
    transparent 10px 18px
  );
  height: 3px;
}

.grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* Inner-page hero treatment */
.page-hero {
  position: relative;
  overflow: hidden;
}
.page-hero .grain {
  opacity: 0.2;
}
.page-hero-glow-a {
  position: absolute;
  top: -8rem;
  left: -8rem;
  width: 24rem;
  height: 24rem;
  background: radial-gradient(circle, rgba(22, 163, 74, 0.18), transparent 70%);
  border-radius: 9999px;
  filter: blur(60px);
  pointer-events: none;
}
.page-hero-glow-b {
  position: absolute;
  bottom: -6rem;
  right: -6rem;
  width: 22rem;
  height: 22rem;
  background: radial-gradient(circle, rgba(11, 61, 46, 0.35), transparent 70%);
  border-radius: 9999px;
  filter: blur(60px);
  pointer-events: none;
}

/* ---------- Interaction / motion ---------- */
.has-dropdown:hover .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}
.dropdown-panel {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px) scale(0.98);
  transition:
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.lift {
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s ease;
}
.lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -20px rgba(11, 61, 46, 0.2);
}

.test-track {
  transition: transform 0.5s ease;
}
.badge-tab-btn.active {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 10px 25px -5px rgba(22, 163, 74, 0.4);
}
.country-item-btn.active {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--pink);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
  animation: countryPulse 0.6s ease;
}
@keyframes countryPulse {
  0% {
    transform: scale(0.94);
  }
  60% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

.marquee-track {
  animation: marquee 28s linear infinite;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Shared header/footer bits ---------- */
.brand-wordmark {
  font-family: "Fraunces", serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Mobile "Visa Types" collapsible menu (native <details>/<summary>) —
   hide the browser's default disclosure marker so only our chevron icon shows. */
.mm-details > summary {
  list-style: none;
}
.mm-details > summary::-webkit-details-marker,
.mm-details > summary::marker {
  display: none;
}