/* ============================================================
 * Site chrome — only the rules Tailwind utilities cannot express.
 *
 * All visual styling lives in `tw-*` classes (built into
 * build/css/tailwind.css). This file is intentionally tiny.
 * ============================================================ */

/* WP core injects `:where(.wp-site-blocks) > * { margin-block-start: 24px }`
   AND `:root :where(.is-layout-flow) > * { margin-block-start: 24px }` for
   default block spacing. We drive vertical rhythm ourselves (per-template
   gap below + per-block padding system), so neutralize the implicit 24px.
   `:where()` has 0 specificity, so a plain selector wins. */
.wp-site-blocks > *,
.is-layout-flow > *,
.wp-block-post-content > * { margin-block-start: 0; margin-block-end: 0; }

/* === Inter-section gap (tartalom template only) ===
   Default rhythm: 50px mobile, 80px desktop between any two consecutive
   top-level sibling blocks (`.wp-block-post-content > * + *`).
   Landing + front-page templates intentionally skip this rule — they rely on
   each block's own padding.
   Note: this does NOT cascade into `.alteo-toc-section__inner` — children
   there (including core/paragraph) would otherwise get 80px between every
   sibling, which over-spaces consecutive paragraphs. Blocks nested inside a
   toc-section rely on their own per-block padding for rhythm. */
.alteo-tartalom-main .wp-block-post-content > * + * { margin-top: 50px; }
@media (min-width: 768px) {
	.alteo-tartalom-main .wp-block-post-content > * + * { margin-top: 80px; }
}

/* Per-block opt-out: any direct child with `data-merge-up="1"` foregoes its
   inter-section margin, AND zeroes its own top padding when it's a spacing
   wrapper, AND the previous sibling's bottom padding too (so two blocks can
   visually fuse — e.g., two dark bands without a seam). Applied at both
   scopes (top-level and inside a toc-section). */
.wp-block-post-content > [data-merge-up="1"],
.alteo-toc-section__inner > [data-merge-up="1"] { margin-top: 0; }
.wp-block-post-content > .alteo-block-spacing[data-merge-up="1"],
.alteo-toc-section__inner > .alteo-block-spacing[data-merge-up="1"] { padding-top: 0; }
.wp-block-post-content > .alteo-block-spacing:has(+ [data-merge-up="1"]),
.alteo-toc-section__inner > .alteo-block-spacing:has(+ [data-merge-up="1"]) { padding-bottom: 0; }

/* Per-block padding system — see inc/block-spacing.php. Every supported
   `alteo/*` block is wrapped in `<div class="alteo-block-spacing">` by the
   render_block filter. Default 0/0 — the tartalom-template inter-section gap
   (80px desktop / 50px mobile) drives the rhythm; per-block overrides via ACF
   set the four CSS variables inline to add internal padding when needed. */
.alteo-block-spacing {
	padding-top: var(--alteo-block-pt-m, 0px);
	padding-bottom: var(--alteo-block-pb-m, 0px);
}
@media (min-width: 768px) {
	.alteo-block-spacing {
		padding-top: var(--alteo-block-pt-d, 0px);
		padding-bottom: var(--alteo-block-pb-d, 0px);
	}
}

/* Block directly under a toc-section heading: drop top padding (no-op for
   stock blocks now that default is 0, but still useful when an author sets
   non-zero internal padding on a block placed first under a heading). */
.alteo-toc-section__inner > .alteo-block-spacing:first-child { padding-top: 0; }

/* First/last block of the entire page: hug the top of the content area and the
   bottom edge (the surrounding wrapper supplies the page-level padding already).
   Covers both top-level blocks (landing pages, CTAs sandwiched between sections)
   AND inner blocks when the bookend element is a toc-section. */
.wp-block-post-content > .alteo-block-spacing:first-child,
.alteo-tartalom-main > .alteo-block-spacing:first-child,
.wp-block-post-content > [data-alteo-toc-section]:first-child .alteo-toc-section__inner > .alteo-block-spacing:first-child,
.alteo-tartalom-main > [data-alteo-toc-section]:first-child .alteo-toc-section__inner > .alteo-block-spacing:first-child {
	padding-top: 0;
}
.wp-block-post-content > .alteo-block-spacing:last-child,
.alteo-tartalom-main > .alteo-block-spacing:last-child,
.wp-block-post-content > [data-alteo-toc-section]:last-child .alteo-toc-section__inner > .alteo-block-spacing:last-child,
.alteo-tartalom-main > [data-alteo-toc-section]:last-child .alteo-toc-section__inner > .alteo-block-spacing:last-child {
	padding-bottom: 0;
}

/* Tailwind preflight is disabled (clashes with WP reset), so browser-default
   block-level margins on headings, paragraphs, blockquotes, lists, etc. leak
   through. Spacing in this theme is driven explicitly by `tw-mt-*`, `tw-mb-*`,
   `tw-space-y-*`, gap utilities, so zero out the defaults globally. */
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }

/* Push page content below the fixed header.
   Mobile: 72px main bar only.
   ≥ lg (1024px): 72px main bar + 32px utility strip = 108px (we round to 6.75rem). */
body { padding-top: 4.5rem; }

@media (min-width: 1024px) {
	body { padding-top: 6.75rem; }
}

/* WordPress' custom-logo output ships with its own classes outside our
   Tailwind scope; clamp height to match the Lovable spec. */
.alteo-header .custom-logo,
.alteo-header .custom-logo-link img { height: 1.75rem; width: auto; }
.alteo-footer .custom-logo,
.alteo-footer .custom-logo-link img { height: 2rem; width: auto; filter: brightness(0) invert(1); }

/* Mega panel open state — paired with `tw-max-h-0 tw-opacity-0` baseline
   emitted by alteo_render_mega_panels(). The is-open class is toggled by
   site-chrome.js. Keeping the state in plain CSS avoids needing Tailwind to
   safelist max-h-[640px] / opacity-100 utilities for run-time-added classes. */
.alteo-scope .alteo-mega-panel.is-open {
	max-height: 640px;
	opacity: 1;
}

/* Suppress the max-h / opacity transition during a panel→panel switch.
   site-chrome.js adds .is-snap to both the closing and opening panel for one
   frame so the swap is instantaneous (matches MegaNavbar.jsx, where a single
   container stays open and only its inner content re-renders). The initial
   open from closed state and the final close back to closed state still
   animate, because .is-snap is absent then. */
.alteo-scope .alteo-mega-panel.is-snap {
	transition: none;
}

/* Active-state underline on a top-level mega trigger.
   Mirrors MegaNavbar.jsx: the `<span>` underline inside the trigger animates
   `scale-x-0` → `scale-x-100` while its panel is open. We override Tailwind's
   `--tw-scale-x` variable (not the full `transform` string) so the existing
   `tw-transition-transform tw-duration-300` interpolates the scale from 0→1
   on open and 1→0 on close. */
.alteo-scope [data-alteo-mega-trigger][aria-expanded="true"] > span[aria-hidden="true"] {
	--tw-scale-x: 1;
}

/* Search expand overlay — port of HeaderSearchExpand.jsx fade-down keyframe.
   The `tw-hidden` baseline is removed by JS before `.is-open` is set in the
   next frame, so the animation runs from opacity:0/translateY(-6px) → 0. */
.alteo-scope .alteo-search-expand.is-open {
	animation: alteoSearchFade 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes alteoSearchFade {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}
/* Main bar inner row fades out while the overlay is open. The row keeps its
   layout (no display swap), only opacity + pointer-events change so the
   overlay can sit on top without reflow. */
.alteo-scope .alteo-bar-row-hidden {
	opacity: 0;
	pointer-events: none;
}

/* Contain horizontal overflow from full-bleed blocks that use the 100vw
   negative-margin trick (alteo/press-contact-band, alteo/news-archive).
   100vw includes the vertical-scrollbar gutter, so the block ends up slightly
   wider than the available content area and triggers a horizontal scrollbar
   on the document. `overflow-x: clip` on the main page wrappers hides that
   spill without breaking sticky positioning of descendants (unlike
   `overflow: hidden`, which would break sticky). */
main.alteo-default-wrap,
main.alteo-tartalom-wrap,
main.alteo-page-wrap,
main.alteo-single-wrap {
	overflow-x: clip;
}

/* Single-post (hír) prose typography — ports SinglePost.jsx body:
     <div className="font-body text-foreground/85 leading-[1.75] text-base md:text-lg space-y-6">
   `core/paragraph` blocks inside `core/post-content` don't carry tw-classes,
   so we cascade the same intent here. The vertical rhythm between paragraphs
   is restored locally because the global `p { margin: 0 }` reset above
   neutralizes browser defaults. */
.alteo-single-prose p {
	font-size: 1rem;
	line-height: 1.75;
	color: hsl(var(--foreground) / 0.85);
}
.alteo-single-prose p + p { margin-top: 1.5rem; }
@media (min-width: 768px) {
	.alteo-single-prose p { font-size: 1.125rem; }
}

/* Vertical rhythm between successive `wp-block-paragraph` runs.
   The global `p { margin: 0 }` reset (theme.json / block styles) collapses
   paragraphs together which reads as one giant text block. Restore a
   consistent bottom margin so long prose sections (Ismerj meg minket,
   inline paragraphs under toc-sections) breathe. */
.alteo-scope p.wp-block-paragraph,
.wp-block-post-content p.wp-block-paragraph {
	margin-bottom: 1rem;
}
.alteo-scope p.wp-block-paragraph:last-child,
.wp-block-post-content p.wp-block-paragraph:last-child {
	margin-bottom: 0;
}