/* ==============================
   RILANA'S NAILSTÜBLI — THEME
   ============================== */

/* Header height token used for anchor offset & responsive sticky spacing */
:root {
  --header-height: 84px;
}

/* Base reset (kept minimal; original design tokens kept below if needed) */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #333; background: #fff; }

/* Sticky header */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  transition: box-shadow .2s ease, background .2s ease;
}
.header.scrolled { box-shadow: 0 6px 30px rgba(0,0,0,.08); }

.nav-container {
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 24px;
  max-width: 1200px; margin: 0 auto;
}
.logo { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.6rem; color:#B76E79; }

.nav-menu{ display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.nav-link{ position:relative; padding:8px 0; color:inherit; text-decoration:none; font-weight:600; }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:#D4AF37;
  transition: width .25s ease;
}
.nav-link:hover::after,.nav-link.active::after{ width:100%; }

.hamburger { display:none; flex-direction:column; gap:5px; background:transparent; border:0; }
.hamburger span{ width:24px; height:2px; background:#333; border-radius:2px; }

@media (max-width: 768px){
  .hamburger{ display:flex; }
  .nav-menu{
    position: fixed; inset: var(--header-height) 0 auto 0; height: calc(var(--vh, 1vh) * 100 - var(--header-height));
    display:flex; flex-direction:column; background:#fff; padding:16px; left:0;
    /* Hide via transform to avoid layout/scroll capture issues on mobile */
    transform: translateX(-100%);
    transition: transform .25s ease; box-shadow:0 24px 40px rgba(0,0,0,.08);
    will-change: transform;
  }
  .nav-menu.active{ transform: translateX(0); }
  .nav-link{ padding:14px 6px; width:100%; }
}

/* Sections offset so anchors don't hide under the sticky header */
section { scroll-margin-top: calc(var(--header-height) + 16px); }

/* Hero with photo background harmonised with palette */
.hero {
  position: relative;
  /* Use dynamic viewport unit (--vh) set from JS to avoid mobile 100vh/address-bar issues */
  min-height: calc(var(--vh, 1vh) * 100 - var(--header-height));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background: #FFC0CB;
  -webkit-overflow-scrolling: touch;
}
.hero--photo{
  background-image: url('assets/hero.jpg');
  background-size: cover; background-position: center;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(255,182,193,.55), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25) 45%, rgba(0,0,0,.35));
}
.hero-content{ position:relative; z-index:2; text-align:center; color:#fff; padding:0 16px; }
.hero-title{ font-family:'Cormorant Garamond', serif; font-size: clamp(2rem, 6vw, 4rem); letter-spacing:.5px; text-shadow: 0 6px 18px rgba(0,0,0,.35); }
.hero-subtitle{ font-size: clamp(1.05rem, 2.4vw, 1.4rem); opacity:.92; margin-top:10px; }
.hero-accent{ width:96px; height:2px; margin:16px auto 0; background: linear-gradient(90deg, #FFB6C1, #D4AF37); opacity:.9; border-radius:2px; }

/* Smooth enter animation */
.fade-in-up{ opacity:0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.fade-in-up.visible{ opacity:1; transform:none; }

/* Sections */
.section{ padding: 72px 0; }
.section-title { font-family:'Cormorant Garamond', serif; font-size: clamp(1.8rem, 4.2vw, 2.6rem); text-align:center; margin:0 0 12px; }
.title-underline { width:78px; height:3px; margin: 0 auto 28px; background: linear-gradient(90deg, #FFB6C1, #D4AF37); border-radius:2px; }

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

/* About */
.about-text{ max-width: 820px; margin:0 auto 14px; color:#666; font-size:1.05rem; line-height:1.8; text-align:center; }
.testimonial-quote{ font-family:'Cormorant Garamond', serif; max-width: 820px; margin:28px auto 0; padding:22px; border-left: 4px solid #D4AF37; background:#F9F7F7; color:#B76E79; border-radius:8px; }

/* Services */
.services-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:22px; }
.service-card{
  background:#fff; border-radius:14px; padding:28px; text-align:center; border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 18px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{ transform: translateY(-6px); box-shadow:0 12px 34px rgba(0,0,0,.1); }
.service-icon{ font-size:2rem; margin-bottom:10px; }
.service-title{ font-family:'Cormorant Garamond', serif; font-size:1.35rem; margin:8px 0 4px; }
.service-description{ color:#666; }

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:18px; }
.gallery-item{ position:relative; overflow:hidden; border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.08); }
.gallery-item img{ width:100%; height:300px; object-fit:cover; transform: scale(1.02); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.gallery-item:hover img{ transform: scale(1.07); }
.gallery-item::after{
  content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35)); opacity:0; transition: opacity .3s ease;
}
.gallery-item:hover::after{ opacity:1; }

/* Testimonials */
.testimonials-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:20px; }
.testimonial-card{
  background:#fff; border-left:4px solid #D4AF37; padding:24px; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.testimonial-card:hover{ transform: translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.12); }
.stars{ color:#D4AF37; letter-spacing: 1px; margin-bottom:8px; }
.testimonial-text{ color:#666; font-style: italic; }
.testimonial-author{ font-weight:700; color:#B76E79; margin-top:8px; }

/* Contact */
.contact-content{ display:grid; grid-template-columns: 1fr 1.4fr; gap:24px; align-items:start; }
.contact-info{ padding:18px; background:#F9F7F7; border-radius:12px; }
.contact-subtitle{ font-family:'Cormorant Garamond', serif; color:#B76E79; margin:6px 0 12px; font-size:1.8rem; }
.contact-address{ line-height:1.7; }
.contact-map iframe{ width:100%; border:0; border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.1); min-height:380px; }

/* Footer */
.footer{ background:#333; color:#fff; padding:22px 0; }
.footer-content{ max-width:1100px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-link{ color:#ddd; }
.footer-link:hover{ color:#FFB6C1; }

/* Cookie banner */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:1200; display:none;
  background: rgba(34,34,34,.98); color:#fff; padding:18px;
  box-shadow: 0 -10px 30px rgba(0,0,0,.25);
}
.cookie-banner.show{ display:block; animation: slideUp .4s ease both; }
.cookie-content{
  max-width:1100px; margin:0 auto; display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.cookie-link { color:#FFB6C1; text-decoration: underline; }
.cookie-buttons{ display:flex; gap:10px; }
.btn { padding:10px 18px; border-radius:8px; font-weight:700; }
.btn-accept{ background:#D4AF37; color:#fff; }
.btn-decline{ background:transparent; border:2px solid #fff; color:#fff; }
@keyframes slideUp{ from{ transform: translateY(100%);} to{ transform:none; } }

/* Modals for Datenschutz / Impressum */
.modal {
  position: fixed; inset:0; z-index:1300; display:none; align-items:center; justify-content:center;
  padding:24px; backdrop-filter: blur(6px);
  background: rgba(0,0,0,.45);
}
.modal.open { display:flex; }
.modal__dialog {
  width:min(880px, 92vw);
  background:#fff; border-radius:16px; box-shadow:0 30px 60px rgba(0,0,0,.25); overflow:hidden;
  transform: translateY(20px); opacity:0; transition: transform .25s ease, opacity .25s ease;
}
.modal.open .modal__dialog{ transform:none; opacity:1; }
.modal__header{ padding:18px 20px; border-bottom:1px solid rgba(0,0,0,.06); display:flex; align-items:center; justify-content:space-between; }
.modal__title{ font-family:'Cormorant Garamond', serif; font-size:1.6rem; margin:0; }
.modal__close{ background:transparent; border:0; font-size:1.8rem; line-height:1; cursor:pointer; color:#333; }
.modal__body{ padding:18px 20px; line-height:1.7; color:#444; /* use --vh fallback for dynamic viewport handling */
  max-height: calc(var(--vh, 1vh) * 70); overflow:auto; }
.modal__body h4{ margin:16px 0 6px; font-size:1.1rem; }
.modal__body p, .modal__body li { color:#555; }
.modal__footer{ padding:14px 20px; border-top:1px solid rgba(0,0,0,.06); text-align:right; }

/* Micro-interactions */
.hover-lift{ transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover{ transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.12); }

/* Responsive */
@media (max-width: 968px){
  .contact-content{ grid-template-columns: 1fr; }
}