/* ==============================================================
   FERNANDO ARIEL · SHARED STYLESHEET
   File: /assets/css/site.css   (used by every page)

   Sections:
     0  Font          ← change the typeface here
     1  Tokens        ← colours, sizes, spacing
     2  Base
     3  Utilities and buttons
     4  Header and logo
     5  Main menu (the "Exercises" panel)
     6  Category menu (top of each exercise page)
     7  Home: hero
     8  Home: moments directory
     9  Home: about
    10  Home: contact form
    11  Footer
    12  Reduced motion
    13  Exercise pages: "How it helps" section

   Styles that belong to one exercise only live in that
   exercise's own folder (e.g. /paper-boats/paper-boats.css).
   ============================================================== */


/* --------------------------------------------------------------
   0 · FONT  ← TO CHANGE THE TYPEFACE, EDIT TWO LINES:
   1. The @import address below. Choose a font at fonts.google.com,
      click "Get font" → "Get embed code", and copy the address
      that starts with https://fonts.googleapis.com/css2?...
   2. The font's name in --font-main (section 1, just below).
   Every page and every exercise picks up the change.
   -------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@300..600&display=swap");


/* --------------------------------------------------------------
   1 · TOKENS
   Colours marked "scene" also paint illustrations (the river, the
   hills). Values written as "r, g, b" are used with transparency.
   -------------------------------------------------------------- */
:root {
  /* Typeface ← step 2 of changing the font */
  --font-main: "Lexend", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-strong: 600;

  /* Type sizes */
  --step--1: .9rem;
  --step-0: 1.0625rem;                               /* 17px body text */
  --step-1: clamp(1.2rem, 1.05rem + .6vw, 1.45rem);
  --step-2: clamp(1.75rem, 1.35rem + 1.8vw, 2.6rem);
  --step-3: clamp(2.6rem, 1.7rem + 4.6vw, 5.4rem);

  /* Page colours */
  --bg: #EEF1EE;                 /* morning mist */
  --surface: #FFFEFA;            /* paper */
  --text: #22323A;               /* river ink */
  --muted: #52636B;
  --accent: #3B6B74;             /* deep water: buttons and links */
  --accent-hover: #2F5A62;
  --on-accent: #FFFFFF;
  --line: #CDD6D3;
  --danger: #9A3B32;
  --success: #2F6B4F;
  --shadow: 0 1px 2px rgba(34, 50, 58, .06), 0 12px 32px -12px rgba(34, 50, 58, .22);

  /* Category colours (a small mark beside each category) */
  --cat-letting-go: #4F8A94;
  --cat-breathing-body: #6A8FB5;
  --cat-attention-grounding: #7F9A6E;
  --cat-hands-on-creative: #C08A4A;
  --cat-gratitude-kindness: #8B7BAE;
  --cat-digital-fatigue: #B97A7A;

  /* Scene colours */
  --c-sky-top: #D9E4E6;
  --c-sky-bottom: #F1EEE6;
  --c-glow: 255, 238, 214;
  --c-hill-far: #B7C6C2;
  --c-hill-near: #9DB2A8;
  --c-bank: #A9BCA6;
  --c-bank-near: #7F9A83;
  --c-water-far: #A9C4C6;
  --c-water-near: #4F7D86;
  --c-water-light: #E6F0EF;
  --c-mist: 234, 238, 234;
  --c-paper: #FFFEFA;
  --c-paper-shade: #D8D6CE;
  --c-ink: #22323A;
  --c-reed: #5F7B64;
  --c-leaf: #B98A57;

  /* Logo ← adjust if your own logo needs more or less height */
  --logo-height: 38px;

  /* Layout */
  --wrap: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius-s: 6px;
  --radius-l: 14px;
  --header-h: 72px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141C22;
    --surface: #1E2A31;
    --text: #E4EAE7;
    --muted: #A9B6B9;
    --accent: #9CC7CC;
    --accent-hover: #B7D8DC;
    --on-accent: #10191E;
    --line: #2E3C44;
    --danger: #F0A39A;
    --success: #9FD3B5;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 36px -14px rgba(0, 0, 0, .6);

    --cat-letting-go: #7FB6BF;
    --cat-breathing-body: #93B3D6;
    --cat-attention-grounding: #A6BF95;
    --cat-hands-on-creative: #DDAE72;
    --cat-gratitude-kindness: #B2A5D2;
    --cat-digital-fatigue: #D9A0A0;

    --c-sky-top: #1B2733;
    --c-sky-bottom: #33434E;
    --c-glow: 200, 214, 220;
    --c-hill-far: #26343E;
    --c-hill-near: #2C3B43;
    --c-bank: #26342F;
    --c-bank-near: #1C2824;
    --c-water-far: #4A6470;
    --c-water-near: #1F3440;
    --c-water-light: #9DB9C0;
    --c-mist: 51, 67, 78;
    --c-paper: #E9E4D8;
    --c-paper-shade: #B9B2A2;
    --c-ink: #1A242B;
    --c-reed: #3D5249;
    --c-leaf: #9C7A4E;
  }
}


/* --------------------------------------------------------------
   2 · BASE
   -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);   /* anchors land below the sticky header */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-main);
  font-size: var(--step-0);
  font-weight: var(--weight-regular);
  line-height: 1.65;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

h1, h2, h3 {
  margin: 0;
  font-weight: var(--weight-light);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
img, svg { max-width: 100%; }

a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}


/* --------------------------------------------------------------
   3 · UTILITIES AND BUTTONS
   -------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow);
}
.skip-link:focus { top: calc(1rem + env(safe-area-inset-top, 0px)); }

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;                      /* comfortable touch target */
  padding: .7rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: var(--weight-strong) 1rem/1.2 var(--font-main);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn--quiet {
  background: transparent;
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 35%, transparent);
}
.btn--quiet:hover:not(:disabled) { border-color: var(--text); }

.btn--small {
  min-height: 40px;
  padding: .45rem 1rem;
  font-size: .9rem;
}

/* "Soon" label used in menus and on the Home page */
.soon-tag {
  display: inline-block;
  margin-left: .35rem;
  padding: .05rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--muted);
  vertical-align: .1em;
}


/* --------------------------------------------------------------
   4 · HEADER AND LOGO
   -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--c-sky-top);
  padding-top: env(safe-area-inset-top, 0px);
  transition: box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 8px 24px -18px rgba(0, 0, 0, .35); }

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

/* LOGO PLACEHOLDER
   Replace /assets/img/logo.svg with your own SVG (keep the same
   file name) and it appears on every page. Change the size with
   --logo-height in section 1. */
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}
.brand__logo {
  display: block;
  height: var(--logo-height);
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.site-nav__links {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
}
.site-nav__links a { text-decoration: none; }
.site-nav__links a:hover { text-decoration: underline; }

.menu-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .5rem 1.1rem;
  border: 1.5px solid color-mix(in srgb, var(--text) 35%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: var(--weight-strong) .95rem/1 var(--font-main);
  cursor: pointer;
}
.menu-toggle:hover { border-color: var(--text); }
.menu-toggle[aria-expanded="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Two lines that turn into a cross when the menu is open */
.menu-toggle__icon {
  position: relative;
  width: 16px;
  height: 10px;
}
.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, top .25s ease;
}
.menu-toggle__icon::before { top: 1px; }
.menu-toggle__icon::after { top: 7.5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { top: 4.25px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { top: 4.25px; transform: rotate(-45deg); }

@media (max-width: 640px) {
  .site-nav__links { display: none; }        /* About and Contact move into the menu panel */
}


/* --------------------------------------------------------------
   5 · MAIN MENU (built by site.js from the catalogue)
   -------------------------------------------------------------- */
.menu {
  position: absolute;
  inset: 100% 0 auto 0;
  max-height: calc(100svh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
}
.menu.is-open { opacity: 1; transform: none; }

.menu__inner { padding-block: 2rem 1.5rem; }

.menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.75rem 2.5rem;
}

.menu__heading {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
  font-weight: var(--weight-strong);
  font-size: 1rem;
}
.menu__heading::before {                    /* category colour mark */
  content: "";
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--cat);
  flex: none;
}
.menu__heading a { text-decoration: none; }
.menu__heading a:hover { text-decoration: underline; }

.menu__list {
  margin: 0;
  padding: 0 0 0 1.3rem;
  list-style: none;
}
.menu__link {
  display: block;
  padding: .3rem 0;
  text-decoration: none;
}
a.menu__link:hover { text-decoration: underline; }
.menu__link[aria-current="page"] { font-weight: var(--weight-strong); }
.menu__link[aria-current="page"]::after { content: " (you are here)"; font-weight: var(--weight-regular); color: var(--muted); font-size: var(--step--1); }
.menu__link.is-soon { color: var(--muted); }

.menu__footer {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
}

@media (max-width: 640px) {
  .menu { height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px)); }
  body.menu-open { overflow: hidden; }
}


/* --------------------------------------------------------------
   6 · CATEGORY MENU (exercise pages, built by site.js)
   -------------------------------------------------------------- */
.catnav {
  background: var(--c-sky-top);
  font-size: var(--step--1);
}
.catnav__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem 1.5rem;
  padding-block: .4rem .6rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.catnav__inner::-webkit-scrollbar { display: none; }

.catnav__category {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: none;
  font-weight: var(--weight-strong);
  text-decoration: none;
}
.catnav__category::before {
  content: "";
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--cat);
}
.catnav__category:hover { text-decoration: underline; }

.catnav__list {
  display: flex;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.catnav__item {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: .25rem .9rem;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
}
a.catnav__item:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.catnav__item[aria-current="page"] {
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--cat);
  font-weight: var(--weight-strong);
}
.catnav__item.is-soon { color: var(--muted); }


/* --------------------------------------------------------------
   7 · HOME: HERO
   -------------------------------------------------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(60% 70% at 78% 85%, rgba(var(--c-glow), .7), rgba(var(--c-glow), 0) 70%),
    linear-gradient(var(--c-sky-top), var(--c-sky-bottom));
}
.hero__inner { padding-block: clamp(3rem, 9vw, 6.5rem) 0; }

.hero__title {
  max-width: 14ch;
  margin-bottom: .45em;
  font-size: var(--step-3);
  font-weight: var(--weight-light);
  letter-spacing: -.025em;
}
.hero__lede {
  max-width: 34rem;
  margin-bottom: 1.75rem;
  font-size: var(--step-1);
  font-weight: var(--weight-light);
  line-height: 1.5;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.hero__note {
  max-width: 34rem;
  margin-top: 1rem;
  font-size: var(--step--1);
  color: var(--muted);
}

/* Hills along the bottom of the hero (inline SVG) */
.hero__land {
  display: block;
  width: 100%;
  height: clamp(90px, 15vw, 220px);
  margin-top: clamp(1.5rem, 5vw, 3rem);
}
.hero__land .far { fill: var(--c-hill-far); }
.hero__land .near { fill: var(--c-hill-near); }
.hero__land .bank { fill: var(--c-bank); }
.hero__land .water { fill: var(--c-water-far); }
.hero__land .ground { fill: var(--bg); }


/* --------------------------------------------------------------
   8 · HOME: MOMENTS DIRECTORY
   -------------------------------------------------------------- */
.section { padding-block: clamp(3.5rem, 9vw, 6rem); }

.section__title {
  margin-bottom: .9rem;
  font-size: var(--step-2);
}
.section__intro {
  max-width: 38rem;
  color: var(--muted);
}

.categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 6vw, 5rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}

.category { padding-top: 1.1rem; border-top: 3px solid var(--cat); }
.category__title { font-size: var(--step-1); font-weight: var(--weight-regular); margin-bottom: .35rem; }
.category__blurb { color: var(--muted); margin-bottom: .75rem; }

.category__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.moment {
  position: relative;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}
.moment:last-child { border-bottom: 0; }
.moment__title {
  font-weight: var(--weight-strong);
  text-decoration: none;
}
a.moment__title::after {                  /* makes the whole row clickable */
  content: "";
  position: absolute;
  inset: 0;
}
a.moment__title:hover { text-decoration: underline; }
.moment__blurb { color: var(--muted); font-size: 1rem; }
a.moment__title { color: var(--accent); }
.moment .soon-tag { margin: .35rem 0 0; }
.moment.is-soon .moment__title { color: var(--muted); font-weight: var(--weight-regular); }
.moment:not(.is-soon) .soon-tag { display: none; }


/* --------------------------------------------------------------
   9 · HOME: ABOUT
   -------------------------------------------------------------- */
.about { background: var(--surface); }
.about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1rem 4rem;
}
.about__text { max-width: 40rem; }
.about__text p + p { margin-top: 1rem; }

@media (max-width: 760px) {
  .about__inner { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------
   10 · HOME: CONTACT FORM
   -------------------------------------------------------------- */
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1.5rem 4rem;
}
@media (max-width: 760px) {
  .contact__inner { grid-template-columns: 1fr; }
}

.form { max-width: 36rem; }
.field + .field { margin-top: 1.25rem; }
.field label {
  display: block;
  margin-bottom: .35rem;
  font-weight: var(--weight-strong);
}
.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: .75rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field__error { min-height: 0; margin-top: .3rem; font-size: var(--step--1); color: var(--danger); }
.field__error:empty { display: none; }

.form__trap { position: absolute; left: -9999px; }   /* hidden spam trap */

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.form__note { font-size: var(--step--1); color: var(--muted); }
.form__status { margin-top: 1rem; font-weight: var(--weight-strong); }
.form__status[data-tone="error"] { color: var(--danger); }
.form__status[data-tone="success"] { color: var(--success); }


/* --------------------------------------------------------------
   11 · FOOTER
   -------------------------------------------------------------- */
.site-footer {
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--muted);
}
.site-footer p { max-width: 46rem; }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}


/* --------------------------------------------------------------
   12 · REDUCED MOTION
   -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}


/* --------------------------------------------------------------
   13 · EXERCISE PAGES: "HOW IT HELPS"
   Shared by every exercise. The steps are a real sequence,
   so the numbers carry meaning.
   -------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2rem 3rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: .6rem;
  font-size: 2.8rem;
  font-weight: var(--weight-light);
  line-height: 1;
  color: var(--accent);
}
.steps h3 {
  margin-bottom: .45rem;
  font-size: var(--step-1);
  font-weight: var(--weight-regular);
}
.steps p { max-width: 22rem; color: var(--muted); }

.why {
  max-width: 42rem;
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-left: 1.5rem;
  border-left: 3px solid var(--accent);
}
.why p + p { margin-top: 1rem; }
.why strong { font-weight: var(--weight-strong); }

.onward { margin-top: clamp(3rem, 7vw, 4.5rem); }