/*
Theme Name: Tanbaugh Civil
Theme URI: https://tanbaughcivil.com
Author: Tanbaugh Civil Team
Author URI: https://tanbaughcivil.com
Description: California Class A General Engineering Contractor Theme. Features cinematic scroll video scrubbing, horizontal drag carousels, responsive bento grids, and turnkey project/service single page templates.
Version: 1.1.4
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: tanbaugh-civil
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --color-primary-orange: #ff5500;
  --color-brand-accent: #d4a373;
}

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

html {
  font-family: var(--font-sans);
  background-color: #000;
  color: #fff;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  background-color: #000000;
  color: #ffffff;
  overflow-x: hidden;
  font-family: var(--font-sans);
}

::selection {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Hide scrollbar for carousels */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fadeIn {
  animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Base Utility Classes */
.bg-sunset-gradient {
  background: linear-gradient(135deg, #ff3d00 0%, #ff6000 50%, #ffa000 100%);
}

.backdrop-blur-xl {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.backdrop-blur-2xl {
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
}

/* ========================================================
   HEADLINE LINE-HEIGHT & VERTICAL SPACING FIX
   Ensures tight, impactful display headings with no
   accidental line gaps between broken lines.
   ======================================================== */
.hero-headline {
  line-height: 1.01 !important;
  letter-spacing: -0.035em !important;
}

.section-headline {
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
}

.hero-headline br,
.section-headline br,
h1 br,
h2 br,
h3 br {
  display: block;
  content: "";
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* ========================================================
   WORDPRESS ADMIN BAR COMPATIBILITY
   Ensures the floating header, sticky canvas, and modals
   never overlap the top WordPress admin panel bar.
   ======================================================== */
:root {
  --wp-admin-bar-height: 0px;
}

body.admin-bar {
  --wp-admin-bar-height: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --wp-admin-bar-height: 46px;
  }
}

/* Push the fixed site header down below the admin bar */
body.admin-bar #site-header {
  top: var(--wp-admin-bar-height);
}

/* Ensure sticky elements (canvas, etc.) stick below admin bar */
body.admin-bar .sticky.top-0,
body.admin-bar [class*="sticky"][class*="top-0"] {
  top: var(--wp-admin-bar-height);
}

/* Ensure full-screen modal overlays are offset properly */
body.admin-bar .modal-overlay {
  top: var(--wp-admin-bar-height);
  height: calc(100vh - var(--wp-admin-bar-height));
}

/* Admin bar z-index guard so dropdown menus remain fully interactive */
#wpadminbar {
  z-index: 99999 !important;
}

/* Enforce 1400px maximum container width from header to footer */
.site-container,
.max-w-site,
.max-w-1400 {
  max-width: 1400px !important;
}

/* ========================================================
   CAROUSEL FULL-WIDTH TRACK ALIGNMENT & MOBILE TOUCH
   Aligns the first card's left edge exactly with the 
   max-w-[1400px] content container and section headlines.
   ======================================================== */
.carousel-track-align {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 380px) {
  .carousel-track-align {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 640px) {
  .carousel-track-align {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .carousel-track-align {
    padding-left: max(4rem, calc((100% - 1400px) / 2 + 4rem));
    padding-right: max(4rem, calc((100% - 1400px) / 2 + 4rem));
  }
}

#projects-carousel,
#services-carousel {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

#projects-carousel > *,
#services-carousel > * {
  scroll-snap-align: start;
}

/* ========================================================
   MOBILE NAVBAR & DROPDOWN ENHANCEMENTS
   ======================================================== */
#mobile-menu-dropdown {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  transform-origin: top center;
}

#floating-navbar {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

/* ========================================================
   ACTIVE NAVIGATION MENU STYLES
   ======================================================== */
.nav-link.is-active {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.nav-link.is-active .nav-active-dot {
  display: inline-block !important;
}

.nav-link:not(.is-active) .nav-active-dot {
  display: none !important;
}

.mobile-nav-link.is-active {
  font-weight: 700;
}

.mobile-nav-link.is-active .mobile-active-dot {
  display: inline-block !important;
}

.mobile-nav-link:not(.is-active) .mobile-active-dot {
  display: none !important;
}

/* ========================================================
   SCROLL ANIMATION BACKGROUND VIGNETTE EFFECT
   Subtle cinematic lens vignette applied exclusively to the
   scroll-driven canvas background in Hero and About sections.
   ======================================================== */
.scroll-canvas-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: 
    /* Subtle radial lens vignette darkening outer perimeter and corners */
    radial-gradient(ellipse 85% 85% at 50% 50%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.82) 100%),
    /* Directional falloff to protect navbar contrast and smooth transition */
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.08) 22%, rgba(0, 0, 0, 0.18) 65%, rgba(0, 0, 0, 0.88) 100%);
  transition: opacity 0.3s ease;
}

.scroll-canvas-vignette.vignette-medium {
  background: 
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.48) 68%, rgba(0, 0, 0, 0.9) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.1) 22%, rgba(0, 0, 0, 0.22) 65%, rgba(0, 0, 0, 0.92) 100%);
}

.scroll-canvas-vignette.vignette-heavy {
  background: 
    radial-gradient(ellipse 75% 75% at 50% 50%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.62) 65%, rgba(0, 0, 0, 0.96) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.15) 20%, rgba(0, 0, 0, 0.3) 65%, rgba(0, 0, 0, 0.96) 100%);
}

.scroll-canvas-vignette.vignette-none {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 35%, transparent 65%, rgba(0, 0, 0, 0.8) 100%);
}