/* ===== ROCHAL — legal/privacy pages (Phase 17) =====
   Always linked alongside css/styles.css, never standalone: reuses its
   :root design tokens, .eyebrow, .btn-outline-dark and <footer> rules
   rather than redefining them. This file only adds what's specific to a
   long-form text page (privacy.html / legal.html / cookies.html) — a
   static (non fixed/transparent) header, since these pages have no hero
   image underneath to scroll away from, a readable-width prose column,
   and a lightweight table-of-contents component. */

.legal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 64px);
  border-bottom: 1px solid var(--border);
}
.legal-header .site-logo { font-family: var(--font-serif); font-weight: 500; font-size: 22px; letter-spacing: 3px; color: var(--black); }
.legal-back { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); }
.legal-back:hover { color: var(--black); }

/* 760px: comfortable reading measure (~75-85 characters/line at this
   font-size) — deliberately narrower than the marketing page's own
   sections, which run edge-to-edge with imagery; pure text has no such
   need and reads worse the wider it gets. */
.legal-main { max-width: 760px; margin: 0 auto; padding: clamp(50px, 8vh, 90px) clamp(20px, 6vw, 40px) clamp(80px, 10vh, 120px); }
.legal-eyebrow { display: block; margin-bottom: 14px; }
.legal-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(30px, 4vw, 44px); line-height: 1.15; margin-bottom: 10px; }
.legal-updated { font-size: 13px; color: var(--ink-soft); margin-bottom: 40px; }

.legal-intro { font-size: 15px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 40px; }
.legal-intro strong { color: var(--black); }

.legal-toc { background: var(--champagne-tint); border-radius: 4px; padding: 20px 24px; margin-bottom: 48px; }
.legal-toc-title { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.legal-toc ol { list-style: none; display: grid; gap: 6px; counter-reset: toc; }
.legal-toc li { counter-increment: toc; font-size: 14px; }
.legal-toc li::before { content: counter(toc) ". "; color: var(--champagne); font-weight: 600; }
.legal-toc a { color: var(--black); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }

.legal-section { margin-bottom: 44px; scroll-margin-top: 24px; }
.legal-section h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(21px, 2.4vw, 26px); margin-bottom: 14px; }
.legal-section h3 { font-size: 15px; font-weight: 700; color: var(--black); margin: 20px 0 8px; }
.legal-section p, .legal-section li { font-size: 15px; line-height: 1.75; color: var(--ink-soft); }
.legal-section p + p { margin-top: 12px; }
.legal-section ul { padding-left: 20px; margin: 10px 0; display: grid; gap: 6px; }
.legal-section a { color: var(--atlantic); text-decoration: underline; text-underline-offset: 2px; }
.legal-section a:hover { color: var(--black); }
.legal-section strong { color: var(--black); }

.legal-callout { border-left: 2px solid var(--champagne); padding: 2px 0 2px 18px; margin: 16px 0; font-size: 14px; color: var(--ink-soft); }

/* Flags every piece of information this codebase cannot know on its own
   (legal identity, exact retention period, etc.) — never silently
   omitted, never invented. See docs/PRIVACY-COMPLIANCE.md. */
.legal-todo {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .3px;
  color: var(--terracotta); background: rgba(176,82,45,.1); border: 1px solid rgba(176,82,45,.25);
  border-radius: 3px; padding: 1px 8px;
}

.legal-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal-table th { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
@media (max-width: 640px) {
  .legal-table-wrap { overflow-x: auto; }
}

.legal-footer-note { font-size: 12px; color: var(--ink-soft); margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--border); }

/* Footer legal-links row — added to the shared dark <footer> markup
   across every public page (index.html included). */
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { font-size: 12px; color: var(--ink-soft-on-dark); text-decoration: none; }
.footer-links a:hover { color: var(--ivory); }

/* Same visible-focus treatment already used on cancel-booking.html's own
   buttons (Phase 15) — never rely on the browser default alone. */
.legal-back:focus-visible, .legal-toc a:focus-visible, .legal-section a:focus-visible, .footer-links a:focus-visible {
  outline: 2px solid var(--champagne); outline-offset: 2px;
}

/* ===== Booking-form privacy note (index.html) ===== */
.booking-privacy-note { font-size: 12px; line-height: 1.6; color: var(--ink-soft); margin-top: 14px; }
.booking-privacy-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.booking-privacy-note a:hover { color: var(--black); }

/* ===== Marketing consent checkbox (Phase 19) =====
   Deliberately NOT .booking-field's own flex-column/uppercase-label-above
   layout (that's for text inputs) — a plain checkbox+label row instead,
   with a comfortable mobile tap target on the whole row (brief §2). */
.booking-marketing-consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 4px; padding: 4px 0;
}
.booking-marketing-consent input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0;
  accent-color: var(--champagne); cursor: pointer;
}
.booking-marketing-consent label {
  /* .booking-field label (css/styles.css) sets its own uppercase/letter-
     spacing for a text-input label sitting ABOVE its field — both
     explicitly undone here, since this is a sentence-length checkbox
     label sitting beside its input, not that. */
  font-size: 13px; line-height: 1.5; color: var(--ink-soft); cursor: pointer;
  text-transform: none; letter-spacing: normal;
}