/*
Theme Name: Astra Child - Tina Lykke
Theme URI: https://tinalykke.dk/
Description: Custom Astra Child Theme for Tina Lykke – Klinikken for kvinder i svære tider. Designed with pixel-perfect brand consistency.
Author: Tina Lykke
Author URI: https://tinalykke.dk/
Template: astra
Version: 1.0.0
Text Domain: astra-child-tinalykke
*/

/* Core Design System & Global Typography */
:root {
  --tl-slate: #465F76;
  --tl-peach: #FAE7E5;
  --tl-sand: #ffffff;
  --tl-text: #334155;
  --tl-blue: #87A6B4;
}

body {
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 18px;
  color: #334155;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Animations */
@keyframes leafFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}
.animate-leaf {
  animation: leafFloat 12s ease-in-out infinite;
}

@keyframes pulsePeach {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(250, 231, 229, 0.7); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(250, 231, 229, 0); }
}
.animate-pulse-peach {
  animation: pulsePeach 2.8s infinite;
}

/* Smart Auto-hiding Navigation */
#nav-shell {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  will-change: transform;
}
#nav-shell.nav-hidden {
  transform: translateY(-100%);
  box-shadow: none !important;
}
#nav-shell.menu-open,
#nav-shell.menu-open.nav-hidden {
  transform: translateY(0) !important;
}
#nav-shell.nav-scrolled {
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08);
}

/* Reviews Carousel Styles */
.reviews-carousel-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.reviews-track,
#reviewsTrack {
  display: flex;
  gap: 28px;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  touch-action: pan-y;
  align-items: stretch;
}
.review-slide {
  flex: 0 0 calc((100% - 56px) / 3);
  min-width: 0;
}
.review-slide blockquote {
  border-left: 0 !important;
  padding-left: 0 !important;
}
#reviewsCarouselWrapper {
  transition: height 0.35s ease;
  -webkit-user-select: none;
  user-select: none;
}

/* Board-work CTA */
.board-cta-pill {
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
}
.board-cta-label {
  white-space: nowrap;
}

/* Japansk lifting: readable supporting copy on the dark treatment section. */
.page-id-21 section[style*="background: #465F76"] article p {
  color: #FAE7E5 !important;
}
@media (max-width: 768px) {
  .board-cta-pill {
    width: 100%;
    justify-content: center;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .board-cta-pill svg {
    width: 20px;
    height: 20px;
  }
  .board-cta-label {
    font-size: clamp(10px, 3.55vw, 15.5px) !important;
  }
}
@media (max-width: 768px) {
  .reviews-track,
  #reviewsTrack {
    align-items: flex-start;
  }
  .review-slide {
    flex: 0 0 100%;
    min-height: 0 !important;
    justify-content: flex-start !important;
  }
}

/* Media Carousel Styles */
.media-carousel-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.media-track {
  display: flex;
  gap: 24px;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.media-slide {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
}
@media (max-width: 1024px) {
  .media-slide {
    flex: 0 0 calc((100% - 24px) / 2);
  }
}
@media (max-width: 680px) {
  .media-slide {
    flex: 0 0 100%;
  }
}

.media-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(70, 95, 118, 0.1);
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.media-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -4px rgba(70, 95, 118, 0.14);
}
.media-card-img-wrapper {
  position: relative;
  height: 195px;
  overflow: hidden;
  background: #BDCFD9;
}
.media-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.media-card:hover .media-card-img {
  transform: scale(1.05);
}

/* Flip Cards */
.flip-card {
  perspective: 1400px;
  -webkit-perspective: 1400px;
}
.flip-card-inner {
  position: absolute;
  inset: 0px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.22, 0.9, 0.24, 1), box-shadow 0.35s ease;
  transform: rotateY(0deg);
}
@media (hover: hover) {
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
    box-shadow: rgba(52, 73, 90, 0.28) 0px 20px 40px !important;
  }
}
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
  box-shadow: rgba(52, 73, 90, 0.28) 0px 20px 40px !important;
}

/* Shared Hero Treatment */
.tl-hero-header {
  position: relative;
  background: #465F76;
  color: #ffffff;
  padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 44px);
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'Quicksand', sans-serif;
}
.tl-hero-header::before {
  content: '';
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: clamp(200px, 22vw, 360px);
  aspect-ratio: 600 / 742;
  background: url('assets/tina-lotus-right.png') left bottom / contain no-repeat;
  transform: scaleX(-1);
  opacity: .35;
  pointer-events: none;
  z-index: 1;
}

/* Floating Sticky Video Widget */
#stickyVideoWidget {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 999;
  background: #1e293b;
  border: 3px solid #FAE7E5;
  box-sizing: border-box;
  overflow: hidden;
  transform-origin: bottom left;
  transition: width 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.35s ease,
              box-shadow 0.4s ease,
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.35s ease;
  font-family: 'Quicksand', sans-serif;
}

/* Mini state */
#stickyVideoWidget.sticky-mini {
  width: 140px;
  height: 205px;
  border-radius: 18px;
  box-shadow: rgba(20, 35, 50, 0.35) 0px 14px 36px;
  cursor: pointer;
}
#stickyVideoWidget.sticky-mini:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: rgba(20, 35, 50, 0.45) 0px 20px 44px;
}
#stickyVideoWidget.sticky-mini #stickyVideoDismissBtn {
  opacity: 1;
  pointer-events: auto;
  display: flex !important;
}
#stickyVideoWidget.sticky-mini #stickyVideoMiniOverlay {
  opacity: 1;
  pointer-events: none;
  display: flex !important;
}
#stickyVideoWidget.sticky-mini #stickyVideoExpandedHeader,
#stickyVideoWidget.sticky-mini #stickyVideoExpandedBottom {
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}

/* Expanded state */
#stickyVideoWidget.sticky-expanded {
  width: min(350px, calc(100vw - 32px));
  height: min(580px, calc(100vh - 48px));
  border-radius: 22px;
  box-shadow: rgba(15, 23, 42, 0.6) 0px 24px 64px;
  cursor: default;
  transform: translateY(0) scale(1) !important;
}
#stickyVideoWidget.sticky-expanded #stickyVideoDismissBtn {
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}
#stickyVideoWidget.sticky-expanded #stickyVideoMiniOverlay {
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}
#stickyVideoWidget.sticky-expanded #stickyVideoExpandedHeader,
#stickyVideoWidget.sticky-expanded #stickyVideoExpandedBottom {
  opacity: 1 !important;
  pointer-events: auto !important;
  display: flex !important;
}

@media (max-width: 640px) {
  #stickyVideoWidget.sticky-mini {
    bottom: 16px;
    left: 16px;
    width: 120px;
    height: 175px;
    border-radius: 14px;
  }
  #stickyVideoWidget.sticky-expanded {
    bottom: 16px;
    left: 16px;
    right: 16px;
    width: calc(100vw - 32px);
    height: min(540px, calc(100vh - 32px));
    border-radius: 18px;
  }
}

/* Shared Subpage Hero Treatment */
body:not(.home) header {
  position: relative !important;
  background: #465F76 !important;
  color: #ffffff !important;
  padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 44px) !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  font-family: 'Quicksand', sans-serif !important;
}
body:not(.home) header > div[aria-hidden="true"] { display: none !important; }
body:not(.home) header::before {
  content: '';
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: clamp(200px, 22vw, 360px);
  aspect-ratio: 600 / 742;
  background: url('assets/tina-lotus-right.png') left bottom / contain no-repeat;
  transform: scaleX(-1);
  opacity: .35;
  pointer-events: none;
  z-index: 1;
}
body:not(.home) header > div:not([aria-hidden="true"]) { position: relative !important; z-index: 2 !important; }
body:not(.home) header h1 { color: #ffffff !important; line-height: 1.25 !important; text-wrap: balance; }
body:not(.home) header > div:not([aria-hidden="true"]) > div:first-child > p:first-child,
body:not(.home) header > div:not([aria-hidden="true"]) > div:first-child > h1 + p { color: #FAE7E5 !important; }
body:not(.home) header a[href="#detaljer"] {
  border-color: rgba(255,255,255,.65) !important;
  color: #ffffff !important;
}
body:not(.home) header > div:not([aria-hidden="true"]) > div:last-child > div {
  border-color: #FAE7E5 !important;
  box-shadow: rgba(0,0,0,.22) 0 20px 45px !important;
}

body:not(.home) header + section, body:not(.home) header + section + section { position: relative !important; overflow: hidden !important; }
body:not(.home) header + section > *, body:not(.home) header + section + section > * { position: relative; z-index: 2; }
@media (max-width: 640px) {
  body:not(.home) header::before { width: 190px; opacity: .28; }
}

/* ── Mobile Menu Dividers & Buttons ──────────────────────── */
#mobileMenu .divide-y > * + * {
  border-top-color: rgba(214, 228, 235, 0.65) !important;
}
#mobileMenu .mobile-accordion-btn {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── Scroll-to-Top Button ─────────────────────────────────── */
#ast-scroll-top {
  width: 44px !important;
  height: 44px !important;
  line-height: normal !important;
  border-radius: 50% !important;
  background-color: #465F76 !important;
  box-shadow: 0 4px 16px rgba(70,95,118,0.32) !important;
  bottom: 28px !important;
  right: 24px !important;
  opacity: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.25s ease, box-shadow 0.25s ease !important;
  transform: translateY(8px) !important;
}
#ast-scroll-top[style*="display: block"] {
  opacity: 1 !important;
  transform: translateY(0) !important;
  display: flex !important;
}
#ast-scroll-top:hover {
  background-color: #334155 !important;
  box-shadow: 0 6px 20px rgba(70,95,118,0.45) !important;
  transform: translateY(-2px) !important;
}
#ast-scroll-top .ast-icon.icon-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
}
#ast-scroll-top .ast-icon.icon-arrow svg {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  display: block !important;
  flex-shrink: 0 !important;
  transform: rotate(180deg) !important;
}

/* ── Dark section rhythm & contrast ──────────────────────── */
/* Japanese lifting: the treatment and booking sections share a background,
   so their adjoining padding is intentionally compact. */
body.page-id-21 section[style*="background: #465F76"]:has(article) {
  padding-bottom: clamp(28px, 4vw, 48px) !important;
}
body.page-id-21 section[style*="background: #465F76"]:has(article) + section[style*="background:#465F76"] {
  padding-top: clamp(28px, 4vw, 48px) !important;
}
body.page-id-21 section[style*="background: #465F76"] article {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
body.page-id-21 section[style*="background: #465F76"] article > p[style*="color:#475569"],
body.page-id-4157 section[style*="background: #465F76"] article > p[style*="color:#475569"],
body.page-id-4425 section[style*="background: #465F76"] article > p[style*="color:#475569"] {
  color: rgba(255, 255, 255, 0.88) !important;
}
body.page-id-21 section[style*="background: #465F76"] article > h3 + p {
  margin-top: 12px !important;
}

/* Kropsterapeutisk massage: centre the final item in the five-point list. */
body.page-id-4113 section[style*="background:#465F76"] ul > li:last-child {
  grid-column: 1 / -1;
  justify-self: start;
  text-align: left;
}

/* Massage page: compact the adjoining dark sections so they read as one
   continuous content area instead of leaving a large empty band. */
body.page-id-4113 section[style*="background: #465F76"]:has(+ section[style*="background:#465F76"]) {
  padding-bottom: clamp(28px, 4vw, 48px) !important;
}
body.page-id-4113 section[style*="background: #465F76"] + section[style*="background:#465F76"] {
  padding-top: clamp(28px, 4vw, 48px) !important;
}

/* Keep the “Behandlingen er for dig” content aligned with the 980px Totum
   container above it (the original block used a narrower 900px wrapper). */
body.page-id-4113 section[style*="background:#465F76"] > div:has(> h2 + ul) {
  max-width: 980px !important;
}