/**
 * Riaan Allison Physiotherapy
 * Global Styles
 *
 * Core design system and global theme styles.
 */


/* ==========================================================================
   1. Local Fonts
   ========================================================================== */

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter_24pt-Regular.ttf") format("truetype");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter_24pt-Medium.ttf") format("truetype");
	font-style: normal;
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter_24pt-SemiBold.ttf") format("truetype");
	font-style: normal;
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: "Manrope";
	src: url("../fonts/Manrope-Medium.ttf") format("truetype");
	font-style: normal;
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "Manrope";
	src: url("../fonts/Manrope-SemiBold.ttf") format("truetype");
	font-style: normal;
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: "Manrope";
	src: url("../fonts/Manrope-Bold.ttf") format("truetype");
	font-style: normal;
	font-weight: 700;
	font-display: swap;
}


/* ==========================================================================
   2. Design Tokens
   ========================================================================== */

:root {

	/* Colours */
	--color-background: #f4f1eb;
	--color-surface: #ffffff;
	--color-surface-soft: #ebe7df;

	--color-text-primary: #202321;
	--color-text-secondary: #626762;
	--color-text-muted: #7b807b;

	--color-accent: #566b61;
	--color-accent-dark: #3f5148;
	--color-accent-light: #dce4df;

	--color-border: #d9d5cd;
	--color-border-strong: #bdb9b1;

	--color-white: #ffffff;
	--color-black: #111311;

	/* Footer */
	--color-footer: #171a18;

	/* Typography */
	--font-family-body: "Inter", Arial, Helvetica, sans-serif;
	--font-family-heading: "Manrope", Arial, Helvetica, sans-serif;

	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 2rem;
	--font-size-4xl: 2.75rem;
	--font-size-5xl: 3.75rem;

	--line-height-tight: 1.1;
	--line-height-heading: 1.2;
	--line-height-body: 1.65;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--space-10: 8rem;

	/* Containers */
	--container-narrow: 760px;
	--container-content: 1180px;
	--container-wide: 1380px;

	/* Page gutters */
	--page-gutter: 1.25rem;

	/* Borders */
	--border-width: 1px;

	/* Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 14px;
	--radius-pill: 999px;

	/* Shadows */
	--shadow-soft: 0 12px 32px rgba(20, 24, 21, 0.07);

	/* Transitions */
	--transition-fast: 160ms ease;
	--transition-standard: 250ms ease;

	/* Layering */
	--z-header: 100;
	--z-navigation: 200;
}


/* ==========================================================================
   3. Reset
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

img,
picture,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

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

button {
	cursor: pointer;
}

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


/* ==========================================================================
   4. Base Document
   ========================================================================== */

html {
	font-size: 100%;
}

body {
	min-height: 100vh;
	background: var(--color-background);
	color: var(--color-text-primary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.mobile-menu-open {
	overflow: hidden;
}


/* ==========================================================================
   5. Typography
   ========================================================================== */

h1,
h2,
h3,
h4 {
	color: var(--color-text-primary);
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	letter-spacing: -0.025em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.5rem, 6vw, var(--font-size-5xl));
	line-height: var(--line-height-tight);
}

h2 {
	font-size: clamp(2rem, 4vw, var(--font-size-4xl));
}

h3 {
	font-size: clamp(1.5rem, 3vw, var(--font-size-3xl));
}

h4 {
	font-size: var(--font-size-xl);
}

p {
	color: var(--color-text-secondary);
}

strong,
b {
	font-weight: var(--font-weight-semibold);
}


/* ==========================================================================
   6. Links
   ========================================================================== */

a {
	transition:
		color var(--transition-fast),
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		opacity var(--transition-fast),
		transform var(--transition-fast);
}

a:hover {
	color: var(--color-accent-dark);
}


/* ==========================================================================
   7. Accessibility
   ========================================================================== */

:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 4px;
}


/* ==========================================================================
   8. Global Layout
   ========================================================================== */

.site {
	min-height: 100vh;
	overflow-x: clip;
}

.site-main {
	width: 100%;
}

.container {
	width: min(
		calc(100% - (var(--page-gutter) * 2)),
		var(--container-content)
	);
	margin-inline: auto;
}

.container--narrow {
	width: min(
		calc(100% - (var(--page-gutter) * 2)),
		var(--container-narrow)
	);
	margin-inline: auto;
}

.container--wide {
	width: min(
		calc(100% - (var(--page-gutter) * 2)),
		var(--container-wide)
	);
	margin-inline: auto;
}


/* ==========================================================================
   9. Global Section Spacing
   ========================================================================== */

.section {
	padding-block: var(--space-8);
}

.section--large {
	padding-block: var(--space-9);
}


/* ==========================================================================
   10. Buttons
   ========================================================================== */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 48px;
	padding: 0.75rem 1.125rem;
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--font-family-body);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	letter-spacing: 0.01em;
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast),
		transform var(--transition-fast);
}

.button:hover {
	transform: translateY(-1px);
}

.button:active {
	transform: translateY(0);
}

.button__label {
	display: inline-block;
}

.button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	transition: transform var(--transition-fast);
}

.button__icon svg {
	width: 1rem;
	height: 1rem;
}

.button:hover .button__icon {
	transform: translateX(2px);
}

.button--primary {
	background: var(--color-text-primary);
	border-color: var(--color-text-primary);
	color: var(--color-white);
}

.button--primary:hover {
	background: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: var(--color-white);
}

.button--secondary {
	background: transparent;
	border-color: var(--color-border-strong);
	color: var(--color-text-primary);
}

.button--secondary:hover {
	background: var(--color-surface);
	border-color: var(--color-text-primary);
	color: var(--color-text-primary);
}

.button--text {
	min-height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--color-text-primary);
}

.button--text:hover {
	background: transparent;
	color: var(--color-accent-dark);
	transform: none;
}


/* ==========================================================================
   11. Site Header
   ========================================================================== */

.site-header {
	position: relative;
	z-index: var(--z-header);
	width: 100%;
	background: var(--color-background);
	border-bottom: var(--border-width) solid var(--color-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 76px;
	gap: var(--space-5);
}

.site-header__brand {
	flex: 0 0 auto;
}

.site-header__brand-link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: var(--color-text-primary);
	line-height: 1;
}

.site-header__brand-link:hover {
	color: var(--color-text-primary);
}

.site-header__brand-name {
	font-family: var(--font-family-heading);
	font-size: 1.05rem;
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.025em;
}

.site-header__brand-profession {
	margin-top: 0.3rem;
	color: var(--color-text-secondary);
	font-size: 0.68rem;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}


/* Desktop Navigation */

.site-navigation--desktop {
	display: none;
}

.site-navigation__menu {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	list-style: none;
}

.site-navigation__menu li {
	margin: 0;
}

.site-navigation__menu a {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-block: 0.5rem;
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: 1.2;
}

.site-navigation__menu a:hover,
.site-navigation__menu .current-menu-item > a {
	color: var(--color-text-primary);
}


/* Header Actions */

.site-header__actions {
	display: none;
	align-items: center;
	gap: var(--space-5);
}

.site-header__coaching-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--color-text-secondary);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}

.site-header__coaching-link:hover {
	color: var(--color-text-primary);
}

.site-header__external-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 0.875rem;
	height: 0.875rem;
}

.site-header__external-icon svg {
	width: 0.875rem;
	height: 0.875rem;
}


/* ==========================================================================
   12. Mobile Menu Toggle
   ========================================================================== */

.mobile-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-width: 48px;
	min-height: 48px;
	padding: 0.625rem 0;
	border: 0;
	background: transparent;
	color: var(--color-text-primary);
}

.mobile-menu-toggle__label {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: 1;
}

.mobile-menu-toggle__icon {
	position: relative;
	display: block;
	width: 20px;
	height: 14px;
}

.mobile-menu-toggle__icon span {
	position: absolute;
	left: 0;
	display: block;
	width: 20px;
	height: 1.5px;
	background: currentColor;
	transition:
		top var(--transition-standard),
		transform var(--transition-standard);
}

.mobile-menu-toggle__icon span:first-child {
	top: 3px;
}

.mobile-menu-toggle__icon span:last-child {
	top: 10px;
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__icon span:first-child {
	top: 6px;
	transform: rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__icon span:last-child {
	top: 6px;
	transform: rotate(-45deg);
}


/* ==========================================================================
   13. Mobile Navigation
   ========================================================================== */

.mobile-navigation {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--z-navigation);
	width: 100%;
	height: calc(100dvh - 76px);
	overflow-y: auto;
	visibility: hidden;
	background: var(--color-background);
	border-bottom: var(--border-width) solid var(--color-border);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px);
	transition:
		opacity var(--transition-standard),
		transform var(--transition-standard),
		visibility 0s linear var(--transition-standard);
}

.mobile-navigation.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	transition:
		opacity var(--transition-standard),
		transform var(--transition-standard),
		visibility 0s;
}

.mobile-navigation__inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
}

.mobile-navigation__primary {
	width: 100%;
}

.mobile-navigation__menu {
	list-style: none;
}

.mobile-navigation__menu li {
	border-bottom: var(--border-width) solid var(--color-border);
}

.mobile-navigation__menu li:first-child {
	border-top: var(--border-width) solid var(--color-border);
}

.mobile-navigation__menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 58px;
	padding-block: 0.875rem;
	color: var(--color-text-primary);
	font-family: var(--font-family-heading);
	font-size: clamp(1.35rem, 6vw, 1.75rem);
	font-weight: var(--font-weight-medium);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.mobile-navigation__menu a::after {
	content: "→";
	flex: 0 0 auto;
	margin-left: var(--space-4);
	color: var(--color-text-muted);
	font-family: var(--font-family-body);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-regular);
}

.mobile-navigation__menu .current-menu-item > a {
	color: var(--color-accent-dark);
}

.mobile-navigation__footer {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	margin-top: auto;
	padding-top: var(--space-7);
}

.mobile-navigation__coaching {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 48px;
	padding-block: var(--space-3);
	border-bottom: var(--border-width) solid var(--color-border);
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}

.mobile-navigation__coaching:hover {
	color: var(--color-text-primary);
}

.mobile-navigation__footer .button {
	width: 100%;
	min-height: 52px;
}


/* ==========================================================================
   14. Site Footer
   ========================================================================== */

.site-footer {
	margin-top: auto;
	background: var(--color-footer);
	color: var(--color-white);
	border-top: var(--border-width) solid rgba(255, 255, 255, 0.22);
}

.site-footer__main {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
	padding-top: var(--space-8);
	padding-bottom: var(--space-8);
}


/* Footer Brand */

.site-footer__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: var(--color-white);
	line-height: 1;
}

.site-footer__brand:hover {
	color: var(--color-white);
}

.site-footer__brand-name {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.025em;
}

.site-footer__brand-profession {
	margin-top: 0.35rem;
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.68rem;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.site-footer__location {
	margin-top: var(--space-5);
	color: rgba(255, 255, 255, 0.66);
	font-size: var(--font-size-sm);
}

.site-footer__email {
	display: inline-flex;
	margin-top: var(--space-2);
	color: rgba(255, 255, 255, 0.88);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}

.site-footer__email:hover {
	color: var(--color-white);
}


/* Footer Labels */

.site-footer__label {
	margin-bottom: var(--space-4);
	color: rgba(255, 255, 255, 0.46);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}


/* Footer Navigation and Practice */

.site-footer__menu,
.site-footer__links,
.site-footer__social-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	list-style: none;
}

.site-footer__menu a,
.site-footer__links a {
	display: inline-flex;
	color: rgba(255, 255, 255, 0.76);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
}

.site-footer__menu a:hover,
.site-footer__links a:hover {
	color: var(--color-white);
}


/* Socials */

.site-footer__socials {
	min-width: 0;
}

.site-footer__social-link {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	color: rgba(255, 255, 255, 0.76);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
}

.site-footer__social-link:hover {
	color: var(--color-white);
}

.site-footer__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	color: rgba(255, 255, 255, 0.74);
}

.site-footer__social-icon svg {
	display: block;
	width: 1rem;
	height: 1rem;
	max-width: none;
}

.site-footer__social-link:hover .site-footer__social-icon {
	color: var(--color-white);
}


/* Coaching */

.site-footer__coaching {
	max-width: 290px;
}

.site-footer__coaching-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--color-white);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}

.site-footer__coaching-link:hover {
	color: var(--color-white);
	opacity: 0.78;
}

.site-footer__external-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 0.875rem;
	height: 0.875rem;
}

.site-footer__external-icon svg {
	width: 0.875rem;
	height: 0.875rem;
}

.site-footer__coaching-note {
	max-width: 250px;
	margin-top: var(--space-3);
	color: rgba(255, 255, 255, 0.52);
	font-size: var(--font-size-xs);
	line-height: 1.55;
}


/* Footer Bottom */

.site-footer__bottom {
	border-top: var(--border-width) solid rgba(255, 255, 255, 0.12);
}

.site-footer__bottom-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-top: var(--space-5);
	padding-bottom: var(--space-5);
}

.site-footer__copyright {
	color: rgba(255, 255, 255, 0.46);
	font-size: var(--font-size-xs);
}

.site-footer__legal {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.site-footer__legal a,
.site-footer__consent {
	padding: 0;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.56);
	font-family: var(--font-family-body);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	line-height: inherit;
}

.site-footer__consent {
	appearance: none;
	-webkit-appearance: none;
}

.site-footer__legal a:hover,
.site-footer__consent:hover {
	background: transparent;
	color: var(--color-white);
}

.site-footer__consent:focus-visible {
	outline-color: var(--color-white);
}


/* ==========================================================================
   15. Screen Reader Utilities
   ========================================================================== */

.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;
}

.screen-reader-text:focus {
	position: fixed;
	top: var(--space-4);
	left: var(--space-4);
	z-index: 9999;
	width: auto;
	height: auto;
	padding: var(--space-3) var(--space-4);
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--color-surface);
	color: var(--color-text-primary);
	box-shadow: var(--shadow-soft);
}


/* ==========================================================================
   16. Mobile Footer Refinement
   ========================================================================== */

@media (max-width: 767px) {

	/*
	 * Keep all footer information visible while reducing
	 * the amount of vertical scrolling on smaller screens.
	 */

	.site-footer__main {
		gap: var(--space-6);
		padding-top: var(--space-7);
		padding-bottom: var(--space-7);
	}

	.site-footer__location {
		margin-top: var(--space-4);
	}

	.site-footer__label {
		margin-bottom: var(--space-3);
	}

	.site-footer__menu,
	.site-footer__links,
	.site-footer__social-list {
		gap: 0.65rem;
	}

	.site-footer__coaching-note {
		margin-top: var(--space-2);
	}

	.site-footer__bottom-inner {
		gap: var(--space-2);
		padding-top: var(--space-4);
		padding-bottom: var(--space-4);
	}
}


/* ==========================================================================
   17. Tablet
   ========================================================================== */

@media (min-width: 768px) {

	:root {
		--page-gutter: 2rem;
	}

	.section {
		padding-block: var(--space-9);
	}

	.section--large {
		padding-block: var(--space-10);
	}

	.site-header__inner {
		min-height: 88px;
	}

	.mobile-navigation {
		height: calc(100dvh - 88px);
	}

	.site-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-7) var(--space-8);
		padding-top: var(--space-9);
		padding-bottom: var(--space-9);
	}

	.site-footer__intro {
		grid-column: 1 / -1;
	}

	.site-footer__coaching {
		max-width: 360px;
	}

	.site-footer__bottom-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}


/* ==========================================================================
   18. Desktop
   ========================================================================== */

@media (min-width: 1100px) {

	body.mobile-menu-open {
		overflow: visible;
	}

	.site-header__inner {
		min-height: 96px;
	}

	.site-navigation--desktop {
		display: block;
	}

	.site-header__actions {
		display: flex;
		gap: var(--space-6);
	}

	.mobile-menu-toggle,
	.mobile-navigation {
		display: none;
	}

	.site-footer__main {
		grid-template-columns:
			minmax(230px, 1.45fr)
			minmax(120px, 0.9fr)
			minmax(130px, 0.9fr)
			minmax(130px, 0.9fr)
			minmax(220px, 1.2fr);
		gap: var(--space-7);
	}

	.site-footer__intro {
		grid-column: auto;
	}

	.site-footer__coaching {
		max-width: 280px;
	}
}


@media (min-width: 1200px) {

	:root {
		--page-gutter: 3rem;
	}
}


/* ==========================================================================
   19. Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}