/**
 * global.css — design tokens + shared utilities
 *
 * ⚠ VERIFY: colour and font values below are best estimates. The live site's
 * stylesheets couldn't be read directly. Open https://weightlossoperation.com.au
 * in DevTools, inspect the Elementor Global Colours/Fonts (or --e-global-*
 * variables on :root) and paste the real values here. Every block reads
 * from these tokens, so nothing else needs changing.
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Open+Sans:wght@400;600&display=swap');

:root {

	/* Colours */
	--clr-primary        : #0F2C4C;  /* VERIFY — deep navy: hero overlay, headings, footer bg */
	--clr-primary-dark   : #0A1F36;  /* VERIFY — hover state for primary buttons, footer bar */
	--clr-accent         : #5BAE45;  /* VERIFY — medical green: buttons, icons, eyebrows */
	--clr-accent-dark    : #4A9337;  /* VERIFY — accent hover */
	--clr-text-body      : #3A3A3A;  /* body copy */
	--clr-text-muted     : #6B7580;  /* secondary copy, captions */
	--clr-white          : #FFFFFF;
	--clr-bg-light       : #F3F6F9;  /* alternating light section bg */
	--clr-border         : #DCE3EA;  /* card borders, dividers, form fields */
	--clr-overlay        : 15, 44, 76;    /* RGB triplet of --clr-primary, for rgba() overlays — keep in sync */
	--clr-white-rgb      : 255, 255, 255; /* RGB triplet of --clr-white, for translucent borders/text on dark bgs */

	/* Font families */
	--ff-heading : 'Poppins', 'Helvetica Neue', Arial, sans-serif;   /* VERIFY */
	--ff-body    : 'Open Sans', 'Helvetica Neue', Arial, sans-serif; /* VERIFY */

	/* Font sizes — desktop (mobile overrides at bottom of :root section) */
	--fs-hero-title    : 3.75rem;   /* 60px ÷ 16 */
	--fs-hero-subtitle : 1.75rem;   /* 28px ÷ 16 */
	--fs-section-title : 2.5rem;    /* 40px ÷ 16 */
	--fs-card-title    : 1.375rem;  /* 22px ÷ 16 */
	--fs-marquee       : 3.5rem;    /* 56px ÷ 16 */
	--fs-body-lg       : 1.125rem;  /* 18px ÷ 16 */
	--fs-body          : 1rem;      /* 16px ÷ 16 */
	--fs-small         : 0.875rem;  /* 14px ÷ 16 */
	--fs-eyebrow       : 0.9375rem; /* 15px ÷ 16 */

	/* Font weights */
	--fw-regular  : 400;
	--fw-medium   : 500;
	--fw-semibold : 600;
	--fw-bold     : 700;

	/* Line heights */
	--lh-tight : 1.15;
	--lh-snug  : 1.3;
	--lh-body  : 1.65;

	/* Letter spacing */
	--ls-tight  : -0.02em;  /* -2% */
	--ls-normal : 0em;
	--ls-wide   : 0.04em;   /* 4% — eyebrows */

	/* Spacing scale */
	--space-2xs : 0.25rem;  /* 4px */
	--space-xs  : 0.5rem;   /* 8px */
	--space-sm  : 1rem;     /* 16px */
	--space-md  : 1.5rem;   /* 24px */
	--space-lg  : 2.5rem;   /* 40px */
	--space-xl  : 4rem;     /* 64px */

	/* Layout */
	--container-width  : 1280px;
	--container-gutter : 1.5rem;
	--section-padding  : 5rem;  /* 80px ÷ 16 */

	/* Border radius */
	--radius-sm   : 0.25rem;
	--radius-md   : 0.5rem;
	--radius-lg   : 0.75rem;
	--radius-card : 1rem;
	--radius-pill : 100px;
	--radius-btn  : var(--radius-pill);  /* VERIFY — pill vs square buttons */

	/* Shadows */
	--shadow-card : 0 0.5rem 1.5rem rgba(var(--clr-overlay), 0.08);

	/* Motion */
	--transition : 0.25s ease;
}

/* Tablet */
@media (max-width: 1024px) {
	:root {
		--fs-hero-title    : 3rem;      /* 48px ÷ 16 */
		--fs-section-title : 2.125rem;  /* 34px ÷ 16 */
		--fs-marquee       : 2.75rem;   /* 44px ÷ 16 */
		--section-padding  : 4rem;      /* 64px ÷ 16 */
	}
}

/* Phone */
@media (max-width: 767px) {
	:root {
		--fs-hero-title    : 2.25rem;   /* 36px ÷ 16 */
		--fs-hero-subtitle : 1.25rem;   /* 20px ÷ 16 */
		--fs-section-title : 1.75rem;   /* 28px ÷ 16 */
		--fs-card-title    : 1.25rem;   /* 20px ÷ 16 */
		--fs-marquee       : 2rem;      /* 32px ÷ 16 */
		--section-padding  : 3rem;      /* 48px ÷ 16 */
		--container-gutter : 1.25rem;
	}
}

/* ---------- Shared utilities ---------- */

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
	box-sizing: border-box;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--clr-accent);
	outline-offset: 3px;
}