/* ==========================================================================
   Decorquip — legal / policy pages (terms, privacy, cookies)
   Typography and colour match the 2026 homepage; layout follows the
   "document with a sticky contents rail" pattern.

   Used by the HTML stored in post_data for:
       post/terms_conditions
       post/privacy_policy

   Brand rules enforced here:
     - Montserrat 400 + 500 ONLY. No 600/700 anywhere.
     - White surface -> headings Midnight, body Midnight 90%,
       hairlines Midnight 10%. Sunset is NOT used: every element on these
       pages is either body copy or a link, and the guide bars Sunset from
       anything a reader must act on or read at length.
     - Midnight 50% is used once, for the "On this page" label, which is a
       structural navigation heading - the one sanctioned use.
     - 8px spacing scale: 8 / 16 / 24 / 40 / 64 / 96.

   All classes are .dql- prefixed so nothing can collide with style.css,
   the t1/t2/t3 sheets or decorquip-home.css.
   ========================================================================== */

.dql{
  --dql-midnight:  #334350;   /* headings, links, primary ink */
  --dql-body:      #475662;   /* Midnight 90% - body copy */
  --dql-label:     #99a1a8;   /* Midnight 50% - nav label only */
  --dql-sunrise:   #9a5a49;   /* link hover (5.3:1 on white) */
  --dql-earth:     #efe8e6;
  --dql-hairline:  #ebedee;   /* Midnight 10% */
  --dql-white:     #ffffff;
  --dql-radius:    4px;
  --dql-font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* Clearance for the sticky site header. One place to tune it: it drives
     both the sticky rail's top offset and every heading's scroll-margin,
     so an anchor jump can never land underneath the toolbar. */
  --dql-offset: 110px;

  background: var(--dql-white);
  padding: 64px 0 96px;
  font-family: var(--dql-font);
  font-synthesis: none;               /* no synthetic bold, ever */
  box-sizing: border-box;
}
.dql *,
.dql *::before,
.dql *::after{ box-sizing: border-box; }

/* style.css sets font-family on bare p / li / h* for the MoonCart theme.
   This stops that leaking in. Keep it. */
.dql *{ font-family: inherit; }

/* --- Page head ---------------------------------------------------------- */
.dql__head{ margin-bottom: 40px; }

/* Overline: short rule + uppercase label. The rule takes the colour of the
   text beside it (it is not a hairline). Midnight 100% at 12px, which is the
   sanctioned resolution of the 12px-vs-legibility-floor tension on white. */
.dql__overline{
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 24px;
  font-size: 12px; line-height: 1.4; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dql-midnight);
}
.dql__overline::before{
  content: ""; display: block; width: 24px; height: 1px;
  background: var(--dql-midnight);
}

.dql__title{
  margin: 0;
  font-size: 40px; line-height: 1.15; letter-spacing: -.01em;
  font-weight: 500; color: var(--dql-midnight);
}
.dql__lede{
  margin: 24px 0 0; max-width: 68ch;
  font-size: 18px; line-height: 1.6; font-weight: 400;
  color: var(--dql-midnight);
}
.dql__updated{
  margin: 24px 0 0;
  font-size: 12px; line-height: 1.4; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--dql-label);
}

/* --- Two-column layout: contents rail + document --------------------------
   minmax(0,1fr) on the body track so a long unbroken URL can never push the
   grid wider than the container. */
.dql__layout{
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

/* --- Contents rail ------------------------------------------------------
   One <details> serves both breakpoints: on desktop the summary is hidden
   and the list is always shown; below 992px the summary becomes the toggle.
   Markup ships with the details OPEN so it still works with JS disabled;
   legal_2026.js closes it on small screens at load. */
.dql__toc{
  position: sticky; top: var(--dql-offset);
  max-height: calc(100vh - var(--dql-offset) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dql__toc > summary{ display: none; }

.dql__toclabel{
  margin: 0 0 16px;
  font-size: 12px; line-height: 1.4; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--dql-label);
}

.dql__toclist{
  list-style: none; margin: 0; padding: 0;
  border-left: 1px solid var(--dql-hairline);
}
.dql__toclist li{ margin: 0; padding: 0; list-style: none; }

/* .dql a (later in this file) underlines every link, and both selectors carry
   the same specificity, so the nav needs the extra class to win. */
.dql .dql__toclist a{ text-decoration: none; }
.dql__toclist a{
  display: block;
  margin-left: -1px;                  /* sit the active border over the track */
  padding: 8px 0 8px 16px;
  border-left: 1px solid transparent;
  font-size: 14px; line-height: 1.4; font-weight: 400;
  color: var(--dql-midnight); text-decoration: none;
}
.dql__toclist a:hover,
.dql__toclist a:focus-visible{
  color: var(--dql-sunrise);
  border-left-color: var(--dql-sunrise);
  text-decoration: none;
}
/* Current section. Weight 500 is the only step available above 400, so the
   2px border and the ink change carry most of the signal. */
.dql__toclist a[aria-current="true"]{
  font-weight: 500;
  color: var(--dql-midnight);
  border-left: 2px solid var(--dql-midnight);
  padding-left: 15px;
}
/* Part heading inside the contents list (e.g. "Cookie policy") */
.dql__tocgroup{ margin-top: 16px !important; }
.dql__tocgroup a{ font-weight: 500; }

/* --- Document body ------------------------------------------------------- */
.dql__body{ max-width: 75ch; }

.dql__section + .dql__section{
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--dql-hairline);
}

.dql__h2{
  margin: 0 0 24px;
  font-size: 32px; line-height: 1.2; letter-spacing: -.01em;
  font-weight: 500; color: var(--dql-midnight);
  scroll-margin-top: var(--dql-offset);
}
/* Part heading: "Cookie policy". Same size as a section heading but with the
   number dropped and more air above, so it reads as a division of the
   document rather than another clause. */
/* Two classes deliberately: it has to outrank .dql__section + .dql__section
   above, which is a two-class selector and would otherwise keep its 40px. */
.dql__section.dql__part{
  margin-top: 64px; padding-top: 40px;
  border-top: 1px solid var(--dql-hairline);
}
/* The part heading stands alone, with the first numbered clause below it
   supplying the spacing, so it takes no bottom margin of its own. */
.dql__part .dql__h2{ font-size: 40px; line-height: 1.15; margin-bottom: 0; }

/* The clause number sits inside a content heading, so it cannot take
   Midnight 50% (barred there). Regular weight against the heading's Medium
   is what separates it. */
.dql__num{
  font-weight: 400;
  margin-right: .4em;
}

.dql__p{
  margin: 0 0 16px;
  font-size: 16px; line-height: 1.65; font-weight: 400;
  color: var(--dql-body);
}
.dql__p:last-child{ margin-bottom: 0; }

/* Emphasis without a bold weight: Midnight 100% against 90% body copy. */
.dql__p strong,
.dql__strong{
  font-weight: 500;
  color: var(--dql-midnight);
}

.dql__list{
  margin: 0 0 16px; padding: 0;
  list-style: none;
}
.dql__list li{
  position: relative;
  margin: 0 0 8px; padding-left: 24px;
  font-size: 16px; line-height: 1.65; font-weight: 400;
  color: var(--dql-body);
  list-style: none;
}
.dql__list li:last-child{ margin-bottom: 0; }
.dql__list li::before{
  content: ""; position: absolute;
  left: 4px; top: .65em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--dql-midnight);
}

/* style.css sets `transition: all .5s` on <a> for the MoonCart theme, which
   makes the font-weight step on the current TOC item ANIMATE - the weight
   creeps 400 -> 500 over half a second and lands on fractional weights on the
   way. Pin the transition to the properties that should move. */
.dql a{ transition: color .15s ease, border-color .15s ease; }

/* Links: Midnight, underlined. The palette holds no blue and both accents
   are barred from links by the legibility floors, so weight and the
   underline have to carry it. Long URLs are allowed to break. */
.dql a{
  color: var(--dql-midnight);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.dql a:hover,
.dql a:focus-visible{
  color: var(--dql-sunrise);
  text-decoration: underline;
}
/* style.css sets a{outline:none} globally - restore a visible focus ring. */
.dql a:focus-visible,
.dql summary:focus-visible{
  outline: 2px solid var(--dql-midnight);
  outline-offset: 2px;
}

/* Smooth anchor jumps, scoped to these pages only so the rest of the site is
   untouched, and never against a reduced-motion preference. */
@media (prefers-reduced-motion: no-preference){
  html:has(.dql){ scroll-behavior: smooth; }
}

/* --- Below 1200px: narrower rail, tighter gutter ------------------------ */
@media (max-width: 1199px){
  .dql__layout{ grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
}

/* --- Below 992px: contents becomes a collapsible panel above the text --- */
@media (max-width: 991px){
  .dql{ padding: 40px 0 64px; }
  .dql__layout{ grid-template-columns: minmax(0, 1fr); gap: 40px; }

  .dql__toc{
    position: static; max-height: none; overflow: visible;
    border: 1px solid var(--dql-hairline);
    border-radius: var(--dql-radius);
    background: var(--dql-earth);
  }
  .dql__toc > summary{
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 16px;
    font-size: 14px; font-weight: 500; color: var(--dql-midnight);
    cursor: pointer; list-style: none;
  }
  .dql__toc > summary::-webkit-details-marker{ display: none; }
  .dql__toc > summary::after{
    content: ""; flex: 0 0 auto;
    width: 8px; height: 8px;
    border-right: 1px solid var(--dql-midnight);
    border-bottom: 1px solid var(--dql-midnight);
    transform: rotate(45deg); transform-origin: center;
  }
  .dql__toc[open] > summary::after{ transform: rotate(-135deg); }
  .dql__toc[open] > summary{ border-bottom: 1px solid var(--dql-hairline); }

  .dql__tocinner{ padding: 16px; }
  .dql__toclabel{ display: none; }         /* the summary already says it */
  .dql__toclist{ border-left: 0; }
  .dql__toclist a{ padding-left: 0; border-left: 0; margin-left: 0; }
  .dql__toclist a[aria-current="true"]{ padding-left: 0; border-left: 0; }

  .dql__title{ font-size: 32px; }
  .dql__part .dql__h2{ font-size: 32px; }
  .dql__h2{ font-size: 26px; }
  .dql__body{ max-width: none; }
}

/* --- Below 576px -------------------------------------------------------- */
@media (max-width: 575px){
  .dql__title{ font-size: 30px; }
  .dql__part .dql__h2{ font-size: 30px; }
  .dql__h2{ font-size: 24px; }
  .dql__lede{ font-size: 16px; }
  /* body copy stays at 16px - never smaller */
}