/**
 * 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;
}

/* Helvetica Now Display — heading font for the carried Webflow pages (e.g.
   Private Equity). The carried webflow.css declares the font-family but its
   @font-face `src` was emptied during the home asset localization, so headings
   fell back to Helvetica Neue. Re-supply the self-hosted woff here — theme.css
   loads AFTER webflow.css, so this valid `src` wins the @font-face cascade.
   Lazy: the browser only fetches it on pages that actually use the family. */
@font-face {
  font-family: "Helvetica Now Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/hnd-regular.woff") format("woff");
}
@font-face {
  font-family: "Helvetica Now Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/hnd-medium.woff") format("woff");
}
@font-face {
  font-family: "Helvetica Now Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/hnd-bold.woff") format("woff");
}

/*
 * 4. Insights "load more" pagination button.
 * The carried .w-pagination-next is an <a>; without a global link reset the
 * browser default underlines its label. The live site shows it with no
 * underline, so match that (all other button styling is verbatim from
 * webflow.css). Scoped to the insights pagination anchor only.
 */
.fs-list_pagination_next,
.fs-list_pagination_next:hover,
.fs-list_pagination_next:focus {
  text-decoration: none;
}

/*
 * 5. Global pinstripes — the two vertical container-edge rules (live design).
 * The exported webflow.css ships .pinstripes-wrapper with a 0px border, but the
 * live site draws a 1px solid #e6e9ee rule on each side (at the .container-large
 * edges). Force that on so the fixed pinstripes overlay (markup in footer.php)
 * shows the dividers 1:1. Tablet/mobile keep webflow.css's display:none.
 */
.pinstripes-wrapper {
  /* The two page-level vertical rails. #e6e9ee is invisible on the light #f7f7f7
   * background (~14 contrast), so the page divider read as "missing" beside the
   * header on light pages (Sandro 2026-06-19 — it must be a visible PAGE line,
   * not a header-attached one). A slightly deeper grey makes the vertical rails
   * clearly present on light pages while staying subtle; on the purple sections
   * they read the same. Only the vertical rails change — horizontal section
   * dividers keep #e6e9ee. */
  border-left: 1px solid #e6e9ee;
  border-right: 1px solid #e6e9ee;
}

/*
 * #7 — the fixed pinstripes overlay sits at z-index:1, so sections that carry an
 * opaque background and their own stacking context (z-index:2, e.g. the purple
 * CTA band + footer) painted OVER the rails, making them "disappear" through the
 * contact section and footer (Anastasiia #7). Lift the overlay above those
 * section backgrounds and give the wrapper the overlay's full height so the two
 * vertical rules run continuously top-to-bottom. The rails are 1px lines in the
 * container gutter with pointer-events:none, so drawing them above the sections
 * is visually safe (they never cover real content) and stays below the header
 * and any modal/cookie chrome.
 */
.pinstripes {
  z-index: 4;
}
.pinstripes > .container-large,
.pinstripes-wrapper {
  height: 100%;
}

/* Contact page had TWO sets of vertical rails: its own `.cv2s-vlines` (a
 * contact-section-scoped divider) PLUS the now-site-wide global `.pinstripes`
 * (raised to z-index:4 above). They overlap at x=80/1280, so the rule read as a
 * doubled line. Drop the redundant contact-specific one and let the continuous
 * global rails carry the divider (matches every other page + Figma's single set). */
.cv2s-vlines {
  border-left-width: 0;
  border-right-width: 0;
}

/*
 * 6. Form-field keyboard focus ring.
 * The carried webflow.css sets `.w-input:focus,.w-select:focus { outline: 0 }`,
 * which beats base.css's global :focus-visible and leaves the contact + team
 * form fields with no visible keyboard focus indicator (WCAG 2.4.7). Restore it
 * on the :focus-visible state only (mouse users keep the clean Webflow look),
 * matching base.css's outline. theme.css loads after webflow.css so this wins.
 */
.w-input:focus-visible,
.w-select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ld-purple, #5d4af5);
  outline-offset: 2px;
}

/*
 * 7. Contact (cv2s) form — single-line field parity with the live site.
 * Our carried webflow.css export missed the cv2s overrides, so the single-line
 * inputs fall back to the default `.w-input` (1px #ccc border + 38px height)
 * inside a 60px wrap. Live = a 42px bordered WRAP holding a BORDERLESS 20px
 * input (the border lives on the wrap, not the field). Textarea wrap is already
 * correct, so it is excluded. Scoped to .cv2s-* (contact page only).
 */
.cv2s-input-wrap:not(.cv2s-wrap-textarea) {
  height: 42px;
  padding: 10px 12px;
  border: 1px solid #e6e9ee;
  box-sizing: border-box;
}
.cv2s-input:not(.cv2s-textarea) {
  height: 20px;
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
}
/* Required-field asterisk — Figma renders it tight against the label text in the
   same 12px run (#E51520), so drop the 2px gap and match the colour. */
.cv2s-req-star {
  color: #e51520;
  margin-left: 0;
  font-size: 12px;
}
/* Label → input gap: Figma's input component uses an 8px gap between the label
   and the field; the carried CSS used 4px. */
.cv2s-flabel {
  margin-bottom: 8px;
}
/* Textarea had its own 1px #ccc border on top of the field wrapper's border, so
   the project field read as a double frame. Live + Figma render the textarea
   itself borderless inside the wrapper. */
.cv2s-textarea,
textarea.cv2s-input {
  border: 0;
}
/* Contact-detail icons sat at 52×52 (filling the whole purple box); live + Figma
   render a 24×24 icon centred in the 52px box. Constrain to 24×24. */
.cv2s-cicon img,
.cv2s-cicon svg {
  width: 24px;
  height: 24px;
}
/* Mobile contact (Figma node 7120:14972 + live): 24px side gutter (the carried
   CSS dropped to 16px) and a 20px detail icon. */
@media (max-width: 767px) {
  .cv2s {
    padding-left: 24px;
    padding-right: 24px;
  }
  .cv2s-cicon img,
  .cv2s-cicon svg {
    width: 20px;
    height: 20px;
  }
}

/* ── Client Wins (/customer-success) mobile — Anastasiia row 42 (Design Audit) ──
 * SUPERSEDES the earlier #13 normalisation. That pass set 16px gutters + LEFT-
 * aligned + shrunk the filter chips (12px / 6-14 / 32h) to force one row. But the
 * Figma mobile node (6251-15824) AND the live site both want: 24px side gutters
 * (the rest of the mobile site uses 24px too), the filter chips CENTRED, and the
 * chips at full size (14px, 12/24 padding) — so they read as proper pills and wrap
 * to two centred rows, exactly like live. That is what Anastasiia's row-42 note
 * ("fix side margins / check tabs alignment + size") asks for.
 * Loaded after webflow.css, so these win without touching the carried baseline. */
@media (max-width: 767px) {
  .cs-cw-filters-sect { padding-left: 24px; padding-right: 24px; }
  /* R8 round-2 "side margins FAILED": the cards grid is .cw12-sect (the old
     .cs-cw-grid-sect-1 selector matched nothing, so the cards sat at the carried
     ~15px gutter while the header was at 24px). Align the cards to 24px. */
  .cw12-sect { padding-left: 24px; padding-right: 24px; }
  /* r4 (Design Audit 4) — the testimonial/case-study cards looked narrower than the
     title + tabs above them because .cw12-img is capped at max-width:360px: on wide
     phones (iPhone Pro/Max) the card stops at 360 while the rest of the page fills to
     the 24px gutters. Drop the cap so each card fills to the same 24px gutter width. */
  .cw12-img { max-width: none; }
  /* r4 — the violet speech-bubble cropped its bottom tail on Safari / wide phones:
     the baseline aspect-ratio:328/268 + auto height computes TALLER than the fixed
     300px container, and overflow:hidden clips the tail (Chromium hid it, Safari
     didn't — browser-dependent). Pin the bubble to all four 16px insets and drop the
     aspect-ratio so the preserveAspectRatio="none" SVG simply stretches to fill the
     inset box → the full bubble + tail always fit, deterministically, in every browser. */
  .cw12-img-tm .cw12-bubble {
    top: 16px;
    left: 16px;
    width: calc(100% - 32px);   /* BOTH dims explicit → the SVG's intrinsic 328/268 ratio
                                    is ignored (aspect-ratio only applies when a dimension is
                                    auto; `aspect-ratio:auto` on an <svg> means "use the viewBox
                                    ratio", which is why it kept clipping). preserveAspectRatio
                                    ="none" then stretches the path to fill the 16px-inset box → */
    height: calc(100% - 32px);  /* symmetric 16px insets, full bubble + tail, never crops. */
  }
  .cs-hero-section { padding-left: 24px; padding-right: 24px; padding-top: 140px; }
  /* R8 re-fix: the WHOLE header is centred in Figma (6251-15824) — title +
     subtitle, not just the chips. (My first pass centred only the chips and left
     the title/subtitle left-aligned → QA-failed.) */
  .cs-title,
  .cs-subtitle { text-align: center; }
  /* R8 round-2 (Anastasiia): title + subtitle font sizes were wrong (36/14);
     Figma 6251-15824 = H2/Medium 40/48 + P md/Regular 16/24. Upper gap above the
     title set to the Figma Main-Container 140px top padding. */
  .cs-title { font-size: 40px; line-height: 48px; }
  .cs-subtitle { font-size: 16px; line-height: 24px; }
  /* Filter chips (Figma 6251-15829) — ONE centred row, never wrapping. The Button
     Group is a single row (gap 8px, centred); each chip is hug-width with 12px 16px
     padding, 32px tall, DM Mono 14/14 uppercase, 20px pill radius. My earlier R8 pass
     used 12px 24px padding + 45px min-height → chips too wide → wrapped to two lines.
     Match Figma so ALL / CASE STUDIES / TESTIMONIALS sit on one line. */
  .cs-cw-filters-inner { justify-content: center; }
  .cs-cw-filters-row { justify-content: center; flex-wrap: nowrap; gap: 8px; }
  .cs-cw-filter-tab {
    min-height: 32px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 14px;
    white-space: nowrap;
    border-radius: 20px;
  }
}

/* ─── r4 (Design Audit 4) — phone card width ──────────────────────────────────
   The real cap on the card width is the GRID column, not .cw12-img: the carried
   baseline sets `.cw12-grid { grid-template-columns: minmax(0, 360px) }` at ≤767px,
   so on a wide phone (iPhone Pro/Max) the single card stops at 360px and floats
   centred — narrower than the 24px-gutter title + tabs above it. Widen the phone
   column to 1fr so the card fills to the same 24px gutters. Scoped to the phone
   breakpoint (≤479) so the 480–767 single-column case is untouched. */
@media (max-width: 479px) {
  .cw12-grid { grid-template-columns: minmax(0, 1fr); }
}