/* ============================================================
   CookieLet WordPress layer
   Styles for markup WordPress produces that the compiled
   design-system build doesn't cover: editor blocks, comments,
   pagination, forms, and the mobile nav drawer.
   Uses the same design tokens as tailwind.css.
   ============================================================ */

/* ---- editor content inside .legal-prose -------------------- */
.legal-prose img,
.legal-prose iframe,
.legal-prose video {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}
.legal-prose figure { margin: 1.5rem 0; }
.legal-prose figcaption {
  font-size: .8125rem;
  color: hsl(var(--muted-foreground));
  margin-top: .5rem;
  text-align: center;
}
.legal-prose blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid hsl(var(--accent));
  background: hsl(var(--muted) / .5);
  border-radius: 12px;
  color: hsl(var(--muted-foreground));
}
.legal-prose blockquote p:last-child { margin-bottom: 0; }
.legal-prose hr {
  border: 0;
  border-top: 1px solid hsl(var(--border));
  margin: 2rem 0;
}
.legal-prose .wp-block-button__link {
  display: inline-block;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  text-decoration: none;
  font-weight: 700;
  font-size: .875rem;
  padding: .875rem 1.375rem;
  border-radius: 999px;
}
.legal-prose .wp-block-table { overflow-x: auto; }
.legal-prose .wp-block-separator { max-width: 6rem; }

.alignleft { float: left; margin: .35rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .35rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide, .alignfull { margin-left: 0; margin-right: 0; max-width: 100%; }
.wp-caption { max-width: 100%; }
.sticky .cl-sticky-badge { display: inline-flex; }

/* ---- accessibility ----------------------------------------- */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  word-wrap: normal !important;
}
.skip-link:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 999;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  padding: .75rem 1.25rem;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  clip: auto;
  clip-path: none;
  height: auto;
  width: auto;
}

/* ---- callout / faq shortcodes ------------------------------ */
.legal-prose .callout h5 { margin-top: 0; }
.cl-faq details { border-bottom: 1px solid hsl(var(--border) / .6); }
.cl-faq details:last-child { border-bottom: 0; }
.cl-faq summary { list-style: none; }
.cl-faq summary::-webkit-details-marker { display: none; }

/* ---- pagination -------------------------------------------- */
.cl-pagination { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 3rem; }
.cl-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 .875rem;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s ease;
}
.cl-pagination .page-numbers:hover { border-color: hsl(var(--accent)); color: hsl(var(--accent)); }
.cl-pagination .page-numbers.current {
  background: hsl(var(--foreground));
  border-color: hsl(var(--foreground));
  color: hsl(var(--background));
}

/* ---- forms, search, comments ------------------------------- */
.cl-field {
  width: 100%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  padding: .875rem 1.25rem;
  font: inherit;
  font-size: .9375rem;
  color: hsl(var(--foreground));
}
textarea.cl-field { border-radius: 16px; }
.cl-field:focus { outline: 2px solid hsl(var(--ring) / .5); outline-offset: 2px; }
.cl-comment-list { list-style: none; margin: 0; padding: 0; }
.cl-comment-list ol.children { list-style: none; margin: 1rem 0 0 1.5rem; padding: 0; }
.cl-comment {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.cl-comment .avatar { border-radius: 999px; }

/* ---- mobile navigation drawer ------------------------------ */
.cl-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  background: hsl(var(--background));
  padding: 1.5rem;
  overflow-y: auto;
}
.cl-mobile-nav[data-state="open"] { display: block; }
.cl-mobile-nav ul { list-style: none; margin: 2rem 0 0; padding: 0; }
.cl-mobile-nav li { border-bottom: 1px solid hsl(var(--border) / .6); }

/* Menu rows only. This rule loads after tailwind.css, so leaving it unscoped
   let it beat the utility classes on the Login / Start Free buttons below the
   menu: display:block killed their centring and the foreground colour left
   "Start Free" as dark text on a dark pill. */
.cl-mobile-nav ul a {
  display: block;
  padding: 1rem .25rem;
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  color: hsl(var(--foreground));
  text-decoration: none;
}
.cl-mobile-nav ul a:hover { color: hsl(var(--accent)); }

/* Login / Start Free at the foot of the drawer. */
.cl-mobile-nav__actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 2rem; }
.cl-mobile-nav__actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding: 0 1.5rem;
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
}
.cl-mobile-nav__actions a:first-child {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
}
.cl-mobile-nav__actions a:last-child {
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  border: 1px solid hsl(var(--foreground));
}
.cl-mobile-nav__actions a:hover { opacity: .9; }
body.cl-nav-open { overflow: hidden; }

/* ---- admin bar offset for the sticky header ----------------- */
body.admin-bar .cl-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .cl-header { top: 46px; }
}

/* ============================================================
   BLOG LAYER
   Hero variants, listing rows, sidebar widgets, comments,
   author box, post navigation and block-editor output.
   ============================================================ */

/* ---- hero variants ----------------------------------------- */
.cl-hero--full { padding: 3.5rem 0 4rem; }
.cl-hero--mini { padding: 2.25rem 0 2.5rem; border-bottom: 1px solid hsl(var(--border) / .7); }
@media (min-width: 640px) {
  .cl-hero--full { padding: 5rem 0; }
  .cl-hero--mini { padding: 2.75rem 0 3rem; }
}
@media (min-width: 1024px) {
  .cl-hero--full { padding: 7rem 0; }
}
/* The mini header keeps the page container's width and gutters so its title
   lines up with the article card below; only the text lines are constrained. */
.cl-hero__inner { text-align: left; }
.cl-hero--mini .cl-hero__title,
.cl-hero--mini .cl-hero__lead,
.cl-hero--mini .cl-hero__meta,
.cl-hero--mini .cl-hero__search { max-width: 52rem; margin-left: 0; margin-right: auto; }
.cl-hero__title {
  margin-top: 1.25rem;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(2rem, 5vw, 4rem);
}
.cl-hero--mini .cl-hero__title { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.12; margin-top: .85rem; }
.cl-hero__sub {
  margin-top: .35rem;
  letter-spacing: -0.02em;
  font-size: clamp(1.25rem, 3vw, 2.5rem);
  color: hsl(var(--muted-foreground) / .85);
}
.cl-hero--mini .cl-hero__sub { font-size: clamp(1.1rem, 2.2vw, 1.75rem); }
.cl-hero__lead { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.6; max-width: 44rem; }
@media (min-width: 640px) { .cl-hero__lead { font-size: 1.1875rem; } }
.cl-hero--full .cl-hero__lead { margin-left: auto; margin-right: auto; }
.cl-hero__meta {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  font-size: .875rem;
  color: hsl(var(--muted-foreground));
}
.cl-hero--full .cl-hero__meta { justify-content: center; }
.cl-hero__avatar { margin-top: 1.5rem; }
.cl-hero__avatar-img { border-radius: 999px; box-shadow: var(--shadow-card); }
.cl-hero--full .cl-hero__avatar { display: flex; justify-content: center; }
.cl-hero__search { margin-top: 1.5rem; max-width: 28rem; }

/* ---- section + layout -------------------------------------- */
.cl-section { padding: 3.5rem 0; background: hsl(var(--background)); }
@media (min-width: 1024px) { .cl-section { padding: 4.5rem 0; } }
.cl-section--tight { padding-top: 0; }
.cl-related { background: hsl(var(--cream)); }

.cl-layout { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
  .cl-layout--sidebar { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; }
  .cl-sidebar-left .cl-layout--sidebar .cl-layout__main { order: 2; }
  .cl-sidebar-left .cl-layout--sidebar .cl-sidebar { order: 1; }
}
.cl-layout__main { min-width: 0; }
.cl-narrow { max-width: 48rem; }

.cl-eyebrow {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: hsl(var(--accent));
}
.cl-listing-head { margin-bottom: 2rem; }
.cl-listing-head__title {
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  margin-top: .5rem;
  color: hsl(var(--foreground));
}

/* ---- grids and cards --------------------------------------- */
.cl-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .cl-grid--2, .cl-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- wide list rows ---------------------------------------- */
.cl-rows { display: flex; flex-direction: column; gap: 1.5rem; }
.cl-row {
  display: grid;
  gap: 1.25rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.cl-row:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
@media (min-width: 640px) { .cl-row { grid-template-columns: 15rem minmax(0, 1fr); align-items: stretch; } }
.cl-row__media { display: block; position: relative; min-height: 11rem; }
.cl-row__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-row__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
}
.cl-row__body { padding: 1.5rem 1.5rem 1.5rem 0; }
@media (max-width: 639px) { .cl-row__body { padding: 0 1.25rem 1.5rem; } }
.cl-row__eyebrow { display: flex; flex-wrap: wrap; gap: .5rem; }
.cl-row__title {
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: .625rem 0 0;
}
.cl-row__title a { color: hsl(var(--foreground)); text-decoration: none; }
.cl-row__title a:hover { color: hsl(var(--accent)); }
.cl-row__excerpt { margin: .625rem 0 0; color: hsl(var(--muted-foreground)); font-size: .9375rem; line-height: 1.65; }
.cl-row__excerpt--format p { margin: 0; }
.cl-row--quote .cl-row__excerpt { font-style: italic; }

/* ---- chips -------------------------------------------------- */
.cl-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / .5);
  padding: .25rem .625rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: hsl(var(--accent));
}
.cl-chip--sticky { background: hsl(var(--secondary)); border-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.cl-chip--format { color: hsl(var(--muted-foreground)); }
.cl-chip--link { text-transform: none; letter-spacing: 0; font-weight: 600; text-decoration: none; }
.cl-chip--link:hover { border-color: hsl(var(--accent)); }
.cl-chip--link.is-active {
  background: hsl(var(--foreground));
  border-color: hsl(var(--foreground));
  color: hsl(var(--background));
}
.cl-chip--link.is-active:hover { border-color: hsl(var(--foreground)); color: hsl(var(--background)); }

/* Category filter row on the All articles template. */
.cl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 2.5rem;
}
.cl-allposts__intro { margin: 0 0 2.5rem; }

/* ---- byline ------------------------------------------------- */
.cl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem .5rem;
  margin-top: 1rem;
  font-size: .8125rem;
  color: hsl(var(--muted-foreground));
}
.cl-meta__avatar { border-radius: 999px; margin-right: .25rem; }
.cl-meta__author, .cl-meta a { color: inherit; text-decoration: none; font-weight: 600; }
.cl-meta a:hover { color: hsl(var(--accent)); }
.cl-meta__sep { opacity: .5; }
.cl-hero__meta .cl-meta__avatar { vertical-align: middle; }

/* ---- article ------------------------------------------------ */
.cl-article {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  overflow: hidden;
}
@media (min-width: 640px) { .cl-article { padding: 2.5rem; } }
@media (min-width: 1024px) { .cl-article { padding: 3rem; } }
.cl-article--wide { max-width: 60rem; margin: 0 auto; }
.cl-article__cover { margin: -1.5rem -1.5rem 2rem; }
@media (min-width: 640px) { .cl-article__cover { margin: -2.5rem -2.5rem 2.5rem; } }
@media (min-width: 1024px) { .cl-article__cover { margin: -3rem -3rem 2.5rem; } }
.cl-article__cover img { width: 100%; height: auto; display: block; border-radius: 0; }
.cl-article__cover figcaption {
  font-size: .8125rem;
  color: hsl(var(--muted-foreground));
  padding: .625rem 1.5rem 0;
  text-align: center;
}
.cl-article__footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--border)); }
.cl-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.cl-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.25rem; }
.cl-share__label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin-right: .25rem;
}
.cl-share__link {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  padding: 0 .875rem;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  font-size: .8125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: all .2s ease;
}
.cl-share__link:hover { border-color: hsl(var(--accent)); color: hsl(var(--accent)); }
.cl-disclaimer { margin-top: 1.5rem; font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.cl-pagelinks { margin-top: 2rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.cl-pagelinks a { color: hsl(var(--accent)); }
.cl-attachment img { width: 100%; height: auto; border-radius: 16px; }
.cl-attachment__meta { font-size: .875rem; }

/* ---- author box, post nav ----------------------------------- */
.cl-authorbox {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin-top: 1.5rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.cl-authorbox__avatar { border-radius: 999px; flex-shrink: 0; }
.cl-authorbox__eyebrow {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: hsl(var(--accent));
  margin: 0;
}
.cl-authorbox__name { font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif; font-size: 1.125rem; margin: .25rem 0 0; }
.cl-authorbox__name a { color: hsl(var(--foreground)); text-decoration: none; }
.cl-authorbox__name a:hover { color: hsl(var(--accent)); }
.cl-authorbox__bio { margin: .5rem 0 0; font-size: .9375rem; color: hsl(var(--muted-foreground)); line-height: 1.6; }
.cl-authorbox__link { font-size: .875rem; color: hsl(var(--accent)); }

.cl-postnav { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .cl-postnav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cl-postnav__link {
  display: block;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 20px;
  padding: 1.125rem 1.25rem;
  text-decoration: none;
  transition: all .2s ease;
}
.cl-postnav__link:hover { border-color: hsl(var(--accent)); transform: translateY(-2px); }
.cl-postnav__link--next { text-align: right; }
.cl-postnav__label {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: hsl(var(--accent));
}
.cl-postnav__title {
  display: block;
  margin-top: .375rem;
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  font-weight: 700;
  color: hsl(var(--foreground));
  line-height: 1.35;
}

/* ---- empty state -------------------------------------------- */
.cl-empty {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 24px;
  padding: 2.5rem;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.cl-empty__title { font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif; font-size: 1.5rem; margin: 0; }
.cl-empty__text { color: hsl(var(--muted-foreground)); margin: .75rem 0 0; }
.cl-empty__form { margin: 1.5rem auto 0; max-width: 24rem; }

/* ---- sidebar widgets ---------------------------------------- */
.cl-sidebar { min-width: 0; }
@media (min-width: 1024px) { .cl-sidebar__inner { position: sticky; top: 6rem; } }
.cl-widget {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 1.5rem;
  font-size: .9375rem;
}
.cl-widget:last-child { margin-bottom: 0; }
.cl-widget__title {
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: hsl(var(--accent));
  margin: 0 0 1rem;
}
.cl-widget ul, .cl-widget ol { list-style: none; margin: 0; padding: 0; }
.cl-widget li { padding: .5rem 0; border-bottom: 1px solid hsl(var(--border) / .6); }
.cl-widget li:last-child { border-bottom: 0; }
.cl-widget li a { color: hsl(var(--foreground)); text-decoration: none; }
.cl-widget li a:hover { color: hsl(var(--accent)); }
.cl-widget .children, .cl-widget .sub-menu { margin-left: 1rem; }
.cl-widget p { color: hsl(var(--muted-foreground)); margin: 0 0 .75rem; }
.cl-widget select { width: 100%; padding: .625rem .75rem; border-radius: 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); font: inherit; }
.cl-widget .post-date, .cl-widget .rss-date { display: block; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.cl-widget img { max-width: 100%; height: auto; border-radius: 12px; }
.cl-widget .wp-block-search__inside-wrapper { gap: .5rem; }
.cl-widget .tagcloud, .cl-widget .wp-block-tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; }
.cl-widget .tagcloud a, .cl-widget .wp-block-tag-cloud a {
  font-size: .75rem !important;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  padding: .25rem .625rem;
  text-decoration: none;
  color: hsl(var(--muted-foreground));
}
.cl-widget .tagcloud a:hover, .cl-widget .wp-block-tag-cloud a:hover { border-color: hsl(var(--accent)); color: hsl(var(--accent)); }
.cl-widget table { width: 100%; font-size: .8125rem; border-collapse: collapse; }
.cl-widget table th, .cl-widget table td { padding: .25rem; text-align: center; }
.cl-widget .wp-block-latest-comments__comment { border-bottom: 1px solid hsl(var(--border) / .6); padding-bottom: .75rem; margin-bottom: .75rem; }

/* ---- footer widgets ----------------------------------------- */
.cl-footer-widgets { display: grid; gap: 2rem; }
@media (min-width: 768px) { .cl-footer-widgets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cl-fwidget { font-size: .875rem; color: hsl(var(--background) / .75); }
.cl-fwidget__title {
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: hsl(var(--background) / .6);
  margin: 0 0 1rem;
}
.cl-fwidget ul { list-style: none; margin: 0; padding: 0; }
.cl-fwidget li { padding: .3rem 0; }
.cl-fwidget a { color: hsl(var(--background) / .8); text-decoration: none; }
.cl-fwidget a:hover { color: hsl(var(--background)); }

/* ---- comments ------------------------------------------------ */
.cl-comments {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  margin-top: 1.5rem;
}
@media (min-width: 640px) { .cl-comments { padding: 2rem; } }
.cl-comments__title { font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif; font-size: 1.375rem; margin: 0 0 1.5rem; }
.cl-comment { background: hsl(var(--muted) / .35); border: 1px solid hsl(var(--border) / .8); }
.cl-comment__head { display: flex; align-items: center; gap: .75rem; }
.cl-comment__author { font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif; font-weight: 700; color: hsl(var(--foreground)); }
.cl-comment__author a { color: inherit; text-decoration: none; }
.cl-comment__date { font-size: .75rem; color: hsl(var(--muted-foreground)); }
.cl-comment__body { margin-top: .75rem; color: hsl(var(--muted-foreground)); line-height: 1.65; }
.cl-comment__body p { margin: 0 0 .75rem; }
.cl-comment__body p:last-child { margin-bottom: 0; }
.cl-comment__actions { margin-top: .75rem; display: flex; gap: .75rem; font-size: .8125rem; }
.cl-comment__actions a { color: hsl(var(--accent)); text-decoration: none; font-weight: 600; }
.cl-comment .comment-awaiting-moderation { font-size: .8125rem; color: hsl(var(--accent)); }
.comment-respond { margin-top: 1.5rem; }
.comment-reply-title { font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif; font-size: 1.25rem; }
.comment-form p { margin: 0 0 1rem; }
.comment-form label { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: .35rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  padding: .75rem 1rem;
  font: inherit;
  font-size: .9375rem;
  color: hsl(var(--foreground));
}
.comment-form .form-submit input[type="submit"],
.cl-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  font-weight: 600;
  cursor: pointer;
}
.comment-form .form-submit input[type="submit"]:hover { background: hsl(var(--foreground) / .9); }
.comment-form .comment-notes, .comment-form .form-allowed-tags { font-size: .8125rem; color: hsl(var(--muted-foreground)); }

/* ---- password-protected + sticky ---------------------------- */
.post-password-form input[type="password"] {
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  padding: .75rem 1rem;
  font: inherit;
}
.post-password-form input[type="submit"] {
  border: 0;
  border-radius: 999px;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  padding: .75rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: .5rem;
}

/* ---- block editor output ------------------------------------ */
.legal-prose .wp-block-image img { border-radius: 14px; }
.legal-prose .wp-block-quote {
  border-left: 4px solid hsl(var(--accent));
  padding-left: 1.25rem;
  font-style: italic;
}
.legal-prose .wp-block-pullquote {
  border-top: 2px solid hsl(var(--border));
  border-bottom: 2px solid hsl(var(--border));
  padding: 1.5rem 0;
  text-align: center;
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
}
.legal-prose .wp-block-cover { border-radius: 18px; overflow: hidden; }
.legal-prose .wp-block-columns { gap: 1.5rem; }
.legal-prose .wp-block-embed figcaption { text-align: center; }
.legal-prose .wp-block-gallery { gap: .75rem; }
.legal-prose .wp-block-gallery img { border-radius: 12px; }
.legal-prose .wp-block-code, .legal-prose .wp-block-preformatted {
  background: hsl(var(--muted) / .6);
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 1rem;
  overflow-x: auto;
}
.legal-prose .wp-block-details {
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin: 0 0 .75rem;
  background: hsl(var(--card));
}
.legal-prose .wp-block-details summary {
  cursor: pointer;
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  font-weight: 700;
  color: hsl(var(--foreground));
}
.legal-prose .wp-block-separator { border: 0; border-top: 1px solid hsl(var(--border)); }
.legal-prose .wp-block-table td, .legal-prose .wp-block-table th { border-color: hsl(var(--border)); }
.legal-prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: hsl(var(--muted) / .4); }
.legal-prose .wp-block-button__link { background: hsl(var(--foreground)); color: hsl(var(--background)); }
.legal-prose .wp-block-file { font-size: .9375rem; }
.legal-prose .wp-block-calendar table { font-size: .8125rem; }
.legal-prose .cl-inline-cta {
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  border-radius: 24px;
  padding: 2rem;
  text-align: center;
}
.legal-prose .cl-inline-cta h2 { color: hsl(var(--background)); }
.legal-prose .cl-inline-cta p { color: hsl(var(--background) / .85); }
.legal-prose .alignwide { width: 100%; }
.legal-prose .alignfull { width: 100%; }
.legal-prose .wp-block-embed__wrapper { position: relative; }
.legal-prose .wp-block-embed.is-type-video .wp-block-embed__wrapper { padding-top: 56.25%; }
.legal-prose .wp-block-embed.is-type-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
}

/* ---- block widgets inside the sidebar ----------------------- */
.cl-widget h2,
.cl-widget h3,
.cl-widget .wp-block-heading {
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: hsl(var(--accent));
  margin: 0 0 1rem;
}
.cl-widget .wp-block-search__inside-wrapper {
  display: flex;
  gap: .5rem;
  border: 0;
  padding: 0;
}
.cl-widget .wp-block-search__input {
  flex: 1 1 auto;
  min-width: 0;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  padding: .625rem 1rem;
  font: inherit;
  font-size: .875rem;
  color: hsl(var(--foreground));
}
.cl-widget .wp-block-search__button {
  border: 0;
  border-radius: 999px;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  padding: 0 1rem;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
}
.cl-widget .wp-block-latest-posts__post-title { font-weight: 600; }
.cl-widget .wp-block-latest-posts__post-date,
.cl-widget .wp-block-latest-comments__comment-date { font-size: .75rem; color: hsl(var(--muted-foreground)); }
.cl-widget .wp-block-latest-comments { padding-left: 0; }
.cl-widget .wp-block-latest-comments__comment-meta { font-size: .875rem; }
.cl-widget .wp-block-group + .wp-block-group { margin-top: 1.25rem; }
.cl-fwidget .wp-block-heading {
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: hsl(var(--background) / .6);
  margin: 0 0 1rem;
}

/* ---- search form, footer pills, shortcode CTA ---------------- */
.cl-searchform { position: relative; }

/* ---- search autocomplete (js/search.js) ---------------------- */
.cl-suggest {
  position: absolute;
  z-index: 60;
  top: calc(100% + .5rem);
  left: 0;
  right: 0;
  max-height: min(24rem, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 18px;
  box-shadow: var(--shadow-card, 0 18px 40px rgba(20, 16, 4, .14));
  padding: .375rem;
  text-align: left;
}
.cl-suggest[hidden] { display: none; }
.cl-suggest__item {
  display: block;
  padding: .625rem .75rem;
  border-radius: 12px;
  color: hsl(var(--foreground));
  text-decoration: none;
  cursor: pointer;
}
.cl-suggest__item.is-active,
.cl-suggest__item:hover { background: hsl(var(--secondary) / .7); }
.cl-suggest__title {
  display: block;
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.35;
}
.cl-suggest__mark {
  background: hsl(var(--accent) / .22);
  color: inherit;
  border-radius: 3px;
  padding: 0 .1em;
}
.cl-suggest__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .25rem;
  font-size: .75rem;
  color: hsl(var(--muted-foreground));
}
.cl-suggest__cat {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  font-size: .6875rem;
  color: hsl(var(--accent));
}
.cl-suggest__empty {
  padding: .875rem .75rem;
  font-size: .875rem;
  color: hsl(var(--muted-foreground));
}

/* The banner search sits on a tinted panel — keep the dropdown readable. */
.cl-hero__search .cl-suggest { text-align: left; }
.cl-searchform__btn {
  position: absolute;
  right: .375rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 2.5rem;
  border: 0;
  border-radius: 999px;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  cursor: pointer;
}
.cl-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: hsl(var(--background) / .7);
}
.cl-pill { border: 1px solid hsl(var(--background) / .2); border-radius: 999px; padding: .375rem .75rem; }
.cl-sc-cta {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  padding: 2rem;
  text-align: center;
  margin: 2rem 0;
}
@media (min-width: 640px) { .cl-sc-cta { padding: 3rem; } }
.cl-sc-cta__title {
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  line-height: 1.1;
  max-width: 36rem;
  margin: 0 auto;
  color: hsl(var(--background));
}
.cl-sc-cta__body { max-width: 32rem; margin: 1rem auto 0; color: hsl(var(--background) / .85); }
.cl-sc-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 3.5rem;
  padding: 0 2rem;
  margin-top: 1.75rem;
  border-radius: 999px;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  font-weight: 600;
  text-decoration: none;
}
.cl-sc-cta__btn:hover { background: hsl(var(--secondary) / .85); }

/* ---- featured strip under the home banner -------------------- */
.cl-featured-strip { background: hsl(var(--cream)); padding-bottom: 3.5rem; }
@media (min-width: 1024px) { .cl-featured-strip { padding-bottom: 4.5rem; } }
.cl-featured-strip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}
.cl-featured-strip__lede { margin: .625rem 0 0; color: hsl(var(--muted-foreground)); max-width: 40rem; }
.cl-featured-strip__all {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: hsl(var(--accent));
  text-decoration: none;
  white-space: nowrap;
}
.cl-featured-strip__all:hover { text-decoration: underline; }
.cl-grid--1 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cl-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* the banner search sits centred under a full hero, left under a mini one */
.cl-hero--full .cl-hero__search { margin: 1.75rem auto 0; }
.cl-hero__search .cl-field { box-shadow: var(--shadow-card); }

/* ---- post banner with the featured image beside the title ---- */
.cl-hero__grid { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 900px) {
  .cl-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem; }
}
.cl-hero__text { min-width: 0; }
.cl-hero__grid .cl-hero__title,
.cl-hero__grid .cl-hero__lead,
.cl-hero__grid .cl-hero__meta { max-width: none; }

/* A solid frame keeps transparent PNGs from blending into the banner. */
.cl-hero__media {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 20px;
  padding: .5rem;
  box-shadow: var(--shadow-card);
}
.cl-hero__img,
.cl-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: hsl(var(--card));
}

/* Same protection for card thumbnails and in-article covers. */
.cl-article__cover img,
.cl-row__img { background: hsl(var(--card)); }
.cl-article__cover { border-bottom: 1px solid hsl(var(--border)); }

/* Decoration clips here so the section itself can let the autocomplete out. */
.cl-hero__decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* keep the banner search a sensible width */
.cl-hero__search { max-width: 30rem; position: relative; z-index: 40; }
.cl-hero--full .cl-hero__search { margin-left: auto; margin-right: auto; }

/* ---- table of contents (simple list) ------------------------ */
.cl-toc { margin: 0 0 1.5rem; padding: 0 0 1.5rem; border-bottom: 1px solid hsl(var(--border)); }
.cl-toc__title {
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 .75rem;
}
.cl-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* The rail the active marker slides along. */
  border-left: 2px solid hsl(var(--border));
  max-height: min(60vh, 32rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.cl-toc__item { margin: 0; }
.cl-toc__link {
  display: block;
  position: relative;
  padding: .45rem 0 .45rem .875rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: .9375rem;
  line-height: 1.45;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.cl-toc__link:hover {
  color: hsl(var(--accent));
  border-left-color: hsl(var(--accent) / .45);
}
.cl-toc__link:focus-visible {
  outline: 2px solid hsl(var(--ring) / .5);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Section currently being read — set by js/toc.js. */
.cl-toc__link.is-active {
  color: hsl(var(--foreground));
  font-weight: 600;
  border-left-color: hsl(var(--accent));
  background: linear-gradient(90deg, hsl(var(--accent) / .10), transparent 70%);
}
.cl-toc__link.is-active:hover { color: hsl(var(--foreground)); }

@media (prefers-reduced-motion: reduce) {
  .cl-toc__link { transition: none; }
}

/* Anchor jumps have to clear the sticky header. */
.legal-prose h2[id] { scroll-margin-top: 6rem; }
.legal-prose h2[id]:focus { outline: none; }

/* share row inside the post banner */
.cl-share--banner { margin-top: 1.25rem; }
.cl-share--banner .cl-share__link { background: hsl(var(--card) / .7); }
.cl-hero--full .cl-share--banner { justify-content: center; }