/*
 * =============================================================================
 *  Project:   Ergo Movement — Ergotherapie und Neuro-Reha
 *  Location:  /assets/css/theme.css
 *  File:      theme.css
 *  Function:  Bootstrap 5.3 CSS variable overrides for Ergo Movement brand.
 *             Color primary: #0F6E56 (teal). Sticky header offset. Nav hover.
 *             Footer link hover. Service card hover. Sidebar sticky.
 *  Version:   1.0.0
 *  Build:     2026.06.28.1800
 * =============================================================================
 */

/* ── Bootstrap CSS var overrides (no sass compilation needed) ─────────────── */
:root {
  /* Brand colours */
  --bs-primary:          #0F6E56;
  --bs-primary-rgb:      15, 110, 86;
  --bs-success:          #0F6E56;
  --bs-success-rgb:      15, 110, 86;
  --bs-link-color:       #0F6E56;
  --bs-link-hover-color: #0a4f3e;

  /* Buttons */
  --bs-btn-bg: transparent;

  /* Typography */
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size:   1rem;
  --bs-body-line-height: 1.7;

  /* Spacing */
  --em-header-height: 72px;   /* sticky header height */
}

/* ── Sticky header scroll offset ─────────────────────────────────────────── */
html {
  scroll-padding-top: calc(var(--em-header-height) + 1rem);
}
.site-header {
  height: var(--em-header-height);
  z-index: 1030;
}

/* ── Primary colour resets ────────────────────────────────────────────────── */
.btn-success,
.btn-primary {
  background-color: #0F6E56;
  border-color:     #0F6E56;
  color:            #fff;
}
.btn-success:hover,
.btn-primary:hover {
  background-color: #0a4f3e;
  border-color:     #0a4f3e;
  color:            #fff;
}
.btn-outline-success {
  border-color: #0F6E56;
  color:        #0F6E56;
}
.btn-outline-success:hover {
  background-color: #0F6E56;
  border-color:     #0F6E56;
  color:            #fff;
}
.text-success { color: #0F6E56 !important; }
.bg-success    { background-color: #0F6E56 !important; }
.border-success { border-color: #0F6E56 !important; }

/* ── Nav hover + active ───────────────────────────────────────────────────── */
.navbar-nav .nav-link {
  font-size: .9rem;
  color: #2c2c2c;
  transition: color .15s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: #0F6E56;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #e1f5ee;
  color: #0F6E56;
}

/* ── Footer hover ─────────────────────────────────────────────────────────── */
.hover-light:hover { color: #fff !important; }
.footer-logo { filter: brightness(0) invert(1); }

/* ── Service sidebar (sticky on service pages) ───────────────────────────── */
.service-sidebar {
  position: sticky;
  top: calc(var(--em-header-height) + 1.25rem);
}
.service-sidebar .card {
  border-left: 3px solid #0F6E56;
}

/* ── Service cards on homepage / leistungen ──────────────────────────────── */
.service-card {
  transition: transform .2s ease, box-shadow .2s ease;
  border: 1px solid rgba(0,0,0,.08);
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 .5rem 1.5rem rgba(15,110,86,.12);
}
.service-card .card-img-top {
  height: 200px;
  object-fit: cover;
}

/* ── Team cards ──────────────────────────────────────────────────────────── */
.team-card .team-photo {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #e1f5ee;
}

/* ── FAQ accordion ───────────────────────────────────────────────────────── */
.accordion-button:not(.collapsed) {
  color:            #0F6E56;
  background-color: #e1f5ee;
  box-shadow:       none;
}
.accordion-button:focus {
  box-shadow: 0 0 0 .25rem rgba(15,110,86,.25);
}

/* ── CTA band ────────────────────────────────────────────────────────────── */
.cta-band {
  background-color: #e1f5ee;
  border-top: 2px solid #0F6E56;
}

/* ── Price table ─────────────────────────────────────────────────────────── */
.price-table th {
  background-color: #0F6E56;
  color: #fff;
}

/* ── Admin panel ─────────────────────────────────────────────────────────── */
.admin-sidebar {
  width: 250px;
  min-height: 100vh;
  background: #1a1a1a;
}
.admin-sidebar .nav-link {
  color: #ccc;
  font-size: .875rem;
}
.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
  color: #fff;
  background: rgba(15,110,86,.35);
}
.admin-main {
  flex: 1;
  background: #f5f5f5;
  min-height: 100vh;
}
.admin-topbar {
  background: #fff;
  border-bottom: 1px solid #dee2e6;
  height: 56px;
}

/* ── WCAG: focus visible (2.4.11) ────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid #0F6E56;
  outline-offset: 2px;
}

/* ── WCAG: minimum touch target 24×24px (2.5.8) ─────────────────────────── */
.nav-link, .btn, .dropdown-item, a.breadcrumb-item {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .service-card { transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  .site-header, .wa-float, footer { display: none; }
  main { padding: 0; }
}

/* ── Page hero header (full-width responsive banner) ──────────────────────── */
.page-hero-header {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 300px;
}
.page-hero-header picture,
.page-hero-header .page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              rgba(0,0,0,.72) 0%,
              rgba(0,0,0,.35) 60%,
              rgba(0,0,0,.15) 100%);
  z-index: 1;
}
.page-hero-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #0F6E56;
  z-index: 2;
}
.page-hero-title {
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  line-height: 1.2;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.page-hero-sub {
  font-size: .75rem;
  color: #9FE1CB;
  letter-spacing: .08em;
  font-weight: 600;
  text-transform: uppercase;
}

/* Mobile: shorter and taller proportions to match mobile image (3:2 portrait-ish) */
@media (max-width: 767px) {
  .page-hero-header {
    height: 220px;
  }
  .page-hero-overlay {
    /* Slightly stronger overlay on mobile for text contrast on portrait images */
    background: linear-gradient(180deg,
                rgba(0,0,0,.35) 0%,
                rgba(0,0,0,.55) 65%,
                rgba(0,0,0,.75) 100%);
  }
}

/* Large desktop */
@media (min-width: 1200px) {
  .page-hero-header {
    height: 360px;
  }
}

/* Remove top padding from page content that follows the banner */
.page-hero-header + * .container-xl,
.page-hero-header + * .container {
  padding-top: 2rem;
}

/* ── Decorative ambient dots in Movement logo palette ───────────────────── */
.deco-dots {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.deco-dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0.45;
  will-change: transform, opacity;
  animation: dotDrift 16s ease-in-out infinite;
}
/* Each dot: position, size, color (logo palette), animation timing */
.dd-1 { top:  8%; left:  4%; width: 14px; height: 14px; background: #2962B8;
        animation-duration: 14s; animation-delay: 0s; }
.dd-2 { top: 12%; right: 6%; width: 10px; height: 10px; background: #2B9F3F;
        animation-duration: 18s; animation-delay: -3s; }
.dd-3 { top: 40%; left:  2%; width: 12px; height: 12px; background: #F0CC1D;
        animation-duration: 16s; animation-delay: -6s; }
.dd-4 { top: 48%; right: 3%; width: 16px; height: 16px; background: #EB8B36;
        animation-duration: 20s; animation-delay: -2s; }
.dd-5 { top: 72%; left:  5%; width: 11px; height: 11px; background: #E63730;
        animation-duration: 17s; animation-delay: -8s; }
.dd-6 { top: 80%; right: 7%; width: 14px; height: 14px; background: #0F6E56;
        animation-duration: 19s; animation-delay: -5s; }
.dd-7 { top: 25%; left:  8%; width:  8px; height:  8px; background: #EB8B36;
        animation-duration: 15s; animation-delay: -9s; }
.dd-8 { top: 65%; right: 4%; width:  9px; height:  9px; background: #2962B8;
        animation-duration: 21s; animation-delay: -11s; }

@keyframes dotDrift {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.35; }
  50%      { transform: translateY(-24px) translateX(8px); opacity: 0.55; }
}

/* Hide center-band dots on small screens (would overlap content) */
@media (max-width: 767px) {
  .dd-3, .dd-4, .dd-7, .dd-8 { display: none; }
  .deco-dot { opacity: 0.30; }
}

/* Honor user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .deco-dot { animation: none; }
}