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