/* CSS Variables & Theming */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800;900&display=swap');

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Regular.woff2') format('woff2'),
       url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Bold.woff2') format('woff2'),
       url('../fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary-color: #2e7d32; /* Eco Forest Green */
  --secondary-color: #4caf50; /* Eco Leaf Green */
  --bg-dark: #ffffff; /* Stark White background */
  --bg-card: rgba(46, 125, 50, 0.04); /* Light green glass tint */
  --bg-card-hover: rgba(46, 125, 50, 0.08);
  --text-main: #1b1c1e; /* Dark slate text */
  --text-muted: #555b60; /* Cool grey text */
  --glass-border: rgba(46, 125, 50, 0.15);
  --accent-green: #00e676;
  --accent-red: #ff3d00;
  --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
  background-image: radial-gradient(circle at top right, rgba(46, 125, 50, 0.06), transparent 40%),
                    radial-gradient(circle at bottom left, rgba(76, 175, 80, 0.06), transparent 40%);
}

/* Typography */
h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.03em;
}

h1 { font-size: 4.5rem; line-height: 1.1; }
h2 { font-size: 3rem; }

a {
  color: var(--text-main);
  text-decoration: none;
  transition: var(--transition);
}

/* Glassmorphism Utilities */
.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
  transition: var(--transition);
}

.glass-panel:hover {
    background: var(--bg-card-hover);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  font-size: 0.95rem;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(46, 125, 50, 0.15);
}

.btn-primary:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 25px rgba(46, 125, 50, 0.3);
}

.btn-outline {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.btn-outline:hover {
  background: rgba(255, 184, 0, 0.1);
  transform: translateY(-3px);
}

/* Navbar & Stationary Logo */
.navbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 15px 15px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1000;
  transition: all 0.3s ease;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid var(--glass-border);
  padding: 10px 15px;
}



.logo-img {
    position: absolute;
    top: 15px;
    left: 20px;
    height: 55px;
    width: 55px;
    object-fit: contain;
    z-index: 10000;
    border-radius: 8px; /* Slight rounding for a clean look */
}

.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-links a:not(.btn) {
    font-weight: 600;
    position: relative;
    font-size: 0.9rem;
    white-space: nowrap !important;
  }

.nav-links a:not(.btn)::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -6px;
  left: 0;
  background-color: var(--primary-color);
  transition: all 0.3s ease;
}

.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn).active::after {
  width: 100%;
}

/* Mobile Menu */
.hamburger {
  display: none;
  cursor: pointer;
  z-index: 1001;
}

.hamburger div {
  width: 25px;
  height: 3px;
  background-color: var(--text-main);
  margin: 5px;
  transition: all 0.3s ease;
}

.hamburger.active div {
  background-color: #fff;
}

@media (max-width: 992px) {
  /* backdrop-filter creates a containing block that traps the fixed
     off-canvas menu and causes horizontal page scroll; the blur is
     imperceptible behind the near-opaque white background. */
  .navbar.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-links {
    position: fixed;
    right: -100%;
    top: 0;
    flex-direction: column;
    background: rgba(5, 5, 5, 0.98);
    backdrop-filter: blur(20px);
    width: 100%;
    height: 100vh;
    justify-content: center;
    transition: 0.5s ease-in-out;
  }
  .nav-links.active { right: 0; }
  .nav-links a:not(.btn) { color: #fff; font-size: 1.05rem; }
  .hamburger { display: block; }
  .hamburger.active .line1 { transform: rotate(-45deg) translate(-5px, 6px); }
  .hamburger.active .line2 { opacity: 0; }
  .hamburger.active .line3 { transform: rotate(45deg) translate(-5px, -6px); }
}

/* Shared Sections */
.page-header {
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, var(--bg-dark) 100%);
  z-index: 1;
}

.page-header img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.8;
}

.page-header-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 2rem;
}

.page-header h1 {
  font-size: 4rem;
  margin-bottom: 1rem;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Stats Section */
.stats-section {
  padding: 5rem 0;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  text-align: center;
}

.stat-item h3 {
  font-size: 3.5rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

/* Forms & Inputs */
.form-group { margin-bottom: 1.5rem; }
.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-muted);
}
.form-control {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  transition: all 0.3s ease;
  font-size: 1rem;
}
.form-control:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(255, 184, 0, 0.15);
  background: rgba(255, 255, 255, 0.1);
}

/* Accordion (FAQ) */
.accordion { margin-top: 3rem; }
.accordion-item {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  margin-bottom: 1rem;
  border-radius: 12px;
  overflow: hidden;
}
.accordion-header {
  padding: 1.5rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.2rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  transition: background 0.3s;
}
.accordion-header:hover { background: rgba(255, 255, 255, 0.1); }
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  padding: 0 1.5rem;
  color: var(--text-muted);
}
.accordion-item.active .accordion-content {
  padding: 0 1.5rem 1.5rem;
}

/* Map Placeholder */
.map-placeholder {
  width: 100%;
  height: 400px;
  background: url('https://images.unsplash.com/photo-1524661135-423995f22d0b?w=1600&q=80') center/cover;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-border);
}
.map-overlay {
  position: absolute;
  top:0; left:0; width:100%; height:100%;
  background: rgba(5, 5, 5, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-color);
}

/* Facts Panel */
.fact-panel {
    border-left: 4px solid var(--primary-color);
    padding: 1.5rem 2rem;
    background: linear-gradient(90deg, rgba(255,184,0,0.1) 0%, transparent 100%);
    margin: 2rem 0;
    border-radius: 0 12px 12px 0;
}
.fact-panel h4 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

/* Badges */
.status-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 1px;
}
.status-pending { background: rgba(255, 193, 7, 0.1); color: #ffc107; border: 1px solid #ffc107; }
.status-approved { background: rgba(0, 230, 118, 0.1); color: #00e676; border: 1px solid #00e676; }
.status-scrapped { background: rgba(255, 184, 0, 0.1); color: var(--primary-color); border: 1px solid var(--primary-color); }

/* Utilities */
.text-center { text-align: center; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 4rem; }
.mb-4 { margin-bottom: 2rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
@media(max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  h1 { font-size: 3rem; }
}

/* Responsive Brand Text */
.brand-text-desktop { display: inline; }
.brand-text-mobile { display: none; }

@media (max-width: 992px) {

  /* .brand-text-desktop { display: none !important; } disabled for lockup */
  /* .brand-text-mobile { display: inline !important; } disabled for lockup */

  .navbar { padding-left: 10px !important; padding-right: 10px !important; }

  .logo-img {
    height: 40px !important;
    width: 40px !important;
    top: 20px !important;
    left: 15px !important;
  }
}



/* Government Document Watermark - Fixed */
body.watermark-page::before {
    content: "";
    position: fixed;
    top: calc(50% + 120px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(70vw, 900px);
    height: min(70vw, 900px);
    background-image: url("../images/up_logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.09;
    pointer-events: none;
    z-index: 0;
}

body.watermark-page header,
body.watermark-page main,
body.watermark-page section,
body.watermark-page footer {
    position: relative;
    z-index: 1;
}

body.watermark-page {
    padding-top: 140px;
}

/* Laptop Breakpoint Hotfix (1024px - 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
  /* Containers & Spacing */
  .navbar {
    padding: 15px 1% !important; /* Reduce horizontal padding */
    gap: 0;
  }
  .navbar.scrolled {
    padding: 10px 1% !important;
  }
  
  /* Brand Section */
  
  .logo-img {
    height: 75px !important; /* Slightly increased for this breakpoint proportionally */
    width: 75px !important;
    margin-right: 0 !important;
  }
  .brand-text-desktop {
    margin-left: 0 !important;
  }
  .brand-text-desktop span:nth-child(1) {
    font-size: 1.45rem !important; /* Wrap naturally without excessive shrinking */
  }
  .brand-text-desktop span:nth-child(2) {
    font-size: 0.75rem !important;
  }

  /* Navigation Links */
  .nav-links {
    gap: 0.75rem !important; /* Reduce gap */
  }
  .nav-links a:not(.btn) {
    font-size: 0.85rem !important; /* Reduce font size slightly */
    padding: 5px !important;
  }

  /* Login Button */
  .nav-links .btn { padding: 8px 12px !important; font-size: 0.85rem !important; white-space: nowrap !important; }

  /* UP Parivahan Logo */
  .up-parivahan-nav {
    margin-left: 5px !important;
  }
  .up-parivahan-nav img {
    height: 75px !important; /* Same height as YB logo */
  }

  /* Hero Section */
  .hero-content {
    max-width: 95% !important; /* Increase available width */
    padding: 0 2% !important;
  }
  .hero-content h1 {
    font-size: 3rem !important; /* Prevent text from becoming overly compressed */
  }
}

/* Global UP Parivahan Logo Constraint */
.up-parivahan-nav img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

/* Ensure navbar items don't wrap and cause overlap */
.navbar {
  flex-wrap: nowrap;
}

/* Floating Contact Buttons & Mobile Sticky Bar */
.floating-contact-desktop { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 9999; }
.float-btn { width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; color: white; text-decoration: none; box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: transform 0.3s ease; }
.float-btn:hover { transform: scale(1.1); color: white; }
.float-wa { background-color: #25D366; }
.float-call { background-color: var(--primary-color); }

.mobile-sticky-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    background: white;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom);
}
.msb-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 5px;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    border-right: 1px solid #eee;
    box-sizing: border-box;
    text-align: center;
}
.msb-btn:last-child { border-right: none; }
.msb-btn i { font-size: 1.2rem; margin-bottom: 4px; }
.msb-call { color: var(--primary-color); }
.msb-wa { color: #25D366; }
.msb-scrap { background: var(--primary-color); color: white; }
.msb-scrap i { color: white; }

@media (max-width: 768px) {
    .floating-contact-desktop { display: none; }
    .mobile-sticky-bar { display: flex; }
    body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* Keyboard focus visibility (mouse users are unaffected) */
.nav-links a:focus-visible,
.msb-btn:focus-visible,
.float-btn:focus-visible,
.hamburger:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}



/* Laptop Dropdown Navigation (1024px - 1366px) */
.nav-dropdown {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 5px;
    color: var(--text-main);
}
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -50px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 10px;
    border-radius: 8px;
    flex-direction: column;
    min-width: 220px;
    z-index: 1005;
    border: 1px solid var(--glass-border);
}
.nav-dropdown:hover .dropdown-menu {
    display: flex;
}
.dropdown-menu a {
    padding: 12px 15px !important;
    border-bottom: 1px solid #f1f5f9;
}
.dropdown-menu a:last-child {
    border-bottom: none;
}

/* Visibility Rules */
@media (min-width: 1367px) {
    .laptop-only { display: none !important; }
}
@media (min-width: 993px) and (max-width: 1366px) {
    .desktop-only { display: none !important; }
}
@media (max-width: 992px) {
    .laptop-only { display: none !important; }
    .desktop-only { display: block !important; }
}

/* Reallocate Space: Govt Left, Nav Center, Login Right */
@media (min-width: 993px) {
    .navbar {
        justify-content: flex-start !important;
    }
    .nav-brand {
        margin-right: 0 !important;
        flex-shrink: 0;
    }
    .nav-links {
        flex: 1;
        justify-content: center;
        gap: 2rem !important;
    }
    .nav-links .btn {
        margin-left: 0.5rem !important;
    }
}

/* On wide screens, offset the centred nav cluster by the width of the
   left-hand government lockup so it aligns with the true page centre.
   Below 1600px there is not enough clearance, so spacing is unchanged. */
@media (min-width: 1600px) {
    .nav-links {
        padding-right: 162px;
    }
}

/* Hero Spacing & Rhythm Adjustments */
.hero {
    padding-top: 176px !important;
}
.hero-badge {
    margin-bottom: 2.5rem !important;
}
.hero-content h1 {
    margin-bottom: 2rem !important;
}

/* Large Screens Optimization (1440px+) */
@media (min-width: 1440px) {
    .container {
        max-width: 1350px !important;
    }
    .hero-content {
        max-width: 1100px !important;
    }
    .rvsf-explainer {
        max-width: 1350px !important;
    }
    .services-grid-wrapper {
        max-width: 1350px !important;
    }
    .site-footer > div {
        max-width: 1350px !important;
    }
}




/* ── Mobile header lockup (≤768px) ─────────────────────────────────────────
   Scoped to .nav-brand-stacked, which is applied ONLY to the stacked
   government lockup in the <nav> of the public pages. The footer logo and the
   dashboard's horizontal brand also use .nav-brand and must not be touched.

   At full size the stacked lockup is ~127px tall, pushing the navbar past the
   100px top padding used by the hero and the dashboard, so it overlapped the
   content beneath. Below 768px the same four elements collapse into a compact
   two-row grid:
       row 1:  [UP emblem]  Transport Department / Govt. of Uttar Pradesh
       row 2:  [YB emblem]  YB BUILDERS
   Same content, same order, roughly half the height. Desktop is unaffected.
   !important is required because the lockup carries inline style attributes. */
@media (max-width: 768px) {
  .nav-brand-stacked {
    display: grid !important;
    grid-template-columns: auto auto;
    align-items: center !important;
    justify-items: start;
    column-gap: 7px;
    row-gap: 3px;
    padding: 2px 0 !important;
  }
  .nav-brand-stacked > img {
    grid-column: 1;
    grid-row: 1;
    height: 30px !important;
    width: 30px !important;
    margin-bottom: 0 !important;
  }
  .nav-brand-stacked > span {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.55rem !important;
    letter-spacing: 0.2px !important;
    margin-bottom: 0 !important;
  }
  .nav-brand-stacked > div {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-bottom: 0 !important;
  }
  .nav-brand-stacked > div img {
    height: 30px !important;
    width: 30px !important;
  }
  .nav-brand-stacked > div span {
    font-size: 0.9rem !important;
  }
  /* Keep the bar the same height static or scrolled, so it doesn't jump. */
  .navbar,
  .navbar.scrolled {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}