/* ============================================================
   LEGAL.CSS — the policy pages (/terms).

   These pages borrow everything from styles.css: the brand
   colours, the type scale, the nav and the footer. What is here
   is only what a long document needs and the rest of the site
   does not — a contents list that follows you down the page,
   numbered clauses, and callouts for the two or three lines that
   cost money if they are missed.

   IT MUST READ WITHOUT JAVASCRIPT. Every word on the page is in
   the HTML. legal.js only highlights where you are in the
   contents list; if it never loads, nothing is lost but the
   highlight.
   ============================================================ */


/* The nav is see-through until you scroll, which is right over a
   photo and wrong over a page of text — dark words would slide
   underneath it. Same fix as the booking pages: solid from the
   first pixel. */
.nav--solid{ background:#fff; }

.footer--slim{ padding:28px 0; }
.footer--slim .footer__base{ margin-top:0; padding-top:0; border-top:0; text-align:center; }


/* ============================================================
   THE BAND AT THE TOP
   ============================================================ */
.lgl__head{
  padding:132px 0 52px;
  background:
    radial-gradient(900px 340px at 12% -30%, var(--brand-lt), transparent 70%),
    var(--tint);
  border-bottom:1px solid var(--line);
}
.lgl__title{
  font-size:clamp(34px, 5.2vw, 58px);
  line-height:1.04; letter-spacing:-.035em; font-weight:800;
  margin:0 0 14px; text-wrap:balance;
}
.lgl__lede{ margin:0; font-size:18px; color:var(--ink-soft); max-width:56ch; text-wrap:pretty; }

/* THE ROW OF CHIPS UNDER THE LEDE IS GONE.

   Last updated / All Truliv villas on the ECR / the check-in
   times. Taken out at Truliv's request. The check-in times are
   still in clause 3 where they belong, which is where anybody
   reading the terms would look for them.

   The styling is not kept for a future row. If one comes back it
   will want different content and can be written then. */


/* ============================================================
   CONTENTS BESIDE THE DOCUMENT
   ============================================================ */
.lgl__body{ padding:56px 0 96px; }
.lgl__layout{ display:grid; grid-template-columns:236px 1fr; gap:64px; align-items:start; }

.lgl__toc{
  position:sticky; top:104px;
  /* It is a list of nine links today and it will grow. Capped to
     the window with its own scrollbar, so a longer contents list
     can never run off the bottom with no way to reach the end. */
  max-height:calc(100vh - 132px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
/* The heading IS the disclosure control — it folds the list away
   on a phone. On a desktop there is a column to spare and nothing
   to fold, so the triangle is removed and the control is made
   unclickable: a contents list that can be collapsed by a stray
   click, in a column that would then sit empty, is a worse
   feature than no feature. */
.lgl__toc summary{
  margin:0 0 14px; font-size:12px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
  list-style:none;
}
.lgl__toc summary::-webkit-details-marker{ display:none; }
.lgl__toc summary::marker{ content:""; }

@media (min-width:1001px){
  .lgl__toc summary{ pointer-events:none; }
}

.lgl__toc ol{ margin:0; padding:0; list-style:none; }
.lgl__toc a{
  display:block; padding:8px 0 8px 15px;
  border-left:2px solid var(--line);
  font-size:14.5px; line-height:1.35; color:var(--ink-soft);
  text-decoration:none; transition:color .18s, border-color .18s;
}
.lgl__toc a:hover{ color:var(--ink); border-left-color:var(--brand-mid); }
.lgl__toc a.is-here{ color:var(--brand); font-weight:650; border-left-color:var(--brand); }

/* A short window turns a sticky column into a trap — the top of
   the list is pinned and the bottom is unreachable. Below this
   it simply scrolls with the page. */
@media (max-height:640px){
  .lgl__toc{ position:static; max-height:none; overflow:visible; }
}


/* ============================================================
   THE DOCUMENT
   ============================================================ */
.doc{ max-width:74ch; }
/* scroll-margin, NOT the 104px you would expect.

   styles.css already sets scroll-padding-top:88px on <html> to
   keep the fixed header off anchored headings, and the two add
   up. 104 here left a jumped-to heading sitting 220px down the
   screen with a band of nothing above it. 20 puts it a clear
   inch under the header, which is what 104 was reaching for. */
.doc__sec{ margin:0 0 64px; scroll-margin-top:20px; }
.doc__sec:last-child{ margin-bottom:0; }

.doc__h{
  font-size:clamp(24px, 3vw, 32px);
  line-height:1.15; letter-spacing:-.025em; font-weight:800;
  margin:0 0 8px;
}
.doc__intro{ margin:0 0 26px; color:var(--ink-soft); }

.doc p{ margin:0 0 12px; }
.doc p:last-child{ margin-bottom:0; }


/* ---- Numbered clauses ----------------------------------------
   The number is drawn by a CSS counter rather than typed, so a
   clause inserted in the middle cannot leave two 7s on the page.
--------------------------------------------------------------- */
.clauses{ counter-reset:clause; margin:0; padding:0; list-style:none; }
.clauses li{
  counter-increment:clause;
  position:relative;
  padding:0 0 24px 56px;
  margin:0 0 24px;
  border-bottom:1px solid var(--line-2);
}
.clauses li:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.clauses li::before{
  content:counter(clause);
  position:absolute; left:0; top:1px;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--brand-lt); color:var(--brand-dk);
  font-size:14px; font-weight:800; font-variant-numeric:tabular-nums;
}
.clauses h3{ font-size:18px; font-weight:700; letter-spacing:-.015em; margin:6px 0 6px; }


/* ---- Plain rule lists ---------------------------------------- */
.rules{ margin:0; padding:0; list-style:none; display:grid; gap:2px; }
.rules li{
  position:relative; padding:11px 0 11px 32px;
  border-bottom:1px solid var(--line-2);
}
.rules li:last-child{ border-bottom:0; }
.rules li::before{
  content:""; position:absolute; left:9px; top:21px;
  width:6px; height:6px; border-radius:50%; background:var(--brand-mid);
}

/* Services read as a set of options rather than obligations, so
   they get chips instead of a list of rules. */
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0; list-style:none; }
.chips li{
  background:var(--white); border:1px solid var(--line);
  border-radius:100px; padding:9px 17px; font-size:15px; font-weight:550;
  box-shadow:var(--sh-sm);
}


/* ---- The lines that cost money if they are missed ------------- */
.doc__note{
  display:flex; gap:14px;
  background:var(--brand-lt); border:1px solid var(--brand-mid);
  border-radius:var(--r); padding:18px 20px; margin:22px 0 0;
  font-size:15.5px; line-height:1.55;
}
.doc__note svg{ width:20px; height:20px; flex:none; margin-top:2px; color:var(--brand-dk); }
.doc__note strong{ color:var(--brand-dk); }


/* ---- Cancellation ---------------------------------------------
   Colour carries the meaning here because this is the section
   people scan rather than read: green is money back, red is not.
   The words say it too — nobody should have to see the colour to
   know which is which.
--------------------------------------------------------------- */
.refunds{ display:grid; gap:14px; margin:0 0 22px; padding:0; list-style:none; }
.refund{
  border:1px solid var(--line); border-left:4px solid var(--line);
  border-radius:var(--r); padding:18px 22px; background:var(--white);
  box-shadow:var(--sh-sm);
}
.refund h3{ font-size:17px; font-weight:700; margin:0 0 4px; letter-spacing:-.015em; }
.refund p{ margin:0; color:var(--ink-soft); font-size:15.5px; }
.refund__tag{
  display:inline-block; margin:0 0 8px;
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 11px; border-radius:100px;
}
.refund--full{ border-left-color:#128a5e; }
.refund--full .refund__tag{ background:#e4f4ec; color:#0b6b48; }
.refund--none{ border-left-color:#b03a2b; }
.refund--none .refund__tag{ background:#fbeae7; color:#93301f; }


/* ============================================================
   ASK A HUMAN

   A policy page raises questions, and the answer to most of them
   is a phone call. Ending on a wall of clauses with no way to
   reach anybody is how a query becomes a complaint.
   ============================================================ */
.lgl__help{
  margin-top:56px; padding:30px 32px;
  background:var(--tint); border:1px solid var(--line); border-radius:var(--r-lg);
}
.lgl__help h2{ font-size:21px; font-weight:800; letter-spacing:-.02em; margin:0 0 6px; }
.lgl__help p{ margin:0 0 18px; color:var(--ink-soft); }
.lgl__help__links{ display:flex; flex-wrap:wrap; gap:10px; }


/* ============================================================
   TABLET + PHONE
   ============================================================ */
@media (max-width:1000px){
  .lgl__layout{ grid-template-columns:1fr; gap:36px; }

  /* Folded away rather than deleted: on a narrow screen a
     contents list above the document is another screenful to
     scroll past before reaching the words. Shut, it is one line. */
  .lgl__toc{ position:static; max-height:none; overflow:visible; }
  .lgl__toc details{
    background:var(--tint); border:1px solid var(--line);
    border-radius:var(--r); padding:14px 18px;
  }
  .lgl__toc summary{
    cursor:pointer; margin:0; font-size:13px; color:var(--ink-2);
  }
  /* Shut, it has to look like it opens.

     Drawn from two borders rather than typed as a ▾. That glyph
     is not in Inter, so it fell through to whatever the device
     had — which on a phone was a faint hyphen that read as a
     dash rather than a control. */
  .lgl__toc summary::after{
    content:""; float:right; margin:4px 2px 0 0;
    width:7px; height:7px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg); opacity:.5;
    transition:transform .18s;
  }
  .lgl__toc details[open] summary{ margin-bottom:10px; }
  .lgl__toc details[open] summary::after{ margin-top:7px; transform:rotate(-135deg); }
}

@media (max-width:640px){
  .lgl__head{ padding:110px 0 40px; }
  .lgl__body{ padding:40px 0 72px; }
  .doc__sec{ margin-bottom:52px; }
  .clauses li{ padding-left:46px; }
  .clauses li::before{ width:30px; height:30px; font-size:13px; }
  .lgl__help{ padding:24px 22px; }
}


/* ============================================================
   ON PAPER

   Guests print this, and property managers print it more. The
   nav, the contents, the WhatsApp bubble and the footer are all
   screen furniture — on paper they are wasted ink and a missing
   first inch of the document.
   ============================================================ */
@media print{
  .nav, .lgl__toc, .wa, .footer, .lgl__help, .stickybar{ display:none !important; }
  .lgl__head{ padding:0 0 20px; background:none; }
  .lgl__body{ padding:20px 0 0; }
  .lgl__layout{ display:block; }
  .doc{ max-width:none; }
  .doc__sec{ page-break-inside:auto; margin-bottom:26px; }
  .clauses li, .refund{ page-break-inside:avoid; }
  .refund, .chips li{ box-shadow:none; }
  a{ text-decoration:none; color:#000; }
}