/* ==========================================================================
   SEASONAL FALL THEME - remove the 2 include lines in resource/views/layout/header.php to disable.
   --------------------------------------------------------------------------
   Subtle, professional autumn accents for La Necar Logistics:
     1. Falling leaves overlay (created by assets/js/fall-theme.js)
     2. Header accent line (warm autumn gradient along bottom of header)
     3. Header logo accent (delicate maple leaf accent next to .logo-link)
     4. Hero seasonal badge ("🍂 Fall Season 2026 | Reliable Non-Emergency Medical Transportation")
     5. Warm button & location pill autumn hover glows
     6. Warm amber tint on the home hero (under the hero text)
     7. Seasonal message in the top bar
     8. Small static corner leaves in the footer
   Only transform + opacity are animated for maximum performance.
   Fully respects prefers-reduced-motion.
   ========================================================================== */

:root {
  --fall-orange: #C8642B;
  --fall-terracotta: #B5462C;
  --fall-mustard: #D9A23B;
  --fall-red: #8E2F23;
  --fall-olive: #7A7A3A;
}

/* --------------------------------------------------------------------------
   1. Falling leaves overlay
   z-index 50: above page content (hero layers use 1-10) but well below the
   fixed header/top bar (1000), header dropdowns (2000), back-to-top (999),
   modals (9999), SweetAlert2 (1060+), Tawk.to and UserWay widgets.
   -------------------------------------------------------------------------- */
.fall-leaves {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 50;
  contain: strict;
}

.fall-leaf {
  position: absolute;
  top: 0;
  left: var(--fall-x, 50%);
  width: var(--fall-size, 20px);
  height: var(--fall-size, 20px);
  color: var(--fall-color, var(--fall-orange));
  opacity: 0;
  transform: translate3d(0, -12vh, 0);
  will-change: transform, opacity;
  animation: fall-leaf-drop var(--fall-duration, 16s) linear var(--fall-delay, 0s) infinite both;
}

.fall-leaf__inner {
  display: block;
  width: 100%;
  height: 100%;
  will-change: transform;
  animation: fall-leaf-sway var(--fall-sway-duration, 4s) ease-in-out var(--fall-delay, 0s) infinite alternate both;
}

.fall-leaf svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

@keyframes fall-leaf-drop {
  0% {
    transform: translate3d(0, -12vh, 0);
    opacity: 0;
  }

  8% {
    opacity: var(--fall-opacity, 0.75);
  }

  90% {
    opacity: var(--fall-opacity, 0.75);
  }

  100% {
    transform: translate3d(var(--fall-drift, 40px), 108vh, 0);
    opacity: 0;
  }
}

@keyframes fall-leaf-sway {
  0% {
    transform: translate3d(calc(var(--fall-sway, 30px) * -1), 0, 0) rotate(calc(var(--fall-rotate, 30deg) * -1));
  }

  100% {
    transform: translate3d(var(--fall-sway, 30px), 0, 0) rotate(var(--fall-rotate, 30deg));
  }
}

/* Paused when the tab is hidden to conserve battery and resources */
.fall-leaves.is-paused .fall-leaf,
.fall-leaves.is-paused .fall-leaf__inner {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   2. Header Accent Line
   Warm autumn gradient line along the bottom edge of the header
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
}

.header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #C8642B, #D9A23B, transparent);
  pointer-events: none;
  z-index: 1001;
}

/* --------------------------------------------------------------------------
   3. Logo Accent
   Delicate maple leaf accent next to the header logo
   -------------------------------------------------------------------------- */
.logo-link::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C8642B' d='M12 2l1.6 3.6L16 4.5l-.6 4 3.6-1.2-1.2 2.6 3.2 1.4-3.6 2.4.8 1.8-5.2-.7-.4 7.2h-1.2l-.4-7.2-5.2.7.8-1.8L3 11.3l3.2-1.4L5 7.3l3.6 1.2-.6-4 2.4 1.1z'/%3E%3C/svg%3E");
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
  pointer-events: none;
}

.logo-link:hover::after {
  transform: rotate(14deg) scale(1.15);
  filter: drop-shadow(0 2px 5px rgba(200, 100, 43, 0.45));
}

[data-theme="dark"] .logo-link::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D9A23B' d='M12 2l1.6 3.6L16 4.5l-.6 4 3.6-1.2-1.2 2.6 3.2 1.4-3.6 2.4.8 1.8-5.2-.7-.4 7.2h-1.2l-.4-7.2-5.2.7.8-1.8L3 11.3l3.2-1.4L5 7.3l3.6 1.2-.6-4 2.4 1.1z'/%3E%3C/svg%3E");
}

@media (max-width: 576px) {
  .logo-link::after {
    width: 14px;
    height: 14px;
    margin-left: 5px;
  }
}

/* --------------------------------------------------------------------------
   4. Hero Seasonal Badge
   Subtle pill badge placed right above the main title in the hero
   -------------------------------------------------------------------------- */
.fall-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 18px;
  margin-bottom: 1.25rem;
  border-radius: 999px;
  background: rgba(200, 100, 43, 0.24);
  border: 1px solid rgba(217, 162, 59, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(200, 100, 43, 0.28);
  color: #FFF7ED;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  max-width: 95%;
  line-height: 1.35;
  will-change: transform, opacity;
  animation: fall-badge-fadein 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.fall-hero-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(200, 100, 43, 0.42);
  border-color: rgba(217, 162, 59, 0.75);
}

.fall-hero-badge__icon {
  font-size: 1.05rem;
  line-height: 1;
  display: inline-block;
  transform: rotate(-6deg);
  transition: transform 0.25s ease;
}

.fall-hero-badge:hover .fall-hero-badge__icon {
  transform: rotate(14deg) scale(1.15);
}

.fall-hero-badge__divider {
  margin: 0 6px;
  opacity: 0.6;
  color: #D9A23B;
}

@keyframes fall-badge-fadein {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 768px) {
  .fall-hero-badge {
    padding: 5px 14px;
    font-size: 0.78rem;
    gap: 6px;
    margin-bottom: 1rem;
  }

  .fall-hero-badge__divider {
    margin: 0 4px;
  }
}

@media (max-width: 480px) {
  .fall-hero-badge {
    font-size: 0.72rem;
    padding: 4px 10px;
    line-height: 1.25;
  }
}

/* --------------------------------------------------------------------------
   5. Warm Button & Location Pill Autumn Hover Glows
   -------------------------------------------------------------------------- */
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-submit:hover,
.btn-submit:focus-visible,
.btn-book:hover,
.btn-book:focus-visible,
.btn-estimate:hover,
.btn-estimate:focus-visible {
  box-shadow: 0 6px 22px rgba(200, 100, 43, 0.45), 0 0 0 1px rgba(217, 162, 59, 0.4) !important;
}

.btn-outline:hover,
.btn-outline:focus-visible {
  border-color: #D9A23B !important;
  box-shadow: 0 6px 22px rgba(217, 162, 59, 0.35) !important;
}

.btn-navy:hover,
.btn-navy:focus-visible,
.btn-outline-navy:hover,
.btn-outline-navy:focus-visible {
  box-shadow: 0 6px 20px rgba(200, 100, 43, 0.35) !important;
}

.location-pill {
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease !important;
  cursor: default;
}

.location-pill:hover {
  transform: translateY(-2px);
  background: rgba(200, 100, 43, 0.28) !important;
  border-color: rgba(217, 162, 59, 0.7) !important;
  box-shadow: 0 4px 16px rgba(200, 100, 43, 0.38) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus-visible {
  box-shadow: 0 6px 24px rgba(217, 162, 59, 0.5), 0 0 0 1px rgba(200, 100, 43, 0.6) !important;
}

[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .btn-outline:focus-visible {
  box-shadow: 0 6px 22px rgba(217, 162, 59, 0.45) !important;
}

[data-theme="dark"] .location-pill:hover {
  background: rgba(200, 100, 43, 0.4) !important;
  border-color: rgba(217, 162, 59, 0.85) !important;
  box-shadow: 0 4px 18px rgba(217, 162, 59, 0.45) !important;
}

/* --------------------------------------------------------------------------
   6. Warm hero tint (home hero slider)
   Applied to every slide's .hero-overlay (z-index 1) so the tint covers all
   slides while .hero-content (z-index 2) stays on top and fully readable.
   -------------------------------------------------------------------------- */
#home.hero-slider-section .hero-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(160deg,
      rgba(200, 100, 43, 0.18) 0%,
      rgba(217, 162, 59, 0.08) 45%,
      rgba(200, 100, 43, 0) 75%);
}

/* --------------------------------------------------------------------------
   7. Top bar seasonal message
   -------------------------------------------------------------------------- */
.top-bar-item.fall-topbar-msg {
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(142, 47, 35, 0.4);
  color: #ffffff;
  font-weight: 500;
  white-space: nowrap;
}

.fall-topbar-msg svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  fill: currentColor;
  color: #FCD34D;
}

/* Hide on narrower screens so the fixed 36px top bar never wraps/overflows */
@media (max-width: 991px) {
  .fall-topbar-msg,
  .fall-topbar-divider {
    display: none !important;
  }
}

/* styles.css hides every .top-bar-item except :first-child at <=480px.
   The fall message is the first child (and hidden), so re-show the phone. */
@media (max-width: 480px) {
  .fall-topbar-divider + .top-bar-item {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   8. Decorative corner leaves (footer top corners)
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
}

.footer::before,
.footer::after {
  content: "";
  position: absolute;
  top: 14px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.35;
  z-index: 0;
}

.footer::before {
  right: 18px;
  width: 46px;
  height: 46px;
  transform: rotate(18deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C8642B' d='M12 2l1.6 3.6L16 4.5l-.6 4 3.6-1.2-1.2 2.6 3.2 1.4-3.6 2.4.8 1.8-5.2-.7-.4 7.2h-1.2l-.4-7.2-5.2.7.8-1.8L3 11.3l3.2-1.4L5 7.3l3.6 1.2-.6-4 2.4 1.1z'/%3E%3C/svg%3E");
}

.footer::after {
  right: 64px;
  top: 40px;
  width: 26px;
  height: 26px;
  transform: rotate(-24deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D9A23B' d='M12 2C7 6 5 11 6.5 15.5c1 3 3.4 4.5 5 5V23h1v-2.5c1.9-.6 4.2-2.1 5-5C19.4 10.8 17 6 12 2z'/%3E%3C/svg%3E");
}

.footer > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .footer::before {
    width: 34px;
    height: 34px;
    right: 12px;
  }

  .footer::after {
    width: 20px;
    height: 20px;
    right: 48px;
    top: 34px;
  }
}

/* --------------------------------------------------------------------------
   Accessibility & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fall-leaves {
    display: none !important;
  }

  .fall-leaf,
  .fall-leaf__inner,
  .fall-hero-badge {
    animation: none !important;
  }

  .location-pill:hover,
  .logo-link:hover::after,
  .fall-hero-badge:hover,
  .fall-hero-badge:hover .fall-hero-badge__icon {
    transform: none !important;
  }
}

@media print {
  .fall-leaves,
  .fall-hero-badge {
    display: none !important;
  }
}