/* =========================================================
   Tuesday Wellness — styles
   Change colours and fonts here and they update everywhere.
   ========================================================= */
:root {
  /* Colours (taken from the Canva design) */
  --sage:   #ABB18B;   /* About + Feedback backgrounds, light buttons */
  --beige:  #BBB5A0;   /* Services background */
  --brown:  #4B4132;   /* dark buttons, booking section */
  --ink:    #23180E;   /* main text colour */
  --cream:  #E4DFD0;   /* text on dark buttons */
  --paper:  #F7F5EF;   /* the booking confirmation page */
  --white:  #FFFFFF;

  /* Fonts */
  --font-display: "Gilda Display", Georgia, serif;          /* big headings */
  --font-tagline: "Old Standard TT", Georgia, serif;        /* "Coming home to yourself" */
  --font-body:    "EB Garamond", Garamond, Georgia, serif;  /* paragraphs + buttons */

  /* Page width */
  --max-width: 1240px;
}

/* ---------- Basics ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* iOS paints its own strip below the page in this colour, so it matches
     the dark booking section at the foot of the page rather than the sage */
  background: var(--brown);
  /* stops the page springing past the end when you scroll to the bottom */
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  background: var(--brown);   /* only ever visible as the strip iOS paints below the page */
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, p, figure, blockquote { margin: 0; }

a { color: inherit; }

/* Two languages: show only the text for the chosen one (English unless Danish is picked) */
html:not([lang="da"]) [data-lang="da"],
html[lang="da"] [data-lang="en"] { display: none !important; }

section {
  padding: clamp(64px, 7vw, 100px) 24px clamp(48px, 5vw, 72px);
  text-align: center;
}

/* ---------- Shared pieces ---------- */
.brand {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  font-size: clamp(30px, 3.8vw, 54px);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.1;
}

.button {
  display: inline-block;
  min-width: 240px;
  padding: 14px 36px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.button:hover { filter: brightness(1.08); transform: translateY(-1px); }

.button--dark { background: var(--brown); color: var(--cream); }
.button--sage { background: var(--sage); color: var(--brown); }
.button--large { font-size: 19px; font-weight: 400; }


/* =========================================================
   1. HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: max(560px, 56vw);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 32px 5vw 112px;   /* more space below than above lifts the logo + words up the photo */
  background: url("images/hero.jpg") center / cover no-repeat, var(--sage);
  color: var(--white);
  text-align: center;
}

.hero__content {
  width: min(640px, 50%);
  margin-right: 2vw;
  text-shadow: 0 1px 14px rgba(35, 24, 14, 0.25);
}

.hero__logo {
  width: clamp(110px, 11vw, 156px);   /* same size as the booking-section logo */
  margin: 0 auto clamp(24px, 2.8vw, 40px);
}

.hero__tagline {
  font-family: var(--font-tagline);
  font-size: clamp(20px, 2vw, 28px);
  margin-top: clamp(20px, 2.5vw, 36px);
}

.hero__intro {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1.12;
  max-width: 12.5em;
  margin: 16px auto clamp(28px, 3vw, 44px);
}

.hero .button { text-shadow: none; }

/* English / Dansk buttons, top-right corner of the first section */
.lang-switch {
  position: absolute;
  top: clamp(16px, 2vw, 28px);
  right: clamp(16px, 3vw, 40px);
  z-index: 2;
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(35, 24, 14, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lang-switch button {
  padding: 7px 14px;
  border: 0;
  background: transparent;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lang-switch button + button { border-left: 1px solid rgba(255, 255, 255, 0.75); }
.lang-switch button:hover { background: rgba(255, 255, 255, 0.18); }
.lang-switch button[aria-pressed="true"] { background: var(--sage); color: var(--brown); }
.lang-switch button:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* On wide screens, zoom the photo slightly so the bottle sits left of the text (like the mockup) */
@media (min-width: 1001px) {
  .hero { background-size: 115% auto; background-position: 100% 45%; }
}


/* =========================================================
   2. ABOUT
   ========================================================= */
.about { background: var(--sage); }

.about__layout {
  display: grid;
  grid-template-columns: 1fr minmax(0, 660px) 1fr;
  gap: 40px;
  max-width: var(--max-width);
  margin: clamp(32px, 4vw, 56px) auto clamp(36px, 4vw, 52px);
  align-items: start;
}

.about__portrait {
  justify-self: end;
  width: clamp(180px, 18vw, 250px);
  height: auto;
  aspect-ratio: 25 / 32;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 50%;           /* makes the oval */
  margin-top: 8px;
}

.about__text p + p { margin-top: 1.6em; }


/* =========================================================
   3. SERVICES
   ========================================================= */
.services { background: var(--beige); }

.services__title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(44px, 4.8vw, 66px);
  line-height: 1.1;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 280px));   /* tracks match the cards, so 3 or 4 services both sit nicely */
  justify-content: center;
  gap: 40px;
  max-width: var(--max-width);
  margin: clamp(24px, 3vw, 40px) auto clamp(48px, 5vw, 72px);
}

.service {
  display: flex;
  flex-direction: column;
  max-width: 250px;
  margin: 0 auto;
  text-align: left;
}

.service__icon {
  height: clamp(72px, 6.8vw, 96px);
  width: auto;
  align-self: center;
  margin-bottom: 14px;
}

.service__name {
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 26px);
  line-height: 1.3;
  margin-bottom: 10px;
}

.service__desc { font-weight: 500; line-height: 1.55; }

.service__price {
  font-weight: 600;
  margin-top: auto;      /* pushes all prices down to the same line */
  padding-top: 32px;
}


/* =========================================================
   4. CLIENT FEEDBACK
   ========================================================= */
.feedback { background: var(--sage); }

.feedback__title {
  color: #000;
  max-width: 7.5em;       /* wraps the heading onto two lines like the mockup */
  margin: 0 auto;
}

/* Review slider: one review at a time, arrows either side, dots underneath.
   Also swipes on phones and scrolls sideways on a trackpad. */
.reviews {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  grid-template-areas:
    "prev track next"
    ".    dots  .   ";
  align-items: center;
  column-gap: clamp(16px, 4vw, 56px);
  row-gap: 28px;
  max-width: 900px;
  margin: clamp(32px, 4vw, 52px) auto clamp(40px, 4vw, 56px);
}

.reviews__track {
  grid-area: track;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track:focus-visible { outline: 1px solid var(--brown); outline-offset: 8px; }

.review {
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  color: var(--ink);
}

.review blockquote {
  max-width: 34em;
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.65;
}
.review blockquote::before {          /* small sparkle ornament, same style as the service symbols */
  content: "";
  display: block;
  width: 72px;
  height: 14px;
  margin: 0 auto 20px;
  opacity: 0.75;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 14'%3E%3Cpath d='M6 7H26M46 7H66' stroke='%234B4132' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M36 1Q36.96 6.04 42 7Q36.96 7.96 36 13Q35.04 7.96 30 7Q35.04 6.04 36 1Z' fill='%234B4132'/%3E%3C/svg%3E") center / contain no-repeat;
}

.review figcaption {
  margin-top: 22px;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reviews__arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(75, 65, 50, 0.5);
  border-radius: 50%;
  background: transparent;
  color: var(--brown);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.reviews__arrow:hover { background: var(--brown); color: var(--cream); }
.reviews__arrow:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }
.reviews__arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reviews__arrow--prev { grid-area: prev; }
.reviews__arrow--next { grid-area: next; }

.reviews__dots { grid-area: dots; display: flex; justify-content: center; }

/* only one review: hide the arrows and dots until a second review is added */
.reviews--single .reviews__arrow,
.reviews--single .reviews__dots { display: none; }
.reviews--single { row-gap: 0; }
.reviews__dots button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.reviews__dots button::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--brown);
}
.reviews__dots button[aria-current="true"]::before { background: var(--brown); }
.reviews__dots button:focus-visible { outline: 2px solid var(--brown); border-radius: 50%; }


/* =========================================================
   5. BOOKING
   ========================================================= */
.booking {
  position: relative;
  min-height: max(620px, 56vw);
  padding-top: clamp(32px, 3vw, 48px);
  padding-bottom: clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  background: url("images/booking-bg.jpg") 30% 42% / cover no-repeat, var(--brown);
  color: var(--sage);
}

.booking__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.booking__logo {
  width: clamp(110px, 11vw, 156px);
  margin: 0 auto clamp(20px, 2.5vw, 32px);
}

.booking__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 2.9vw, 40px);
  line-height: 1.05;
  max-width: 9em;
  margin: clamp(24px, 3vw, 40px) auto clamp(48px, 6vw, 88px);
}

.booking .button {
  color: var(--ink);
  margin-top: auto;      /* sits low in the section so the glowing incense tip stays visible */
}

/* small "Payment & cancellation policy" link under the booking button */
.policy-link {
  margin-top: 12px;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--sage);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-shadow: 0 0 6px rgba(35, 24, 14, 0.9), 0 0 2px rgba(35, 24, 14, 0.9);   /* readable over the incense stick */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.policy-link:hover { color: var(--cream); }
.policy-link:focus-visible { outline: 1px solid var(--sage); outline-offset: 2px; }

/* the policy pop-up */
.policy {
  width: min(600px, calc(100% - 32px));
  max-height: calc(100% - 48px);
  padding: 0;
  border: 0;
  background: #F2EFE7;
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(35, 24, 14, 0.35);
}
.policy::backdrop {
  background: rgba(35, 24, 14, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.policy__inner {
  position: relative;
  padding: clamp(28px, 5vw, 48px);
  text-align: left;
}
.policy__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brown);
  cursor: pointer;
}
.policy__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.policy__close:hover { color: var(--ink); }
.policy__close:focus-visible { outline: 1px solid var(--brown); }

.policy__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.15;
  padding-right: 32px;
  margin-bottom: 8px;
  text-wrap: balance;
}
.policy__item {
  padding: 18px 0;
  border-bottom: 1px solid rgba(75, 65, 50, 0.2);
}
.policy__item h3 {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown);
}
.policy__item p,
.policy__thanks { font-size: 17px; line-height: 1.55; }
.policy__item p + p { margin-top: 8px; }
.policy__thanks { margin-top: 20px; font-style: italic; }

.booking__contact {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  align-self: flex-end;
  font-size: 16px;
  text-align: left;
}
.booking__contact li { display: flex; align-items: center; gap: 10px; }
.booking__contact li + li { margin-top: 4px; }
.booking__contact img { width: 18px; height: 18px; object-fit: contain; }
.booking__contact a { text-decoration: none; }
.nowrap { white-space: nowrap; }   /* keeps a phrase together when a line wraps on phones */
.booking__contact a:hover { text-decoration: underline; }


/* =========================================================
   Tablets
   ========================================================= */
@media (max-width: 1000px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
  /* a lone third card centres itself instead of sitting off to one side */
  .services__grid > .service:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; }

  .about__layout { grid-template-columns: 1fr; justify-items: center; }
  .about__portrait { justify-self: center; }
  .about__text { max-width: 640px; }
}

/* =========================================================
   Phones
   ========================================================= */
@media (max-width: 700px) {
  body { font-size: 18px; }

  .hero {
    justify-content: center;
    align-items: flex-start;          /* logo near the top, on the light linen */
    padding: 72px 20px 64px;          /* room above the logo for the English / Dansk buttons */
    background:
      /* clear at the top so the logo shows, gently darker behind the white words */
      linear-gradient(rgba(35, 24, 14, 0) 18%, rgba(35, 24, 14, 0.38) 42%),
      url("images/hero.jpg") 85% center / cover no-repeat;   /* bottle moves off to the side */
  }
  .hero__content { width: 100%; margin: 0; }

  .services__grid { grid-template-columns: 1fr; }
  .service { max-width: 340px; }
  .service__price { padding-top: 12px; }

  /* on phones the review gets the full width; arrows sit either side of the dots */
  .reviews {
    grid-template-areas:
      "track track track"
      "prev  dots  next";
    column-gap: 12px;
  }

  .booking { background-position: 25% center; }
  .booking__contact { align-self: center; }
}

/* "Book this" link under each treatment */
.service__book {
  margin-top: 10px;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--brown);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.service__book:hover { color: var(--ink); }