/* ==========================================================================
   Issy Luck Yoga - styles.css
   Design system recreated from the archived Squarespace site (Aug 2026).
   Palette, fonts and wave dividers are LOCKED. See WEBSITE-RULES.md.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------ */
:root {
  --cream:        #EBDFCF;
  --cream-deep:   #E3D5C2;
  --sage:         #A9C49B;
  --sage-deep:    #97B788;
  --brown:        #4A3529;
  --brown-soft:   #6B5344;
  --black:        #1A1A1A;
  --white:        #FFFFFF;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --measure:      68ch;
  --gutter:       clamp(1.25rem, 5vw, 5rem);
  --section-y:    clamp(3.5rem, 9vw, 7.5rem);
  --radius-btn:   0;

  --shadow-soft:  0 12px 40px rgba(74, 53, 41, 0.10);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--brown);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

/* --- Typography --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--brown);
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.25rem, 6vw, 4rem); }
h2 { font-size: clamp(1.85rem, 4.5vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.8vw, 1.85rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.3rem); }

p { margin: 0 0 1.35em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.8;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown-soft);
  margin-bottom: 1rem;
  display: block;
}

/* --- Layout ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 820px; }

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--cream { background: var(--cream); }
.section--sage  { background: var(--sage); }

.section--center { text-align: center; }

.stack > * + * { margin-top: 1.35em; }

/* --- Wave dividers ------------------------------------------------------
   The signature element. Sits at the foot of a section, filled with the
   colour of the section BELOW it. Never use a straight section edge.
   ------------------------------------------------------------------------ */
.wave {
  display: block;
  width: 100%;
  line-height: 0;
  margin-top: calc(var(--section-y) * -0.05);
}

.wave svg {
  display: block;
  width: 100%;
  height: clamp(48px, 7vw, 110px);
}

.wave--flip svg { transform: scaleX(-1); }

/* The area ABOVE the curve must be painted with the colour of the section
   directly above, otherwise that section appears to end in a straight edge. */
.wave--from-sage  { background: var(--sage); }
.wave--from-cream { background: var(--cream); }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.site-header--solid {
  position: relative;
  background: var(--cream);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.wordmark {
  flex: 0 0 auto;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}

.site-header--solid .wordmark { color: var(--brown); }

.wordmark img { width: clamp(160px, 22vw, 280px); }

.nav {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
}

.nav a {
  font-size: 0.95rem;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.nav a:hover,
.nav a[aria-current="page"] { border-bottom-color: currentColor; }

.socials {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.socials a { display: inline-flex; opacity: 0.9; transition: opacity 0.2s ease; }
.socials a:hover { opacity: 1; }
.socials svg { width: 20px; height: 20px; fill: currentColor; }

/* Header sitting over a photo hero */
.site-header--over { color: var(--white); }
.site-header--over .nav a { color: var(--white); }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0.5rem;
}

.nav-toggle svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(520px, 88vh, 900px);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: var(--sage-deep);
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.06) 42%, rgba(0,0,0,0.10) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding: var(--gutter);
  padding-top: 8rem;
}

.hero h1 {
  color: var(--brown);
  text-shadow: 0 2px 24px rgba(255, 255, 255, 0.35);
  margin-bottom: 0.5em;
}

.hero__sub {
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  color: var(--brown);
  max-width: 34ch;
  margin: 0 auto 2rem;
  line-height: 2.1;
  text-shadow: none;
}

.hero__sub .hl {
  background: rgba(235, 223, 207, 0.75);
  padding: 0.22em 0.55em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero__wave {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  z-index: 3;
  line-height: 0;
}

.hero__wave svg { width: 100%; height: clamp(48px, 7vw, 110px); display: block; }

/* --- Buttons and links -------------------------------------------------- */
.btn {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 0.95rem 2.4rem;
  border: 1px solid var(--black);
  border-radius: var(--radius-btn);
  transition: background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.btn:hover { background: transparent; color: var(--black); }

.btn--ghost {
  background: transparent;
  color: var(--brown);
  border-color: var(--brown);
}

.btn--ghost:hover { background: var(--brown); color: var(--cream); }

.text-link {
  display: inline-block;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: opacity 0.2s ease;
}

.text-link:hover { opacity: 0.65; }

.btn-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
}

/* --- Split rows (image + text) ------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}

.split--reverse .split__media { order: 2; }

.split__body { text-align: center; }

/* Image shapes: circles on service pages, arches on Home and About */
.shape-circle {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.shape-circle img { width: 100%; height: 100%; object-fit: cover; }

.shape-arch {
  aspect-ratio: 3 / 4;
  border-radius: 50vw 50vw 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.shape-arch img { width: 100%; height: 100%; object-fit: cover; }

/* --- Cards -------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 3rem;
  text-align: center;
}

.card {
  background: rgba(255, 255, 255, 0.4);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid rgba(74, 53, 41, 0.12);
}

.section--sage .card { background: rgba(255, 255, 255, 0.28); }

.card h3 { margin-bottom: 0.5em; }
.card p { font-size: 0.95rem; }

/* --- Schedule table ----------------------------------------------------- */
.schedule {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2.5rem;
  text-align: left;
}

.schedule th,
.schedule td {
  padding: 1.1rem 1rem;
  border-bottom: 1px solid rgba(74, 53, 41, 0.2);
  vertical-align: top;
}

.schedule th {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown-soft);
}

.schedule td:first-child { font-family: var(--font-display); font-size: 1.15rem; }

.schedule .price { white-space: nowrap; }

/* --- Prose (legal + blog pages) ----------------------------------------- */
.prose { text-align: left; max-width: var(--measure); margin-inline: auto; }
.prose h2 { margin-top: 2.5em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.5em; }

/* --- FAQ accordion ------------------------------------------------------ */
.faq { max-width: var(--measure); margin-inline: auto; text-align: left; }

.faq details {
  border-bottom: 1px solid rgba(74, 53, 41, 0.25);
}

.faq summary {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  padding: 1.4rem 2.5rem 1.4rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-family: var(--font-body);
  font-weight: 300;
}

.faq details[open] summary::after { content: "\2212"; }

.faq details > *:not(summary) { padding-bottom: 1.4rem; }

/* --- Forms -------------------------------------------------------------- */
.form { max-width: 620px; margin-inline: auto; text-align: left; }

.field { margin-bottom: 1.25rem; }

.field label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: var(--brown-soft);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.9rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--brown);
  background: var(--white);
  border: 1px solid rgba(74, 53, 41, 0.25);
  border-radius: 0;
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--brown);
  outline-offset: 1px;
}

.field textarea { min-height: 160px; resize: vertical; }

.form-note { font-size: 0.85rem; color: var(--brown-soft); }

/* --- YouTube grid ------------------------------------------------------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: 3rem;
}

.video-card {
  text-decoration: none;
  display: block;
  transition: transform 0.25s ease;
}

.video-card:hover { transform: translateY(-4px); }

.video-card__thumb {
  aspect-ratio: 16 / 9;
  background: var(--sage-deep);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-soft);
}

.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

.video-card h3 { font-size: 1.15rem; margin: 1rem 0 0.25rem; }
.video-card p { font-size: 0.9rem; color: var(--brown-soft); }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--cream);
  padding-block: clamp(3.5rem, 7vw, 6rem) 3rem;
  text-align: center;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-bottom: 3rem;
}

.footer-links { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.footer-links a { font-size: 0.95rem; }

.footer-badge img { width: clamp(120px, 14vw, 170px); margin-inline: auto; }

.footer-contact { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
.footer-contact a { text-decoration: underline; }

.footer-socials {
  display: flex;
  gap: 1.75rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.footer-socials svg { width: 26px; height: 26px; fill: var(--brown); }

.footer-legal {
  font-size: 0.8rem;
  color: var(--brown-soft);
  letter-spacing: 0.04em;
}

/* --- Back to top -------------------------------------------------------- */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brown);
  color: var(--white);
  display: grid;
  place-items: center;
  text-decoration: none;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  border: 0;
  cursor: pointer;
}

.to-top.is-visible { opacity: 1; pointer-events: auto; }
.to-top svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* --- Booking widget ----------------------------------------------------- */
.booking { max-width: 720px; margin-inline: auto; text-align: left; }

.booking fieldset { border: 0; padding: 0; margin: 0 0 2.25rem; }

.booking legend {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  margin-bottom: 1rem;
  padding: 0;
}

.choices { display: grid; gap: 0.75rem; }

.choice {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.1rem 1.25rem;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(74, 53, 41, 0.2);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.choice:hover { border-color: var(--brown); }
.choice input { margin: 0.3rem 0 0; accent-color: var(--brown); flex: 0 0 auto; }
.choice:has(input:checked) { border-color: var(--brown); background: rgba(255, 255, 255, 0.85); }
.choice input:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }

.choice__body { flex: 1; }
.choice__title { display: block; font-weight: 400; }
.choice__note { display: block; font-size: 0.85rem; color: var(--brown-soft); margin-top: 0.15rem; }
.choice__price { font-family: var(--font-display); font-size: 1.15rem; white-space: nowrap; }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; }

.slot {
  display: block;
  padding: 0.85rem 1rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(74, 53, 41, 0.2);
  cursor: pointer;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.slot input { position: absolute; opacity: 0; pointer-events: none; }
.slot:hover { border-color: var(--brown); }
.slot:has(input:checked) { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.slot:has(input:focus-visible) { outline: 2px solid var(--brown); outline-offset: 3px; }
.slot small { display: block; font-size: 0.78rem; opacity: 0.75; margin-top: 0.2rem; }

.booking__status {
  padding: 1rem 1.25rem;
  border: 1px solid rgba(74, 53, 41, 0.25);
  background: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.booking__status--error { border-color: #9d4b3b; color: #7d3527; }
.booking__status--ok    { border-color: #5c7d4e; }

.booking [hidden] { display: none !important; }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.pass-row {
  display: flex; gap: 0.6rem; align-items: center;
  font-size: 0.9rem; margin-top: 0.75rem;
}

/* --- Diary (private) ---------------------------------------------------- */
.diary table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-bottom: 2.5rem; }
.diary th, .diary td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid rgba(74,53,41,0.18); vertical-align: top; }
.diary th { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brown-soft); }
.diary h3 { margin: 2rem 0 0.5rem; }

/* --- Utility ------------------------------------------------------------ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  background: var(--brown);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
}

.skip-link:focus { left: 1rem; top: 1rem; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media { max-width: 420px; margin-inline: auto; }

  .footer-grid { grid-template-columns: 1fr; }

  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: 0;
    background: var(--cream);
    color: var(--brown);
    flex-direction: column;
    justify-content: center;
    gap: 1.75rem;
    font-size: 1.25rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 100;
  }

  .nav.is-open { transform: translateX(0); }
  .nav a { font-size: 1.2rem; color: var(--brown) !important; }

  .nav-close {
    position: absolute;
    top: 1.75rem;
    right: 1.75rem;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--brown);
  }

  .nav-close svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.5; }

  .socials { display: none; }
  /* On a phone: copy pinned to the top, button pinned to the sand below
     Issy. Both are anchored in percentages of the hero, so they land in the
     same spot whatever the phone or browser toolbar height. */
  .hero { place-items: stretch; }
  .hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 7rem;
    padding-bottom: 0;
  }
  .hero__inner > .btn {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  /* Keep the whole pose in frame - a centred crop of the landscape photo
     slices Issy in half at the left edge. */
  .hero__media img { object-position: 22% center; }
}

@media (min-width: 861px) {
  .nav-close { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}