/*
Theme Name:   Renda
Theme URI:    https://renda.example.com
Description:  Custom child theme of Frost for Renda. Adds Renda-specific blocks and brand styling.
Author:       Deelip Khanal
Author URI:   https://www.linkedin.com/in/deelipk/
Template:     frost
Version:      0.8.2
Text Domain:  renda
*/

/* Frontend styles are loaded per-block via block.json. This file holds
   theme-level resets that don't belong to any single block. */

/* ---- Vertical spacing resets ---------------------------------------
   Frost / WP emit several layout rules that add margin-block-start
   between sibling blocks (the "block-gap"), plus padding-top on
   <main>. For a hero layout where the header → trust strip → hero
   should sit flush against each other, we explicitly reset those.
   Anything individual blocks need is set via Inspector → Dimensions. */

/* Browser default body margin (8px) — visible as a thin gap above
   the site header. */
body {
	margin: 0;
}

/* ---- Section side gutter (single source of truth) ------------------
   Every full-bleed Renda section, the header bar, the footer, and the
   WordPress root padding all read this one variable for their horizontal
   inset, so the content of any block — Renda or core "Wide"/"Full" — lines
   up at the same edges. Mobile / tablet keep the fluid clamp; on large
   screens (>=1280px) the gutter doubles to give the content more breathing
   room. Change it here once and it flows everywhere. */
:root {
	--renda-gutter: clamp(1rem, 4vw, 3rem);
}
@media (min-width: 1280px) {
	:root {
		--renda-gutter: 6rem;
	}
}

/* Full-width sections break out of the root padding (Frost uses
   useRootPaddingAwareAlignments) with negative margins. On some viewport
   widths that breakout overshoots by ~the scrollbar width, producing a sliver
   of horizontal scroll. Clip it at the page wrapper. `clip` (not `hidden`)
   avoids creating a scroll container, so it won't break position: sticky if
   it's added later. */
html,
body {
	overflow-x: clip;
}
.wp-site-blocks {
	overflow-x: clip;
}

/* Frost adds vertical padding to the <main> wrapper that holds the
   post content. For full-width hero pages this creates a visible gap
   between the header and the first block. */
main.wp-block-group {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Block-specific margin resets live in each block's own style.scss
   (e.g. trust-strip uses `margin-block-start: 0 !important` so it can
   butt against the site header). We intentionally leave the natural
   block-gap on hero/grid blocks so consecutive sections stack with
   the theme's default spacing. */

/* Align the header content with the footer content. The footer (renda/site-
   footer) full-bleeds its dark background but caps its columns + bottom row at
   the site-wide content width (theme.json settings.layout.wideSize, currently
   1670px), centred, with clamp(1.25rem,4vw,3rem) side padding. The header bar
   mirrors that exactly so the Renda logo lines up vertically with where the
   footer content starts.

   Side padding is set here (rather than as inline block padding) so it matches
   the footer's clamp at every width; the inner bar is the centred wide-size box. */
.renda-site-header {
	padding-inline: var(--renda-gutter, clamp(1.25rem, 4vw, 3rem));
}
.renda-site-header .renda-header__bar {
	max-width: var(--wp--style--global--wide-size, 1670px);
	margin-inline: auto;
	/* Three-column grid: logo (left) | nav (centred) | empty (right). The two
	   1fr side columns are equal, so the auto middle column — the nav — stays
	   centred in the header regardless of the logo's width. Overrides the
	   block's flex `space-between`, which pushed the nav to the right once the
	   cart/account icons were removed and only two items were left. */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
}

/* On mobile the centred 3-column grid gets cramped (the nav collapses to a
   hamburger). Switch to a simple flex row so the logo sits left and the nav /
   actions sit right, shrinking gracefully instead of overflowing. */
@media (max-width: 782px) {
	.renda-site-header {
		padding-inline: clamp(1rem, 4vw, 1.5rem);
	}
	.renda-site-header .renda-header__bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 0.5rem;
	}
}

/* The root layout injects a block-gap margin above the first section that
   follows the site header — it shows as extra white space below the trust
   strip, making the feature bar look top/bottom uneven.

   This sibling can be either a full-width hero placed directly after the
   header (Site Editor override) OR a <main> wrapper around the page/home
   content (theme-file templates). Target whatever follows the header so the
   content butts flush against it in both cases; the only spacing left below
   the strip is then its own symmetric padding. <main>'s own top padding is
   already zeroed above, and the hero is main's first child, so nothing else
   reintroduces the gap. */
.wp-site-blocks > .site-header + * {
	margin-block-start: 0 !important;
}

/* Same block-gap, on the footer side: WordPress adds a margin above the footer
   template part (<footer class="site-footer">), showing as a gap between the
   last content section (e.g. the brand-logos strip) and the footer. The block
   CSS inside each part can't reach this template-part wrapper, so reset it
   here to butt the footer flush against the content above it. */
.wp-site-blocks > .site-footer {
	margin-block-start: 0 !important;
}