/*
 * common.css - loaded on every page (handle: fh-common).
 * Design tokens, Optima font, wrappers, buttons and base resets.
 * Header/footer/WooCommerce/page-specific rules live in their own files.
 * Paths are relative to this file: assets/css/ -> ../fonts, ../images.
 */

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

:root {
	--fh-blue: #003057;
	--fh-blue-dark: #002744;
	--fh-orange: #f15f22;
	--fh-text: #000000;
	--fh-muted: rgba(0, 0, 0, 0.73);
	--fh-bg: #e6ecf2;
	--fh-hover: #ced9e5;
	--fh-line: rgba(0, 0, 0, 0.15);
	--fh-white: #ffffff;
	--fh-width: 1300px;
	--fh-wide: calc(100vw - 92px);
	--fh-header-height: 54px;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body.fh-home {
	margin: 0;
	background: var(--fh-bg);
	color: var(--fh-text);
	font-family: "Optima", Arial, sans-serif;
	font-size: 1.2rem;
	line-height: 1.6rem;
	letter-spacing: 0;
	overflow-x: hidden;
}

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

.fh-home a {
	color: inherit;
	text-decoration: none;
}

.fh-home img,
.fh-home svg {
	display: block;
}

.fh-home img {
	max-width: 100%;
	height: auto;
}

.fh-wrap {
	width: var(--fh-wide);
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.fh-button,
.fh-add,
.fh-newsletter-form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 18px 25px;
	border: 0;
	border-radius: 5px;
	background: var(--fh-blue) !important;
	color: var(--fh-white) !important;
	font-family: "Optima", Arial, sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: background-color 160ms ease, transform 160ms ease;
}

.fh-button:hover,
.fh-add:hover,
.fh-newsletter-form button:hover {
	background: #004277 !important;
	color: var(--fh-white) !important;
	transform: translateY(-1px);
}

.fh-button:visited,
.fh-add:visited {
	color: var(--fh-white) !important;
}

/* --------------------------------------------------------------------------
   Responsive — shared chrome only
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.fh-wrap {
		width: min(1024px, calc(100vw - 8vh));
	}
}

@media (max-width: 767px) {
	:root {
		--fh-header-height: 74px;
	}

	body.fh-home {
		font-size: 1rem;
		line-height: 1.3rem;
	}

	.fh-wrap {
		width: min(var(--fh-width), calc(100vw - 40px));
		max-width: 100%;
	}
}