/*
Theme Name: Sens Biologique
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: sens-biologique
*/

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

/* Core buttons wearing the design's own styling. core/button puts its className
   on the WRAPPER, which is exactly where .btn or .link-arrow belong — so the
   design styles the wrapper and the inner <a> only has to get out of the way.
   The all:unset drops WordPress's button look; font and colour are inherited
   from the wrapper. Not one design declaration is duplicated.
   The marker class is explicit on purpose: matching on the class NAME missed
   .link-arrow, which kept core's dark pill, and a button added by hand must
   keep the default styling. */
/* The media picker a generated repeater puts on a card. Several designs lay an
   absolutely positioned overlay across the card — a gradient veil, a hover
   layer — which then sits above the button and swallows the click. Editor only:
   nothing here reaches the front. */
.editor-styles-wrapper .components-button.is-media-pick {
	position: relative;
	z-index: 10;
}

/* Core's buttons container brings its own spacing — zero, from theme.json's
   blockGap — while the design sets the gap on the element that used to hold the
   links (.hero__actions has gap: 14px). Inheriting takes that value, whatever
   each section chose, without naming a single one. */
/* Core sets .wp-block-buttons > .wp-block-button { display: inline-block }, two
   classes deep, so it outranks the design's own .btn / .link-arrow — which are
   inline-flex with a gap. Their gap then did nothing and the arrow sat flush
   against the label. This restores the value the design already declares. */
.wp-block-buttons > .wp-block-button.is-design-button {
	display: inline-flex;
}

.wp-block-buttons.is-design-buttons {
	gap: inherit;
	flex-wrap: inherit;
	justify-content: inherit;
	align-items: inherit;
}

.wp-block-button.is-design-button > .wp-block-button__link,
.wp-block-button.is-design-button > .wp-block-button__link:hover,
.wp-block-button.is-design-button > .wp-block-button__link:focus,
.wp-block-button.is-design-button > .wp-block-button__link:active {
	all: unset;
	cursor: pointer;
	/* display:contents removes the link's own box, so the wrapper lays out the
	   label exactly as the design wrote it — a bare text node next to its ::after
	   arrow. As a flex item the box added a second gap and its own hover. */
	display: contents;
}

/* A visual the design lays out itself — a ratio, a crop, a radius on the element
   — becomes core/image so it offers the media library. Core's <figure> brings a
   margin and shrink-to-fit sizing the design never asked for, and the <img>
   inside must fill the box the way background-size: cover did. */
.wp-block-image.is-design-media {
	margin: 0;
	overflow: hidden;
}

.wp-block-image.is-design-media img {
	display: block;
	width: 100%;
	height: 100%;
	/* A percentage height resolves against a container that has none — the design
	   sizes these boxes with aspect-ratio — so the editor rendered the image at
	   its natural ratio. Inheriting the ratio sizes it the same way the box is
	   sized, and falls back to the image's own when the box sets none. */
	aspect-ratio: inherit;
	object-fit: cover;
	border-radius: inherit;
}

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