/* A1 Express Locksmith - Custom navigation styling, scrollbar, and animations */

/* Smooth Scrolling & Matching Custom Browser Scrollbar */
html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #0f172a;
}

::-webkit-scrollbar-thumb {
  background: #1e3a5f;
  border-radius: 6px;
  border: 3px solid #0f172a;
}

::-webkit-scrollbar-thumb:hover {
  background: #2563eb;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #1e3a5f #0f172a;
}

/* Header Sticky Mode */
header.sticky {
  background-color: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Hero Slider Dark Overlay (Lightened 30% for vibrant background image visibility) */
section.relative > div.inset-0::after,
.hero-slide-overlay {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.38) 0%, rgba(15, 23, 42, 0.32) 50%, rgba(15, 23, 42, 0.52) 100%);
  pointer-events: none;
  z-index: 2;
}

section.relative > div.relative.z-10,
section.relative > div.relative.z-20,
section.relative .max-w-\[1280px\] {
  position: relative;
  z-index: 10 !important;
}

/* 1. Desktop Dropdowns */
.services-dropdown-menu,
.areas-dropdown-menu {
  position: absolute;
  top: 100%;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15), 0 8px 12px -6px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  display: block !important;
}

/* Hover Bridge to prevent premature fadeout when cursor moves across gap */
.services-dropdown-menu::before,
.areas-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -24px;
  left: -30px;
  right: -30px;
  height: 30px;
  background: transparent;
  pointer-events: auto;
}

/* Services Dropdown (Single Column, Left Aligned) */
.services-dropdown-menu {
  left: 0;
  width: 288px; /* w-72 */
  padding: 8px 0;
}

/* Service Areas Dropdown (Double Column, Centered) */
.areas-dropdown-menu {
  left: 50%;
  transform: translate(-50%, 8px);
  width: 520px;
  padding: 12px 0;
}

/* Hover effects for services / areas dropdown list items */
.services-dropdown-menu a {
  display: block;
  padding: 10px 16px;
  font-size: 0.875rem; /* text-sm */
  color: #1e293b; /* text-foreground-100 */
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.services-dropdown-menu a:hover {
  background-color: #eff6ff; /* hover:bg-primary-50 */
  color: #1d4ed8; /* hover:text-primary-700 */
}

/* Double-column grid inside Areas dropdown */
.areas-dropdown-menu .grid {
  display: grid;
  grid-template-cols: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: 0 8px;
}

.areas-dropdown-menu .grid a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.875rem; /* text-sm */
  color: #1e293b;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.areas-dropdown-menu .grid a:hover {
  background-color: #eff6ff;
  color: #1d4ed8;
}

/* Bottom section inside Areas dropdown */
.areas-dropdown-menu .border-t {
  border-top: 1px solid #f1f5f9;
  margin-top: 8px;
  padding: 8px 16px 0 16px;
}

.areas-dropdown-menu .border-t a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  transition: color 0.15s;
}

.areas-dropdown-menu .border-t a:hover {
  color: #1d4ed8;
}

/* Chevron transitions */
.dropdown-arrow {
  transition: transform 0.2s ease;
}

/* Hover trigger for desktop menus */
.services-dropdown-container:hover .services-dropdown-menu,
.areas-dropdown-container:hover .areas-dropdown-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.areas-dropdown-container:hover .areas-dropdown-menu {
  transform: translate(-50%, 0) !important;
}

.services-dropdown-container:hover .services-dropdown-menu {
  transform: translateY(0) !important;
}

.services-dropdown-container:hover .dropdown-arrow,
.areas-dropdown-container:hover .dropdown-arrow {
  transform: rotate(180deg);
}

/* 2. Mobile Menu (Header Dropdown style) */
.mobile-dropdown-menu-container {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: block !important;
}

.mobile-dropdown-menu-container.open {
  max-height: calc(100vh - 4.5rem) !important; /* height adjusted for sticky header */
  overflow-y: auto !important; /* allow scrolling inside the dropdown itself */
}

/* Mobile Accordions */
.mobile-accordion-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mobile-accordion-toggle.open .mobile-chevron {
  transform: rotate(180deg);
}

.mobile-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}


/* 3. Revealed animations */
.revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Directional reveal variants — JS sets opacity/transform via inline style,
   but we pre-define the initial direction here as a baseline */
.scroll-reveal-left {
  /* starts hidden — JS will animate from translateX(-30px) */
}
.scroll-reveal-right {
  /* starts hidden — JS will animate from translateX(30px) */
}
.scroll-reveal-scale {
  /* starts hidden — JS will animate from scale(0.95) */
}

/* areas-reveal is just an alias handled by the same JS observer */
.areas-reveal { }

/* FAQ Accordion — JS controls maxHeight directly on the answer div */
/* Ensure the FAQ answer div (button's next sibling) is fully hidden by default */
.faq-reveal.bg-white > button + div,
.faq-item > button + div,
[data-faq-item] > button + div {
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease;
}

/* Open state visual highlight on FAQ item */
.faq-reveal.bg-white.faq-open {
  border-color: #bfdbfe !important; /* primary-200 */
  box-shadow: 0 0 0 1px rgba(37,99,235,0.12);
}

/* FAQ button hover */
.faq-reveal.bg-white button:hover {
  background-color: #f8fafc;
}

/* Legacy selectors kept for compatibility */
[data-faq-answer], .faq-answer, .faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: block !important;
}
[data-faq-answer].open, .faq-answer.open, .faq-content.open {
  max-height: 1000px;
}

/* ── Contact Section — always visible fallback ── */
.contact-reveal {
  /* The JS safety net will reveal these, but ensure they're never
     permanently stuck invisible if JS fails */
}

/* ── Reviews grid on mobile — show as stacked ── */
@media (max-width: 767px) {
  .reviews-reveal.grid .bg-white {
    display: block !important;
  }
}

/* 4. Form Status Messages */
.form-status-msg {
  display: none;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  transition: all 0.3s ease;
}
.form-status-msg.success {
  display: block !important;
  background-color: #f0fdf4 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
}
.form-status-msg.error {
  display: block !important;
  background-color: #fef2f2 !important;
  color: #991b1b !important;
  border: 1px solid #fee2e2 !important;
}


/* Custom Global Scrollbar in Branding Colors */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05); 
}
::-webkit-scrollbar-thumb {
  background: var(--primary-500, #0284c7); 
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-600, #0369a1); 
}

/* Left border on mobile accordion to look like a branding bar just in case */
.mobile-accordion-content .block {
  border-left: 2px solid transparent;
}
.mobile-accordion-content .block:hover {
  border-left-color: var(--primary-500, #0284c7);
}


.mobile-accordion-content {
  max-height: none;
  overflow: visible;
  display: block;
  opacity: 1;
  visibility: visible;
}

.mobile-accordion-content {
  max-height: none;
  overflow: visible;
  display: block;
  opacity: 1;
  visibility: visible;
}

.mobile-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}