/*
Theme Name:   Hello Elementor Child - Subat Sleep Course
Theme URI:    https://subat-sleep-course-v2.qawam.center/
Description:  Child theme for the Subat Sleep Course landing page. Carries the ArbFONTS TheYearOfTheCamel Arabic webfont and the design tokens ported from the original Webflow build, so neither is lost when Hello Elementor updates.
Author:       Mostafa
Template:     hello-elementor
Version:      3.10.0
Text Domain:  hello-elementor-child
*/

/* ---------------------------------------------------------------------------
   Design tokens — ported 1:1 from the Webflow (Finsweet Client-First) build.
   Variable names are kept identical to the source so the two can be diffed.
   Note: --brand--red-inferno is gold (#be8208), not red. The name comes from
   the original Webflow style guide; kept as-is to stay diffable.
   --------------------------------------------------------------------------- */

:root {
	/* Brand */
	--brand--red-inferno: #be8208;
	--brand--brown: #1e1e1e;
	--brand--mystic-navy: #142940;
	--brand--snow-white: #f1f0eb;

	/* Neutral */
	--neutral--black: #000;
	--neutral--white: #fff;
	--neutral--neutral: #666;
	--neutral--neutral-dark: #444;
	--neutral--neutral-light: #eee;
	--neutral--transparent: transparent;

	/* Semantic — theme layer */
	--theme--text-primary: var(--brand--brown);
	--theme--text-secondary: var(--brand--red-inferno);
	--theme--text-alternate: var(--neutral--white);
	--theme--bg-primary: var(--neutral--black);
	--theme--bg-secondary: var(--brand--mystic-navy);
	--theme--bg-alternate: var(--neutral--white);
	--theme--border-primary: var(--brand--red-inferno);
	--theme--border-secondary: var(--brand--brown);
	--theme--link-primary: var(--brand--red-inferno);
	--theme--btn-primary-bg: var(--brand--red-inferno);
	--theme--btn-primary-bg-hover: var(--brand--snow-white);
	--theme--btn-primary-text: var(--neutral--white);
	--theme--btn-secondary-bg: var(--neutral--transparent);
	--theme--btn-secondary-text: var(--brand--red-inferno);

	/* Radius */
	--radius--small: 0.25rem;
	--radius--medium: 0.5rem;
	--radius--large: 1rem;

	/* Containers */
	--container--small: 48rem;
	--container--medium: 64rem;
	--container--large: 79.375rem;

	/* Spacing scale */
	--space--xxtiny: 0.25rem;
	--space--xtiny: 0.5rem;
	--space--tiny: 0.75rem;
	--space--xxsmall: 1rem;
	--space--xsmall: 1.25rem;
	--space--small: 1.5rem;
	--space--medium: 2rem;
	--space--large: 3rem;
	--space--xlarge: 4rem;
	--space--xxlarge: 5rem;
	--space--huge: 6rem;
	--space--xhuge: 8rem;
	--space--xxhuge: 12rem;

	/* Section padding */
	--section-padding--small: 3rem;
	--section-padding--medium: 5rem;
	--section-padding--large: 8rem;

	--font-family--heading: 'Arbfonts Theyearofthecamel', system-ui, sans-serif;
	--font-family--body: 'Arbfonts Theyearofthecamel', system-ui, sans-serif;
}

/* Tablet */
@media screen and (max-width: 991px) {
	:root {
		--space--xlarge: 3rem;
		--space--xxlarge: 4rem;
		--space--huge: 5rem;
		--space--xhuge: 6rem;
		--space--xxhuge: 8rem;
		--section-padding--medium: 4rem;
		--section-padding--large: 6rem;
	}
}

/* Mobile landscape and below */
@media screen and (max-width: 767px) {
	:root {
		--space--small: 1.5rem;
		--space--medium: 1.5rem;
		--space--large: 2.5rem;
		--space--xlarge: 3rem;
		--space--xxlarge: 3rem;
		--space--huge: 4rem;
		--space--xhuge: 5rem;
		--space--xxhuge: 6rem;
		--section-padding--large: 5rem;
	}
}

/* ---------------------------------------------------------------------------
   Base — RTL Arabic
   --------------------------------------------------------------------------- */

body {
	font-family: var(--font-family--body);
	color: var(--theme--text-primary);
	background-color: var(--neutral--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family--heading);
	font-weight: 700;
	color: inherit;
}

/* Arabic numerals render with inconsistent metrics across weights in this
   typeface; lock tabular figures so prices and week numbers stay aligned. */
.price, .week-number, [data-numeric] {
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

/* Hello Elementor ships a max-width on .site-main that boxes in full-bleed
   sections. The Webflow build is edge-to-edge, so release it. */
.site-main {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------------
   Fixed-header clearance on inner pages.

   The header is position:fixed (as in the original), so it sits outside the
   document flow and paints over whatever begins at the top of the page. On the
   landing page that is intended — the hero is designed to run underneath it.
   Every other page (checkout, cart, order received) starts its content at y=0
   and the first heading disappears behind the bar.

   Measured: the header sits 40px from the top and is ~98px tall, so it occupies
   the first 138px; the values below add a little breathing room on top of that.
   Expressed as a custom property so the clearance can be adjusted in one place
   if the header's height or offset changes.

   Deliberately NOT measured from JavaScript: an earlier version published the
   header height into a variable at runtime, and after the header was rebuilt it
   resolved to 186px and threw off every in-page anchor.
   --------------------------------------------------------------------------- */

:root {
	--subat-header-clearance: 162px;
}

@media screen and (max-width: 767px) {
	:root {
		/* Header offset drops to 24px and the bar is shorter on small screens. */
		--subat-header-clearance: 120px;
	}
}

body:not(.home) .site-main {
	padding-top: var(--subat-header-clearance);
	/* The landing page's last section carries its own generous bottom padding;
	   the checkout and cart do not, so their content ran straight into the top
	   edge of the footer. */
	padding-bottom: var(--_layout---spacing--xxlarge, 5rem);
}

@media screen and (max-width: 767px) {
	body:not(.home) .site-main {
		padding-bottom: var(--_layout---spacing--xlarge, 3rem);
	}
}