/* ============================================================
   Erisse — LEGAL pages light theme (cookies, privacy-and-policy,
   terms--conditions). Scoped: this file is linked ONLY from those
   three pages' content.html, so every override here is page-local.
   Does not touch styles.css or templates/ (parallel-build rules).
   Legal ink: rgb(22,14,9) body/title, rgb(22,16,12) nav/footer.

   The three pages share this theme but differ in a few metrics
   (page gap, text-column width, mobile title size, background
   ornament). Shared rules are unqualified; per-page rules are keyed
   off the page's own class (.legal--cookies / --privacy / --terms).
   Page gap lives on the shared .page element, so it is scoped with
   :has() on the page that contains each variant.
   ============================================================ */

/* ---- page turns cream ---- */
html, body { background: rgb(248, 244, 238); }
.page { background: rgb(248, 244, 238); padding: 50px 0; }

/* per-page vertical rhythm (space between nav, content, footer) */
.page:has(.legal--cookies) { gap: 120px; }
.page:has(.legal--privacy) { gap: 150px; }
.page:has(.legal--terms)   { gap: 120px; }

/* the home ornament strip is not used on legal pages */
.ornament { display: none !important; }

/* ---- background watermark ornament (per-page asset + geometry;
   exact left/top/width/height are set inline on each figure) ---- */
.legal-orn { position: absolute; z-index: 0; pointer-events: none; }
.legal-orn img { width: 100%; height: 100%; display: block; }

/* ============================================================
   HERO shell collapses to a bare nav strip on the cream page
   ============================================================ */
.hero { height: auto; z-index: 1; }
.hero-bg { display: none; }
.hero-content { height: auto; padding: 0; }
.hero-frame { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 20px; }
.site-nav { margin-bottom: 0; padding: 30px 10px; }

/* dark logo (swap the light template imgs for a background) */
.nav-logo img { display: none; }
.nav-logo {
  display: block; width: 108px; height: 24px;
  background: url(../assets/legal-logo-desktop.svg) center/contain no-repeat;
}

/* dark nav text; dark EN language selector; outline (not solid) Inquire */
.nav-menu a { color: rgb(22, 16, 12); }
.lang-btn { border-color: rgb(22, 16, 12); color: rgb(22, 16, 12); }
/* language dropdown, dark-on-cream variant (measured on the live legal pages) */
.lang-panel { background: rgba(255, 255, 255, 0.2); border-color: rgb(22, 16, 12); }
.lang-item { color: rgb(22, 16, 12); }
.lang-item:hover { background: rgba(22, 16, 12, 0.1); }
.nav-inquire { background: transparent; color: rgb(22, 16, 12); }
.nav-inquire.btn-frame::before { border-color: rgb(22, 16, 12); }

/* ============================================================
   CONTENT column
   ============================================================ */
.legal {
  position: relative; z-index: 1;
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.legal-wrap {
  width: 100%;
  display: flex; flex-direction: column; gap: 128px; align-items: center;
}
/* per-page text-column width (centered inside .legal) */
.legal--cookies .legal-wrap,
.legal--terms   .legal-wrap { max-width: 1200px; }
.legal--privacy .legal-wrap { max-width: 750px; }

.legal-title {
  width: 100%;
  font-family: var(--serif-light); font-size: 64px; line-height: 64px; font-weight: 400;
  text-align: center; color: rgb(22, 14, 9);
  transform: translateZ(0);
}
.legal-sections {
  width: 100%;
  display: flex; flex-direction: column; gap: 128px; align-items: flex-start;
}
.legal-block, .legal-body { width: 100%; }
.legal-sec {
  width: 100%;
  display: flex; flex-direction: column; gap: 64px; align-items: flex-start;
}
.legal-h {
  width: 100%;
  font-family: var(--serif-regular); font-size: 32px; line-height: 38.4px; font-weight: 400;
  color: rgb(22, 14, 9);
  transform: translateZ(0);
}
.legal-block p, .legal-body p {
  font-family: var(--serif-light); font-size: 20px; line-height: 24px; font-weight: 400;
  color: rgb(22, 14, 9);
}
.legal-block a, .legal-body a { color: rgb(22, 14, 9); }

/* lists: 30px hanging indent. privacy uses a bulleted <ul>; terms uses an
   <ol> with NO marker (just the indent) — so the • is scoped to ul only. */
.legal-body ul, .legal-body ol { list-style: none; }
.legal-body li {
  position: relative; margin-left: 30px;
  font-family: var(--serif-light); font-size: 20px; line-height: 24px; color: rgb(22, 14, 9);
}
.legal-body ul li::before {
  content: "•"; position: absolute; left: -30px;
}

/* grayscale-AA match: on Linux Chromium -webkit-font-smoothing is a no-op, so
   grayscale AA only comes from a real compositing layer. An identity
   translate(0,0) doesn't reliably promote small glyphs (they keep subpixel AA
   and the diff fringes); translateZ(0) forces the GPU layer. Applied to every
   text-bearing element, including the nav + footer (template uses the weaker
   translate(0,0)). */
.legal-title, .legal-h,
.legal-block p, .legal-body p, .legal-block a, .legal-body a, .legal-body li,
.nav-menu a, .nav-inquire, .lang-btn,
.footer-cta-copy h1, .footer-cta-copy p, .footer-cta-copy .btn,
.footer-news-lines p, .news-note, .news-btn,
.footer-col-title, .page-list a, .support-list a, .social-list p,
.copyright, .credit, .credit a { transform: translateZ(0); }

/* ============================================================
   FOOTER on cream — CTA band stays dark, everything below is dark ink
   ============================================================ */
/* the mirror's legal footer has an outer 50px vertical padding the
   template omits — without it the whole footer rides 50px too high */
.site-footer { padding: 50px 0; }
/* mirror places the divider directly under the 255px columns row (no gap);
   template's 30px gap would push footer-base + page 30px too low */
.footer-main { color: rgb(22, 16, 12); gap: 0; }
.footer-news-lines, .news-note { color: rgb(22, 16, 12); }
/* newsletter form themed dark for the cream footer (template borders/text
   are cream). The input + Subscribe button ARE present on legal pages. */
.news-input-wrap::before { border-color: rgb(22, 16, 12); }
.news-input { color: rgb(22, 16, 12); opacity: 1; }
.news-btn { border-color: rgb(22, 16, 12); color: rgb(22, 16, 12); }
.footer-col-title, .page-list a, .support-list a, .social-list p { color: rgb(22, 16, 12); }
/* mirror's Support column has a tighter title→list gap (19px) than the other
   columns' 25px — reproduce so the three support links line up */
.footer-col-support { gap: 19px; }
.social-list .icon svg path { fill: rgb(22, 16, 12); }
.copyright, .credit, .credit a { color: rgb(22, 16, 12); }

/* dark divider — template line is cream (#F8F4EE), invisible on cream;
   swap for the dark (#16100C) legal divider */
.footer-divider img { display: none; }
.footer-divider {
  height: 15px;
  background: url(../assets/legal-divider-desktop.svg) center/100% 15px no-repeat;
}

/* logomark: keep the template's blend-mode <img> pieces. They are cream
   shapes with mix-blend-mode difference/exclusion; on the cream page the
   ring blends to a solid black disc and the letter to a cream cut-out —
   exactly the mirror. No override needed. */

/* ============================================================
   MOBILE (<=809px)
   ============================================================ */
@media (max-width: 809px) {
  .page:has(.legal--cookies) { gap: 120px; }
  .page:has(.legal--privacy) { gap: 75px; }
  .page:has(.legal--terms)   { gap: 120px; }

  .hero-content { padding: 0; }
  .hero-frame { padding: 0 30px; }
  .site-nav { padding: 30px 0; margin-bottom: 0; }
  .nav-logo { height: 28px; background-image: url(../assets/legal-logo-mobile.svg); }
  .menu-btn svg path { stroke: rgb(22, 16, 12); }

  .legal { padding: 0 25px; }
  /* privacy uses a smaller mobile type scale than cookies/terms
     (title 40, heading 26, body 18); cookies/terms keep 64/32/20 */
  .legal--privacy .legal-title { font-size: 40px; line-height: 40px; }
  .legal--privacy .legal-h { font-size: 26px; line-height: 31.2px; }
  .legal--privacy .legal-body p,
  .legal--privacy .legal-body li { font-size: 18px; line-height: 21.6px; }
  .legal--privacy .legal-body li { margin-left: 27px; }
  .legal--privacy .legal-body li::before { left: -27px; }

  /* the tighter (19px) Support gap is a desktop-only quirk; mobile uses the
     normal 24px column gap like the other footer columns */
  .footer-col-support { gap: 24px; }

  .footer-divider {
    height: 10px;
    background-image: url(../assets/legal-divider-mobile.svg);
    background-size: 100% 10px;
  }
}

/* newsletter success box on the cream pages: dark ink variant */
.page { --news-ink: rgb(22, 16, 12); }
.news-success p { animation: news-glow-ink 2s ease-in-out infinite alternate; }
@keyframes news-glow-ink {
  from { text-shadow: 0 0 4px rgba(22, 16, 12, 0.5); }
  to   { text-shadow: 0 0 10px rgba(22, 16, 12, 0.9); }
}