/* ==========================================================================
   Yogi Formentera — design system
   Sand ground, ink text, olive accent. Flat and still: no shadows, no
   colour blends. Mobile-first; desktop widens the layout, never rebuilds it.
   ========================================================================== */

@font-face {
  font-family: "Jost";
  src: url("/static/fonts/Jost.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("/static/fonts/WorkSans.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The five colours. There is no sixth. */
  --sand: #e0c7ac;
  --ink: #1a1a1a;
  --offwhite: #f7f3ed;
  --olive: #6b7355;
  --reed: #a8794f;

  --font-display: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --measure: 34rem;      /* readable line length */
  --page: 72rem;         /* widest content column */
  --radius: 2px;         /* almost square; the board is rustic, not soft */
  --tap: 48px;           /* minimum touch target */
}

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

/* `hidden` must win over any display rule.
   .selection-bar and .booking-form set display:flex/grid, which silently
   defeats the attribute - both rendered on page load despite being marked
   hidden, so a visitor met an empty booking form before choosing anything. */
[hidden] { display: none !important; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-body);
  /* Generous: much of this is read outdoors, in bright sun, on a phone. */
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
  line-height: 1.65;
  font-weight: 380;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.15;
  margin: 0;
}

h1 { font-size: clamp(2.25rem, 1.6rem + 3.2vw, 4rem); }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem); }
h3 { font-size: 1rem; letter-spacing: 0.16em; }

p { margin: 0 0 var(--space-2); max-width: var(--measure); }

a { color: var(--ink); text-underline-offset: 0.2em; }

/* --- header ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--sand);
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}

.lang-switch { display: flex; gap: var(--space-1); }

.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--ink);
  text-decoration: none;
  opacity: 0.7;   /* 5.04:1 on sand; 0.45 measured 2.60:1 and failed AA */
}

.lang-switch a[aria-current="page"] { opacity: 1; border-bottom: 1px solid var(--ink); }

/* --- hero -------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;              /* keep the image and panel contained */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100dvh;
  padding: var(--space-5) var(--space-3) var(--space-4);
  color: var(--offwhite);
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* A flat ink panel behind the text, not a wash over the whole photograph:
   contrast then holds whatever photograph is loaded, which matters because
   the current images are provisional. Still flat, no colour blend. */
.hero-text {
  position: relative;
  z-index: 1;
  background: rgba(26, 26, 26, 0.72);
  padding: var(--space-3);
  max-width: 40rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--offwhite);
  color: var(--ink);
  padding: var(--space-2);
}

.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
  z-index: 20;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.button-quiet { background: transparent; color: var(--offwhite); }

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink);
  text-decoration: none;
}

.legal-links { margin-top: var(--space-2); }
.legal-links a { color: var(--ink); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin: 0 0 var(--space-2);
  opacity: 0.9;
}

.hero h1 { margin-bottom: var(--space-3); }

.hero-subtitle { font-size: 1.0625rem; margin-bottom: var(--space-4); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  background: var(--offwhite);
  color: var(--ink);
  border: 1px solid var(--offwhite);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
}

/* Hover is an enhancement only — every action works on touch without it. */
@media (hover: hover) {
  .button:hover { background: var(--sand); color: var(--ink); }
}

.button:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }

/* --- the space --------------------------------------------------------- */

.space {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3);
}

.space h2 { margin-bottom: var(--space-3); }

.lead {
  font-size: 1.125rem;
  max-width: var(--measure);
  margin-bottom: var(--space-4);
}

.space-image { margin-bottom: var(--space-4); border-radius: var(--radius); }

.features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.features li {
  padding-top: var(--space-2);
  border-top: 1px solid rgba(26, 26, 26, 0.18);
}

.features h3 { margin-bottom: var(--space-1); color: var(--ink); }
.features p { margin: 0; }

/* --- footer ------------------------------------------------------------ */

.site-footer {
  background: var(--offwhite);
  padding: var(--space-4) var(--space-3);
  font-size: 0.9375rem;
}

.site-footer p { margin: 0 0 var(--space-1); }

.site-footer span {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: var(--ink);
  margin-right: var(--space-1);
}

.site-footer .rights {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
}

/* --- wider screens ------------------------------------------------------
   The structure is unchanged; the layout simply has more room. */

@media (min-width: 40rem) {
  .site-header { padding: var(--space-2) var(--space-4); }
  .hero { padding: var(--space-6) var(--space-4) var(--space-5); }
  .space { padding: var(--space-6) var(--space-4); }
  .features { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-5); }
}

@media (min-width: 64rem) {
  .hero { padding-left: var(--space-6); padding-right: var(--space-6); }
  .features { grid-template-columns: repeat(4, 1fr); }
}

/* --- section nav -------------------------------------------------------- */

.section-nav { display: none; }

@media (min-width: 64rem) {
  .section-nav { display: flex; gap: var(--space-3); }
  .section-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    font-family: var(--font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink);
    text-decoration: none;
  }
}

/* --- gallery ------------------------------------------------------------ */

.gallery { padding: var(--space-5) 0; }
.gallery h2 { padding: 0 var(--space-3); margin-bottom: var(--space-3); }

/* Swipeable on a phone, a grid on desktop - same markup, same order. */
.gallery-track {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-3);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.gallery-track li { scroll-snap-align: center; }
.gallery-track img { width: 100%; border-radius: var(--radius); }

@media (min-width: 40rem) {
  .gallery-track {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: auto;
    overflow-x: visible;
    padding: 0 var(--space-4);
    gap: var(--space-3);
  }
}

@media (min-width: 64rem) {
  .gallery-track { grid-template-columns: repeat(4, 1fr); }
}

/* --- find us & contact -------------------------------------------------- */

.find-us, .contact {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3);
}

.contact { background: var(--offwhite); max-width: none; }
.contact > * { max-width: var(--page); margin-left: auto; margin-right: auto; }

.directions { margin: 0 0 var(--space-4); }

.directions dt {
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin-top: var(--space-2);
}

.directions dd { margin: 0; }

.contact-list { list-style: none; margin: 0; padding: 0; }

.contact-list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: baseline;
  min-height: var(--tap);
  padding: var(--space-1) 0;
  border-top: 1px solid rgba(26, 26, 26, 0.18);
}

.contact-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  min-width: 7rem;
}

/* --- legal page --------------------------------------------------------- */

.legal {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3);
}

.legal h2 { margin-top: var(--space-4); margin-bottom: var(--space-2); }

@media (min-width: 40rem) {
  .find-us, .contact, .legal { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* --- what's on ---------------------------------------------------------- */

.whats-on {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3);
}

.event-grid { display: grid; gap: var(--space-4); }

.event-card {
  background: var(--offwhite);
  padding: var(--space-3);
  border-radius: var(--radius);
}

.event-card img {
  width: 100%;
  margin-bottom: var(--space-2);
  border-radius: var(--radius);
}

.event-when {
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-1);
}

.event-card h3 { margin-bottom: var(--space-1); }
.event-teacher { font-style: italic; margin-bottom: var(--space-2); }
.event-price { font-family: var(--font-display); letter-spacing: 0.08em; }
.events-empty { opacity: 0.75; }

@media (min-width: 40rem) {
  .whats-on { padding-left: var(--space-4); padding-right: var(--space-4); }
  .event-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .event-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- booking ------------------------------------------------------------ */

.book {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3);
}

.book-terms { margin-bottom: var(--space-3); }

.book-terms span {
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.calendar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.calendar-prev, .calendar-next {
  min-width: var(--tap);
  min-height: var(--tap);
  background: var(--offwhite);
  color: var(--ink);
  border: 1px solid rgba(26, 26, 26, 0.18);
  border-radius: var(--radius);
  font-size: 1.25rem;
  cursor: pointer;
}

.calendar-range {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8125rem;
}

/* Four days visible on a phone, snap-scrolled sideways; all seven on
   desktop. The hour column stays put. */
.calendar-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.calendar-table {
  display: grid;
  grid-template-columns: 3.25rem repeat(7, minmax(4.5rem, 1fr));
  min-width: 34rem;
  gap: 1px;
  background: rgba(26, 26, 26, 0.14);
  border: 1px solid rgba(26, 26, 26, 0.14);
  border-radius: var(--radius);
}

.calendar-corner, .calendar-hour, .calendar-day-head, .calendar-cell {
  background: var(--sand);
}

.calendar-day-head {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-1) 0;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 2;
}

.day-number { font-size: 1rem; letter-spacing: 0; }

.calendar-hour {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--space-1);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  z-index: 1;
}

.calendar-cell {
  min-height: 24px;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.calendar-cell.on-the-hour { border-top: 1px solid rgba(26, 26, 26, 0.14); }
.calendar-cell.is-taken { background: var(--reed); cursor: not-allowed; }
.calendar-cell.is-selected { background: var(--olive); }
.calendar-cell:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.calendar-status { margin-top: var(--space-2); }

/* Rises from the bottom on a phone so the selection is always reachable. */
.selection-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2);
  background: var(--offwhite);
  border: 1px solid rgba(26, 26, 26, 0.18);
  border-radius: var(--radius);
}

.selection-summary { margin: 0; flex: 1 1 12rem; }
.selection-controls { display: flex; align-items: center; gap: var(--space-1); }

.selection-less, .selection-more {
  min-width: var(--tap);
  min-height: var(--tap);
  background: var(--sand);
  color: var(--ink);
  border: 1px solid rgba(26, 26, 26, 0.18);
  border-radius: var(--radius);
  font-size: 1.25rem;
  cursor: pointer;
}

.selection-hours {
  min-width: 5rem;
  text-align: center;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
}

/* --- booking form ------------------------------------------------------- */

.booking-form { display: grid; gap: var(--space-2); margin-top: var(--space-4); max-width: var(--measure); }

.booking-form label {
  display: grid;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.booking-form input, .booking-form textarea {
  min-height: var(--tap);
  padding: var(--space-1);
  background: var(--offwhite);
  color: var(--ink);
  border: 1px solid rgba(26, 26, 26, 0.3);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;   /* 16px stops iOS zooming the page on focus */
  text-transform: none;
  letter-spacing: 0;
}

.booking-form textarea { min-height: 5rem; }

.consent {
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-1);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
}

.consent input { min-height: auto; width: 1.25rem; height: 1.25rem; }

.form-slot {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8125rem;
}

/* Off-screen rather than display:none - some bots skip hidden fields. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.booking-done {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--offwhite);
  border-radius: var(--radius);
  max-width: var(--measure);
}

.done-reference {
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 0.18em;
  margin: var(--space-2) 0;
}

@media (min-width: 40rem) {
  .book { padding-left: var(--space-4); padding-right: var(--space-4); }
  .calendar-table { min-width: 0; }
}

/* --- payment instructions ----------------------------------------------- */

.done-instruction { margin-bottom: var(--space-3); }

.done-details { margin: 0 0 var(--space-3); }

.done-details dt {
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: var(--space-2);
}

.done-details dd { margin: 0; }

/* The whole value is the tap target - a teacher is doing this one-handed,
   holding a phone, halfway through opening their banking app. */
.copy {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-1) var(--space-2);
  background: var(--sand);
  color: var(--ink);
  border: 1px solid rgba(26, 26, 26, 0.25);
  border-radius: var(--radius);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.copy .done-reference,
.copy .done-amount {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.16em;
}

.copy-hint {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.75;
}

.done-warning { margin: 0; font-size: 0.9375rem; }

/* Terms sit above the calendar: a condition disclosed after payment is not
   a condition anyone agreed to. */
.booking-terms {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--offwhite);
  border-left: 4px solid var(--reed);
  border-radius: var(--radius);
  max-width: var(--measure);
}

.booking-terms h3 { margin-bottom: var(--space-2); }
.booking-terms ul { margin: 0; padding-left: var(--space-3); }
.booking-terms li { margin-bottom: var(--space-1); }

.done-sla {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* --- WhatsApp ------------------------------------------------------------ */

/* Olive, not WhatsApp green: a sixth colour would break the palette, and the
   label already says what it is. */
.button-whatsapp {
  background: var(--olive);
  color: var(--offwhite);
  border-color: var(--olive);
}

@media (hover: hover) {
  .button-whatsapp:hover { background: var(--ink); border-color: var(--ink); }
}

.button-small {
  min-height: var(--tap);
  padding: 0 var(--space-3);
  font-size: 0.8125rem;
}

.contact-cta { margin-bottom: var(--space-3); }
.terms-help { margin: var(--space-2) 0 0; }