@charset "UTF-8";

/* ==========================================================================
   NAŠA VODA — nasavoda.rs

   Rewritten from the 2017 stylesheet. The original shipped only in minified
   form, so this is a fresh implementation of the same design rather than a
   reformat of it. The visual language is preserved: the pill-shaped section
   headings that straddle each section boundary, the alternating dark/light
   blue panels, and the cyan-on-navy contact form.

   Two things the original did that are gone here:
     - the three gradient panel JPEGs (61 KB) are now CSS gradients
     - ~25 media queries that stepped one heading through font sizes are now
       a single clamp()
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted, subset to Latin + Serbian diacritics.

   The 2017 files were replaced: that cut of Signika had no đ/Đ glyph, so
   words like "obezbeđuju" and "ugrađenom" silently fell back to a system
   font mid-word. This cut covers the full Serbian Latin alphabet.
   -------------------------------------------------------------------------- */

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

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

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

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */

:root {
	/* Brand colours, carried over from the original stylesheet */
	--navy-deepest: #00011f;
	--navy-footer: #021b38;
	--navy-quote: #002b6f;
	--navy-nav: #01397a;
	--navy-ink: #013673;
	--navy-outline: #002b6f;

	--cyan: #00ffff;
	--cyan-bright: #00f9ff;
	--teal: #18bc9c;
	--blue-button: #29abe2;
	--blue-quote-cite: #50b2bc;
	--placeholder: #398b95;

	/* Filtration stage accents */
	--stage-1: #29abe2;
	--stage-2: #f15a24;
	--stage-3: #39b54a;

	/* Panel gradients — sampled from the JPEGs they replace */
	--panel-dark: linear-gradient(180deg, #004d91 0%, #005095 30%, #004d91 62%, #024284 100%);
	--panel-light: linear-gradient(180deg, #c4e3f4 0%, #c9e6f4 30%, #c4e3f4 62%, #b2dcf0 100%);

	/* Fluid type. The original stepped these through ~25 media queries. */
	--text-body: clamp(1.25rem, 0.95rem + 1.1vw, 1.875rem);
	--text-lead: clamp(1.5rem, 1.1rem + 1.4vw, 2.1875rem);
	--text-heading: clamp(1rem, 0.35rem + 2.9vw, 2.9rem);
	--text-hero: clamp(2.25rem, 1rem + 5.4vw, 5rem);
	--text-phone: clamp(2.5rem, 1rem + 7vw, 6.25rem);

	--container: 1200px;
	--nav-height: 74px;
	--pill-height: clamp(2rem, 1.1rem + 3.6vw, 4rem);
	--radius-pill: 999px;
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
	/* Keeps anchored sections clear of the fixed nav without JS. */
	scroll-padding-top: calc(var(--nav-height) + 1rem);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: "Signika", "Segoe UI", system-ui, -apple-system, sans-serif;
	font-size: var(--text-body);
	line-height: 1.4;
	color: #fff;
	background: var(--navy-deepest);
	overflow-x: hidden;
}

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

a {
	color: var(--teal);
}

h1,
h2,
h3 {
	margin: 0;
	font-weight: 700;
	line-height: 1.15;
}

p {
	margin: 0 0 1rem;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.container {
	width: min(100% - 2rem, var(--container));
	margin-inline: auto;
}

/* Visible only once focused — lets keyboard users skip the nav. */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: #fff;
	color: var(--navy-ink);
	font-weight: 700;
	border-radius: 0 0 8px 0;
}

.skip-link:focus {
	left: 0;
	top: 0;
}

:focus-visible {
	outline: 3px solid var(--teal);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. Navigation
   -------------------------------------------------------------------------- */

.nav {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	background: var(--navy-nav);
	text-transform: uppercase;
	font-weight: 700;
	transition: padding 0.3s ease;
}

.nav__inner {
	width: min(100% - 2rem, var(--container));
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--nav-height);
}

.nav__brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: #fff;
	text-decoration: none;
	font-size: clamp(1.1rem, 0.8rem + 0.9vw, 1.75rem);
	letter-spacing: 1px;
	transition: font-size 0.3s ease;
}

.nav__brand img {
	height: 30px;
	width: auto;
}

.nav__toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	font: inherit;
	font-size: 0.75rem;
	color: #fff;
	background: none;
	border: 1px solid #fff;
	border-radius: 6px;
	cursor: pointer;
}

.nav__toggle:hover,
.nav__toggle:focus-visible {
	background: var(--teal);
	border-color: var(--teal);
}

.nav__menu {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.nav__links,
.nav__social {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.nav__links a {
	color: #fff;
	text-decoration: none;
	letter-spacing: 1px;
	padding: 0.4rem 0.2rem;
	font-size: clamp(0.75rem, 0.55rem + 0.5vw, 0.95rem);
}

.nav__links a:hover {
	color: var(--teal);
}

/* Set by the scrollspy in js/main.js */
.nav__links a[aria-current="true"] {
	color: var(--teal);
}

.nav__social a {
	color: #fff;
	display: block;
	padding: 0.25rem;
}

.nav__social a:hover {
	color: var(--teal);
}

@media (max-width: 900px) {
	.nav__toggle {
		order: 3;
	}

	.nav__menu {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
		padding: 0.5rem 0 1.25rem;
	}

	.nav__inner {
		flex-wrap: wrap;
	}

	.nav__menu[data-open="true"] {
		display: flex;
	}

	.nav__links {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
		width: 100%;
	}

	.nav__links a {
		display: block;
		width: 100%;
		padding: 0.6rem 0;
		font-size: 1rem;
	}
}

@media (min-width: 901px) {
	.nav__toggle {
		display: none;
	}

	.nav {
		padding: 0.75rem 0;
	}

	/* Shrinks on scroll — the affix behaviour from the original. */
	.nav[data-scrolled="true"] {
		padding: 0;
	}

	.nav[data-scrolled="true"] .nav__brand {
		font-size: 1.4rem;
	}
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	min-height: 900px;
	padding-top: calc(var(--nav-height) + 5rem);
	text-align: center;
	color: #fff;
	background-color: var(--navy-deepest);
	background-image: image-set(
		url("../img/glavnaSlika.webp") type("image/webp"),
		url("../img/glavnaSlika.jpg") type("image/jpeg")
	);
	background-size: 100% 900px;
	background-repeat: no-repeat;
}

.hero__content {
	position: relative;
	z-index: 1;
}

.hero__logo {
	margin: 0 auto 1.25rem;
	width: 108px;
	height: 150px;
}

.hero h1 {
	font-size: var(--text-hero);
	padding-inline: 1rem;
}

/* The device shot is a mobile-only element in the original layout: on desktop
   it is already part of the background photograph. */
.hero__device {
	display: none;
}

@media (max-width: 767px) {
	.hero {
		min-height: 0;
		padding-top: calc(var(--nav-height) + 2rem);
		padding-bottom: 0;
		background-image: none;
	}

	.hero__logo {
		width: 50px;
		height: 70px;
	}

	.hero__device {
		display: block;
		margin: 1.5rem auto 0;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   6. Sections & the pill headings

   Each heading is a pill that sits centred on the section's top edge,
   overlapping the panel above it.
   -------------------------------------------------------------------------- */

.section {
	position: relative;
	padding-block: calc(var(--pill-height) / 2 + 3.5rem) 4rem;
	text-align: center;
}

.section__heading {
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% -50%;
	z-index: 5;

	display: grid;
	place-items: center;

	/* Width follows the Bootstrap columns the 2017 pill sat in — col-xs-12,
	   col-sm-10, col-lg-8 — so it grows with the viewport. A flat max-width
	   here makes the longest heading outgrow its own content box on wide
	   screens, and an overflowing grid item stops being centred: the text
	   then hugs the right edge with a gap on the left. */
	width: calc(100% - 2rem);
	min-height: var(--pill-height);
	padding: 0.35em 1em;

	font-size: var(--text-heading);
	letter-spacing: -0.02em;

	/* No nowrap: below roughly 340px even the smallest step cannot fit the
	   longest heading on one line, and wrapping is better than spilling out
	   of the pill. Everywhere above that it stays on one line anyway. */
	text-wrap: balance;

	background: #fff;
	color: var(--navy-outline);
	border: 2px solid var(--navy-outline);
	border-radius: var(--radius-pill);
}

/* The 2017 column steps: col-sm-10 (83.3%) then col-lg-8 (66.7%). */
@media (min-width: 768px) {
	.section__heading {
		width: 83.333%;
	}
}

@media (min-width: 1200px) {
	.section__heading {
		width: 66.667%;
	}
}

/* Cyan pill — used on the water and filters sections */
.section--water .section__heading,
.section--filters .section__heading {
	background: var(--cyan-bright);
	color: var(--navy-outline);
	border-color: #fff;
}

/* Solid navy pill — used on the price and contact sections */
.section--price .section__heading,
.section--contact .section__heading {
	background: var(--navy-ink);
	color: #fff;
	border-color: #fff;
}

.lead {
	font-size: var(--text-lead);
	font-weight: 700;
	margin-inline: auto;
	max-width: 40ch;
}

/* Panel treatments */
.section--device,
.section--compare,
.section--price {
	background: var(--panel-dark);
	color: #fff;
}

.section--water,
.section--filters,
.section--contact {
	background: var(--panel-light);
	color: var(--navy-ink);
}

/* --------------------------------------------------------------------------
   7. "O aparatu" — device
   -------------------------------------------------------------------------- */

.device {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 2rem;
	margin-top: 3rem;
	text-align: left;
}

.device__text img {
	margin-top: 2rem;
	width: 108px;
	height: 150px;
}

.device__image {
	width: 100%;
}

@media (max-width: 885px) {
	.device {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.device__text img {
		margin-inline: auto;
	}
}

/* --------------------------------------------------------------------------
   8. "O vodi" — split image/text row
   -------------------------------------------------------------------------- */

.split {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4rem);
	margin-top: 3rem;
	text-align: right;
}

.split img {
	width: 100%;
	max-width: 555px;
}

@media (max-width: 767px) {
	.split {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.split img {
		max-width: 200px;
		margin-inline: auto;
	}
}

/* --------------------------------------------------------------------------
   9. Quote
   -------------------------------------------------------------------------- */

.quote {
	min-height: 300px;
	display: grid;
	align-items: center;
	padding-block: 3rem;
	color: #fff;
	background: var(--navy-quote);
	border-bottom: 2px solid #fff;
}

.quote__block {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: clamp(1rem, 3vw, 3rem);
	margin: 0;
	text-align: left;
}

.quote__mark {
	width: clamp(80px, 14vw, 232px);
	height: auto;
}

.quote__block p {
	font-size: var(--text-lead);
	font-weight: 700;
}

.quote__block cite {
	display: block;
	color: var(--blue-quote-cite);
	font-style: normal;
}

/* --------------------------------------------------------------------------
   10. "Kakvu vodu inače pijemo" — comparison cards
   -------------------------------------------------------------------------- */

.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	margin-top: 3rem;
}

.card {
	display: grid;
	grid-template-rows: 200px auto;
	justify-items: center;
	align-items: end;
	gap: 1.5rem;
}

.card img {
	width: auto;
	max-height: 200px;
}

/* Slightly lighter body copy on the comparison and filter panels, as before */
.cards p,
.stages p {
	font-size: clamp(1.05rem, 0.85rem + 0.7vw, 1.5625rem);
	font-weight: 300;
}

@media (max-width: 767px) {
	.cards {
		grid-template-columns: 1fr;
	}

	.card {
		grid-template-rows: auto auto;
	}
}

/* --------------------------------------------------------------------------
   11. Filters
   -------------------------------------------------------------------------- */

.filters__diagram {
	margin: 2rem auto;
	width: 100%;
	max-width: 970px;
}

.stages {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 3vw, 2.5rem);
	margin-top: 2rem;
	counter-reset: stage;
}

.stages > li p {
	margin: 0 0 0.35rem;
}

.stages h3 {
	font-size: inherit;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 0.35rem;
}

.stages > li:nth-child(1) h3 {
	color: var(--stage-1);
}

.stages > li:nth-child(2) h3 {
	color: var(--stage-2);
}

.stages > li:nth-child(3) h3 {
	color: var(--stage-3);
}

@media (max-width: 767px) {
	.stages {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   12. Price
   -------------------------------------------------------------------------- */

.section--price {
	color: var(--cyan);
}

.price__image {
	margin: 0 auto 2rem;
	width: 100%;
	max-width: 647px;
}

.price__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: start;
}

.price__grid p {
	font-size: clamp(1.25rem, 0.9rem + 1.3vw, 2.3333rem);
	margin: 0;
}

.price__highlight {
	color: #fff;
}

@media (max-width: 767px) {
	.price__grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   13. Contact
   -------------------------------------------------------------------------- */

.contact__label {
	margin-top: 2rem;
}

.contact__phone {
	font-size: var(--text-phone);
	font-weight: 700;
	margin: 0.5rem 0 1.5rem;
	line-height: 1;
}

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

.contact__phone a:hover {
	color: var(--teal);
}

.form {
	margin-top: 2rem;
	text-align: left;
}

.form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.form__field {
	display: block;
	margin-bottom: 1rem;
}

/* The original used placeholders as the only labels. Real labels are kept in
   the markup for assistive tech and visually hidden, so the look is unchanged. */
.form__field > span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.form__field input,
.form__field textarea {
	display: block;
	width: 100%;
	padding: 0 1.25rem;
	height: 80px;
	font-family: inherit;
	font-size: 1.5625rem;
	color: var(--cyan);
	background: var(--navy-ink);
	border: 2px solid transparent;
	border-radius: 20px;
}

.form__field textarea {
	height: 280px;
	padding-block: 1rem;
	resize: vertical;
}

.form__field input::placeholder,
.form__field textarea::placeholder {
	color: var(--placeholder);
	opacity: 1;
}

.form__field input:user-invalid,
.form__field textarea:user-invalid {
	border-color: #ff6b6b;
}

/* Honeypot: off-screen and out of the tab order, but not display:none —
   some bots skip anything explicitly hidden. */
.form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 0.5rem;
}

.button {
	height: 75px;
	padding-inline: 3rem;
	font-family: inherit;
	font-size: 1.875rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	background: var(--blue-button);
	border: 0;
	border-radius: 20px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.button:hover:not(:disabled) {
	background: var(--teal);
	color: var(--navy-ink);
}

.button:disabled {
	opacity: 0.6;
	cursor: progress;
}

.form__message {
	margin-top: 1.25rem;
	font-weight: 700;
	text-align: center;
}

.form__message:empty {
	display: none;
}

.form__message[data-state="ok"] {
	color: #0a7d5a;
}

.form__message[data-state="error"] {
	color: #b3261e;
}

@media (max-width: 767px) {
	.form__row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.form__actions {
		justify-content: stretch;
	}

	.button {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.footer {
	position: relative;
	min-height: 300px;
	padding-block: 5rem 3rem;
	text-align: center;
	color: var(--cyan);
	background: var(--navy-footer);
}

.footer a {
	color: var(--cyan);
}

.footer__logo {
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% -50%;
	width: 94px;
	height: 130px;
}

.footer__name {
	color: #fff;
	font-weight: 700;
}

.footer__address {
	font-style: normal;
	margin-top: 1.5rem;
}

.footer__address p {
	margin: 0.25rem 0;
}

.footer__social {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.footer__social a {
	display: block;
	padding: 0.25rem;
}

.footer__social a:hover {
	color: var(--teal);
}

/* --------------------------------------------------------------------------
   15. 404 page

   Lives here rather than in a <style> block on 404.html, so the site's CSP can
   stay at style-src 'self' with no 'unsafe-inline'.
   -------------------------------------------------------------------------- */

.error {
	min-height: 100svh;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 1rem;
	padding: 2rem 1rem;
	text-align: center;
	background: var(--panel-dark);
}

.error__code {
	margin: 0;
	font-size: clamp(4rem, 18vw, 10rem);
	line-height: 1;
	color: var(--cyan);
}

.error__home {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.9rem 2.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: var(--blue-button);
	border-radius: 20px;
}

.error__home:hover {
	background: var(--teal);
	color: var(--navy-ink);
}

/* --------------------------------------------------------------------------
   16. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------------
   17. Print
   -------------------------------------------------------------------------- */

@media print {
	.nav,
	.form__actions,
	.skip-link {
		display: none;
	}

	body {
		color: #000;
		background: #fff;
	}

	.section,
	.quote,
	.footer {
		background: none;
		color: #000;
	}
}