/* =============================================================================
   Legal documents — Synoligo
   -----------------------------------------------------------------------------
   Cookie Policy, Privacy Policy, Terms & Conditions. Scoped to the `syn-legal`
   body class (added in functions.php). A deliberately formal, document-style
   treatment — separate from the editorial blog (blog.css). Compact body/lists,
   restrained neutral headings, a titled document header, on-brand links, and
   wide tables that scroll. Loaded after `main` (Bootstrap) so these rules win.
   ============================================================================= */

.syn-legal {
  --legal-measure: 760px;   /* document reading column */
  --legal-ink:     #2a3542; /* body text */
  --legal-head:    #14212e; /* headings */
  --legal-soft:    #5f6b78; /* small print / meta */
  --legal-rule:    #dce2e8; /* hairlines */
  --legal-link:    #0d5194; /* brand blue */
}

/* Center + constrain the title and each content block to the document column. */
.syn-legal .entry-header,
.syn-legal .entry-content > * {
  max-width: var(--legal-measure);
  margin-inline: auto;
}

/* ---- Document title -------------------------------------------------------- */
.syn-legal .entry-header { margin-bottom: 1.25rem; }
.syn-legal .entry-header h1 {
  font-size: 30px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--legal-head);
  margin: 0;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--legal-rule);
}

/* ---- Body ------------------------------------------------------------------ */
.syn-legal .entry-content {
  font-size: 16px;
  line-height: 1.6;
  color: var(--legal-ink);
}
.syn-legal .entry-content p { margin: 0 auto 0.65em; }
.syn-legal .entry-content strong { color: var(--legal-head); }
.syn-legal .entry-content sub,
.syn-legal .entry-content sup { line-height: 0; }

/* ---- Headings — formal, tighter top spacing (policies often use H4) -------- */
.syn-legal .entry-content h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--legal-head);
  margin: 1.3em auto 0.4em !important;   /* !important beats Bootstrap .mt-5 the */
  padding-bottom: 0.25em;                /* policy generator puts on headings */
  border-bottom: 1px solid var(--legal-rule);
}
.syn-legal .entry-content h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--legal-head);
  margin: 1.15em auto 0.35em !important;
}
.syn-legal .entry-content h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--legal-head);
  margin: 1em auto 0.3em !important;
}

/* ---- Links ----------------------------------------------------------------- */
.syn-legal .entry-content a {
  color: var(--legal-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.syn-legal .entry-content a:hover,
.syn-legal .entry-content a:focus-visible { color: #08365f; }

/* The policy content wraps bullet lists in WordPress flex "Group" blocks purely
   as an import artifact (no real layout purpose); rendering them as normal blocks
   stops the flex item from shrinking the list to min-content and lets it flow
   full-width. */
.syn-legal .entry-content .wp-block-group.is-layout-flex { display: block; }

/* ---- Lists — dense --------------------------------------------------------- */
/* NOTE: margin-inline is intentionally left alone (NOT auto). The policy content
   wraps bullet lists in WordPress flex groups (align-items:flex-start); an `auto`
   inline margin overrides that and centers each shrink-wrapped list, scattering
   the bullets. Direct-child lists still center via the `.entry-content > *` rule. */
.syn-legal .entry-content ul,
.syn-legal .entry-content ol { padding-left: 1.25em; margin-top: 0; margin-bottom: 0.65em; }
.syn-legal .entry-content li { margin-bottom: 0.15em; line-height: 1.5; }
.syn-legal .entry-content li > ul,
.syn-legal .entry-content li > ol { margin-top: 0.15em; }

/* ---- Tables ---------------------------------------------------------------
   Columns size to content; a table wider than the column scrolls horizontally
   within its box (long cells still wrap). Visible thin scrollbar. ------------- */
.syn-legal .entry-content .wp-block-table {
  overflow-x: auto !important;      /* !important: a lower-level rule forces
                                       overflow:visible, which lets the page clip
                                       wide tables instead of scrolling them */
  -webkit-overflow-scrolling: touch;
  max-width: var(--legal-measure);
  margin-inline: auto;
  scrollbar-width: thin;
  scrollbar-color: #9db4c9 #eef2f6;
}
.syn-legal .entry-content .wp-block-table::-webkit-scrollbar { height: 9px; }
.syn-legal .entry-content .wp-block-table::-webkit-scrollbar-track { background: #eef2f6; border-radius: 5px; }
.syn-legal .entry-content .wp-block-table::-webkit-scrollbar-thumb { background: #9db4c9; border-radius: 5px; }
.syn-legal .entry-content .wp-block-table::-webkit-scrollbar-thumb:hover { background: var(--legal-link); }
.syn-legal .entry-content table,
.syn-legal .entry-content table.has-fixed-layout {
  table-layout: auto !important;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 1em auto 1.5em;
}
.syn-legal .entry-content th,
.syn-legal .entry-content td {
  border: 1px solid var(--legal-rule);
  padding: 0.5em 0.7em;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  max-width: 30ch;                  /* long cells wrap instead of stretching endlessly */
}
.syn-legal .entry-content thead th,
.syn-legal .entry-content thead td {
  background: #f1f4f7;
  color: var(--legal-head);
  font-weight: 700;
}

/* Scroll-fade cue — legal.js wraps a wide table in .table-scroll and toggles the
   state classes; a soft fade shows on whichever edge still has hidden columns
   (works on iOS/touch where the scrollbar auto-hides). */
.syn-legal .entry-content > .table-scroll { position: relative; }
.syn-legal .entry-content .table-scroll::before,
.syn-legal .entry-content .table-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 11px;                 /* leave the scrollbar clear */
  width: 36px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 2;
}
.syn-legal .entry-content .table-scroll::before { left: 0; background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff 88%); }
.syn-legal .entry-content .table-scroll::after { right: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 88%); }
.syn-legal .entry-content .table-scroll.is-scrollable:not(.at-start)::before { opacity: 1; }
.syn-legal .entry-content .table-scroll.is-scrollable:not(.at-end)::after { opacity: 1; }

/* ---- Misc ------------------------------------------------------------------ */
.syn-legal .entry-content hr {
  border: 0;
  border-top: 1px solid var(--legal-rule);
  margin: 1.4em auto;
}
.syn-legal .entry-content blockquote {
  border-left: 3px solid var(--legal-rule);
  padding-left: 1rem;
  margin: 1em auto;
  color: var(--legal-soft);
}
.syn-legal .entry-content img { max-width: 100%; height: auto; }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .syn-legal .entry-header h1 { font-size: 24px; }
  .syn-legal .entry-content { font-size: 15px; }
  .syn-legal .entry-content h2 { font-size: 20px; }
  .syn-legal .entry-content h3 { font-size: 17px; }
  .syn-legal .entry-content h4 { font-size: 16px; }
}