/* ==========================================================================
   guest-information.css, /guest-information/ only

   The site's one plain-document page: the six policy sections the client
   asked for, set as running text on a single white band. It sits on top of
   base.css + home.css + subpage.css exactly the way contact.css, reviews.css
   and relax.css do, and adds nothing but document typography.

   Deliberately the least designed page on the site. No photography, no
   cards, no bands alternating, no reveal-on-scroll, no accent fills: one
   colour on one background, because it is read for information, not for
   atmosphere. Every value references tokens.css, no hex, ever.
   ========================================================================== */

/* The one local custom property this page adds. Not in tokens.css because
   nothing else on the site wants a wide measure: the 65ch --measure stays the
   sitewide rule and this is the documented exception to it. Sized to sit just
   inside the 1200px container's inner width so the column still has air on
   both sides at any viewport and never touches the gutter. */
:root { --gi-measure-wide: 88ch; }

/* --- Active nav ----------------------------------------------------------
   This page is not in the primary nav (it is reached from the footer legal
   row), so only the footer link can mark itself current. Same rule the other
   page stylesheets carry, minus the nav selectors that can never match. */
.footer-legal a[aria-current="page"] { color: var(--color-text-on-dark); }

/* --- The white band ------------------------------------------------------
   The site's light bands are linen (--color-band-light). This page uses the
   off-white base tone instead, the same value as the body copy on Forest, so
   the document reads as paper between the Forest hero and the Forest footer.
   It is the only place .band--white is used; kept local to this file rather
   than added to base.css so no other page can pick it up by accident. */
.band--white {
  background-color: var(--c-base);
  color: var(--color-text-on-light);
}
.band--white h1,
.band--white h2,
.band--white h3 { color: var(--color-text-on-light); }

/* --- Document column -----------------------------------------------------
   On small screens the gutter sets the width and --measure (65ch, the line
   length the rest of the site's body copy uses) never comes into play.

   From 900px up the document deliberately runs WIDER than --measure, out to
   --gi-measure-wide. Client direction: at 65ch the page was a narrow ribbon
   down the middle of a 1200px container with empty linen either side, and six
   policy sections stacked to a very long scroll. A wider column is the right
   trade here even though it is a longer line than the rest of the site: this
   is a reference document that people scan for the clause they need, not
   editorial copy they read start to finish, and cutting the line count cuts
   the scroll.

   base.css caps EVERY <p> at --measure sitewide, and .gi-section ul repeats
   that cap, so widening the wrapper alone would do nothing: the overrides
   below are what actually widens the text. Scoped to .gi-doc so no other
   page's measure moves. */
.gi-doc {
  max-width: var(--measure);
  margin-inline: auto;
}

@media (min-width: 900px) {
  .gi-doc,
  .gi-doc p,
  .gi-doc .gi-section ul { max-width: var(--gi-measure-wide); }
}

/* --- Contents ------------------------------------------------------------
   A plain jump list, not a component. The page is long enough that landing
   on it should show what is on it. */
.gi-toc { margin-block-end: var(--space-2xl); }
.gi-toc__label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-on-light-2);
  margin-block-end: var(--space-sm);
}
.gi-toc ul {
  display: grid;
  gap: var(--space-2xs);
}
.gi-toc a {
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.gi-toc a:hover,
.gi-toc a:focus-visible { border-bottom-color: var(--color-accent); }

/* --- The six sections ----------------------------------------------------
   Each is an h2 plus running text. A hairline above every section but the
   first does the separating, so nothing needs a box. --header-h of scroll
   padding is already set globally on <html>, so the jump links clear the
   fixed header on their own. */
.gi-section + .gi-section {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-2xl);
  border-top: 1px solid var(--border-on-light);
}
.gi-section > h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin-block-end: var(--space-md);
}
.gi-section h3 {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  margin-block-start: var(--space-lg);
  margin-block-end: var(--space-2xs);
}

/* Lists inside the document need their markers back: base.css strips them
   sitewide because every other list on the site is a navigation or a card
   grid. Here they are prose. */
.gi-section ul {
  list-style: disc;
  padding-inline-start: var(--space-md);
  max-width: var(--measure);
}
.gi-section li + li { margin-block-start: var(--space-2xs); }

/* Inline links in the document body: underlined, because in running legal
   copy a link has to be visible without a hover. Copper on the underline
   only, never on the text (accent rule). */
.gi-section a:not(.btn) {
  border-bottom: 1px solid var(--color-accent);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.gi-section a:not(.btn):hover,
.gi-section a:not(.btn):focus-visible { border-bottom-color: var(--color-text-on-light); }

/* The last-updated line under the six sections. */
.gi-updated {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-lg);
  border-top: 1px solid var(--border-on-light);
  color: var(--color-text-on-light-2);
}