/* Base styles for Brezjak */

/* Box model reset */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

/* Alegreya Regular */
@font-face {
	font-family: 'Alegreya';
	src: local('Alegreya Regular'),
		 local('Alegreya-Regular'),
		 url('fonts/Alegreya-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-024F, U+1E00-1EFF;
}

/* Alegreya Italic */
@font-face {
	font-family: 'Alegreya';
	src: local('Alegreya Italic'),
		 local('Alegreya-Italic'),
		 url('fonts/Alegreya-Italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-024F, U+1E00-1EFF;
}

/* Alegreya Bold */
@font-face {
	font-family: 'Alegreya';
	src: local('Alegreya Bold'),
		 local('Alegreya-Bold'),
		 url('fonts/Alegreya-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-024F, U+1E00-1EFF;
}

/* Alegreya SC Regular */
@font-face {
	font-family: 'Alegreya SC';
	src: local('Alegreya SC Regular'),
		 local('AlegreyaSC-Regular'),
		 url('fonts/AlegreyaSC-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-024F, U+1E00-1EFF;
}

/* Alegreya SC Bold */
@font-face {
	font-family: 'Alegreya SC';
	src: local('Alegreya SC Bold'),
		 local('AlegreyaSC-Bold'),
		 url('fonts/AlegreyaSC-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-024F, U+1E00-1EFF;
}

/* Variables */
:root {
	--font-body: 'Alegreya', serif;
	--font-accent: 'Alegreya SC', serif;

	--color-bg: #fff;
	--color-text: #333;

	--color-primary: #339999;
	--color-secondary: #ff9933;
	--color-tertiary: #999933;

	--color-muted: #666;
	--color-border: #ccc;
}

/* Body */
body {
	margin: 0;
	font-family: var(--font-body);
	background-color: var(--color-bg);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	color: var(--color-text);
	font-family: var(--font-accent);
	font-weight: 400;
	line-height: 1.25;
}

h1 { font-size: clamp(1.875rem, 2vw + 1rem, 2.5rem); }
h2 { font-size: clamp(1.5rem, 1.5vw + 0.75rem, 2rem); }
h3 { font-size: clamp(1.25rem, 1.2vw + 0.75rem, 1.5rem); }
h4 { font-size: 1.25rem; }
h5, h6 { font-size: 1.125rem; }

p { margin-block: 0 1em; }

small, .text-small {
	font-size: 0.875rem;
	color: var(--color-muted);
}

/* Links */
a {
	text-decoration: none;
	color: inherit;
}

/* Media */
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Accessibility */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Layout helpers */
.wrap {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 1.5rem;
}

/* Header */
header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: var(--color-bg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 1.5rem;
	padding-block: 1rem;
}

.branding a {
	display: block;
}

.nav-social {
	display: flex;
	gap: 1rem;
}

.nav-social .nav-link {
	display: inline-flex;
	align-items: center;
	color: var(--color-text);
	transition: color 0.2s ease;
}

.nav-social .nav-link:hover {
	color: var(--color-primary);
}

/* Footer */
footer {
	background-color: var(--color-bg);
	color: var(--color-muted);
	box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08);
}

.contentinfo {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 0.25rem;
	flex-wrap: wrap;
	padding-block: 1rem;
}

.contentinfo p {
	margin: 0;
}

/* Main */
main {
	background: radial-gradient(circle at 50% 45%, #ffffff 60%, #33999999 100%);
	background-image: image-set(
			url('img/bg-brezjak.webp') 1x,
			url('img/bg-brezjak-1920.webp') 2x
		);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

@media (max-width: 600px) {
	main {
		background-attachment: scroll;
	}
}

.hero {
	min-height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.coming-soon {
	padding-block: 3rem;
}

.pulse {
	color: var(--color-primary);
	animation: pulse 2.5s infinite;
}

@keyframes pulse {
	0% { opacity: 1; }
	50% { opacity: 0.6; }
	100% { opacity: 1; }
}
