/*
Theme Name: ECOTHIB Énergie
Theme URI:
Author: html-to-wp-blocks
Description: Block theme generated from a design system (custom CSS tokens preserved).
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: ecothib
*/

/* WP integration overrides (the generated theme structure differs from the raw design).
 * The header template part renders wrapped in <header class="wp-block-template-part">,
 * a box only as tall as the header itself. A position:sticky header inside it would
 * un-stick the moment that short wrapper scrolls off — i.e. immediately. display:contents
 * removes the wrapper's box so the design's sticky .header resolves its containing block
 * against the full-height page (.wp-site-blocks) and sticks across the whole scroll, as
 * authored. (Footer part is a <footer> wrapper and is left untouched.) */
header.wp-block-template-part { display: contents; }

/* Eyebrow/kicker: the design uses an inline <span class="kicker"> whose .kicker rule
 * already sets display:inline-flex (the dash, caps, spacing). Patterns emit it as a
 * core/paragraph (<p class="kicker">), which adds the browser's default top margin —
 * spacing the eyebrow lower than the source. Zero it so <p class="kicker"> matches the
 * original <span> (the class still supplies margin-bottom). */
.kicker { margin-top: 0; }

/* Centered section heads: the design centers some heads via an inline
 * text-align:center on .section__head (faq, process…). Patterns can't carry that
 * inline style through the block editor, so expose it as an editable utility class
 * on the head group instead. Per-section (not all heads are centered). */
.section__head--center { text-align: center; margin-left: auto; margin-right: auto; }

/* Footer social links now live in the contact column (below the contact list);
 * give them breathing room from the address above. */
.footer__contact-col .footer__social { margin-top: 18px; }

/* The contact band's eyebrow is amber in the design; the source carried it as an
 * inline style on the <span>. Now an editable <p class="kicker">, so the colour
 * lives in CSS (the design only set its ::before dash to amber, not the text). */
.cta-band__text .kicker { color: var(--amber); }

/* Editor parity: core/columns adds is-layout-flex (.wp-block-columns.is-layout-flex,
 * specificity 0,2,0) which overrides the design's grid classes inside the editor
 * iframe — on the front WordPress emits the same layout rule via :where() (zero
 * specificity), so the design grid wins there but not in the editor. Re-assert grid
 * for the design's grid containers with a higher-specificity, editor-scoped rule. */
.editor-styles-wrapper .wp-block-columns.benefits-grid,
.editor-styles-wrapper .wp-block-columns.diff__grid,
.editor-styles-wrapper .wp-block-columns.zone__grid { display: grid; }

/* Editor parity — full-bleed sections. The design is full-bleed: every top-level
 * section spans the viewport and its inner .wrap caps + centres the content. The
 * front template uses flow layout (no constraint), so sections fill the width.
 * The editor's root layout, however, caps non-aligned root blocks at contentSize
 * (1240px) — shrinking custom block sections (and their backgrounds) in the canvas
 * only, diverging from the front. Neutralise that cap inside the editor so sections
 * span the full canvas; their .wrap still centres content exactly as on the front. */
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright)) {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Simulateur layout corrections in the block context. */
.simu-panel { margin: 0; }
.simu-grid { align-items: start; }