/* Drawing Circles — theme variables
   Variables are declared on :root so they apply to both classic
   PHP-rendered pages (wrapped in #dc-root) and block-template-rendered
   pages (no wrapper). Palette overrides cascade off either the
   #dc-root[data-theme=…] attribute or a body.dc-theme-… class so the
   Customizer picker keeps working in both worlds. */

:root,
#dc-root,
body {
  --bg:    #F6F4EE;
  --ink:   #1A1A1A;
  --muted: #8C8778;
  --line:  #DCD7C8;
  --card:  #FFFFFF;
  --accent: oklch(0.58 0.21 25);

  --font-display: "GT Sectra", "EB Garamond", Georgia, serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;

  --card-pad: 36px;
  --gap:      32px;
  --hero-scale: 1;
}

#dc-root[data-theme="bone"],
body.dc-theme-bone   { --bg:#FAFAF7; --ink:#14140F; --muted:#8E8A7C; --line:#E4E0D3; --card:#FFFFFF; }
#dc-root[data-theme="slate"],
body.dc-theme-slate  { --bg:#11110F; --ink:#F2EFE7; --muted:#807C72; --line:#2A2925; --card:#1A1A17; }
#dc-root[data-theme="mono"],
body.dc-theme-mono   { --bg:#FFFFFF; --ink:#0A0A0A; --muted:#888888; --line:#EAEAEA; --card:#FFFFFF; }

/* The filter pills are <a> tags in the WP version (preserves bookmarkability).
   Extend the original button-only rules to anchors too. */
.dc-filter-opts a {
  background: transparent; border: 0; padding: 6px 12px;
  font-size: 13px; color: var(--muted);
  border-radius: 999px;
  text-decoration: none;
  display: inline-block;
}
.dc-filter-opts a:hover { color: var(--ink); }
.dc-filter-opts a.is-on { background: var(--accent); color: #fff; }

.dc-up-row { text-decoration: none; color: inherit; }
.dc-card { text-decoration: none; color: inherit; }
.dc-nav-link { text-decoration: none; }
.dc-nav-cta { text-decoration: none; }
.dc-sess-row { text-decoration: none; color: inherit; }
.dc-back { text-decoration: none; display: inline-block; }
.dc-link { text-decoration: none; }
.dc-link:hover { color: var(--ink); }
.dc-wordmark { text-decoration: none; }

/* WordPress admin bar offset so the sticky nav doesn't sit beneath it */
.admin-bar .dc-nav { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .dc-nav { top: 46px; }
}

/* Tame the few WP defaults that show through */
img { max-width: 100%; height: auto; }
.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px; height: 1px;
  overflow: hidden;
}
.dc-pagination,
.wp-block-query-pagination.dc-pagination {
  display: flex; gap: 8px; justify-content: center;
  padding: 40px 0; font-family: ui-monospace, monospace; font-size: 13px;
}
.dc-pagination a, .dc-pagination span {
  padding: 8px 14px; border: 1px solid var(--line); color: var(--muted);
  text-decoration: none;
}
.dc-pagination .current { color: var(--ink); border-color: var(--ink); }

/* Site-editor template parts render headers/footers at the body level
   instead of inside #dc-root. Mirror the dc-root background/colour reset
   onto body so the page still looks right. */
body {
  background: var(--bg);
  color: var(--ink);
}