/* #########################################################
   PAGE: Custom pages (Admin → Pages → Custom Pages)  —  html.pg-cpage (+ .pg-legal)
   ######################################################### */
/* =========================================================
   Travel Point – custom pages
   general: hero + full-width content
   legal:   hero + headings menu on the left (sticky, click to jump) + content
   Loaded after common.css + inner.css (hero, breadcrumbs, divider).
   ========================================================= */

/* Hero without an image: centred band */
:where(.pg-cpage) .cphero--plain{ padding-bottom: 0; margin-bottom: clamp(18px, 2.4vw, 44px); }
:where(.pg-cpage) .cphero--plain::after{ display: none; }
:where(.pg-cpage) .cphero--plain .phero__content{ padding-bottom: clamp(24px, 2.8vw, 50px); }
:where(.pg-cpage) .cphero--plain .phero__pattern{ inset: 0; -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 45%, transparent 55%, #000 100%); mask-image: linear-gradient(90deg, #000 0%, transparent 45%, transparent 55%, #000 100%); }
:where(.pg-cpage) .cphero__sub{ font-family: var(--serif); font-size: clamp(17px, 1.5vw, 24px); font-weight: 600; color: #b4782a; margin: -4px 0 10px; }

/* =========================================================
   CONTENT
   ========================================================= */
:where(.pg-cpage) .cpage{ position: relative; background: #fff; padding: clamp(10px, 1.4vw, 26px) 0 clamp(44px, 5vw, 96px); }
:where(.pg-cpage) .cpage--legal{ background: linear-gradient(180deg, #fff 0%, #fbf8f2 100%); }
:where(.pg-cpage) .cpage__grid{ display: grid; grid-template-columns: clamp(250px, 21vw, 330px) minmax(0, 1fr); gap: clamp(22px, 3vw, 56px); align-items: start; }

/* Article typography (HTML from the admin editor) */
:where(.pg-cpage) .cpage__body{ min-width: 0; font-size: clamp(14.5px, 1.05vw, 16px); line-height: 1.75; color: #2b3737; }
:where(.pg-cpage) .cpage__body--wide{ grid-column: 1 / -1; max-width: 980px; }
:where(.pg-cpage) .cpage--legal .cpage__body{ background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 14px 40px rgba(18, 48, 46, .06); padding: clamp(20px, 2.6vw, 48px); }
:where(.pg-cpage) .cpage__body > :first-child{ margin-top: 0; }
:where(.pg-cpage) .cpage__body p, :where(.pg-cpage) .cpage__body ul, :where(.pg-cpage) .cpage__body ol, :where(.pg-cpage) .cpage__body table,
:where(.pg-cpage) .cpage__body blockquote, :where(.pg-cpage) .cpage__body figure{ margin: 0 0 1.05em; }
/* the page title is the only h1: headings written as H1 / H2 … in the editor are printed one level lower and keep their look via .is-h1 / .is-h2 … */
:where(.pg-cpage) .cpage__body :is(h1, h2, h3, h4, h5, h6){
  font-family: var(--serif); color: var(--heading); line-height: 1.25; margin: 1.6em 0 .6em; scroll-margin-top: 104px;
}
:where(.pg-cpage) .cpage__body :is(h1, .is-h1){ font-size: clamp(21px, 1.7vw, 28px); font-weight: 700; }
:where(.pg-cpage) .cpage__body :is(h2:not([class*="is-h"]), .is-h2){ font-size: clamp(18.5px, 1.4vw, 23px); font-weight: 700; }
:where(.pg-cpage) .cpage__body :is(h3:not([class*="is-h"]), .is-h3){ font-size: clamp(16.5px, 1.2vw, 19px); }
:where(.pg-cpage) .cpage__body :is(h4:not([class*="is-h"]), .is-h4, .is-h5, .is-h6){ font-size: 16px; font-family: var(--sans); }
:where(.pg-legal) .cpage__body :is(h1, .is-h1){ display: flex; align-items: center; gap: 12px; padding-top: 1.3em; border-top: 1px solid var(--line); }
:where(.pg-legal) .cpage__body :is(h1, .is-h1)::before{ content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 0 4px rgba(211, 162, 74, .18); }
:where(.pg-legal) .cpage__updated + :is(h1, .is-h1), :where(.pg-legal) .cpage__updated + p + :is(h1, .is-h1){ border-top: 0; }
:where(.pg-cpage) .cpage__body a{ color: var(--teal-700); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(8, 64, 63, .35); text-underline-offset: 3px; }
:where(.pg-cpage) .cpage__body a:hover{ color: var(--gold-2); text-decoration-color: currentColor; }
:where(.pg-cpage) .cpage__body strong, :where(.pg-cpage) .cpage__body b{ color: #1b2828; font-weight: 600; }
:where(.pg-cpage) .cpage__body ul{ list-style: none; padding-left: 0; }
:where(.pg-cpage) .cpage__body ul li{ position: relative; padding-left: 26px; margin-bottom: .45em; }
:where(.pg-cpage) .cpage__body ul li::before{ content: ""; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(211, 162, 74, .18); }
:where(.pg-cpage) .cpage__body ol{ padding-left: 1.4em; }
:where(.pg-cpage) .cpage__body ol li{ margin-bottom: .45em; padding-left: 4px; }
:where(.pg-cpage) .cpage__body ol li::marker{ color: var(--gold-2); font-weight: 600; }
:where(.pg-cpage) .cpage__body blockquote{ padding: 14px 18px; border-left: 4px solid var(--gold); background: #fbf7ef; border-radius: 0 10px 10px 0; color: #3d4a49; }
:where(.pg-cpage) .cpage__body img{ max-width: 100%; height: auto; border-radius: 12px; }
:where(.pg-cpage) .cpage__body hr{ border: 0; height: 1px; background: var(--line); margin: 2em 0; }
:where(.pg-cpage) .cpage__body table{ width: 100%; border-collapse: collapse; font-size: .94em; display: block; overflow-x: auto; }
:where(.pg-cpage) .cpage__body th, :where(.pg-cpage) .cpage__body td{ padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
:where(.pg-cpage) .cpage__body th{ background: #f6f1e6; color: var(--heading); font-weight: 600; }
:where(.pg-cpage) .cpage__body iframe{ max-width: 100%; border: 0; border-radius: 12px; }
:where(.pg-cpage) .cpage__updated{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 30px; background: #f3f8f7; color: var(--teal-700); font-size: 13px; font-weight: 500; }

/* =========================================================
   LEGAL: headings menu (left)
   ========================================================= */
:where(.pg-legal) .ctoc{ position: sticky; top: 94px; max-height: calc(100vh - 110px); display: flex; }
:where(.pg-legal) .ctoc__box{ width: 100%; display: flex; flex-direction: column; min-height: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 14px 40px rgba(18, 48, 46, .06); overflow: hidden; }
:where(.pg-legal) .ctoc__title{
  display: flex; align-items: center; gap: 10px; padding: 16px 20px; list-style: none; cursor: default;
  font-family: var(--serif); font-size: 18px; font-weight: 700; color: #fff; background: linear-gradient(180deg, #0a4644 0%, #063a39 100%); border-bottom: 3px solid var(--gold);
}
:where(.pg-legal) .ctoc__title::-webkit-details-marker{ display: none; }
:where(.pg-legal) .ctoc__title i{ color: var(--gold-mid); font-size: 15px; }
:where(.pg-legal) .ctoc__caret{ display: none; margin-left: auto; transition: transform .25s; }
:where(.pg-legal) .ctoc__list{ list-style: none; padding: 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d9cba8 transparent; }
:where(.pg-legal) .ctoc__item a{
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 10px; border-left: 3px solid transparent;
  font-size: 13.8px; line-height: 1.4; font-weight: 500; color: #33403f;
}
:where(.pg-legal) .ctoc__item a:hover{ background: #fbf7ef; color: var(--heading); }
:where(.pg-legal) .ctoc__num{
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: -2px;
  font-size: 11.5px; font-weight: 700; color: var(--teal-800); background: #f6f1e6; border: 1px solid #ebdfc3; transition: background .2s, color .2s, border-color .2s;
}
:where(.pg-legal) .ctoc__item--sub a{ padding-left: 46px; font-size: 13px; font-weight: 400; color: #556160; }
:where(.pg-legal) .ctoc__item a.is-active{ background: #eef6f5; border-left-color: var(--gold); color: var(--teal-800); font-weight: 600; }
:where(.pg-legal) .ctoc__item a.is-active .ctoc__num{ background: var(--teal-800); border-color: var(--teal-800); color: #fff; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px){
  :where(.pg-cpage) .cpage__body :is(h1, h2, h3, h4, h5, h6){ scroll-margin-top: calc(var(--appbar-h) + 16px); }
  :where(.pg-legal) .ctoc{ top: calc(var(--appbar-h) + 14px); max-height: calc(100vh - var(--appbar-h) - 28px); }
}
@media (max-width: 900px){
  :where(.pg-legal) .cpage__grid{ grid-template-columns: 1fr; }
  :where(.pg-legal) .ctoc{ position: relative; top: auto; max-height: none; }
  :where(.pg-legal) .ctoc__title{ cursor: pointer; }
  :where(.pg-legal) .ctoc__caret{ display: inline-block; }
  :where(.pg-legal) .ctoc__box:not([open]) .ctoc__caret{ transform: rotate(-90deg); }
  :where(.pg-legal) .ctoc__list{ max-height: 60vh; }
}
@media (max-width: 560px){
  :where(.pg-cpage) .cpage--legal .cpage__body{ border-radius: 14px; padding: 18px 16px; }
  :where(.pg-legal) .ctoc__box{ border-radius: 14px; }
}