/* =============================================
   CRITICAL CSS — Mathura Vrindavan Tour Packages
   Above-the-fold only. Inline this inside a
   <style> tag in every page's <head> for
   fastest possible first render.
   All remaining styles are in css/main.css.
   ============================================= */

/* ── 1. Design tokens ── */
:root {
  --saffron:       #FF6B00;
  --deep-saffron:  #E55A00;
  --maroon:        #8B1A1A;
  --gold:          #D4A017;
  --gold-light:    #F5C518;
  --cream:         #FFF8F0;
  --dark:          #1A1A1A;
  --gray:          #555;
  --white:         #ffffff;
  --shadow:        0 4px 20px rgba(0,0,0,0.12);
  --border-radius: 12px;
  --transition:    all 0.3s ease;
}

/* ── 2. Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  {
  font-family: 'Georgia', 'Times New Roman', serif;
  color: var(--dark);
  background: var(--white);
  line-height: 1.7;
  font-size: 16px;
}

/* ── 3. Typography ── */
h1, h2, h3, h4, h5 { font-family: Georgia, serif; line-height: 1.3; color: var(--maroon); }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
a  { color: var(--saffron); text-decoration: none; transition: var(--transition); }
p  { margin-bottom: 1rem; color: var(--gray); }

/* ── 4. Container ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ── 5. Header / site-header placeholder ── */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  min-height: 90px;
  background: rgba(255,255,255,0.97);
}
header {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 16px rgba(0,0,0,0.1);
}
.top-bar {
  background: var(--maroon);
  color: var(--white);
  text-align: center;
  padding: 6px 20px;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
}
.top-bar a { color: var(--gold-light); }
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--saffron), var(--maroon));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--white); flex-shrink: 0;
}
.logo-text h1 { font-size: 1.1rem; color: var(--maroon); line-height: 1.2; margin: 0; }
.logo-text span { font-size: 0.72rem; color: var(--saffron); letter-spacing: 1px; text-transform: uppercase; font-family: Arial, sans-serif; }

/* ── 6. Breadcrumb offset (accounts for fixed header) ── */
.breadcrumb-bar { margin-top: 90px; }
.hero           { padding-top: 90px; }
.page-hero      { padding-top: 100px; }

/* ── 7. Primary button (visible in hero) ── */
.btn-primary {
  background: linear-gradient(135deg, var(--saffron), var(--deep-saffron));
  color: var(--white);
  padding: 16px 36px;
  border-radius: 50px;
  font-weight: bold;
  font-size: 1rem;
  font-family: Arial, sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  border: 2px solid transparent;
  cursor: pointer;
}

/* ── 8. Mobile: hide nav links by default ── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
  .hamburger span { width: 25px; height: 3px; background: var(--maroon); border-radius: 3px; display: block; }
}
