/*
Theme Name: Flying Heart Havaneser
Theme URI: https://flying-heart-havaneser.de
Author: Flying Heart Havaneser
Description: Custom theme for Flying Heart Havaneser — Havaneser breeder website.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: flying-heart-havaneser
*/

/* -------------------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------------------- */

:root {
	--fhh-color-cream: #faf7f4;
	--fhh-color-cream-warm: #f5f0ea;
	--fhh-color-white: #ffffff;
	/* Accent — script, icons, labels, active nav (vibrant dusty rose) */
	--fhh-color-pink: #d07880;
	/* Buttons — slightly deeper salmon rose */
	--fhh-color-pink-button: #c46870;
	--fhh-color-pink-dark: #ad5760;
	--fhh-color-pink-soft: #f0ced2;
	--fhh-color-pink-band: #fce8ea;
	--fhh-color-pink-border: color-mix(in srgb, var(--fhh-color-pink) 20%, transparent);
	--fhh-color-text: #3a3a3a;
	--fhh-color-text-muted: #6b6b6b;

	--fhh-font-sans: "Nunito", system-ui, sans-serif;
	--fhh-font-script: "Great Vibes", cursive;

	--fhh-text-xs: 0.72rem;
	--fhh-text-sm: 0.875rem;
	--fhh-text-base: 1rem;
	--fhh-text-lg: 1.125rem;
	--fhh-text-xl: clamp(1.75rem, 3vw, 2.5rem);
	--fhh-text-2xl: clamp(2rem, 4vw, 3.25rem);
	--fhh-text-script: clamp(2.25rem, 5vw, 3.75rem);

	--fhh-leading-tight: 1.2;
	--fhh-leading-normal: 1.6;
	--fhh-leading-relaxed: 1.75;

	--fhh-space-section: clamp(3rem, 6vw, 5rem);
	--fhh-radius-sm: 0.25rem;
	--fhh-radius-md: 0.5rem;
	--fhh-shadow-soft: 0 0.5rem 2rem rgba(58, 58, 58, 0.06);

	--fhh-container-max: 75rem;
	--fhh-container-padding: clamp(1rem, 3vw, 2.5rem);
	--fhh-header-height: 3.5rem;
	--fhh-header-height-desktop: 3.5rem;
	--fhh-header-height-mobile: calc(var(--fhh-logo-height) + 0.75rem);
	--fhh-logo-height: 10rem;
	--fhh-logo-height-mobile: var(--fhh-logo-height);
	--fhh-logo-heart-bottom-ratio: 0.325;
	--fhh-logo-gap-above-hero: 5px;
	--fhh-logo-breakout: calc(
		var(--fhh-logo-height) * var(--fhh-logo-heart-bottom-ratio) - var(--fhh-logo-gap-above-hero)
	);
	--fhh-nav-breakpoint: 62rem;

	--fhh-transition: 0.2s ease;
}

/* -------------------------------------------------------------------------
   Base reset
   ------------------------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--fhh-font-sans);
	font-size: var(--fhh-text-base);
	font-weight: 400;
	line-height: var(--fhh-leading-normal);
	color: var(--fhh-color-text);
	background-color: var(--fhh-color-cream);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

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

p {
	margin: 0 0 1rem;
}

p:last-child {
	margin-bottom: 0;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 1rem;
	font-weight: 700;
	line-height: var(--fhh-leading-tight);
	color: var(--fhh-color-text);
}

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

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

:focus-visible {
	outline: 2px solid var(--fhh-color-pink);
	outline-offset: 3px;
}