/*
 * ThemeFlow base styles.
 *
 * DESIGN RULE: keep this minimal and structural only. Do NOT define global
 * colors, typography scales, spacing systems, container widths, button styles,
 * form styles, or WooCommerce component styles here. Elementor global styles
 * and WooCommerce own those. This file only provides:
 *   - a light box-sizing reset
 *   - responsive media defaults
 *   - alignment / gallery classes WordPress emits
 *   - a neutral structural fallback for non-Elementor pages
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
embed,
iframe,
object,
video {
	max-width: 100%;
	height: auto;
}

figure {
	margin: 1em 0;
}

/* WordPress alignment classes. */
.alignleft {
	float: left;
	margin-right: 1.5em;
	margin-bottom: 1em;
}

.alignright {
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1em;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignwide {
	max-width: 1100px;
}

.alignfull {
	max-width: 100%;
}

/* WordPress caption. */
.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	font-size: 0.85em;
}

/* Gallery grid emitted by [gallery]. */
.gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.gallery-item {
	flex: 1 1 auto;
}

/* Sticky post marker (structural only). */
.sticky {
	display: block;
}

/*
 * Neutral structural container for classic (non-Elementor) templates only.
 * Scoped to ThemeFlow's own wrappers so it can never leak into Elementor
 * containers or WooCommerce markup. No colors or fonts declared.
 */
.themeflow-site-content {
	width: 100%;
}

.themeflow-main {
	width: 100%;
	max-width: var(--themeflow-content-max, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(1rem, 4vw, 2rem);
	padding-right: clamp(1rem, 4vw, 2rem);
}

/* Do not constrain Elementor-built canvases. */
body.elementor-page .themeflow-main {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/*
 * Elementor Theme Builder content locations (single/archive) own their own
 * layout, so the builder wrapper drops ThemeFlow's classic content-width
 * constraint. Scoped to ThemeFlow's own landmark; emitted only by
 * themeflow_render_elementor_main().
 */
.themeflow-main--builder {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/*
 * Sticky navigation.
 *
 * Enabled per site in Appearance → Customize → ThemeFlow → Navigation →
 * Sticky Navigation (OFF by default). Every rule below is scoped to the
 * `.themeflow-sticky-navigation` body class, so with the option off — and on
 * every site that simply updates the theme — nothing here matches and the
 * rendered result is unchanged.
 *
 * The sticky element is ThemeFlow's own header, not the <nav> inside it: a
 * sticky box only stays stuck while its CONTAINING BLOCK is on screen, and the
 * nav's containing block is the short <header> itself, so a sticky nav would
 * come unstuck within a screen of scrolling. The header's containing block is
 * #page, which spans the document.
 *
 * TWO TARGETS, BOTH OWNED BY THEMEFLOW:
 *   .themeflow-site-header      — ThemeFlow's own fallback header
 *   .themeflow-elementor-header — ThemeFlow's wrapper around an Elementor Theme
 *                                 Builder header (emitted by
 *                                 inc/elementor/compatibility.php, and only
 *                                 while this option is on)
 * Exactly one of the two exists on any given page. ThemeFlow deliberately
 * targets NO Elementor-generated selector: it pins its own wrapper, so the
 * builder markup inside is never touched and nothing breaks when Elementor
 * changes its class names. This is what lets a site switch Elementor's own
 * Sticky motion effect OFF and use one sticky implementation site-wide.
 *
 * Behaviour only — no colors, typography, spacing, or background are declared,
 * so a sticky header still looks exactly like the site's own header.
 */
.themeflow-sticky-navigation .themeflow-site-header,
.themeflow-sticky-navigation .themeflow-elementor-header {
	position: sticky;
	/* Cleared by the admin-bar rules below; 0 for logged-out visitors. */
	top: var(--themeflow-sticky-offset, 0px);
	/*
	 * Minimum reliable stacking level: above ordinary page content, and well
	 * below the admin bar (99999), ThemeFlow's skip link (100000), and
	 * Elementor's overlays, popups, and dialogs.
	 */
	z-index: 100;
}

/*
 * WordPress admin bar offset. #wpadminbar is fixed at the top of the viewport
 * for logged-in users, so a header pinned to top: 0 would sit underneath it.
 * The values mirror core's own admin-bar.css: 32px, 46px below 782px, and —
 * below 600px on the front end, where core switches #wpadminbar to
 * position: absolute so it scrolls away — no offset at all.
 */
.themeflow-sticky-navigation.admin-bar {
	--themeflow-sticky-offset: 32px;
}

@media screen and (max-width: 782px) {
	.themeflow-sticky-navigation.admin-bar {
		--themeflow-sticky-offset: 46px;
	}
}

@media screen and (max-width: 600px) {
	.themeflow-sticky-navigation.admin-bar {
		--themeflow-sticky-offset: 0px;
	}
}

/*
 * Short viewports (landscape phones, and any window zoomed far enough that the
 * header would eat the screen) fall back to the normal, non-sticky header.
 * A pinned header must never leave a visitor with only a sliver of content.
 */
@media screen and (max-height: 480px) {
	.themeflow-sticky-navigation .themeflow-site-header,
	.themeflow-sticky-navigation .themeflow-elementor-header {
		position: static;
	}
}

/*
 * In-page anchors and the skip link scroll their target to the very top of the
 * viewport, which is exactly where the sticky header sits. ThemeFlow cannot
 * measure the header in CSS and will not ship JavaScript to do it, so the
 * offset is an opt-in hook: set --themeflow-sticky-scroll-padding to your
 * header height (in Elementor's custom CSS, or a child theme) if the site uses
 * in-page anchors. Applied to the scroll container (the root element), and
 * only while the option is enabled.
 */
html:has(body.themeflow-sticky-navigation) {
	scroll-padding-top: var(--themeflow-sticky-scroll-padding, 0px);
}