/*
Theme Name: ATHAYOGA
Template: twentytwentyfive
Description: Block child theme for ATHAYOGA — Yoga in Zürich & Zollikon. Holds the shared design system (tokens, typography, buttons, image system) for the athayoga/* section blocks.
Author: ATHAYOGA
Version: 0.1.0
*/

/* ─────────────────────────────────────────────────────────
   Design tokens (extracted from the landing-page baseline).
   Mirrored into theme.json so editors pick from the palette.
   ───────────────────────────────────────────────────────── */
:root {
	--primary: #bdad8e;       /* warm tan — primary accent */
	--primary-dark: #2c2418;  /* dark chocolate — hover */
	--cream: #f8f8f3;         /* off-white page background */
	--sand: #f1ede6;          /* warmer off-white, secondary surface */
	--body: #3f362a;          /* dark brown — body text + dark sections */
	--heading: #58585a;       /* warm gray — secondary headings */
	--muted: #959595;         /* tertiary text */
	--peach: #f88a79;         /* link hover accent */
	--line: rgba(63, 54, 42, 0.12);        /* hairline divider */
	--line-strong: rgba(63, 54, 42, 0.18); /* stronger divider */
	--nav-h: 72px;
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
	background: var(--cream);
	color: var(--body);
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ─────────────────────────────────────────────────────────
   Typography utilities
   ───────────────────────────────────────────────────────── */
.display {
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	font-weight: 500;
	line-height: 1.08;
}
h1, h2, h3, h4, .display { font-family: 'Cormorant Garamond', Georgia, serif; }

.eyebrow {
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--primary);
}

.container { width: min(1200px, 100% - 48px); margin-inline: auto; }
.wide { width: min(1400px, 100% - 40px); margin-inline: auto; }

/* ─────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 16px 28px;
	border-radius: 2px;
	border: 1px solid var(--primary);
	transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease,
		transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover {
	background: var(--primary-dark);
	border-color: var(--primary-dark);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.35);
}
.btn-ghost { background: transparent; color: var(--body); }
.btn-ghost:hover { background: var(--primary); color: #fff; }

/* Inline text link with tan underline → peach on hover */
.link-inline {
	color: var(--body);
	border-bottom: 1px solid var(--primary);
	padding-bottom: 1px;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.link-inline:hover { color: var(--peach); border-color: var(--peach); }

/* ─────────────────────────────────────────────────────────
   Image system (object-fit cover wells)
   ───────────────────────────────────────────────────────── */
.ph {
	position: relative;
	overflow: hidden;
	background: var(--sand);
	display: flex;
	align-items: flex-end;
	isolation: isolate;
}
.ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Block themes don't pad the root; sections own their own spacing. */

/* ─────────────────────────────────────────────────────────
   Site header — sticky cream bar: wordmark · nav · CTA · lang
   ───────────────────────────────────────────────────────── */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	min-height: var(--nav-h);
	padding: 10px 24px;
	align-items: center;
	background: rgba(248, 248, 243, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}
.site-header__brand a,
.site-header__brand {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--body);
}
.site-header__end { align-items: center; gap: 28px; }
.site-header__nav .wp-block-navigation__container { gap: 26px; }
.site-header__nav a,
.site-header__nav .wp-block-navigation-item__content {
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--body);
}
.site-header__nav a:hover,
.site-header__nav .wp-block-navigation-item__content:hover { color: var(--primary); }
.site-header__cta .wp-block-button__link {
	background: var(--primary);
	color: #fff;
	border-radius: 999px;
	padding: 9px 20px;
	font-size: 13px;
	letter-spacing: 0.04em;
}
.site-header__cta .wp-block-button__link:hover { background: var(--primary-dark); }
@media (max-width: 900px) {
	.site-header__cta { display: none; }
}

/* ─────────────────────────────────────────────────────────
   Site footer — dark 4-column + bottom bar
   ───────────────────────────────────────────────────────── */
.site-footer { padding: 64px 24px 32px; }
.site-footer a { color: var(--cream); opacity: 0.85; transition: color 0.2s ease, opacity 0.2s ease; }
.site-footer a:hover { opacity: 1; color: var(--primary); }
.site-footer__cols { gap: 40px; width: min(1200px, 100%); margin-inline: auto; }
.site-footer__brand a,
.site-footer__brand {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cream);
}
.site-footer__h {
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--primary);
	margin-bottom: 14px;
}
.site-footer p { font-size: 14.5px; line-height: 1.7; color: var(--cream); opacity: 0.85; }
.site-footer__brand + p { margin-top: 12px; }
.site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__links li { margin-bottom: 9px; font-size: 14.5px; }
.site-footer__social { margin-top: 18px; gap: 8px; }
.site-footer__social .wp-block-social-link { background: transparent; opacity: 0.85; }
.site-footer__social .wp-block-social-link:hover { opacity: 1; transform: translateY(-2px); }
.site-footer__bar {
	width: min(1200px, 100%);
	margin: 40px auto 0;
	padding-top: 20px;
	border-top: 1px solid rgba(248, 248, 243, 0.18);
	align-items: center;
	gap: 12px;
}
.site-footer__bar p { font-size: 13px; opacity: 0.7; margin: 0; }
@media (max-width: 781px) {
	.site-footer { padding: 48px 24px 28px; }
	.site-footer__cols { gap: 28px; }
}