/* ============================================================
   EersteJan Designs — terms and conditions stylesheet
   Loaded after css/style.css, which also provides the artboard banner
   at the top of the page.

   A legal page in the site's design-app language, with the legal text
   itself kept plain and easy to read. The contents list is a layers
   panel (the section being read is the selected layer), every section
   opens with a comment pinned by me with the short version, and
   jumping to a section selects its heading with the same corner
   handles as the site's headings.

   Structure: Layout → Layers panel → Document → Sections → Short-version
              notes → Selected heading → My details → Closing → Print
   ============================================================ */

/* ---------- 1. Layout ---------- */

.terms { padding-block: var(--space-l) var(--space-2xl); background: var(--color-cloud); }
.terms__grid { display: grid; gap: var(--space-m); align-items: start; }

/* ---------- 2. Layers panel (contents) ---------- */

.layers {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}
.layers__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--color-line);
  font-size: var(--step--1);
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}
.layers__head::-webkit-details-marker { display: none; }
.layers__count { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--color-ink-soft); }
.layers__head::after {
  content: '';
  width: .5rem;
  height: .5rem;
  margin: -.25rem .2rem 0 .1rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  transition: rotate .2s var(--ease-standard), margin .2s var(--ease-standard);
}
.layers[open] .layers__head::after { margin-top: .2rem; rotate: 225deg; }
.layers:not([open]) .layers__head { border-bottom-color: transparent; }

.layers__list { display: grid; gap: .1rem; padding: .45rem; }
.layers__link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .55rem;
  border-radius: .45rem;
  color: var(--color-ink-soft);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.layers__link:hover { background: var(--color-cloud); color: var(--color-ink); }
.layers__icon { flex-shrink: 0; width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .55; }
.layers__num { flex-shrink: 0; min-width: 1.1rem; font-size: .75rem; font-variant-numeric: tabular-nums; opacity: .75; }
/* The selected layer: a design app's selection blue */
.layers__link.is-current { background: #e3effd; color: var(--color-blue-deep); }
.layers__link.is-current .layers__icon { opacity: 1; }

/* ---------- 3. Document ---------- */

.terms-doc {
  min-width: 0;
  padding: clamp(1.25rem, .4rem + 3vw, 3rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-l);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}
.terms-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--color-line);
}
.terms-meta__updated { font-size: var(--step--1); font-weight: 700; color: var(--color-ink-soft); }
.terms-print {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5em 1em;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--color-ink);
}
.terms-print svg { width: 1.05rem; height: 1.05rem; }
.terms-print:hover { border-color: var(--color-ink); }
html:not(.js) [data-print] { display: none; }   /* printing needs JavaScript */
.terms-lang { margin-top: var(--space-s); padding: .7rem .9rem; border-radius: var(--radius-s); background: var(--color-cloud); font-size: var(--step--1); font-weight: 700; }
.terms-intro { margin-top: var(--space-s); color: var(--color-ink-soft); }

/* ---------- 4. Sections ---------- */

.terms-section {
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px solid var(--color-line);
  scroll-margin-top: calc(var(--header-h) + 1.25rem);
}
.terms-section__title { display: flex; align-items: baseline; gap: .75rem; font-size: var(--step-2); }
.terms-section__num {
  flex-shrink: 0;
  min-width: 1.6ch;
  font-family: var(--font-accent);
  font-size: 1.15em;
  font-weight: 400;
  line-height: 1;
  color: var(--color-violet);
}
.terms-section__text { position: relative; }

.terms-body { margin-top: var(--space-s); line-height: 1.7; color: var(--color-ink-soft); }
.terms-body > * + * { margin-top: .8rem; }
.terms-body h3 { margin-top: var(--space-s); font-size: var(--step-0); letter-spacing: -.01em; color: var(--color-ink); }
.terms-body h3 + ul,
.terms-body h3 + p { margin-top: .4rem; }
.terms-body ul { display: grid; gap: .45rem; padding-left: 1.2rem; }
.terms-body li { max-width: 62ch; padding-left: .2rem; }
.terms-body li::marker { color: var(--color-violet); }
.terms-body a { color: var(--color-blue-deep); font-weight: 700; }
.terms-list--cols { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); column-gap: var(--space-m); }

/* ---------- 5. Short-version notes ----------
   A comment pinned to the section, the way a designer leaves a note on
   a layer in a shared file. */

.terms-note { display: flex; align-items: flex-start; gap: .7rem; margin-top: var(--space-s); }
.terms-note__pin {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50% 50% 50% .25rem;
  background: var(--gradient-brand);
  color: var(--color-white);
  font-family: var(--font-accent);
  font-size: .9rem;
  line-height: 1;
  box-shadow: 0 6px 12px -6px rgba(26,8,74,.5);
}
.terms-note__bubble {
  max-width: 44rem;
  padding: .7rem .95rem;
  border: 1px solid #f4d79a;
  border-radius: .25rem 1rem 1rem 1rem;
  background: #fff7e3;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-ink);
}
.terms-note__lead { font-weight: 800; color: #8a5300; }

/* ---------- 6. Selected heading ----------
   Jumping to a section (from the contents or a link) "selects" its
   heading with the frame and corner handles used across the site. */

.terms-section__text::before,
.terms-section__text::after {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s var(--ease-standard);
}
.terms-section__text::after { inset: -.3rem -.5rem; border: 1.5px solid var(--color-violet); }
.terms-section__text::before {
  inset: calc(-.3rem - 3.75px) calc(-.5rem - 3.75px);
  z-index: 1;
  background:
    linear-gradient(#fff, #fff) left 2px top 2px / 5px 5px no-repeat,
    linear-gradient(#fff, #fff) right 2px top 2px / 5px 5px no-repeat,
    linear-gradient(#fff, #fff) left 2px bottom 2px / 5px 5px no-repeat,
    linear-gradient(#fff, #fff) right 2px bottom 2px / 5px 5px no-repeat,
    linear-gradient(var(--color-violet), var(--color-violet)) left top / 9px 9px no-repeat,
    linear-gradient(var(--color-violet), var(--color-violet)) right top / 9px 9px no-repeat,
    linear-gradient(var(--color-violet), var(--color-violet)) left bottom / 9px 9px no-repeat,
    linear-gradient(var(--color-violet), var(--color-violet)) right bottom / 9px 9px no-repeat;
}
.terms-section:target .terms-section__text::before,
.terms-section:target .terms-section__text::after { opacity: 1; }

/* ---------- 7. My details ---------- */

.terms-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-s) var(--space-m);
  padding: var(--space-s);
  border-radius: var(--radius-m);
  background: var(--color-cloud);
}
.terms-details dt { font-size: .78rem; font-weight: 700; color: var(--color-ink-soft); }
.terms-details dd { margin: .1rem 0 0; font-weight: 700; color: var(--color-ink); overflow-wrap: anywhere; }
.terms-details dd.is-placeholder { font-style: italic; font-weight: 500; color: var(--color-ink-soft); }

/* ---------- 8. Closing ---------- */

.terms-end {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: var(--space-s) var(--space-m);
  align-items: end;
  margin-top: var(--space-xl);
  padding: var(--space-l) var(--space-m) 0;
  border-radius: var(--radius-l);
  background: var(--artboard-bg);
  color: var(--color-white);
}
.terms-end h2 { font-size: var(--step-3); color: var(--color-white); }
.terms-end__body { padding-bottom: var(--space-l); }
.terms-end__body p { margin-top: var(--space-2xs); color: rgba(255,255,255,.9); }
.terms-end__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }
.terms-end__stage { display: flex; flex-direction: column; align-items: center; }
.terms-end__bubble { font-size: var(--step-0); }
.terms-end__mascot { width: clamp(7rem, 5rem + 6vw, 10rem); height: auto; margin-top: .85rem; margin-bottom: -26px; filter: drop-shadow(0 18px 26px rgba(0,0,0,.35)); }

/* ---------- Responsive ---------- */

@media (min-width: 48rem) {
  .terms-end { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--space-l); }
}
@media (min-width: 64rem) {
  .terms__grid { grid-template-columns: 17rem minmax(0, 1fr); gap: var(--space-l); }
  .layers { position: sticky; top: calc(var(--header-h) + 1rem); max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; }
  .layers__head { pointer-events: none; }   /* always open on desktop */
  .layers__head::after { display: none; }
}

/* ---------- 9. Print ----------
   Just the terms: no banner art, contents, buttons or footer. */

@media print {
  .site-header, .mobile-nav, .skip-link, .layers, .terms-print, .terms-end,
  .site-footer, .back-to-top, .lang-switch-fixed, .page-banner .hero__decor { display: none !important; }
  body { background: #fff; }
  .page-banner { padding: 0 0 1rem; background: none; color: #000; text-align: left; }
  .page-banner__inner { align-items: flex-start; }
  .page-banner__kicker, .page-banner__lede { color: #333; }
  .page-banner__lede { margin-inline: 0; text-align: left; }
  .page-banner__title { color: #000; }
  .type-box { padding: 0; border: 0; }
  .type-box__handle { display: none; }
  .terms { padding: 0; background: none; }
  .terms__grid { display: block; }
  .terms-doc { padding: 0; border: 0; box-shadow: none; }
  .terms-note__pin { display: none; }
  .terms-note__bubble { border-color: #999; background: none; }
  .terms-section__title { break-after: avoid; }
  a { color: #000; }
}