/*
 * Cookbook Zen — visitor-facing skin overrides.
 *
 * theme.json defines the base (minimalist light). The two alternate skins
 * override WP's generated CSS custom properties at the html level, so the
 * cascade carries the change through every block that references them.
 */

/* html color transition removed for flicker diagnosis */

/* =========================================================
 * Skin switcher controls (header buttons + footer links)
 * ========================================================= */
.cz-skin-switcher {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.cz-skin-switcher button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--wp--preset--color--muted);
  cursor: pointer;
  font: inherit;
  padding: 0.4rem 0.85rem;
  transition: background-color 120ms ease, color 120ms ease;
}
.cz-skin-switcher button:hover {
  color: var(--wp--preset--color--ink);
}
.cz-skin-switcher button.is-active {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
}
.cz-skin-switcher button:focus-visible {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
}

.cz-footer-switcher a {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px dotted currentColor;
}
.cz-footer-switcher a.is-active {
  border-bottom-style: solid;
  font-weight: 600;
}

/* Censer + smoke — only paint in maximalist mode */
.cz-censer-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 0;
  height: 28px;
  overflow: visible;
  transition: width 220ms ease;
}
html[data-skin="maximalist"] .cz-censer-wrap,
html[data-skin="gilt"] .cz-censer-wrap {
  width: 28px;
}
.cz-censer {
  display: block;
  width: 100%;
  height: 100%;
}
.cz-smoke {
  position: absolute;
  pointer-events: none;
  display: none;
}
.cz-smoke-wisp {
  position: absolute;
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(243, 233, 210, 0.32) 0%,
    rgba(243, 233, 210, 0.14) 35%,
    rgba(243, 233, 210, 0) 70%);
  opacity: 0;
  will-change: transform, opacity;
}

/* =========================================================
 * Skin: Minimalist Dark
 * ========================================================= */
html[data-skin="minimalist-dark"] {
  --wp--preset--color--ink:    #f5f5f5;
  --wp--preset--color--paper:  #000000;
  --wp--preset--color--rule:   #2a2a2a;
  --wp--preset--color--muted:  #9a9a9a;
}

/* =========================================================
 * Skin: Gilt (Maximalist Light) — illuminated manuscript on parchment
 * ========================================================= */
html[data-skin="gilt"] {
  --wp--preset--color--ink:    #2e1f10;
  --wp--preset--color--paper:  #f4ead4;
  --wp--preset--color--rule:   #c8a85a;
  --wp--preset--color--muted:  #6b513a;
  --wp--preset--color--oxblood: #5a0e0e;
  --wp--preset--color--gold:    #8a6620;
  --wp--preset--color--purple:  #4a1e5c;
  --wp--preset--color--walnut:  #f4ead4;

  --wp--preset--font-family--sans:
    'Cormorant Garamond', Garamond, 'EB Garamond', Georgia, serif;
}

html[data-skin="gilt"] {
  --wp--preset--color--paper: #e2d09e;
}
/* Body color is a solid fallback; textures.js paints the procedural
 * parchment to a fixed canvas behind everything. */
html[data-skin="gilt"] body {
  background: var(--wp--preset--color--paper);
}

html[data-skin="gilt"] h1,
html[data-skin="gilt"] h2,
html[data-skin="gilt"] h3,
html[data-skin="gilt"] .wp-block-post-title,
html[data-skin="gilt"] .wp-block-site-title a {
  color: var(--wp--preset--color--oxblood);
  font-family: 'Cormorant Garamond', Garamond, Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}

html[data-skin="gilt"] a {
  color: var(--wp--preset--color--gold);
  text-decoration-color: rgba(138, 102, 32, 0.4);
  text-underline-offset: 0.18em;
}
html[data-skin="gilt"] a:hover {
  color: var(--wp--preset--color--oxblood);
  text-decoration-color: var(--wp--preset--color--oxblood);
}

html[data-skin="gilt"] blockquote,
html[data-skin="gilt"] .wp-block-quote {
  border-left: 3px solid var(--wp--preset--color--purple) !important;
  color: var(--wp--preset--color--muted);
  font-style: italic;
}

html[data-skin="gilt"] hr,
html[data-skin="gilt"] .wp-block-separator {
  border-color: var(--wp--preset--color--gold);
  background-color: var(--wp--preset--color--gold);
  opacity: 0.45;
}

html[data-skin="gilt"] .cz-censer {
  background: url("censer.svg") center / contain no-repeat;
  opacity: 0.95;
  /* darken the SVG strokes for better contrast on parchment */
  filter: brightness(0.55) sepia(1) saturate(2.4) hue-rotate(-8deg);
}

html[data-skin="gilt"] .cz-skin-switcher {
  border-color: var(--wp--preset--color--gold);
}
html[data-skin="gilt"] .cz-skin-switcher button.is-active {
  background: var(--wp--preset--color--oxblood);
  color: var(--wp--preset--color--paper);
}

/* No smoke in Gilt — daylight chapel, not evening sanctum */
html[data-skin="gilt"] .cz-smoke {
  display: none;
}

/* =========================================================
 * Skin: Maximalist
 * ========================================================= */
html[data-skin="maximalist"] {
  --wp--preset--color--ink:    #f3e9d2;
  --wp--preset--color--paper:  #1a0e0a;
  --wp--preset--color--rule:   #7a5a2e;
  --wp--preset--color--muted:  #b89b6d;
  --wp--preset--color--oxblood: #7a1010;
  --wp--preset--color--gold:    #c9a35a;
  --wp--preset--color--purple:  #4a1e5c;
  --wp--preset--color--walnut:  #2a160c;

  --wp--preset--font-family--sans:
    'Cormorant Garamond', Garamond, 'EB Garamond', Georgia, serif;
}

/* Maximalist body — solid fallback color; procedural marble paints to canvas */
html[data-skin="maximalist"] {
  --wp--preset--color--paper: #0d0a07;
}
html[data-skin="maximalist"] body {
  background: var(--wp--preset--color--paper);
}

/* All headings: gold + italic Garamond */
html[data-skin="maximalist"] h1,
html[data-skin="maximalist"] h2,
html[data-skin="maximalist"] h3,
html[data-skin="maximalist"] .wp-block-post-title,
html[data-skin="maximalist"] .wp-block-site-title a {
  color: var(--wp--preset--color--gold);
  font-family: 'Cormorant Garamond', Garamond, Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Links — gold with oxblood hover */
html[data-skin="maximalist"] a {
  color: var(--wp--preset--color--gold);
  text-decoration-color: rgba(201, 163, 90, 0.4);
  text-underline-offset: 0.18em;
}
html[data-skin="maximalist"] a:hover {
  color: var(--wp--preset--color--oxblood);
  text-decoration-color: var(--wp--preset--color--oxblood);
}

/* Quotes — purple bar, italic, lifted from baseline */
html[data-skin="maximalist"] blockquote,
html[data-skin="maximalist"] .wp-block-quote {
  border-left: 3px solid var(--wp--preset--color--purple) !important;
  color: var(--wp--preset--color--muted);
  font-style: italic;
}

/* Rules — gold hairline */
html[data-skin="maximalist"] hr,
html[data-skin="maximalist"] .wp-block-separator {
  border-color: var(--wp--preset--color--gold);
  background-color: var(--wp--preset--color--gold);
  opacity: 0.55;
}

/* Censer ornament in the header — inline SVG via background */
html[data-skin="maximalist"] .cz-censer {
  background: url("censer.svg") center / contain no-repeat;
  opacity: 0.85;
  filter: drop-shadow(0 0 6px rgba(201, 163, 90, 0.35));
}

/* Smoke wisps rising from the censer */
html[data-skin="maximalist"] .cz-smoke {
  display: block;
  /* anchor above the censer */
  left: 50%;
  bottom: 100%;
  width: 60px;
  height: 220px;
  transform: translateX(-50%);
}
html[data-skin="maximalist"] .cz-smoke-wisp {
  left: 50%;
  bottom: 0;
  animation: cz-waft 9s ease-in-out infinite;
}
html[data-skin="maximalist"] .cz-smoke-wisp:nth-child(1) {
  animation-delay: 0s;
  animation-duration: 8s;
}
html[data-skin="maximalist"] .cz-smoke-wisp:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 11s;
  width: 36px;
  height: 36px;
}
html[data-skin="maximalist"] .cz-smoke-wisp:nth-child(3) {
  animation-delay: -6s;
  animation-duration: 13s;
  width: 22px;
  height: 22px;
}

@keyframes cz-waft {
  0%   { transform: translate(-50%, 0)      scale(0.6); opacity: 0; }
  15%  { opacity: 0.6; }
  50%  { transform: translate(-30%, -120px) scale(1.4); opacity: 0.35; }
  85%  { opacity: 0.1; }
  100% { transform: translate(-70%, -220px) scale(2.2); opacity: 0; }
}

/* Switcher in maximalist — pillowy gold pill */
html[data-skin="maximalist"] .cz-skin-switcher {
  border-color: var(--wp--preset--color--gold);
}
html[data-skin="maximalist"] .cz-skin-switcher button.is-active {
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--walnut);
}

/* =========================================================
 * Illuminated drop cap (Gilt + Max only)
 * Targets the first paragraph of the post content.
 * ========================================================= */
html[data-skin="gilt"] .wp-block-post-content > p:first-of-type::first-letter,
html[data-skin="maximalist"] .wp-block-post-content > p:first-of-type::first-letter {
  font-family: 'Cormorant Garamond', Garamond, Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 5.5em;
  line-height: 0.85;
  float: left;
  margin: 0.08em 0.18em 0 0;
  padding: 0.22em 0.28em 0.12em;
  border: 1.5px solid var(--wp--preset--color--gold);
  border-radius: 4px;
  background:
    linear-gradient(135deg,
      rgba(201,163,90,0.18) 0%,
      rgba(201,163,90,0.04) 50%,
      rgba(201,163,90,0.18) 100%);
}
html[data-skin="gilt"] .wp-block-post-content > p:first-of-type::first-letter {
  color: var(--wp--preset--color--oxblood);
}
html[data-skin="maximalist"] .wp-block-post-content > p:first-of-type::first-letter {
  color: var(--wp--preset--color--gold);
  text-shadow: 0 0 8px rgba(201, 163, 90, 0.35);
}

/* =========================================================
 * Filigree divider (Gilt + Max)
 * Overrides the basic hr/separator with a gold leaf flourish.
 * ========================================================= */
html[data-skin="gilt"] .wp-block-separator,
html[data-skin="gilt"] hr,
html[data-skin="maximalist"] .wp-block-separator,
html[data-skin="maximalist"] hr {
  border: 0 !important;
  background: transparent !important;
  height: 24px;
  margin: 2.5rem auto;
  max-width: 480px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 24' preserveAspectRatio='none'><g stroke='%23c9a35a' stroke-width='1' fill='none'><line x1='10' y1='12' x2='200' y2='12'/><line x1='280' y1='12' x2='470' y2='12'/></g><g fill='%23c9a35a' transform='translate(240 12)'><path d='M 0 -7 L 7 0 L 0 7 L -7 0 Z'/><circle cx='-22' cy='0' r='1.5'/><circle cx='22' cy='0' r='1.5'/></g><g stroke='%23c9a35a' stroke-width='0.7' fill='none' opacity='0.75'><path d='M 220 12 Q 230 4 240 12'/><path d='M 240 12 Q 250 20 260 12'/><path d='M 220 12 Q 230 20 240 12'/><path d='M 240 12 Q 250 4 260 12'/></g></svg>") center / contain no-repeat;
}

html[data-skin="gilt"] .wp-block-separator,
html[data-skin="gilt"] hr {
  /* Use darker gold strokes against the parchment for legibility */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 24' preserveAspectRatio='none'><g stroke='%238a6620' stroke-width='1' fill='none'><line x1='10' y1='12' x2='200' y2='12'/><line x1='280' y1='12' x2='470' y2='12'/></g><g fill='%238a6620' transform='translate(240 12)'><path d='M 0 -7 L 7 0 L 0 7 L -7 0 Z'/><circle cx='-22' cy='0' r='1.5'/><circle cx='22' cy='0' r='1.5'/></g><g stroke='%238a6620' stroke-width='0.7' fill='none' opacity='0.75'><path d='M 220 12 Q 230 4 240 12'/><path d='M 240 12 Q 250 20 260 12'/><path d='M 220 12 Q 230 20 240 12'/><path d='M 240 12 Q 250 4 260 12'/></g></svg>");
}

/* =========================================================
 * Comments
 * ========================================================= */
.cz-comments {
  /* WP comment-form labels and inputs */
}
.cz-comments .wp-block-comments-title {
  margin: 0 0 1.5rem;
}
.cz-comments .wp-block-comment-author-name a {
  text-decoration: none;
}
.cz-comments .wp-block-comment-content p {
  margin: 0.5rem 0;
}
.cz-comments .wp-block-comment-reply-link a {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.cz-comments .wp-block-avatar img {
  display: block;
}

/* Comment form (WP's default form rendering, not a block) */
.cz-comments .comment-form {
  margin-top: 2rem;
}
.cz-comments .comment-form label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--muted);
  margin: 0.75rem 0 0.25rem;
}
.cz-comments .comment-form input[type="text"],
.cz-comments .comment-form input[type="email"],
.cz-comments .comment-form input[type="url"],
.cz-comments .comment-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.6rem 0.75rem;
  background: transparent;
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 4px;
  color: var(--wp--preset--color--ink);
  font: inherit;
  box-sizing: border-box;
}
.cz-comments .comment-form input:focus,
.cz-comments .comment-form textarea:focus {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--ink);
}
.cz-comments .comment-form .submit,
.cz-comments .wp-block-button__link {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.7rem 1.25rem;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
  border: 0;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
}
.cz-comments .comment-form .submit:hover {
  opacity: 0.85;
}

/* Maximalist comment form treatments */
html[data-skin="maximalist"] .cz-comments .comment-form .submit {
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--walnut);
}
html[data-skin="maximalist"] .cz-comments .comment-form input:focus,
html[data-skin="maximalist"] .cz-comments .comment-form textarea:focus {
  outline-color: var(--wp--preset--color--gold);
  border-color: var(--wp--preset--color--gold);
}

/* =========================================================
 * "More from the blog" related block
 * ========================================================= */
.cz-related h3 {
  margin: 0;
}
.cz-related .wp-block-post-title a {
  text-decoration: none;
}
.cz-related .wp-block-post-title a:hover {
  text-decoration: underline;
}

/* =========================================================
 * Respect reduced-motion users
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html, .cz-skin-switcher button, .cz-censer {
    transition: none;
  }
  .cz-smoke-wisp {
    animation: none !important;
    opacity: 0 !important;
  }
}