/*
Theme Name: KM Tours And Travels
Theme URI: https://kmtoursandtravels.com
Author: KM Tours And Travels
Author URI: https://kmtoursandtravels.com
Description: Ultra-modern, responsive custom WordPress theme for KM Tours And Travels (Kewal Maurya Tours) — chauffeur-driven travel, certified guides, hotel reservations, and custom tour packages across India. Built with Tailwind CSS, glassmorphic package cards, and a boarding-pass inspired signature motif.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: km-tours
Tags: travel, tours, custom-colors, custom-menu, featured-images, responsive-layout
*/

/* ==========================================================================
   KM Tours And Travels — Base Theme Styles
   Palette drawn directly from the KM Tours logo (red roundel + wordmark),
   paired with marigold gold — a red+gold combination rooted in Indian
   travel iconography (vermillion, marigold garlands, festival colour).
   Design tokens (also mirrored in functions.php Tailwind config):
     --km-red-900:   #2A0B0D  (deep wine-black — dark-mode surface, footer)
     --km-red-700:   #A31F27  (hover / pressed state)
     --km-red-600:   #E0262C  (primary brand red, sampled from the logo roundel)
     --km-gold-500:  #F0A202  (marigold accent — CTAs, ratings, price highlights)
     --km-gold-600:  #D68F00  (gold hover state)
     --km-crimson-500: #C81E3A (secondary accent — price badges, distinct from primary red)
     --km-mist-50:   #FFF9F6  (light-mode background, warm white)
     --km-mist-100:  #FCEFE9  (soft blush section tint)
     --km-ink-900:   #241512  (primary text / dark-mode background)
     --km-ink-700:   #4A3530  (secondary text)
   Display face: Fraunces (editorial, warm serif)
   Body face:    Plus Jakarta Sans
   Data/ticket face: IBM Plex Mono (boarding-pass signature motif)
   ========================================================================== */

:root {
  --km-red-900: #2A0B0D;
  --km-red-700: #A31F27;
  --km-red-600: #E0262C;
  --km-gold-500: #F0A202;
  --km-gold-600: #D68F00;
  --km-crimson-500: #C81E3A;
  --km-mist-50: #FFF9F6;
  --km-mist-100: #FCEFE9;
  --km-ink-900: #241512;
  --km-ink-700: #4A3530;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  background-color: var(--km-mist-50);
  color: var(--km-ink-900);
}

.font-display {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
}

.font-ticket {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Glassmorphic surface used across cards */
.km-glass {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.dark .km-glass {
  background: rgba(224, 38, 44, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Dark-mode body gradient wash — keeps the wine-black surface from feeling flat */
.dark body {
  background-image: radial-gradient(circle at 15% 0%, rgba(224, 38, 44, 0.14), transparent 45%),
    radial-gradient(circle at 85% 100%, rgba(240, 162, 2, 0.08), transparent 45%);
  background-attachment: fixed;
}

/* Boarding-pass perforation signature motif */
.km-perforated {
  position: relative;
}
.km-perforated::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 72%;
  width: 0;
  border-left: 2px dashed rgba(28, 37, 33, 0.18);
}
.dark .km-perforated::after {
  border-left-color: rgba(255, 255, 255, 0.18);
}
.km-perforated::before {
  content: "";
  position: absolute;
  left: calc(72% - 10px);
  top: -10px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--km-mist-50);
  box-shadow: 0 220px 0 -10px var(--km-mist-50);
}

/* Dotted flight-route divider */
.km-route-divider {
  height: 2px;
  background-image: linear-gradient(to right, var(--km-red-600) 45%, transparent 0%);
  background-position: top;
  background-size: 14px 2px;
  background-repeat: repeat-x;
  position: relative;
}
.km-route-divider::after {
  content: "\2708";
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  color: var(--km-gold-500);
  font-size: 14px;
}

/* Pill filter buttons */
.km-pill {
  border-radius: 999px;
  transition: all 0.2s ease;
}

.km-fade-up {
  animation: kmFadeUp 0.6s ease both;
}
@keyframes kmFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .km-fade-up { animation: none; }
  html { scroll-behavior: auto; }
}

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--km-gold-500);
  outline-offset: 2px;
}