/* =========================================================
   GLOBAL.CSS — Design tokens + base typography
   Dr Jeremy Richardson — Rhinoplasty Melbourne landing theme
   ========================================================= */

:root {

	/* Colours — core */
	--clr-ink        : #1a1818;  /* headings, dark section backgrounds */
	--clr-text       : #404247;  /* default body copy */
	--clr-text-muted : #666a70;  /* secondary/detail copy, disclosure text */
	--clr-blue       : #566b83;  /* accent — concern numerals */
	--clr-blue-dark  : #34475c;  /* eyebrow labels, faq symbol, review numerals */
	--clr-white      : #ffffff;
	--clr-charcoal   : #292929;  /* concern-art + gallery stage background */

	/* Colours — surfaces */
	--clr-mist  : #eef1f3;  /* light blue-grey section background */
	--clr-stone : #f6f5f2;  /* warm off-white section background */

	/* Colours — borders/lines */
	--clr-line      : #d9dde0;  /* concern grid divider / general border */
	--clr-line-soft : #cdd1d4;  /* faq + review list divider */
	--clr-input     : #c9ced2;  /* form input border */

	/* Colours — on-dark opacity variants (white text/borders over --clr-ink) */
	--clr-white-a82 : rgba(255, 255, 255, .82); /* body copy on dark */
	--clr-white-a80 : rgba(255, 255, 255, .8);  /* body copy on dark, alt */
	--clr-white-a66 : rgba(255, 255, 255, .66); /* footer copy */
	--clr-white-a28 : rgba(255, 255, 255, .28); /* hairline borders on dark */
	--clr-white-a97 : rgba(255, 255, 255, .97); /* sticky header background */
	--clr-overlay   : rgba(26, 24, 24, .22);    /* gallery control button fill */

	/* Shadow */
	--shadow-card : 0 18px 44px rgba(26, 24, 24, .11);

	/* Font families (single typeface used for both heading + body in this design) */
	--ff-heading : "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
	--ff-body    : "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
	--ff-ui      : "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;

	/* Font sizes — always rem, px source commented */
	--fs-h1-min      : 2.5rem;    /* 40px ÷ 16 */
	--fs-h1-max      : 4.1rem;    /* 65.6px ÷ 16 */
	--fs-h2-min      : 2rem;      /* 32px ÷ 16 */
	--fs-h2-max      : 3.35rem;   /* 53.6px ÷ 16 */
	--fs-h2-sm-min   : 1.8rem;    /* 28.8px ÷ 16 — condensed h2 used in dual-band */
	--fs-h2-sm-max   : 2.65rem;   /* 42.4px ÷ 16 */
	--fs-h3          : 1.28rem;   /* 20.5px ÷ 16 */
	--fs-body        : 1.0625rem; /* 17px ÷ 16 — base body copy */
	--fs-lead        : 1.16rem;   /* 18.5px ÷ 16 — hero copy */
	--fs-intro       : 1.12rem;   /* 18px ÷ 16 — intro copy */
	--fs-section-lead: 1.08rem;   /* 17.3px ÷ 16 — section-intro paragraph */
	--fs-body-sm     : .96rem;    /* 15.4px ÷ 16 — concern copy */
	--fs-ui          : .91rem;    /* 14.6px ÷ 16 — header actions */
	--fs-label       : .92rem;    /* 14.7px ÷ 16 — credential list */
	--fs-small       : .83rem;    /* 13.3px ÷ 16 — trust strip items */
	--fs-caption     : .82rem;    /* 13.1px ÷ 16 — hero note */
	--fs-eyebrow     : .78rem;    /* 12.5px ÷ 16 — eyebrow labels, form labels */
	--fs-fine        : .79rem;    /* 12.6px ÷ 16 — disclosure text */
	--fs-symbol      : 1.4rem;    /* 22.4px ÷ 16 — faq +/- symbol */
	--fs-arrow       : 1.5rem;    /* 24px ÷ 16 — gallery prev/next arrows */

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

	/* Letter spacing — Figma % converted to em */
	--ls-eyebrow : .14em;  /* 14% */
	--ls-button  : .08em;  /* 8% */
	--ls-label   : .07em;  /* 7% */

	/* Layout */
	--container-width  : 1220px;
	--container-gutter : 20px;
	--narrow-width     : 900px;
	--section-padding  : 82px;
	--section-padding-sm: 65px;

	/* Border radius */
	--radius-button : 2px;

	/* Line heights */
	--lh-heading : 1.13;
	--lh-body    : 1.62;

}

/* =========================================================
   Base reset + element typography
   ========================================================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	color: var(--clr-text);
	background: var(--clr-white);
	font-family: var(--ff-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; }
p { margin: 0 0 1em; }

h1, h2, h3 {
	color: var(--clr-ink);
	margin: 0;
	line-height: var(--lh-heading);
	letter-spacing: 0;
	font-family: var(--ff-heading);
}
h1 { font-size: clamp(var(--fs-h1-min), 4.2vw, var(--fs-h1-max)); font-weight: var(--fw-medium); max-width: 14ch; }
h2 { font-size: clamp(var(--fs-h2-min), 3.4vw, var(--fs-h2-max)); font-weight: var(--fw-medium); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }

section { padding: var(--section-padding) 0; }

.container {
	width: min(100% - 40px, var(--container-width));
	margin-inline: auto;
}
.narrow {
	width: min(100% - 40px, var(--narrow-width));
	margin-inline: auto;
}

.eyebrow {
	margin: 0 0 16px;
	color: var(--clr-blue-dark);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
}
.section-intro { max-width: 760px; margin-bottom: 42px; }
.section-intro h2 { margin-bottom: 18px; }
.section-intro p { font-size: var(--fs-section-lead); }
.muted { color: var(--clr-text-muted); }

/* Shared button + text-link pattern (Section 7 of style guide) —
   used across many blocks so it lives globally rather than being
   redeclared per block. */
.btn,
input[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 52px !important;
	padding: 14px 24px !important;
	border: 1px solid var(--clr-ink) !important;
	border-radius: var(--radius-button) !important;
	color: var(--clr-white) !important;
	background: var(--clr-ink) !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	font-size: var(--fs-eyebrow) !important;
	font-weight: var(--fw-bold) !important;
	letter-spacing: var(--ls-button) !important;
	cursor: pointer !important;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease !important;
}
.btn:hover { color: var(--clr-ink); background: var(--clr-white); transform: translateY(-2px); }
.btn.btn--light { color: var(--clr-ink); background: var(--clr-white); border-color: var(--clr-white); }
.btn.btn--light:hover { color: var(--clr-white); background: transparent; transform: translateY(-2px); }
.btn.btn--accent { color: var(--clr-blue-dark); background: transparent; border-color: var(--clr-blue-dark); }
.btn.btn--accent:hover { color: var(--clr-white); background: var(--clr-blue-dark); }

.text-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--clr-ink);
	text-decoration: none;
	font-family: var(--ff-heading);
	font-weight: var(--fw-medium);
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	transition: background-size .3s ease, color .3s ease, gap .25s ease;
}
.text-link span[aria-hidden] { transition: transform .25s ease; }
.text-link:hover {
	color: var(--clr-blue-dark);
	background-size: 0% 1px;
	gap: 10px;
}
.text-link:hover span[aria-hidden] { transform: translateX(3px); }

@media (max-width: 900px) {
	section { padding: var(--section-padding-sm) 0; }
}

@media (max-width: 640px) {
	body { font-size: 1rem; }
	.container, .narrow { width: min(100% - 30px, var(--container-width)); }
	h1 { font-size: 2.7rem; }
	h2 { font-size: 2rem; }
}