/* Orjona Fjerza – design tokens and base styles. Values from docs/DESIGN-NOTES.md. */

/* Self-hosted fonts (from @fontsource, latin subset). font-display swap avoids invisible text. */
@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/playfair-display-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Playfair Display";
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/playfair-display-latin-700-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/inter-latin-300-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
}

:root {
	--orjona-navy: #1d3282;
	--orjona-navy-deep: #162150;
	--orjona-blue-mid: #2a44a0;
	--orjona-cyan: #0fb6ef;
	--orjona-ice: #eef4ff;
	--orjona-line: #e3e8f5;
	--orjona-text: #424a6b;
	--orjona-muted: #6b7290;
	--orjona-text-on-dark: #d9e1f5;
	--orjona-dim: #97a1c6;
	--orjona-banner: var(--orjona-cyan);
	--orjona-white: #ffffff;

	--orjona-font-heading: "Playfair Display", Georgia, serif;
	--orjona-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--orjona-radius-card: 12px;
	--orjona-radius-badge: 14px;
	--orjona-radius-pill: 999px;

	--orjona-shadow-cta: 0 14px 30px -14px rgba(29, 50, 130, 0.7);
	--orjona-transition: 0.3s ease-out;
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--orjona-white);
	color: var(--orjona-text);
	font-family: var(--orjona-font-body);
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
}

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

:focus-visible {
	outline: 2px solid var(--orjona-cyan);
	outline-offset: 3px;
}

.orjona-skip-link {
	position: absolute;
	left: -9999px;
}

.orjona-skip-link:focus {
	left: 16px;
	top: 16px;
	padding: 8px 12px;
	background: var(--orjona-navy);
	color: var(--orjona-white);
	z-index: 1000;
}

/* Header – Figma "Section / Header" (2:3). Desktop 1440: padding 22px 80px, 36px nav gap. */
.orjona-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--orjona-white);
	border-bottom: 1px solid var(--orjona-line);
}

.orjona-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 22px 80px;
}

.orjona-header__logo {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 102px;
	color: var(--orjona-navy-deep);
	text-decoration: none;
	flex-shrink: 0;
}

.orjona-header__crest {
	width: 90px;
	height: 90px;
	object-fit: contain;
}

.orjona-header__wordmark {
	font-family: var(--orjona-font-heading);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.12;
	letter-spacing: -0.42px;
	white-space: nowrap;
}

.orjona-header__wordmark em {
	font-style: italic;
}

.orjona-header__nav .orjona-header__menu {
	display: flex;
	align-items: center;
	gap: 36px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.orjona-header__menu a {
	display: block;
	padding: 6px 0;
	font-family: var(--orjona-font-body);
	font-size: 16px;
	font-weight: 600;
	color: var(--orjona-navy-deep);
	text-decoration: none;
	transition: color var(--orjona-transition), border-color var(--orjona-transition);
	border-bottom: 3px solid transparent;
}

.orjona-header__menu a:hover,
.orjona-header__menu .current-menu-item > a,
.orjona-header__menu .current_page_item > a {
	color: var(--orjona-navy);
}

.orjona-header__menu .current-menu-item > a,
.orjona-header__menu .current_page_item > a {
	font-weight: 700;
	border-bottom-color: var(--orjona-cyan);
}

/* Dropdown: a child menu opens under its parent on hover or keyboard focus. */
.orjona-header__menu li {
	position: relative;
}

.orjona-header__menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 0 3px 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	vertical-align: middle;
	transition: transform var(--orjona-transition);
}

.orjona-header__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -16px;
	z-index: 50;
	display: flex;
	flex-direction: column;
	min-width: 220px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid #e1eafb;
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(22, 33, 80, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--orjona-transition), transform var(--orjona-transition), visibility var(--orjona-transition);
}

.orjona-header__menu li:hover > .sub-menu,
.orjona-header__menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.orjona-header__menu li:hover > a::after,
.orjona-header__menu li:focus-within > a::after {
	transform: rotate(225deg) translateY(-2px);
}

.orjona-header__menu .sub-menu li {
	width: 100%;
}

.orjona-header__menu .sub-menu a {
	display: block;
	padding: 10px 14px;
	border-radius: 8px;
	border-bottom: 0;
	font-size: 15px;
	white-space: nowrap;
}

.orjona-header__menu .sub-menu a:hover,
.orjona-header__menu .sub-menu a:focus-visible,
.orjona-header__menu .sub-menu .current-menu-item > a {
	background: #e1eafb;
	color: var(--orjona-navy);
}

.orjona-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.orjona-header__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--orjona-radius-pill);
	background: var(--orjona-ice);
	color: var(--orjona-navy);
	transition: background var(--orjona-transition), color var(--orjona-transition);
}

.orjona-header__cart:hover {
	background: var(--orjona-navy);
	color: var(--orjona-white);
}

.orjona-header__badge {
	position: absolute;
	top: -4px;
	left: 28px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--orjona-radius-pill);
	background: var(--orjona-navy);
	color: var(--orjona-white);
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.orjona-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--orjona-radius-pill);
	font-family: var(--orjona-font-body);
	font-weight: 700;
	text-decoration: none;
	transition: background var(--orjona-transition), color var(--orjona-transition), transform var(--orjona-transition), box-shadow var(--orjona-transition);
}

.orjona-btn--primary {
	padding: 17px 30px;
	font-size: 13px;
	background: var(--orjona-navy);
	color: var(--orjona-white);
	box-shadow: var(--orjona-shadow-cta);
}

.orjona-btn--primary:hover {
	background: var(--orjona-navy-deep);
	transform: translateY(-2px);
}

.orjona-btn--outline {
	padding: 11px 20px;
	border: 2px solid rgba(29, 50, 130, 0.28);
	background: transparent;
	color: var(--orjona-navy);
	font-size: 15px;
	font-weight: 600;
}

.orjona-btn--outline:hover {
	border-color: var(--orjona-navy);
}

/* Footer – Figma "Section / Footer" (3:152). Dark navy, 72px 80px padding, 80px column gap. */
.orjona-footer {
	background: var(--orjona-navy-deep);
	color: var(--orjona-text-on-dark);
	padding: 72px 80px;
}

.orjona-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 44px;
	max-width: 1440px;
	margin: 0 auto;
}

.orjona-footer__columns {
	display: flex;
	gap: 80px;
	align-items: flex-start;
}

.orjona-footer__brand {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.orjona-footer__wordmark {
	margin: 0;
	font-family: var(--orjona-font-heading);
	font-weight: 700;
	font-size: 52px;
	line-height: 1.12;
	letter-spacing: -0.78px;
	color: var(--orjona-white);
	white-space: nowrap;
}

.orjona-footer__wordmark em {
	font-style: italic;
	color: var(--orjona-cyan);
}

.orjona-footer__tagline {
	margin: 0;
	width: 380px;
	max-width: 100%;
	font-family: var(--orjona-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	color: var(--orjona-text-on-dark);
}

.orjona-footer__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex-shrink: 0;
	white-space: nowrap;
}

.orjona-footer__heading {
	margin: 0;
	font-family: var(--orjona-font-body);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--orjona-white);
}

.orjona-footer__links {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--orjona-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: normal;
	color: var(--orjona-white);
}

.orjona-footer__links a {
	color: inherit;
	text-decoration: none;
	transition: color var(--orjona-transition);
}

.orjona-footer__links a:hover {
	color: var(--orjona-dim);
}

.orjona-footer__copy {
	margin: 0;
	text-align: center;
	font-family: var(--orjona-font-body);
	font-weight: 300;
	font-size: 14px;
	color: var(--orjona-dim);
}

@media (max-width: 1024px) {
	.orjona-header__inner {
		padding: 16px 32px;
	}

	.orjona-header__nav .orjona-header__menu {
		gap: 20px;
	}
}

@media (max-width: 768px) {
	.orjona-header__nav {
		display: none;
	}

	.orjona-header__inner {
		padding: 12px 16px;
		gap: 12px;
	}

	.orjona-header__crest {
		width: 56px;
		height: 56px;
	}

	.orjona-header__logo {
		height: auto;
		gap: 8px;
	}

	.orjona-header__wordmark {
		font-size: 20px;
	}

	.orjona-header__actions {
		gap: 8px;
	}

	.orjona-header__login span.orjona-btn__label {
		display: none;
	}

	.orjona-header__login {
		padding: 10px;
	}

	.orjona-header__cart {
		width: 38px;
		height: 38px;
	}

	.orjona-header__crest {
		width: 44px;
		height: 44px;
	}

	.orjona-btn--primary {
		padding: 12px 14px;
		font-size: 12px;
	}

	.orjona-main {
		overflow-x: clip;
	}

	.orjona-footer {
		padding: 48px 16px;
	}

	.orjona-footer__columns {
		flex-direction: column;
		gap: 32px;
	}

	.orjona-footer__wordmark {
		font-size: 32px;
	}

	.orjona-footer__tagline {
		width: auto;
	}
}

/* Tablet: the nav moves to its own centred row so every item stays visible without a menu. */
@media (max-width: 1100px) and (min-width: 769px) {
	.orjona-header__inner {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 12px;
		padding: 16px 32px;
	}

	.orjona-header__logo { order: 1; }
	.orjona-header__actions { order: 2; margin-left: auto; }
	.orjona-header__nav { order: 3; width: 100%; }
	.orjona-header__nav .orjona-header__menu { justify-content: center; }
}

@media (max-width: 480px) {
	.orjona-header__actions { gap: 6px; }
	.orjona-header__wordmark { font-size: 18px; }
	/* Phones: the header CTA moves into the mobile menu (not built yet). */
	.orjona-header__actions .orjona-btn--primary {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}