/**
 * Kestrel Helper — Frontend Stylesheet
 *
 * 1. Scoped Search focus shadow (Intercom-style elevated card)
 * 2. Documentation content typography (tighter for docs post type)
 * 3. Documentation term/tag display fixes
 *
 * @package KestrelHelper
 */


/* ==========================================================================
   1. Scoped Search — Focus Shadow
   ========================================================================== */

/**
 * Default state: subtle resting shadow for depth cue.
 */
.wp-block-search.is-scoped-search .wp-block-search__inside-wrapper {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	border-radius: 8px;
	transition: box-shadow 0.2s ease;
}

/**
 * Focus state: elevated card shadow matching Intercom's help center.
 * Uses :focus-within so the shadow appears when the input is focused.
 * Suppress browser default outline on the input — the wrapper shadow
 * serves as the focus indicator instead.
 */
.wp-block-search.is-scoped-search:focus-within .wp-block-search__inside-wrapper {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.wp-block-search.is-scoped-search .wp-block-search__input:focus {
	outline: none;
	border-color: transparent;
	box-shadow: none;
}

/**
 * Joined button: remove the gap between input and button so they
 * read as a single control. The wrapper's border-radius clips the
 * outer corners; inner corners are flattened so the seam is invisible.
 */
.wp-block-search.is-scoped-search .wp-block-search__inside-wrapper {
	gap: 0;
	overflow: hidden;
}

.wp-block-search.is-scoped-search .wp-block-search__input {
	border-right: none;
	border-radius: 8px 0 0 8px;
}

.wp-block-search.is-scoped-search .wp-block-search__button {
	border-radius: 0 8px 8px 0;
	margin-left: 0;
}


/* ==========================================================================
   2. Documentation Typography
   ==========================================================================
   Scoped to `.single-docs` body class so these overrides only apply to
   single doc article pages — blog posts and pages keep theme defaults.

   Design rationale:
   - Heading sizes reduced (H2 capped at 2rem vs theme default 2.35rem)
   - Tighter spacing between content blocks (small preset vs default medium)
   - List items use compact line-height with near-zero vertical gaps
   - Reference: Intercom help center typography patterns
   ========================================================================== */

/* --- Block gap ---------------------------------------------------------- */

/**
 * Reduce the spacing between content blocks within doc articles.
 * Theme default block gap is clamp(1.5rem, 4vw, 2rem) (medium preset).
 * Override to the small spacing preset: clamp(.5rem, 2.5vw, 1rem).
 * Direct selector needed because WordPress inlines layout margins.
 */
.single-docs .wp-block-post-content {
	--wp--style--block-gap: var(--wp--preset--spacing--small);
}

.single-docs .wp-block-post-content > * + * {
	margin-block-start: var(--wp--preset--spacing--small);
}

/* --- Headings ----------------------------------------------------------- */

/**
 * H2 — Primary section headings.
 * Theme default: fluid 1.5rem → 2.35rem (up to ~37px).
 * Docs override: capped at 2rem (32px), with 1em top margin for
 * section separation. No bottom margin — the block gap handles it.
 */
.single-docs .wp-block-post-content h2 {
	font-size: clamp(1.35rem, 5vw, 2rem);
	line-height: 1.25;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

/**
 * First heading in the doc doesn't need extra top margin — it follows
 * directly after the TOC / header area.
 */
.single-docs .wp-block-post-content > h2:first-child,
.single-docs .wp-block-post-content > .wp-block-heading:first-child {
	margin-top: 0;
}

/**
 * H3 — Sub-section headings.
 * Theme default: fluid 1.2rem → 1.65rem.
 * Docs override: tighter, proportional to reduced H2.
 */
.single-docs .wp-block-post-content h3 {
	font-size: clamp(1.15rem, 4vw, 1.4rem);
	line-height: 1.3;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

/**
 * H4 — Tertiary headings.
 * Theme default: fluid 1rem → 1.165rem.
 * Docs override: minimal adjustment, slightly bolder presence.
 */
.single-docs .wp-block-post-content h4 {
	font-size: clamp(1rem, 2vw, 1.15rem);
	line-height: 1.35;
	margin-top: 1em;
	margin-bottom: 0;
}

/* --- Body text ---------------------------------------------------------- */

/**
 * Paragraphs — slightly tighter line-height than theme default (1.5).
 * 1.55 keeps readability while feeling more compact.
 */
.single-docs .wp-block-post-content p {
	line-height: 1.55;
}

/* --- Lists -------------------------------------------------------------- */

/**
 * Lists in docs benefit from tight spacing. Short instruction-style
 * items need minimal vertical gaps between them.
 */
.single-docs .wp-block-post-content ul,
.single-docs .wp-block-post-content ol {
	padding-left: 1.5em;
	margin-top: 0.25em;
	margin-bottom: 0.5em;
}

.single-docs .wp-block-post-content li {
	line-height: 1.4;
	margin-bottom: 0;
	padding-bottom: 0;
}

/**
 * Nested lists — more breathing room before a sub-list so it reads
 * as a distinct group under its parent item.
 */
.single-docs .wp-block-post-content li > ul,
.single-docs .wp-block-post-content li > ol {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

/* --- Tables ------------------------------------------------------------- */

/**
 * Tighter table cells for documentation.
 */
.single-docs .wp-block-post-content .wp-block-table td,
.single-docs .wp-block-post-content .wp-block-table th {
	padding: 0.5em 0.75em;
	line-height: 1.4;
}

/* --- Code blocks -------------------------------------------------------- */

/**
 * Inline code — slightly smaller with subtle background.
 */
.single-docs .wp-block-post-content code:not(pre code) {
	font-size: 0.9em;
	padding: 0.15em 0.35em;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.04);
}

/**
 * Code blocks — compact padding.
 */
.single-docs .wp-block-post-content pre {
	padding: 1em 1.25em;
	line-height: 1.5;
	font-size: 0.875rem;
}


/* ==========================================================================
   3. Documentation Term/Tag Display
   ========================================================================== */

/**
 * Hide the comma separator between term-button–styled post terms.
 * Uses visibility: hidden (not display: none) so the space between
 * buttons is preserved while the comma character disappears.
 */
.single-docs .is-style-term-button .wp-block-post-terms__separator {
	visibility: hidden;
}


/* ==========================================================================
   4. Group Block Link Wrapper
   ==========================================================================
   When a Group/Row/Stack block has a link URL, the render filter wraps its
   inner content in a real <a> so cmd-click, right-click, middle-click,
   keyboard nav, and screen readers all work natively.

   display: contents makes the anchor invisible to layout — flex and grid
   children behave as if they belong to the outer group wrapper directly.
   This is critical for Row (flex) and Stack (flex-column) variations.
   ========================================================================== */

a.kc-group-link {
	display: contents;
	color: inherit;
	text-decoration: none;
}

a.kc-group-link:hover,
a.kc-group-link:focus {
	color: inherit;
	text-decoration: none;
}

/**
 * Reset browser default block margins for text elements directly inside
 * the anchor. `display: contents` preserves layout, but CSS selectors like
 * `.wp-block-group > p { margin: 0 }` or `> * + *` (theme block-gap rules)
 * don't traverse the anchor in the DOM tree, so browser defaults resurface.
 *
 * Inline styles from the editor's spacing controls still win by specificity,
 * so intentional per-block margins are preserved.
 */
a.kc-group-link > :where(p, h1, h2, h3, h4, h5, h6) {
	margin-block-start: 0;
	margin-block-end: 0;
}

/**
 * Full-silhouette hit target.
 *
 * With `display: contents` the anchor has no box, so clicks on the group's
 * internal gaps (padding, flex spacing, flex `justify-content: space-between`
 * empty space) fall through to the group instead of the anchor. Add an
 * absolutely positioned pseudo-element that overlays the parent group
 * exactly, so any click inside the group's silhouette reaches the anchor
 * and preserves native link behaviors (middle-click, right-click menu).
 *
 * `:has()` establishes the positioning context only on groups that actually
 * contain our anchor, avoiding unintended `position: relative` on every
 * group site-wide.
 */
.wp-block-group:has( > a.kc-group-link ) {
	position: relative;
}

a.kc-group-link::before {
	content: '';
	position: absolute;
	inset: 0;
	cursor: pointer;
}

/*
 * Focus indicator (WCAG 2.4.7). `display: contents` leaves the anchor with
 * no box, so a native outline can't render on the anchor itself. Draw the
 * focus ring on the overlay pseudo instead — it matches the clickable area
 * exactly, and `border-radius: inherit` picks up the parent group's corners.
 */
a.kc-group-link:focus-visible {
	outline: none;
}

a.kc-group-link:focus-visible::before {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: inherit;
}

/*
 * Interactive children (buttons, form controls) must stack above the overlay
 * so their own clicks register. Our filter already refuses to wrap groups
 * containing nested `<a>` tags, so we don't need to elevate those.
 */
.wp-block-group:has( > a.kc-group-link ) :is( button, input, select, textarea, label, summary, [role="button"] ) {
	position: relative;
	z-index: 1;
}