/**
 * Limestone theme — Theme layer
 *
 * A THIN layer for needs the carried Webflow CSS does not cover — purely
 * WordPress-native surfaces and progressive-enhancement helper states:
 *   - Gutenberg block alignment + media for insight article bodies
 *   - WP comment list + comment form
 *   - WP pagination / posts navigation (.page-numbers, the_posts_pagination)
 *   - filtered-out grid items on the Customer Success listing
 *   - the JS-on baseline for drawers / dropdowns (content visible w/o JS)
 *
 * Rules here use the --ld-* tokens and WP-core class names ONLY. It must
 * NOT override carried Webflow component styles — notably it does NOT
 * touch `.cs-cw-filter-tab.is-active`, `.homeai__dropdown-menu.is-open`
 * or `.navbar13_container.is-open`, which the carried CSS already owns.
 *
 * Loaded LAST (after tokens -> webflow -> base) so WP-only surfaces sit on
 * top without disturbing the pixel baseline.
 *
 * @package Limestone
 * @since   0.1.0
 */

/* =========================================================================
 * 1. Gutenberg block alignment — insight (blog) article bodies
 * The carried CSS has no .wp-block-* / align* rules. Constrain block
 * content to the design content width and support wide / full alignments.
 * Scoped to .entry-content so it never leaks into ACF-built sections.
 * ====================================================================== */
.entry-content {
  max-width: var(--ld-content, 1160px);
  margin-left: auto;
  margin-right: auto;
}

.entry-content > * {
  max-width: 100%;
}

.entry-content > .alignwide {
  max-width: min(var(--ld-maxw, 1440px), 100%);
}

.entry-content > .alignfull {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.entry-content .alignleft {
  float: left;
  margin: 0 var(--ld-gap, 24px) var(--ld-gap, 24px) 0;
}

.entry-content .alignright {
  float: right;
  margin: 0 0 var(--ld-gap, 24px) var(--ld-gap, 24px);
}

.entry-content .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.entry-content figure {
  margin: var(--ld-vpad, 80px) 0;
}

.entry-content figcaption,
.entry-content .wp-caption-text {
  margin-top: 8px;
  font-family: var(--ld-font-mono, monospace);
  font-size: 13px;
  color: var(--ld-grey, #71767f);
  text-align: center;
}

.entry-content a {
  color: var(--ld-purple, #5d4af5);
}

/* =========================================================================
 * 2. WordPress comments
 * No carried styling exists for native comments. Keep it on-brand + minimal.
 * ====================================================================== */
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list .children {
  list-style: none;
  margin: 0 0 0 var(--ld-gap, 24px);
  padding: 0;
}

.comment-body {
  padding: var(--ld-gap, 24px) 0;
  border-bottom: 1px solid var(--ld-line, #e6e9ee);
}

.comment-author .fn {
  font-family: var(--ld-font-display, sans-serif);
  font-weight: 600;
  color: var(--ld-ink, #1a1a1a);
}

.comment-metadata,
.comment-metadata a {
  font-family: var(--ld-font-mono, monospace);
  font-size: 12px;
  color: var(--ld-grey, #71767f);
  text-decoration: none;
}

.comment-respond .comment-reply-title {
  font-family: var(--ld-font-display, sans-serif);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--ld-font-body, sans-serif);
  color: var(--ld-ink, #1a1a1a);
  background-color: var(--ld-paper, #fff);
  border: 1px solid var(--ld-line, #e6e9ee);
  border-radius: var(--ld-radius, 6px);
}

.comment-form input:focus,
.comment-form textarea:focus {
  border-color: var(--ld-purple, #5d4af5);
}

/* =========================================================================
 * 3. Pagination / posts navigation
 * Targets the_posts_pagination() (.page-numbers) + the_post_navigation().
 * ====================================================================== */
.ld-pagination,
.pagination {
  margin: var(--ld-vpad, 80px) auto 0;
  max-width: var(--ld-content, 1160px);
}

.ld-pagination .nav-links,
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  font-family: var(--ld-font-mono, monospace);
  font-size: 14px;
  color: var(--ld-ink, #1a1a1a);
  background-color: var(--ld-soft, #fafafb);
  border: 1px solid var(--ld-line, #e6e9ee);
  border-radius: var(--ld-radius, 6px);
  text-decoration: none;
}

a.page-numbers:hover {
  border-color: var(--ld-purple, #5d4af5);
  color: var(--ld-purple, #5d4af5);
}

.page-numbers.current {
  color: var(--ld-paper, #fff);
  background-color: var(--ld-purple, #5d4af5);
  border-color: var(--ld-purple, #5d4af5);
}

.post-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: var(--ld-gap, 24px);
  max-width: var(--ld-content, 1160px);
  margin: var(--ld-vpad, 80px) auto 0;
}

.post-navigation a {
  color: var(--ld-purple, #5d4af5);
  text-decoration: none;
}

/* =========================================================================
 * 4. Customer Success listing — filtered-out items
 * The carried CSS owns the tab active state (.cs-cw-filter-tab.is-active)
 * and the grid look. We only add how a card disappears when filtered out.
 * main.js toggles the [hidden] attribute (no content is removed from DOM,
 * preserving the AI-friendly "everything in server HTML" rule — it remains
 * crawlable and is restored when the "All" tab is active).
 * ====================================================================== */
.cs-cw-card[hidden] {
  display: none;
}

/* =========================================================================
 * 5. Progressive-enhancement baseline (JS-off fallback)
 * Hard requirement: ZERO JS-gated content. Drawers / accordions / dropdown
 * answers must be fully readable with JS disabled. The carried CSS hides
 * some of these by default (e.g. .homeai__dropdown-menu { display:none }),
 * so when JS is unavailable we force them open. main.js adds `.ld-js` to
 * <html> on boot; these rules apply only in its ABSENCE.
 * ====================================================================== */
html:not(.ld-js) [data-ld-drawer-panel],
html:not(.ld-js) [data-ld-accordion-panel] {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}

html:not(.ld-js) .homeai__dropdown-menu {
  position: static;
  display: block;
  box-shadow: none;
}

/* When JS IS active, collapsible panels start closed but remain in the DOM. */
.ld-js [data-ld-drawer-panel][aria-hidden="true"],
.ld-js [data-ld-accordion-panel][aria-hidden="true"] {
  display: none;
}

/* =========================================================================
 * 6. AI persona answers (home "Ask AI for a summary" card)
 * The carried webflow.css has no .homeai__answer* rules, so the visibility
 * contract lives here. main.js toggles .is-active on the matching
 * .homeai__answer panel (see initAiPersona). Every answer is in the server
 * HTML; with JS off ALL answers stay visible (no JS-gated content), and with
 * JS on only the active one shows. Token-based spacing only — no attempt to
 * restyle the carried card.
 * ====================================================================== */
.homeai__answers {
  margin-top: var(--ld-gap, 24px);
}

/* No-JS / default: show every answer so the full content is always readable. */
.homeai__answer {
  display: block;
}

/* JS on: collapse to the single active panel. */
.ld-js .homeai__answer {
  display: none;
}

.ld-js .homeai__answer.is-active {
  display: block;
}