/* ==========================================================================
   HUTTER'S PRALNICA — Demo website
   Custom CSS
   ========================================================================== */

/* 1. CSS Custom Properties
   ========================================================================== */
:root {
  --white:      #FFFFFF;
  --snow:       #F7F9FC;
  --mist:       #EFF4FB;
  --navy:       #0F2A4A;
  --slate:      #3A5068;
  --steel:      #6B87A0;
  --rule:       #D4DDE8;
  --aqua:       #0EA5C8;
  --aqua-h:     #0B8DAB;
  --aqua-lt:    #E0F6FC;
  --teal:       #0D7A8A;
  --yellow:     #F5C842;

  --aqua-12:    rgba(14, 165, 200, 0.12);
  --aqua-20:    rgba(14, 165, 200, 0.20);
  --navy-70:    rgba(15, 42, 74, 0.70);
  --navy-88:    rgba(15, 42, 74, 0.88);

  --font-sans:  'Plus Jakarta Sans', sans-serif;

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur-normal: 0.35s;
  --dur-slow:   0.65s;
}

/* 2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background-color: var(--white);
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

[x-cloak] { display: none !important; }

/* 3. Scroll Reveal
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.revealed        { opacity: 1; transform: translateY(0); }
.reveal-left            { transform: translateX(-20px); }
.reveal-left.revealed   { transform: translateX(0); }
.reveal-right           { transform: translateX(20px); }
.reveal-right.revealed  { transform: translateX(0); }
.reveal-delay-1 { transition-delay: 80ms;  }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }
.reveal-delay-5 { transition-delay: 400ms; }

/* 4. Hero
   ========================================================================== */
.hero-overlay {
  background: linear-gradient(
    105deg,
    var(--navy-88) 0%,
    rgba(15,42,74,0.72) 45%,
    rgba(15,42,74,0.28) 100%
  );
}

/* 5. Status badge
   ========================================================================== */
.badge-open {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.30);
}

.badge-soon {
  background: rgba(245, 200, 66, 0.15);
  color: #92680A;
  border: 1px solid rgba(245, 200, 66, 0.35);
}

/* 6. Location cards
   ========================================================================== */
.location-card-active {
  transition: box-shadow var(--dur-normal) var(--ease-out),
              transform  var(--dur-normal) var(--ease-out);
}
.location-card-active:hover {
  box-shadow: 0 12px 32px rgba(14, 165, 200, 0.14);
  transform: translateY(-2px);
}

/* 7. FAQ Accordion
   ========================================================================== */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s var(--ease-out),
              opacity    0.30s ease;
  opacity: 0;
}
.faq-answer.open {
  max-height: 500px;
  opacity: 1;
}

.faq-icon {
  transition: transform 0.28s var(--ease-out);
  flex-shrink: 0;
}
.faq-icon.rotated {
  transform: rotate(45deg);
}

/* 8. Pricing cards
   ========================================================================== */
.price-card {
  transition: box-shadow var(--dur-normal) var(--ease-out);
}
.price-card:hover {
  box-shadow: 0 8px 24px rgba(14, 165, 200, 0.12);
}

/* 9. Review cards
   ========================================================================== */
.review-card {
  transition: box-shadow var(--dur-normal) var(--ease-out);
}
.review-card:hover {
  box-shadow: 0 8px 24px rgba(15, 42, 74, 0.08);
}

/* 10. Mobile Action Bar — safe area
   ========================================================================== */
.mobile-action-bar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 1023px) {
  body {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
  }
}

/* 11. Map card
   ========================================================================== */
.map-bg {
  background: linear-gradient(135deg, #D9E8F5 0%, #C8DAEA 50%, #D4E5F4 100%);
}
.map-grid {
  background-image:
    linear-gradient(rgba(15,42,74,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,42,74,0.10) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* 12. Scroll cue
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue svg { animation: bounce-d 2s ease-in-out infinite; }
}
@keyframes bounce-d {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(6px); }
}

/* 13. Benefit icon ring
   ========================================================================== */
.benefit-icon {
  transition: background-color var(--dur-normal) var(--ease-out);
}
.benefit-card:hover .benefit-icon {
  background-color: var(--aqua-lt);
}

/* 14. Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right { opacity:1; transform:none; transition:none; }
  .faq-answer   { transition: none; }
  .faq-icon     { transition: none; }
  .scroll-cue svg { animation: none; }
}