/* ============================================================
   HOLA HOLIDAYS — LEGAL DOCUMENTS (2026)

   One template for /terms.html, /privacy.html, /cancellation.html and
   /credits.html. Rendered by tools/render-site-pages.php from
   content/pages/<key>.json.

   Loaded LAST on those four pages (after airbnb-2026.css), so it inherits
   the live palette rather than redeclaring one: Rausch coral accent,
   #222 structure, #717171 muted, #DDD hairlines, #F7F7F7 fills, Inter,
   soft radii.

   Layout
   ------
   Compact light header (breadcrumb → eyebrow → H1 → intro → last-updated),
   then a two-column body: a sticky table of contents on the left and a
   ~72ch reading column on the right. Below 1024px it collapses to one
   column and the table of contents becomes a <details> disclosure.

   Everything is scoped to `.legal-doc`, so nothing here can leak into the
   tour, listing or marketing routes.
   ============================================================ */

.legal-doc {
    --lg-ink: var(--brand-text, #222222);
    --lg-muted: var(--brand-muted, #717171);
    --lg-line: var(--brand-border, #dddddd);
    --lg-tint: var(--brand-sand, #f7f7f7);
    --lg-accent: var(--brand-accent, #ff385c);
    --lg-accent-dark: var(--brand-accent-dark, #e00b41);
    --lg-radius: var(--radius-lg, 16px);
    /* One shell width for the header band and the two-column body, so the
       breadcrumb, the H1 and the contents rail all share a left edge. */
    --lg-shell: 1120px;
    /* Mirrors the sticky header bar (86px) plus breathing room, so the
       table of contents parks just under the header instead of behind it.
       If the header's real height changes, change it here too. */
    --lg-header-offset: 86px;
    --lg-toc-top: calc(var(--lg-header-offset) + 20px);

    color: var(--lg-ink);
    background: #ffffff;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
}

.legal-doc *,
.legal-doc *::before,
.legal-doc *::after {
    box-sizing: border-box;
}

.legal-doc #main {
    display: block;
}

/* Skip link — same contract as the rest of the site. */
.legal-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 12px 18px;
    border-radius: var(--radius-sm, 12px);
    background: var(--lg-ink);
    color: #fff;
    font-weight: 600;
}

.legal-skip:focus {
    left: 16px;
    top: 16px;
}

/* Google Translate paints a blue fill over translated fragments. */
.legal-doc .VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q {
    background: transparent !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------
   1. COMPACT HEADER
   ------------------------------------------------------------ */
.legal-hero {
    background: var(--lg-tint);
    border-bottom: 1px solid var(--lg-line);
}

.legal-hero__inner {
    max-width: var(--lg-shell);
    padding-top: clamp(28px, 3.6vw, 48px);
    padding-bottom: clamp(28px, 3.6vw, 48px);
}

.legal-crumbs {
    margin: 0 0 14px;
}

.legal-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
}

.legal-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--lg-muted);
}

.legal-crumbs li + li::before {
    content: "/";
    color: var(--lg-line);
}

.legal-crumbs a {
    color: var(--lg-muted);
    text-decoration: none;
}

.legal-crumbs a:hover {
    color: var(--lg-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-crumbs [aria-current="page"] {
    color: var(--lg-ink);
    font-weight: 600;
}

.legal-hero__eyebrow {
    margin: 0 0 10px;
    color: var(--lg-accent);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
}

.legal-hero__title {
    max-width: 22ch;
    margin: 0;
    color: var(--lg-ink);
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.legal-hero__intro {
    max-width: 68ch;
    margin: 18px 0 0;
    color: var(--lg-muted);
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    line-height: 1.62;
}

.legal-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 22px 0 0;
    font-size: 0.86rem;
    color: var(--lg-muted);
}

.legal-hero__stamp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--lg-line);
    border-radius: var(--radius-full, 999px);
    background: #fff;
    color: var(--lg-ink);
    font-weight: 600;
}

.legal-hero__stamp i {
    color: var(--lg-accent);
    font-size: 0.85em;
}

.legal-hero__note {
    font-style: italic;
}

/* ------------------------------------------------------------
   2. TWO-COLUMN BODY
   ------------------------------------------------------------ */
.legal-layout {
    display: grid;
    /* The sidebar narrows with the viewport so the reading column keeps its
       65–80ch measure all the way down to the collapse point at 1024px. */
    grid-template-columns: clamp(232px, 22vw, 264px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(28px, 3vw, 56px);
    max-width: var(--lg-shell);
    padding-top: clamp(36px, 4vw, 56px);
    padding-bottom: clamp(48px, 5vw, 84px);
}

.legal-side {
    min-width: 0;
}

/* ---- Table of contents ------------------------------------ */
.legal-toc {
    position: sticky;
    top: var(--lg-toc-top);
    max-height: calc(100vh - var(--lg-toc-top) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-left: 2px solid var(--lg-line);
    padding-left: 2px;
}

.legal-toc__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-radius);
    background: #fff;
    color: var(--lg-ink);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.legal-toc__summary::-webkit-details-marker {
    display: none;
}

.legal-toc__chevron {
    color: var(--lg-muted);
    transition: transform 200ms ease;
}

.legal-toc[open] .legal-toc__chevron {
    transform: rotate(180deg);
}

.legal-toc__panel {
    padding-top: 14px;
}

.legal-toc__label {
    margin: 0 0 10px 16px;
    color: var(--lg-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.legal-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: lg-toc;
}

.legal-toc__list li {
    margin: 0;
}

.legal-toc__link {
    display: block;
    padding: 7px 12px 7px 16px;
    border-left: 2px solid transparent;
    margin-left: -2px;
    color: var(--lg-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    text-decoration: none;
    transition: color 160ms ease, border-color 160ms ease;
}

.legal-toc__link:hover {
    color: var(--lg-ink);
}

.legal-toc__link.is-active {
    border-left-color: var(--lg-accent);
    color: var(--lg-ink);
    font-weight: 600;
}

/* ---- Sidebar help card ------------------------------------ */
.legal-help {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-radius);
    background: var(--lg-tint);
}

.legal-help__title {
    margin: 0 0 8px;
    color: var(--lg-ink);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.legal-help__text {
    margin: 0 0 16px;
    color: var(--lg-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.legal-help__btn {
    width: 100%;
    justify-content: center;
}

/* ------------------------------------------------------------
   3. READING COLUMN
   ------------------------------------------------------------ */
.legal-body {
    min-width: 0;
    /* Insurance only: at the shell width above the column already lands at
       ~74ch. This stops it running long if the shell is ever widened. */
    max-width: 78ch;
}

.legal-section {
    padding-bottom: clamp(28px, 3vw, 40px);
    margin-bottom: clamp(28px, 3vw, 40px);
    border-bottom: 1px solid var(--lg-line);
    scroll-margin-top: calc(var(--lg-header-offset) + 24px);
}

.legal-section:last-of-type {
    border-bottom: 0;
}

.legal-section__title {
    margin: 0 0 16px;
    color: var(--lg-ink);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.legal-section__body > * + * {
    margin-top: 16px;
}

.legal-section__body p {
    margin: 0;
    color: var(--lg-ink);
    font-size: 1rem;
    line-height: 1.75;
}

.legal-section__body a {
    color: var(--lg-accent-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.legal-section__body a:hover {
    color: var(--lg-accent);
}

.legal-section__body strong {
    color: var(--lg-ink);
    font-weight: 700;
}

/* Lists */
.legal-list {
    margin: 0;
    padding-left: 1.35em;
    color: var(--lg-ink);
}

.legal-list li {
    margin: 0 0 8px;
    padding-left: 0.25em;
    font-size: 1rem;
    line-height: 1.7;
}

.legal-list li:last-child {
    margin-bottom: 0;
}

.legal-list li::marker {
    color: var(--lg-accent);
}

/* Callout */
.legal-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--lg-line);
    border-left: 3px solid var(--lg-accent);
    border-radius: var(--radius-sm, 12px);
    background: var(--lg-tint);
}

.legal-note i {
    flex: none;
    margin-top: 3px;
    color: var(--lg-accent);
}

.legal-note p {
    margin: 0;
    color: var(--lg-ink);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* Definition lists — "term: explanation" pairs */
.legal-dl {
    margin: 0;
    border-top: 1px solid var(--lg-line);
}

.legal-dl dt {
    margin: 0;
    padding: 14px 0 2px;
    color: var(--lg-ink);
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.4;
}

.legal-dl dd {
    margin: 0;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--lg-line);
    color: var(--lg-muted);
    font-size: 0.98rem;
    line-height: 1.7;
}

.legal-dl--identifiers dt {
    color: var(--lg-muted);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.legal-dl--identifiers dd {
    color: var(--lg-ink);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.legal-company__note {
    color: var(--lg-muted);
    font-size: 0.92rem;
}

/* Tables */
.legal-table-wrap {
    margin: 0;
    overflow-x: auto;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-radius);
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.legal-table-wrap:focus-visible {
    outline: 3px solid rgba(255, 56, 92, 0.35);
    outline-offset: 2px;
}

.legal-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.legal-table th,
.legal-table td {
    padding: 13px 16px;
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
    border-bottom: 1px solid var(--lg-line);
}

.legal-table thead th {
    background: var(--lg-tint);
    color: var(--lg-ink);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td {
    border-bottom: 0;
}

.legal-table td {
    color: var(--lg-muted);
}

.legal-table td:first-child {
    color: var(--lg-ink);
    font-weight: 600;
}

.legal-table a {
    color: var(--lg-accent-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

/* Back to top */
.legal-top {
    margin: 8px 0 0;
    text-align: right;
}

.legal-top a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--lg-muted);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}

.legal-top a:hover {
    color: var(--lg-accent-dark);
}

/* ------------------------------------------------------------
   4. BOTTOM ASSISTANCE CTA
   ------------------------------------------------------------ */
.legal-cta {
    border-top: 1px solid var(--lg-line);
    background: var(--lg-tint);
}

.legal-cta__inner {
    padding-top: clamp(40px, 4.5vw, 64px);
    padding-bottom: clamp(40px, 4.5vw, 64px);
    text-align: center;
}

.legal-cta__title {
    margin: 0;
    color: var(--lg-ink);
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.legal-cta__text {
    max-width: 58ch;
    margin: 14px auto 0;
    color: var(--lg-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.legal-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
}

.legal-cta__actions .btn {
    justify-content: center;
}

/* ------------------------------------------------------------
   5. RESPONSIVE
   ------------------------------------------------------------ */

/* Tablet and below: single column. The sidebar's children are promoted to
   the grid so the help card can sit *after* the document rather than
   interrupting it before the reader has started. */
@media (max-width: 1023px) {
    .legal-layout {
        display: flex;
        flex-direction: column;
        /* The base rule sets `align-items: start`, which in a column flex
           container sizes each item to its max-content width — a 520px
           minimum-width table would then push the whole page sideways.
           Stretch is what keeps the reading column inside the viewport and
           lets `.legal-table-wrap` do its own horizontal scrolling. */
        align-items: stretch;
        gap: 0;
        padding-top: 28px;
    }

    .legal-side {
        display: contents;
    }

    .legal-toc {
        order: 1;
        position: static;
        max-height: none;
        overflow: visible;
        margin-bottom: 28px;
        border-left: 0;
        padding-left: 0;
    }

    .legal-toc__panel {
        padding: 12px 0 0;
    }

    .legal-body {
        order: 2;
    }

    .legal-help {
        order: 3;
        margin: 36px 0 0;
    }

    .legal-help__btn {
        width: auto;
    }
}

@media (max-width: 767px) {
    .legal-hero__title {
        max-width: none;
    }

    .legal-section__title {
        font-size: 1.15rem;
    }

    .legal-table th,
    .legal-table td {
        padding: 11px 13px;
    }
}

@media (max-width: 430px) {
    .legal-hero__meta {
        gap: 10px;
    }

    .legal-hero__stamp {
        padding: 5px 10px;
        font-size: 0.82rem;
    }

    .legal-cta__actions .btn {
        width: 100%;
    }
}

/* Desktop: the table of contents is never a disclosure. `open` is left off
   the element so it starts collapsed on small screens; these two rules
   reveal the panel unconditionally from 1024px up. The `::details-content`
   override covers Chrome's content-visibility implementation. */
@media (min-width: 1024px) {
    .legal-toc__summary {
        display: none;
    }

    .legal-toc::details-content {
        content-visibility: visible !important;
    }

    .legal-toc__panel {
        display: block !important;
    }
}

/* ------------------------------------------------------------
   6. PRINT — a policy is something people save or forward
   ------------------------------------------------------------ */
@media print {
    .legal-hero {
        background: #fff;
    }

    .legal-side,
    .legal-cta,
    .legal-top,
    #siteHeaderMount,
    #siteFooter {
        display: none !important;
    }

    .legal-layout {
        display: block;
        padding: 0;
    }

    .legal-section {
        break-inside: avoid;
        border-bottom: 1px solid #ccc;
    }

    .legal-section__body a {
        color: inherit;
        text-decoration: none;
    }

    .legal-table {
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .legal-doc *,
    .legal-doc *::before,
    .legal-doc *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}