/**
 * InnerG base styles: design tokens, reset, typography, and minimal
 * fallback layout for the few non-Elementor templates (404, search,
 * blog archive, fallback header/footer). Section-level design lives in
 * each InnerG Core Elementor widget's own scoped stylesheet.
 *
 * Token values below are the brand defaults (InnerG Brand Guidelines).
 * InnerG Core's Theme Options module generates a cached tokens.css that
 * is enqueued after this file and overrides any value an admin changes.
 */

:root {
	/* Brand palette — primary */
	--innerg-sage: #73947c;
	--innerg-terracotta: #9e6b52;
	--innerg-tan: #cc9e78;
	--innerg-taupe: #cfb299;
	--innerg-cream: #ede8de;

	/* Brand palette — secondary */
	--innerg-dark: #2b291a;
	--innerg-brown-700: #544036;
	--innerg-brown-600: #5e4f3b;
	--innerg-gray-500: #85807a;
	--innerg-gray-200: #dedede;

	/* Semantic tokens consumed by widgets/templates */
	--background: var(--innerg-cream);
	--foreground: var(--innerg-dark);
	--muted-foreground: var(--innerg-gray-500);
	--border: color-mix(in oklab, var(--innerg-dark) 12%, var(--innerg-cream));
	--secondary: color-mix(in oklab, var(--innerg-sage) 10%, var(--innerg-cream));
	--card: color-mix(in oklab, white 55%, var(--innerg-cream));
	--accent: var(--innerg-sage);
	--accent-foreground: #ffffff;
	--brand-dark: var(--innerg-dark);
	--brand-terracotta: var(--innerg-terracotta);

	/* Typography */
	--font-sans: 'Cairo', ui-sans-serif, system-ui, sans-serif;
	--font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Layout */
	--container-max: 80rem; /* 1280px */
	--radius: 2px;
	--space-section: clamp(3.5rem, 6vw, 7rem);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Belt-and-braces alongside body's own overflow-x below: some mobile
	   browsers don't reliably propagate body's overflow to the viewport
	   for touch/rubber-band scrolling, so a fixed, full-bleed element
	   (e.g. the header search modal, sized against the layout viewport)
	   can leave a tiny horizontally-scrollable gap on touch devices even
	   though nothing visibly overflows.
	   `clip` (not `hidden`) deliberately: setting `overflow` to anything
	   other than `visible` on html/body turns them into "scroll
	   containers" per spec, which position:sticky descendants (the
	   header) then stick relative to instead of the viewport — this is
	   the classic "sticky header randomly stops working" bug. `clip`
	   still clips the same horizontal overflow but isn't a scrollable
	   overflow value, so it doesn't create that scroll container and
	   sticky keeps working. */
	overflow-x: clip;
}

body {
	margin: 0;
	min-height: 100%;
	background-color: var(--background);
	color: var(--foreground);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.6;
	overflow-x: clip;
}

/* Every full_width section on this site is a single edge-to-edge widget
   (Hero, Auth, Profile, Booking, Instructor Directory, ...) with no admin
   control ever exposed to zero its column's padding — so it's silently
   carrying Elementor's own default 10px column padding sitewide. That
   inset is invisible wherever the widget's own background matches the
   page background, but shows up as a hard 10px frame the instant a widget
   sits on a contrasting background (e.g. Profile's dark header band). */
.elementor-section-full_width > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding: 0;
}

/* Display type scale. Fluid (clamp-based) so headings scale smoothly
   between mobile and desktop instead of jumping at fixed breakpoints;
   ranges are tuned to the brand's editorial proportions (a hero H1 reads
   at ~88px on desktop, ~48px on mobile, per the design reference). Any
   individual widget can still override via its own Typography control. */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 500;
	line-height: 1.15;
}

h1 {
	font-size: clamp(2.5rem, 1.7rem + 3.5vw, 5.5rem);
}

h2 {
	font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
}

h3 {
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2.25rem);
}

h4 {
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	font-family: var(--font-sans);
	font-weight: 600;
}

h5, h6 {
	font-size: 1rem;
	font-family: var(--font-sans);
	font-weight: 600;
}

p {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

img, svg, video {
	display: block;
	max-width: 100%;
	height: auto;
}

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: 0;
}

/* Accessibility helpers */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.innerg-skip-link {
	position: absolute;
	inset-inline-start: 6px;
	top: -80px;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--brand-dark);
	color: #fff;
	transition: top 0.2s ease;
}

.innerg-skip-link:focus {
	top: 6px;
}

/* Applied to <html> by main.js while an off-canvas mobile panel is open, so
   the page behind it can't scroll. */
html.innerg-scroll-locked {
	overflow: hidden;
}

/* Layout helpers */
.innerg-container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

/* Legal document pages (Privacy Policy, Terms of Use, Cookie Settings —
   EN + AR): plain dense text content, so it gets its own reading-width
   column and right-sized sub-headings instead of the hero-scale h1-h6
   clamp above (which is meant for section titles, not document body
   copy) and the global ul/ol reset (which strips bullets entirely). */
.innerg-legal-content {
	max-width: 50rem;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2rem);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.innerg-legal-content h2 {
	font-size: 1.375rem;
	margin-block: 2rem 0.75rem;
}

.innerg-legal-content h2:first-child {
	margin-block-start: 0;
}

.innerg-legal-content p {
	margin-block-end: 1rem;
}

.innerg-legal-content ul {
	list-style: disc;
	padding-inline-start: 1.5rem;
	margin-block-end: 1rem;
}

.innerg-legal-content ol {
	list-style: decimal;
	padding-inline-start: 1.5rem;
	margin-block-end: 1rem;
}

.innerg-legal-content li {
	margin-block-end: 0.5rem;
}

.innerg-legal-content li:last-child {
	margin-block-end: 0;
}

.innerg-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.innerg-site-content {
	flex: 1 0 auto;
}

/* Header layout. position:sticky is opt-in (Global → "Sticky on scroll"
   in the Customizer, see Header_Renderer::render()'s .innerg-header--sticky
   class) — a non-sticky header stays in normal flow and scrolls away with
   the page. background/border here are just a pre-render fallback; the
   real values (opacity/blur/border toggle) come from Header_Renderer's
   own inline style. */
#innerg-header {
	z-index: 100;
	background: var( --background );
	border-bottom: 1px solid var( --border );
}

.innerg-header--sticky {
	position: sticky;
	top: 0;
}

/* Transparent-over-hero (Global → "Transparent over the hero", front page
   only — see Header_Renderer::render()). Removed from flow and pinned to
   the viewport so the hero section renders underneath it; placed after
   .innerg-header--sticky above so position:fixed wins by source order if
   an admin somehow has both toggles on (equal specificity, single class
   each). main.js adds .is-scrolled past a small scroll threshold, which
   simply stops the override below from firing — Header_Renderer's own
   inline style (opacity/blur/border) then applies normally, giving the
   solidify-on-scroll effect. */
.innerg-header--transparent-hero {
	position: fixed;
	inset-inline: 0;
	top: 0;
	transition: background-color 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
}

.innerg-header--transparent-hero:not( .is-scrolled ) {
	background-color: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border-bottom-color: transparent !important;
}

/* Sticky sub-schema (Header Builder → Settings → Sticky header). Shadow
   only appears once actually stuck (.is-scrolled, added by main.js past a
   small threshold — same signal the transparent-hero state above uses). */
.innerg-header--sticky-shadow.is-scrolled {
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.08 );
}

/* "Slide after scrolled down" effect: stays in normal flow (no position:
   sticky) until main.js adds .is-stuck once scrolled past the header's own
   height, then it's pinned + slides down into view. "Stick on scroll" (the
   default effect) needs no override — the base .innerg-header--sticky rule
   above already covers it. */
.innerg-header--sticky-delayed {
	position: static;
}

.innerg-header--sticky-delayed.is-stuck {
	position: fixed;
	inset-inline: 0;
	top: 0;
	animation: innerg-header-slide-down 0.25s ease;
}

@keyframes innerg-header-slide-down {
	from {
		transform: translateY( -100% );
	}
	to {
		transform: translateY( 0 );
	}
}

/* Hide-on-scroll-down (data-hide-on-scroll-down="1"): main.js toggles
   .is-header-hidden while the visitor scrolls down, removes it the moment
   they scroll up even slightly — a common pattern for reclaiming vertical
   space on long pages without losing the header entirely. */
.innerg-header--sticky.is-header-hidden {
	transform: translateY( -100% );
}

.innerg-header--sticky {
	transition: transform 0.25s ease;
}

/* Sticky clone (data-sticky-height): once stuck, compacts the header down
   to the configured clone height and hides the upper/lower rows, leaving
   only the main row's essentials visible — the same visual outcome as a
   literal cloned mini-bar, achieved by shrinking the existing header
   in place rather than duplicating markup. */
.innerg-header--sticky-clone.is-scrolled {
	--header-height: var( --innerg-header-sticky-clone-height, 60px );
}

.innerg-header--sticky-clone.is-scrolled .innerg-header-row--upper,
.innerg-header--sticky-clone.is-scrolled .innerg-header-row--lower {
	display: none;
}

/* Global tab (Header Builder → Settings → General). */
.innerg-header--overlap {
	margin-bottom: calc( -1 * var( --header-height, 64px ) );
}

.innerg-header--boxed .innerg-header-row__inner {
	max-width: var( --innerg-header-max-width, var( --container-max ) );
	margin-inline: auto;
	border-inline: 1px solid var( --border );
}

.innerg-header--dark-dropdowns .innerg-nav-menu-desktop .sub-menu,
.innerg-header--dark-dropdowns .innerg-search-modal {
	background: var( --brand-dark, #1a1a1a );
	color: #fff;
}

.innerg-header-row__inner {
	position: relative;
	display: flex;
	/* nowrap (not wrap): with wrap, once the zones' combined content is
	   even a few px too wide for the contained max-width, the LAST zone
	   (Right) drops wholesale onto a visually broken second line — offset,
	   misaligned, spilling past the row's own fixed height — rather than
	   anything shrinking gracefully. min-width:0 on the Center zone below
	   is what actually lets the layout absorb tight widths instead: Left
	   and Right keep their real content size (flex:0 0 auto), and Center
	   (the only flexible zone) shrinks first. */
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: var( --innerg-header-max-width, var( --container-max ) );
	margin-inline: auto;
	padding-inline: var( --innerg-header-padding-inline, 1.5rem );
}

.innerg-header-row--main .innerg-header-row__inner {
	height: var( --header-height, 64px );
}

.innerg-header-zone {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.innerg-header-zone--center {
	flex: 1 1 auto;
	justify-content: center;
	/* Flex items default to min-width:auto, which floors shrinking at the
	   content's own intrinsic size — exactly what defeats flex-shrink here
	   (see the nowrap comment above). */
	min-width: 0;
}

.innerg-header-zone--left,
.innerg-header-zone--right {
	flex: 0 0 auto;
}

/* Separator element (Header Builder). --innerg-separator-color is set
   directly by Header_Renderer::render_instance() from the placement's own
   Style → Background colour when configured; falls back to the theme's
   border token so it looks right with zero configuration. */
.innerg-header-element--separator {
	display: flex;
	align-items: center;
}

.innerg-header-separator {
	display: inline-block;
	width: 1px;
	height: var( --innerg-separator-height, 24px );
	background: var( --innerg-separator-color, var( --border ) );
}

#innerg-header .innerg-logo img {
	/* 0.5625 = reference's fixed 36px logo (h-9) over its fixed 64px nav
	   (h-16) — pixel-exact at the default header height, and scales
	   proportionally if an admin changes Global → Header height. */
	max-height: calc( var( --header-height, 64px ) * 0.5625 );
	width: auto;
}

/* Footer Builder layout: dark brand background, light text, generous
   padding. Row/zone structure mirrors the Header's exact pattern (see
   .innerg-header-row* above) — a row stacks its zones responsively via
   flex-wrap, same as every other row/zone pairing in this theme. */
#innerg-footer {
	position: relative;
	background: var( --footer-bg, var( --brand-dark ) );
	color: var( --footer-text, #fff );
	padding-block: 2rem;
	overflow: hidden;
}

/* Fixed spacing baselines matching the reference's mb-16 (gap before the
   divider) and pt-8 (gap after it, before the copyright line) — kept as
   CSS rather than the rows' own padding_y so that field stays purely
   additive/admin-controlled on top of a pixel-accurate default. Generic
   (not tied to specific row identities like the old fixed upper/main/
   lower model) since the footer is now an arbitrary N-row builder:
   ":not(:last-child)" is a structural CSS pseudo-class so it always
   matches whichever row actually renders last, regardless of row_count;
   the adjacent-sibling rule reads the one row that had its border
   enabled (the ".innerg-footer-row--has-border" marker class Footer_
   Renderer prints), whichever row that happens to be. */
.innerg-footer-row:not(:last-child) .innerg-footer-row__inner {
	margin-block-end: 4rem;
}

.innerg-footer-row--has-border + .innerg-footer-row .innerg-footer-row__inner {
	padding-block-start: 2rem;
}

/* No #innerg-footer a color rule here — it was a redundant ID-specificity
   duplicate of the site-wide `a { color: inherit; }` above, and being an
   ID selector it was silently beating every link-colour rule in
   footer.css (nav columns, social, legal), since a class selector can
   never out-specificity an ID no matter how many classes it stacks. */

/* Decorative watermark (see Footer_Renderer::render_decoration()) — CSS
   filter turns any source image into a flat white silhouette, matching
   the reference's `filter:brightness(0) invert(1)` trick so admins can
   pick any monogram/mark without needing a pre-whitened asset. */
.innerg-footer-decoration {
	position: absolute;
	top: -5rem;
	inset-inline-end: -8rem;
	width: 30rem;
	max-width: none;
	height: auto;
	pointer-events: none;
	user-select: none;
	filter: brightness( 0 ) invert( 1 );
}

.innerg-footer-row__inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 3rem;
	max-width: var( --innerg-footer-max-width, var( --container-max ) );
	margin-inline: auto;
	padding-inline: var( --innerg-footer-padding-inline, 1.5rem );
}

.innerg-footer-column {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
	flex: 1 1 220px;
}

/* Custom-width columns (see Footer_Renderer::column_style()) carry an
   inline flex-basis/max-width percentage — only !important can override
   an inline style, so this is the one deliberate use of it in the theme.
   Matches the reference's `grid-cols-1 md:grid-cols-4` single-column
   mobile stack instead of an uneven partial wrap. */
@media ( max-width: 768px ) {
	.innerg-footer-column {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
}

/* Minimal fallback header/footer (used only until InnerG Core's Header
   and Footer Builders are configured, or if the plugin is inactive). */
.innerg-fallback-header {
	border-bottom: 1px solid var(--border);
	background: var(--background);
}

.innerg-fallback-header__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 1rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.innerg-fallback-header__nav ul {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.innerg-fallback-footer {
	border-top: 1px solid var(--border);
	background: var(--brand-dark);
	color: #fff;
}

.innerg-fallback-footer__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 2rem 1.5rem;
	font-size: 0.8125rem;
}

/* Blog archive / search / 404 (non-Elementor templates) */
.innerg-archive,
.innerg-single,
.innerg-404 {
	padding-block: var(--space-section);
}

.innerg-archive__title,
.innerg-404__title {
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--brand-dark);
	margin-block-end: 2rem;
}

.innerg-card {
	border: 1px solid var(--border);
	margin-block-end: 1.5rem;
}

.innerg-card__body {
	padding: 1.5rem;
}

.innerg-card__title {
	font-size: 1.5rem;
	margin-block-end: 0.5rem;
}

.innerg-card__title a:hover {
	color: var(--accent);
}

.innerg-posted-on {
	display: inline-block;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted-foreground);
	margin-block-end: 0.75rem;
}

.innerg-404 {
	text-align: center;
}

.innerg-404__link {
	display: inline-block;
	margin-block-start: 1.5rem;
	padding: 0.875rem 2rem;
	background: var(--brand-dark);
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.75rem;
}

.innerg-404__link:hover {
	background: var(--accent);
}