/*
 * Global layout corrections.
 * - We build every page's hero/header inside the block content, so Blocksy's
 *   automatic page-title hero is redundant → hide it (legal pages carry their
 *   own <h1> in content).
 * - Full-width sections must butt together: kill the WP block-gap margins that
 *   otherwise reveal the body background as a coloured stripe between sections.
 * - Consistent light-grey content base (matches the design).
 */

/* Hide Blocksy's auto page-title hero (block heroes replace it) */
.hero-section[data-type="type-1"],
.page-title.entry-title,
header.entry-header > .page-title { display: none !important; }

/* Flush full-width sections — no inter-section stripe (zero ALL top-level
   block margins inside the page content + remove the content-area padding so
   the block sections, which own their own padding, butt directly together). */
#main .entry-content > *,
.ct-main-content .entry-content > * { margin-block: 0 !important; }
#main .entry-content,
.ct-main-content .entry-content { margin-block: 0 !important; }
#main, .ct-main-content,
.single-product #main, .page #main {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Content base = design light grey (so any residual gap is consistent) */
body,
body .ct-main-styles,
body #main { background-color: var(--sisa-bg-archive); }

/* Homepage: pull content flush under the header (kill Blocksy's content-area
   top spacing so the hero cover butts directly against the header). */
.home #main,
.home #main > .ct-container,
.home #main > div,
.home .entry-content,
.home article { padding-top: 0 !important; margin-top: 0 !important; }
.home #main [class*="vertical-spacing"],
.home .ct-container[data-content] { padding-top: 0 !important; }

/* Design pages (body class from functions/setup/body-classes.php): their first
   content section already carries the design's own top padding, so Blocksy's
   ~60px content-vertical-spacing above it is dead air. Same pattern as .home. */
.sisa-flush-top #main,
.sisa-flush-top #main > .ct-container,
.sisa-flush-top #main > .ct-container-full,
.sisa-flush-top #main > div,
.sisa-flush-top .entry-content,
.sisa-flush-top article { padding-top: 0 !important; margin-top: 0 !important; }
.sisa-flush-top #main [class*="vertical-spacing"],
.sisa-flush-top #main [data-vertical-spacing],
.sisa-flush-top .ct-container[data-content] { padding-top: 0 !important; }

/* Shop / category archives: flush under header (the category panel provides the
   top spacing), removing the big gap left by the (now hidden) WC page title. */
.woocommerce-page #main,
.archive.woocommerce #main,
.post-type-archive-product #main,
.tax-product_cat #main {
	padding-top: 28px !important;
}
/* Blocksy's content container carries its own ~60px top padding ON TOP of #main's
   — zero it on archives so the gap below the header is just the 28px above. */
.woocommerce-page #main > .ct-container,
.archive.woocommerce #main > .ct-container,
.post-type-archive-product #main > .ct-container,
.tax-product_cat #main > .ct-container { padding-top: 0 !important; }
@media (max-width: 600px) {
	.woocommerce-page #main,
	.archive.woocommerce #main,
	.post-type-archive-product #main,
	.tax-product_cat #main {
		padding-top: 20px !important;
	}
}
.woocommerce-products-header { display: none !important; }
/* Blocksy's archive title/description hero is redundant (our panel + top bar replace it) */
.woocommerce-page .hero-section,
.archive.woocommerce .hero-section,
.tax-product_cat .hero-section,
.post-type-archive-product .hero-section { display: none !important; }

/* Core columns: a column with no explicit width must grow to fill (WP default
   `flex: 1 1 0`). Some configs leave wp-block-column without it, so a no-width
   column collapses to 0 and its text wraps 1-char-wide (e.g. the /notvorrat/
   calculator band). Columns WITH an inline flex-basis (e.g. 16%/auto) keep it. */
.wp-block-column:not([style*="flex-basis"]) { flex-grow: 1; flex-basis: 0; min-width: 0; }
/* ...and a column WITH an explicit width/basis must NOT grow (else it eats the
   space and the auto column collapses to 0). This is WP core's columns behavior. */
.wp-block-column[style*="flex-basis"] { flex-grow: 0; }
/* An auto-width column's button group must hug its content (fit-content), else a
   full-width is-layout-flex button group balloons the auto column and starves the
   flexible one (the /notvorrat/ calc button column was 1031px for a 192px button). */
.wp-block-column[style*="flex-basis:auto"] > .wp-block-buttons { width: fit-content; max-width: 100%; }

/* Stack columns on mobile (WP core default; core CSS isn't fully loaded here). */
@media (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: wrap; }
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; }
}

/* Cart + checkout have no block hero of their own — re-show Blocksy's page-title
   H1 (hidden globally above) so the pages open with a proper display heading
   instead of dead grey space. Styled to the system in checkout.css. */
body.woocommerce-cart .hero-section[data-type="type-1"],
body.woocommerce-checkout .hero-section[data-type="type-1"],
body.woocommerce-cart .page-title.entry-title,
body.woocommerce-checkout .page-title.entry-title,
body.woocommerce-cart header.entry-header > .page-title,
body.woocommerce-checkout header.entry-header > .page-title { display: block !important; }

/* Legal / plain text pages keep Blocksy's page title + normal content padding
   (they don't carry a block hero like the designed pages do). */
body.page-id-23 .hero-section[data-type="type-1"],
body.page-id-19023 .hero-section[data-type="type-1"],
body.page-id-11 .hero-section[data-type="type-1"] { display: block !important; }
body.page-id-23 #main, body.page-id-19023 #main, body.page-id-11 #main {
	padding-top: 48px !important; padding-bottom: 64px !important; background-color: var(--sisa-panel);
}

/* Keyboard focus — a branded, always-visible ring (audit: no :focus-visible
   styling anywhere). Yellow ring with a thin ink rim so it reads on white, grey,
   yellow AND ink surfaces. :where() keeps specificity at zero so any component
   can still override deliberately. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--sisa-yellow, #f4d435);
	outline-offset: 1px;
	box-shadow: 0 0 0 4px rgba(26, 26, 26, .9);
	border-radius: 0;
}

/* Display H1s without an explicit margin-top get WP's em-based blockGap (~105px
   at 72px font) — kicker floats detached from the headline (notvorrat hero).
   Zero it; designed pages set their own margins inline. */
.entry-content .wp-block-group > h1.wp-block-heading:not([style*="margin-top"]) { margin-block-start: 0; }

/* Gutenberg outline buttons carry border-color/width inline but rely on core's
   frontend CSS (not loaded here) for border-style — the outline never painted
   (e.g. the notvorrat hero "Berater starten"). */
.wp-block-button__link.has-border-color { border-style: solid; }