/* ==========================================================================
   LE BENIC — legal and customer-care pages
   Terms, Privacy, Cookies, Returns, Shipping, Consumer Rights, Contact.
   Built on the text-page type of page.css (eyebrow, title), without the
   background photograph: long reading wants a calm, even ground.
   ========================================================================== */

.legal {
  --gold: #c59a5d;
  --ivory: #ece4d6;
  --ivory-soft: rgb(236 228 214 / 0.7);
  --ivory-quiet: rgb(236 228 214 / 0.5);
  --hair: rgb(236 228 214 / 0.1);
  padding-top: calc(var(--header-h) + var(--header-edge) + clamp(56px, 10vh, 120px));
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgb(42 33 27 / 0.35), transparent 70%),
    var(--ink);
}

.legal__article { max-width: 44rem; margin: 0 auto; }
.legal .page__title { margin-bottom: 1.4rem; font-size: clamp(2.4rem, 4.6vw, 4rem); }

.legal__updated {
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ivory-quiet);
}

/* the other legal pages, one quiet row under the title */
.legal__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin: 2.2rem 0 0;
  padding: 1.1rem 0;
  border-block: 1px solid var(--hair);
  list-style: none;
}
.legal__pages a {
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory-quiet);
  transition: color 0.3s ease;
}
.legal__pages a:hover,
.legal__pages a:focus-visible { color: var(--ivory); }
.legal__pages a[aria-current="page"] { color: var(--gold); }

.legal__intro {
  margin: 2.6rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  line-height: 1.35;
  color: var(--ivory);
}

/* contents: numbered, two columns on wide screens */
.legal__toc { margin: 2.4rem 0 0; }
.legal__toc-title {
  margin-bottom: 0.9rem;
  font-family: var(--font-nav);
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.legal__toc ol {
  columns: 2 16rem;
  column-gap: 2.4rem;
  margin: 0;
  padding: 0 0 0 1.3em;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ivory-soft);
}
.legal__toc li { break-inside: avoid; padding: 0.18rem 0; }
.legal__toc li::marker { color: var(--ivory-quiet); font-size: 12px; }
.legal__toc a { transition: color 0.3s ease; }
.legal__toc a:hover,
.legal__toc a:focus-visible { color: var(--ivory); }

/* sections */
.legal__section {
  margin-top: clamp(2.8rem, 6vh, 4rem);
  scroll-margin-top: calc(var(--header-h) + 32px);
}
.legal__section h2 {
  margin: 0 0 1.1rem;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.1vw, 1.9rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ivory);
}
.legal__section h3 {
  margin: 1.8rem 0 0.6rem;
  font-family: var(--font-nav);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-soft);
}
.legal__section p,
.legal__section li {
  font-size: clamp(15px, 1.02vw, 16.5px);
  font-weight: 300;
  line-height: 1.75;
  color: rgb(233 225 213 / 0.84);
}
.legal__section p + p { margin-top: 1em; }
.legal__section ul,
.legal__section ol { margin: 0.9em 0 0; padding-left: 1.2em; }
.legal__section p + ul,
.legal__section p + ol { margin-top: 0.7em; }
.legal__section li + li { margin-top: 0.45em; }
.legal__section li::marker { color: var(--gold); }
.legal__section ul + p,
.legal__section ol + p { margin-top: 1em; }
.legal__section strong { font-weight: 400; color: var(--ivory); }
.legal__section a,
.legal__intro a {
  color: var(--ivory);
  text-decoration: underline;
  text-decoration-color: rgb(197 154 93 / 0.6);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}
.legal__section a:hover,
.legal__section a:focus-visible { text-decoration-color: var(--gold); }

/* facts: business details, storage items, addresses */
.legal__facts {
  display: grid;
  grid-template-columns: minmax(9rem, max-content) 1fr;
  gap: 0.55rem 1.6rem;
  margin: 1.1rem 0 0;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: rgb(236 228 214 / 0.025);
}
.legal__facts dt {
  font-family: var(--font-nav);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--ivory-quiet);
}
.legal__facts dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ivory);
  overflow-wrap: anywhere;
}

/* a table of storage items / processors that turns into cards on phones */
.legal__table { width: 100%; margin: 1.2rem 0 0; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.legal__table th {
  padding: 0 1rem 0.7rem 0;
  font-family: var(--font-nav);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ivory-quiet);
  border-bottom: 1px solid var(--hair);
}
.legal__table td {
  padding: 0.85rem 1rem 0.85rem 0;
  vertical-align: top;
  color: rgb(233 225 213 / 0.84);
  border-bottom: 1px solid var(--hair);
}
.legal__table td:first-child { color: var(--ivory); }
.legal__table code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12.5px; color: var(--ivory); }

/* a detail the owner must still supply — visible on purpose, never invented */
.legal__todo {
  padding: 0 0.3em;
  border: 1px dashed rgb(197 154 93 / 0.7);
  border-radius: 2px;
  font-style: normal;
  color: var(--gold);
}

/* the withdrawal form: a quiet printable block */
.legal__form {
  margin: 1.2rem 0 0;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--hair);
  background: rgb(236 228 214 / 0.025);
}
.legal__form p { font-size: 14.5px; }

.legal__back {
  display: inline-block;
  margin-top: clamp(3.2rem, 8vh, 5rem);
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-soft);
}
.legal__back:hover,
.legal__back:focus-visible { color: var(--ivory); }

@media (max-width: 760px) {
  /* long single-word titles ("Persónuverndarstefna") fit narrow phones */
  .legal .page__title { font-size: min(2.4rem, 11vw); overflow-wrap: anywhere; }
  .legal__section h2 { overflow-wrap: anywhere; }
  .legal__pages { gap: 0.6rem 1.2rem; }
  .legal__facts { grid-template-columns: 1fr; gap: 0.15rem; padding: 1rem 1.1rem; }
  .legal__facts dd + dt { margin-top: 0.7rem; }
  .legal__table thead { display: none; }
  .legal__table,
  .legal__table tbody,
  .legal__table tr,
  .legal__table td { display: block; width: 100%; }
  .legal__table tr { padding: 0.8rem 0; border-bottom: 1px solid var(--hair); }
  .legal__table td { padding: 0.15rem 0; border: 0; }
  .legal__table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-nav);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ivory-quiet);
  }
}

@media print {
  .nav, .menu, .lb-footer, .lb-fade, .legal__pages, .legal__toc, .legal__back { display: none !important; }
  .legal { padding: 0; background: #fff; }
  .legal * { color: #000 !important; }
}

/* while details are still being completed */
.legal__draft {
  margin-top: 1.2rem;
  padding: 0.8rem 1rem;
  border-left: 1px solid var(--gold);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ivory-soft);
  background: rgb(197 154 93 / 0.06);
}

/* ---------------------------------------------------------------- application form (affiliate.html) */
.af-form { display: grid; gap: 22px; margin-top: 1.4rem; }
.af-field { display: grid; gap: 8px; }
.af-label {
  font-family: var(--font-nav);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-quiet);
}
.af-label .af-req { color: var(--gold); margin-left: 4px; }
.af-input,
.af-textarea {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 2px;
  background: rgb(236 228 214 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(236 228 214 / 0.16);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  transition: box-shadow 0.4s ease;
}
.af-input { height: 52px; padding-block: 0; }
.af-textarea { min-height: 150px; resize: vertical; }
.af-input:focus-visible,
.af-textarea:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--gold); }
.af-input::placeholder,
.af-textarea::placeholder { color: rgb(236 228 214 / 0.32); }
.af-hint { font-size: 12.5px; line-height: 1.5; color: var(--ivory-quiet); }
.af-check { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.6; color: var(--ivory-soft); cursor: pointer; }
.af-check input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: #c59a5d; }
.af-actions { margin-top: 6px; }
.af-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.af-note { display: none; margin-top: 1.2rem; padding: 1rem 1.2rem; border-left: 1px solid var(--gold); background: rgb(197 154 93 / 0.06); color: var(--ivory); }
.af-note.is-on { display: block; }
.af-note--error { border-left-color: #b8654a; background: rgb(184 101 74 / 0.08); }
.legal.is-sent .af-form { display: none; }
@media (max-width: 760px) { .af-form { gap: 18px; } }