/* Run the exact Agni design on Kadence: hide Kadence's own header/footer, strip
   its content container, and repair the three cascade conflicts Kadence causes:
   content width, brand preset colors, and heading color. */

/* Hide Kadence's native header, footer and extras. */
#masthead.site-header,
#colophon,
.site-footer,
.kadence-scroll-to-top,
#kt-scroll-up-reader,
.entry-hero,
.page-title { display: none !important; }

/* Our ported header/footer. */
header.wp-block-template-part.agni-ported { position: sticky; top: 0; z-index: 100; display: block; }
footer.wp-block-template-part.agni-ported { position: relative; display: block; }

/* Header & footer CONTENT capped at 1152px (bars stay full-bleed). */
header.agni-ported .agni-header .wp-block-group.alignwide {
  max-width: 1152px; margin-left: auto; margin-right: auto;
  /* No side padding on full desktop: the header content spans the full 1152 band
     (centred by the auto margins) and aligns with the page content. Padding here
     shrank the usable width and made the nav wrap. */
  padding-left: 0; padding-right: 0;
}
/* Below the full-desktop width the 1152 band fills the viewport, so the auto
   margins collapse to 0 and the logo + hamburger would touch the screen edges.
   Inset them by 24px (matching the original) wherever the header isn't centred. */
@media (max-width: 1151.98px) {
  header.agni-ported .agni-header .wp-block-group.alignwide {
    padding-left: 24px; padding-right: 24px;
  }
}
footer.agni-ported .agni-footer > * {
  max-width: 1152px; margin-left: auto; margin-right: auto;
}
/* Kadence pulls alignwide/alignfull out to viewport width (margin-left:-144px).
   Keep the footer's inner wide blocks capped and centered at 1152. */
footer.agni-ported .agni-footer .alignwide,
footer.agni-ported .agni-footer .alignfull {
  max-width: 1152px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Full-bleed content: remove Kadence's container width / padding / background. */
body { background: var(--agni-ink, #0b0b0f); color: var(--agni-light, #f7f5f2); }
#wrapper,
#inner-wrap,
.content-container,
.content-container.site-container,
.content-area,
#primary,
#main.site-main,
.content-wrap,
.site-content,
.entry-content,
article.entry,
.single-entry,
.entry-content-wrap {
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ============================================================
   FIX 1 — Content width. Kadence set content-size to 1290px and left
   wide-size empty, so the original 1152 sections ran full width (grids
   went 4-up). Restore the original wide-size and cap wide/section content. */
:root {
  --wp--style--global--content-size: 760px !important;
  --wp--style--global--wide-size: 1152px !important;
}
.entry-content .alignwide {
  max-width: 1152px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.entry-content .wp-block-group.alignfull.is-layout-constrained > :where(:not(.alignfull):not(.alignleft):not(.alignright)) {
  max-width: 1152px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   FIX 5 — Uneven image cards. On Kadence the grid stretches every card to the
   tallest cell, and a sub-pixel/row quirk inflates one card past its siblings
   (e.g. "The Sanctuary" rendered taller than its row-mates). The original image
   cards are fixed-height (each carries its own inline min-height; the overlay
   text is short and fits). Top-align the cover cards so each sits at its own
   min-height → every card in a row is equal, at whatever height that grid uses
   (260, 270, …). Scoped with :has() to cover-card grids only, so icon/text-card
   grids (e.g. the home pillars) still stretch to equal height as before. */
.entry-content .is-layout-grid:has(> .wp-block-cover) { align-items: start; }

/* ============================================================
   FIX 2 — Brand preset colors. Kadence's palette (defaultPalette:false)
   suppressed our custom slugs, so has-*-color classes had no value and fell
   back to white/inherited. Define the vars AND the classes explicitly. */
:root {
  --wp--preset--color--fire: #da1fb8;
  --wp--preset--color--ice: #703dff;
  --wp--preset--color--lime: #b8f42f;
  --wp--preset--color--tint: #26a8ff;
  --wp--preset--color--ink: #0b0b0f;
  --wp--preset--color--surface: #16151c;
  --wp--preset--color--light: #f7f5f2;
  --wp--preset--color--muted-dark: #a7a3af;
  --wp--preset--color--muted-light: #6b6b76;
}
.has-fire-color { color: #da1fb8 !important; }
.has-ice-color { color: #703dff !important; }
.has-lime-color { color: #b8f42f !important; }
.has-tint-color { color: #26a8ff !important; }
.has-ink-color { color: #0b0b0f !important; }
.has-light-color { color: #f7f5f2 !important; }
.has-muted-dark-color { color: #a7a3af !important; }
.has-muted-light-color { color: #6b6b76 !important; }
.has-fire-background-color { background-color: #da1fb8 !important; }
.has-ice-background-color { background-color: #703dff !important; }
.has-lime-background-color { background-color: #b8f42f !important; }
.has-tint-background-color { background-color: #26a8ff !important; }
.has-ink-background-color { background-color: #0b0b0f !important; }
.has-surface-background-color { background-color: #16151c !important; }
.has-light-background-color { background-color: #f7f5f2 !important; }

/* ============================================================
   FIX 4 — Block gap, spacing scale, font presets. Kadence's global styles
   override our child theme.json, so these came out EMPTY or as Kadence's own
   (smaller) values. Biggest symptom: `--wp--style--block-gap` was empty, which
   collapsed every grid/flex/nav gap to a 0.5em fallback — card grids gained a
   4th column (4-up instead of 3-up) and the header nav bunched together.
   Restore the original theme's exact values (verified against v1). */
:root, body {
  /* block gap — no !important so blocks with a custom per-block gap still win */
  --wp--style--block-gap: 1.5rem;
}
/* Kadence disabled blockGap, so WP hardcoded the base layout gap to `0.5em`
   (literal, not the variable) and never emitted the per-block gap rules. That
   collapse made card grids squeeze in a 4th column and bunched flex rows.
   Re-point the base rules at the block-gap variable. These use :where() so they
   stay zero-specificity — brand components (.agni-chips, .agni-stat, buttons…)
   that set their own gap in agni-full.css still win. */
:where(.is-layout-flex) { gap: var(--wp--style--block-gap, 1.5rem); }
:where(.is-layout-grid) { gap: var(--wp--style--block-gap, 1.5rem); }
/* Button rows used a 1rem gap in the original (the generic 1.5rem is too wide). */
.entry-content .wp-block-buttons.is-layout-flex { gap: 1rem; }
/* Desktop header nav: items were bunched (~8px). Original spacing was 1.75rem. */
.agni-header .wp-block-navigation:not(.is-menu-open) > .wp-block-navigation__container,
.agni-header ul.wp-block-navigation__container:not(.is-menu-open) { gap: 1.75rem; }
:root, body {
  --wp--preset--spacing--20: 0.5rem !important;
  --wp--preset--spacing--30: 1rem !important;
  --wp--preset--spacing--40: 1.5rem !important;
  --wp--preset--spacing--50: 2rem !important;
  --wp--preset--spacing--60: 3rem !important;
  --wp--preset--spacing--70: clamp(3.5rem, 7vw, 7rem) !important;
  --wp--preset--spacing--80: clamp(3.5rem, 8vw, 7rem) !important;
  --wp--preset--font-size--small: 0.875rem !important;
  --wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.121), 1.0625rem) !important;
  --wp--preset--font-size--large: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.481), 1.375rem) !important;
  --wp--preset--font-size--x-large: clamp(1.2rem, 1.2rem + ((1vw - 0.2rem) * 0.769), 1.6rem) !important;
  --wp--preset--font-size--xx-large: clamp(1.9rem, 1.9rem + ((1vw - 0.2rem) * 2.115), 3rem) !important;
  --wp--preset--font-size--huge: clamp(2.4rem, 2.4rem + ((1vw - 0.2rem) * 4.038), 4.5rem) !important;
  --wp--preset--font-family--geist: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  --wp--preset--font-family--fraunces: "Fraunces", Georgia, "Times New Roman", serif !important;
}

/* ============================================================
   FIX 3 — Heading color. Kadence forces a dark heading color (rgb 26,32,44),
   making white-on-dark headings invisible. Originals had no heading color and
   inherited the section's text color. Make uncolored headings inherit again. */
.entry-content :where(h1, h2, h3, h4, h5, h6):not(.has-text-color) {
  color: inherit !important;
}

/* ============================================================
   FIX 6 — Mobile. (a) Header content inset 24px below the full-desktop width is
   handled above. (b) On phones the footer's wide blocks keep a negative right
   margin (WP's desktop breakout to wide-size) that pushes them past the viewport
   and causes a horizontal scroll. Placed last so it wins the cascade. */
@media (max-width: 781.98px) {
  footer.agni-ported .agni-footer .alignwide,
  footer.agni-ported .agni-footer .alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   FIX 7 — Testimonial cards. `.agni-quote` cards use a dark (surface)
   background but set no text color, so inside a light (mesh-light) section the
   quote text and author name inherited the section's ink colour → dark-on-dark,
   effectively invisible. Force the card text light; keep the muted role line. */
.agni-quote,
.agni-quote blockquote,
.agni-quote figcaption,
.agni-quote figcaption .n { color: var(--agni-light, #f7f5f2) !important; }
.agni-quote figcaption .c { color: var(--agni-muted-dark, #a7a3af) !important; }

/* ============================================================
   FIX 8 — BLOG POST TEMPLATE (single posts: existing + future).
   Blog posts inherit the broad full-bleed rule above (max-width:none), so the
   article text ran edge-to-edge and was unreadable. Give every post one
   consistent, branded, readable layout: a contained featured hero, then a
   centred reading column with a styled header/meta and article typography, plus
   a closing CTA (appended by functions.php). Scoped to .single-post so the
   full-bleed page designs are untouched. */

/* --- Featured image: a contained banner at the top of the post ---
   Kadence builds the thumb as an aspect-ratio box (padding-bottom on the parent,
   .post-thumbnail-inner absolutely positioned to fill it). Replace that with an
   explicit height so we control the banner; keep the inner's absolute fill. */
body.single-post .post-thumbnail.article-post-thumbnail {
  max-width: none;
  margin: 0 auto 2.75rem !important;
  padding: 0 !important;            /* removes Kadence's aspect-ratio padding-bottom */
  height: clamp(220px, 42vw, 460px);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.75);
}
body.single-post .post-thumbnail.article-post-thumbnail .post-thumbnail-inner {
  position: absolute;
  inset: 0;
  height: 100%;
  line-height: 0;
}
body.single-post .post-thumbnail-inner img.wp-post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Reading column: fills the 1152 site frame (set on .content-wrap in FIX 9),
   so the article aligns with the related posts / comments below it --- */
body.single-post .entry-content-wrap {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 1rem !important;
}

/* --- Post header --- */
body.single-post .entry-header.post-title {
  text-align: left;
  margin: 0 0 2.25rem;
}
/* Category: brand eyebrow (pink, uppercase, spaced) */
body.single-post .entry-taxonomies { margin: 0 0 0.75rem; }
body.single-post .entry-taxonomies .category-links { font-size: 0; }
body.single-post .entry-taxonomies .category-links a {
  font-family: var(--wp--preset--font-family--geist, "Geist", sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--agni-fire, #da1fb8);
  text-decoration: none;
}
body.single-post .entry-taxonomies .category-links a:hover { text-decoration: underline; }
body.single-post .entry-header .entry-title {
  font-family: var(--wp--preset--font-family--fraunces, "Fraunces", Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.95rem, 1.3rem + 2.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: var(--agni-light, #f7f5f2);
}
/* Meta: muted byline + date */
body.single-post .entry-header .entry-meta {
  font-family: var(--wp--preset--font-family--geist, "Geist", sans-serif);
  font-size: 0.9rem;
  color: var(--agni-muted-dark, #a7a3af);
}
body.single-post .entry-header .entry-meta a { color: var(--agni-muted-dark, #a7a3af); text-decoration: none; }
body.single-post .entry-header .entry-meta a:hover { color: var(--agni-light, #f7f5f2); }

/* --- Article typography --- */
body.single-post .entry-content.single-content {
  font-family: var(--wp--preset--font-family--geist, "Geist", sans-serif);
  font-size: 1.075rem;
  line-height: 1.8;
  color: #e5e3ea;
}
body.single-post .single-content > p { margin: 0 0 1.4em; }
body.single-post .single-content a {
  color: var(--agni-tint, #26a8ff);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
body.single-post .single-content a:hover { color: var(--agni-fire, #da1fb8); }
body.single-post .single-content :where(h2, h3, h4) {
  color: var(--agni-light, #f7f5f2);
  line-height: 1.22;
  letter-spacing: -0.01em;
}
body.single-post .single-content h2 {
  font-family: var(--wp--preset--font-family--fraunces, "Fraunces", Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.95rem);
  margin: 2.4em 0 0.7em;
}
body.single-post .single-content h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 2em 0 0.6em;
}
body.single-post .single-content h4 { font-size: 1.1rem; font-weight: 600; margin: 1.8em 0 0.5em; }
/* Content images: centred, rounded, breathing room */
body.single-post .single-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
  border-radius: 14px;
}
body.single-post .single-content figcaption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--agni-muted-dark, #a7a3af);
  margin-top: 0.6rem;
}
/* Lists */
body.single-post .single-content :where(ul, ol) { margin: 0 0 1.4em; padding-left: 1.4em; }
body.single-post .single-content li { margin: 0 0 0.5em; }
body.single-post .single-content li::marker { color: var(--agni-fire, #da1fb8); }
/* Blockquote */
body.single-post .single-content blockquote {
  margin: 2em 0;
  padding: 0.4em 0 0.4em 1.4em;
  border-left: 3px solid var(--agni-fire, #da1fb8);
  font-family: var(--wp--preset--font-family--fraunces, "Fraunces", Georgia, serif);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--agni-light, #f7f5f2);
}
body.single-post .single-content hr {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 2.5em 0;
}
body.single-post .entry-footer { margin-top: 2.5rem; }

/* --- Closing CTA (appended to post content in functions.php) --- */
.agni-post-cta {
  margin: 3.5rem auto 1rem;
  padding: 2.5rem 2rem;
  text-align: center;
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(218, 31, 184, 0.18), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(112, 61, 255, 0.22), transparent 55%),
    var(--agni-surface, #16151c);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.agni-post-cta__eyebrow {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--agni-lime, #b8f42f); margin: 0 0 0.5rem;
}
.agni-post-cta__title {
  font-family: var(--wp--preset--font-family--fraunces, "Fraunces", Georgia, serif);
  font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  line-height: 1.15; color: var(--agni-light, #f7f5f2); margin: 0 0 0.75rem;
}
.agni-post-cta__text {
  font-size: 1rem; line-height: 1.6; color: var(--agni-muted-dark, #a7a3af);
  max-width: 44ch; margin: 0 auto 1.6rem;
}
.agni-post-cta__btn {
  display: inline-block; padding: 0.85rem 2rem; border-radius: 999px;
  background: var(--agni-fire, #da1fb8); color: #fff !important;
  font-weight: 600; text-decoration: none; letter-spacing: 0.01em;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.agni-post-cta__btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* --- Light archive/blog-index polish (consistent with the post template) --- */
body.blog .loop-entry .entry-taxonomies .category-links a,
body.archive .loop-entry .entry-taxonomies .category-links a {
  color: var(--agni-fire, #da1fb8);
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 600;
  text-decoration: none;
}
body.blog .loop-entry .entry-title,
body.archive .loop-entry .entry-title {
  font-family: var(--wp--preset--font-family--fraunces, "Fraunces", Georgia, serif);
  font-weight: 400;
}

/* ============================================================
   FIX 9 — Single-post WIDTH CONSISTENCY + lower-section readability.
   The prev/next nav, the related-posts block (it's .alignfull) and the comments
   broke out to full-bleed while the article sat in a narrow column — and their
   text was unreadable (related titles sat on a stray light background; the
   comment headings were dark-on-dark). Align the WHOLE post to the site content
   width (1152px — same as the header/footer band), neutralise the full-bleed
   breakout, and force readable dark-theme text throughout. */

/* One frame for the entire post: article, hero, nav, related, comments. */
body.single-post #main.site-main > .content-wrap {
  max-width: 1152px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Related posts ("Other posts"): stop the .alignfull breakout and drop Kadence's
   light background so it matches the dark site; make all its text readable. */
body.single-post .entry-related.alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  left: auto !important;
  right: auto !important;
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.single-post .entry-related .related-title,
body.single-post .entry-related > h2,
body.single-post .entry-related .entry-title,
body.single-post .entry-related .entry-title a {
  color: var(--agni-light, #f7f5f2) !important;
}
body.single-post .entry-related .entry-title {
  font-family: var(--wp--preset--font-family--fraunces, "Fraunces", Georgia, serif);
}
body.single-post .entry-related .entry-taxonomies .category-links a {
  color: var(--agni-fire, #da1fb8) !important;
}
body.single-post .entry-related .entry-meta,
body.single-post .entry-related .entry-meta a,
body.single-post .entry-related .posted-on,
body.single-post .entry-related .posted-by,
body.single-post .entry-related time {
  color: var(--agni-muted-dark, #a7a3af) !important;
}

/* Comments: readable headings, labels and text on the dark background. */
body.single-post .comments-area .comments-title,
body.single-post .comments-area .comment-reply-title,
body.single-post .comments-area #reply-title,
body.single-post .comments-area .comment-author,
body.single-post .comments-area .comment-author a,
body.single-post .comments-area .comment-metadata a,
body.single-post .comments-area .comment-content,
body.single-post .comments-area .comment-content p,
body.single-post .comments-area > p,
body.single-post .comments-area label {
  color: var(--agni-light, #f7f5f2) !important;
}
body.single-post .comments-area .comment-notes,
body.single-post .comments-area .comment-form-cookies-consent,
body.single-post .comments-area .comment-form-cookies-consent label,
body.single-post .comments-area .logged-in-as,
body.single-post .comments-area .logged-in-as a {
  color: var(--agni-muted-dark, #a7a3af) !important;
}
body.single-post .comments-area .required { color: var(--agni-fire, #da1fb8) !important; }

/* Prev / next post navigation: readable labels + titles, consistent spacing. */
body.single-post .post-navigation .post-title,
body.single-post .post-navigation a { color: var(--agni-light, #f7f5f2) !important; }
body.single-post .post-navigation .nav-subtitle { color: var(--agni-muted-dark, #a7a3af) !important; }
body.single-post .post-navigation a:hover .post-title { color: var(--agni-fire, #da1fb8) !important; }