/* Layer order is repeated in every file: browsers use the first declaration they see, and files load alphabetically. */
@layer tokens, base, components, pages;

@layer components {
  /* Layout ------------------------------------------------------------ */

  /* Content column: full width on phones, a readable measure on larger screens. */
  .wrap {
    width: 100%;
    max-width: calc(var(--measure) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-sm)); }
  .stack--lg { --stack-gap: var(--space-md); }
  .stack--xs { --stack-gap: var(--space-xs); }

  /* Full-width colour bands carry the page rhythm instead of floating cards. */
  .band { padding-block: var(--space-lg); }
  .band--teal { background: var(--teal); color: var(--on-teal); }
  .band--teal a:not(.button) { color: var(--peach); }
  .band--teal a.site-header__brand { color: var(--on-teal); }
  .band--peach { background: var(--peach); }
  .band--sage { background: var(--sage); }

  .muted { color: var(--muted); }
  .band--teal .muted { color: var(--on-teal-muted); }
  .band--peach .muted { color: var(--on-peach-muted); }
  .band--sage .muted { color: var(--on-sage-muted); }

  .lead { font-size: var(--text-lg); line-height: 1.55; }
  .small { font-size: var(--text-sm); line-height: 1.5; }
  .serif { font-family: var(--font-display); }

  /* Site header and footer -------------------------------------------- */

  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
  }

  .site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    color: inherit;
    text-decoration: none;
  }
  .site-header__mark { flex: none; color: var(--teal); }
  .band--teal .site-header__mark { color: var(--peach); }

  .site-header__nav { display: flex; align-items: center; }
  .site-header__nav .site-header__link:not(:last-child) { margin-right: 0; }

  .site-header__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding-inline: 0.75rem;
    margin-right: -0.75rem;
    font-size: var(--text-sm);
    text-decoration: none;
  }

  .site-footer {
    padding-block: var(--space-md) var(--space-lg);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--muted);
  }

  .site-footer nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: var(--space-sm); }
  .site-footer__mark { display: block; width: 20px; height: 20px; margin-bottom: var(--space-sm); color: var(--teal); opacity: 0.55; }

  /* The leaf from the logo, used sparingly: as list marker and as a quiet
     watermark behind a band (only where a training has a logo mark). */
  .divided--leaf > li { display: flex; gap: 0.75rem; }
  .divided--leaf > li::before {
    content: "";
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    margin-top: 0.3em;
    background: var(--teal);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 116 300 300'%3E%3Cpath d='M138 378 C 138 226 236 132 386 128 C 386 278 292 374 138 378 Z'/%3E%3Cpath d='M146 370 L 112 404' stroke='%23000' stroke-width='24' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 116 300 300'%3E%3Cpath d='M138 378 C 138 226 236 132 386 128 C 386 278 292 374 138 378 Z'/%3E%3Cpath d='M146 370 L 112 404' stroke='%23000' stroke-width='24' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .has-leaf { position: relative; isolation: isolate; overflow: hidden; }
  .leaf-watermark {
    position: absolute;
    z-index: -1;
    right: -3rem;
    bottom: -3rem;
    width: 16rem;
    height: 16rem;
    color: var(--teal);
    opacity: 0.07;
    transform: rotate(-12deg);
  }

  /* Error pages ---------------------------------------------------------- */

  .error-page { text-align: center; padding-block: clamp(3rem, 12vh, 7rem); }
  .error-page__code { font-family: var(--font-display); font-size: 1.25rem; color: var(--muted); letter-spacing: 0.1em; }
  .error-page .button { margin-top: 1rem; }

  /* Buttons ------------------------------------------------------------ */

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 56px;
    padding: 0 1.5rem;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--ink);
    color: var(--cream);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
  }

  .button:hover { background: #0F1A18; color: var(--cream); }
  .button--block { display: flex; width: 100%; }
  .button--peach { background: var(--peach); color: var(--ink); }
  .button--peach:hover { background: #EEC6AB; color: var(--ink); }
  .button--teal { background: var(--teal); color: var(--on-teal); }
  .button--teal:hover { background: var(--teal-deep); color: var(--on-teal); }

  /* Forms -------------------------------------------------------------- */

  .field { display: flex; flex-direction: column; gap: 0.375rem; font-size: var(--text-sm); }

  .field__input {
    min-height: 52px;
    padding: 0 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink);
    font-size: var(--text-base);
  }

  .band--teal .field__input { border-color: transparent; background: var(--cream); }

  .field__input[aria-invalid="true"] { border: 2px solid var(--error); }

  .check {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 0.75rem;
    align-items: start;
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  .check input {
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    accent-color: var(--peach);
  }

  .band--peach .check input, .band--sage .check input, .check--light input { accent-color: var(--teal); }

  /* The rest of the consent text, folded away under the checkbox. */
  .check-more { margin: 0.125rem 0 0 calc(24px + 0.75rem); font-size: var(--text-sm); line-height: 1.5; }
  .check-more summary { cursor: pointer; padding-block: 0.625rem; text-decoration: underline; text-underline-offset: 0.18em; }
  .check-more p { margin-top: 0.125rem; }

  .field-error { color: var(--error); font-size: var(--text-sm); font-weight: 600; }
  .band--teal .field-error { color: var(--peach); }

  /* Flash messages ---------------------------------------------------- */

  .flash {
    padding: 0.875rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--sage);
    color: var(--ink);
    font-size: var(--text-sm);
  }

  .flash--alert { background: #F6DDD5; color: #5B1A10; }

  /* Pull quote with attribution --------------------------------------- */

  .quote { font-family: var(--font-display); font-size: var(--heading-sm); line-height: 1.35; }

  .person { display: flex; align-items: center; gap: 0.875rem; }
  .person__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
  .person__name { font-weight: 600; font-size: 0.9375rem; }

  /* Numbered list (lesson parts) --------------------------------------- */

  .numbered { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.375rem; }
  .numbered li { display: grid; grid-template-columns: 36px 1fr; gap: 1rem; }

  .numbered__num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sage);
    color: var(--teal);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
  }

  .numbered__title { font-weight: 600; }

  /* Divided list ------------------------------------------------------- */

  .divided { list-style: none; margin: 0; padding: 0; }
  .divided > li { padding-block: 1.125rem; border-bottom: 1px solid var(--peach-line); }
  .divided > li:first-child { padding-top: 0; }
  .divided > li:last-child { border-bottom: 0; padding-bottom: 0; }

  /* Panel: the one white surface we allow (price, exercises) ---------- */

  .panel { padding: var(--space-md) 1.25rem; border-radius: var(--radius-lg); background: var(--paper); }

  .price { font-family: var(--font-display); font-size: 2.75rem; line-height: 1; color: var(--teal); }

  .figure-caption { margin-top: 0.5rem; font-size: 0.75rem; color: var(--muted); }
}

@layer components {
  .spaced { margin-top: var(--space-xl); }

  .legal h1 { margin-bottom: var(--space-md); }
  .legal h2 { font-size: var(--heading-sm); margin-top: var(--space-lg); }
  .legal h3 { font-size: 1.125rem; margin-top: var(--space-md); }
  .legal > * + * { margin-top: 0.875rem; }
  .legal ul, .legal ol { padding-left: 1.25rem; }
  .legal table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
  .legal th, .legal td { padding: 0.5rem 0.625rem 0.5rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
  .legal th { font-weight: 600; font-size: 0.8125rem; color: var(--muted); }
  .legal em { color: var(--muted); }

  .consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgb(29 43 41 / 0.08);
    padding-block: 1rem calc(1rem + env(safe-area-inset-bottom));
  }

  .consent__body { display: flex; flex-direction: column; gap: 0.75rem; }
  .consent__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .consent__actions .button { min-height: 48px; padding-inline: 0.75rem; }
  .figure { margin-block: 0; }
  .price-line { display: flex; align-items: baseline; gap: 0.625rem; }
  .flash-area { margin-top: var(--space-sm); }
  .error-list { margin: 0; padding-left: 1.1rem; }
  .inline-form { display: inline; }

  .danger-button { background: #F6DDD5; color: #5B1A10; }
  .danger-button:hover { background: #EFC9BD; color: #5B1A10; }
  .account-links { list-style: none; margin: 0; padding: 0; }

  .link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--teal);
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    cursor: pointer;
  }
}