/* ==========================================================================
   KLASIČNA TEMA — LAYOUT SHIM
   Nadomješta WP block-layout CSS (širine, alignwide/full, columns, buttons)
   za PHP-renderiran markup. Vrijednosti iz theme.json:
   content 46rem · wide 78rem · root padding 1.5rem · blockGap 1.5rem.
   ========================================================================== */

:root {
	--mare-content: 46rem;
	--mare-wide: 78rem;
	--mare-pad: 1.5rem;
}

/* --- Preset utility klase (WP ih u klasičnoj temi ne emitira za PHP HTML) - */
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
.has-x-large-font-size { font-size: var(--wp--preset--font-size--x-large); }
.has-large-font-size { font-size: var(--wp--preset--font-size--large); }
.has-medium-font-size { font-size: var(--wp--preset--font-size--medium); }
.has-ink-background-color { background-color: var(--wp--preset--color--ink); }
.has-ink-2-background-color { background-color: var(--wp--preset--color--ink-2); }
.has-cream-color { color: var(--wp--preset--color--cream); }
.has-paper-color { color: var(--wp--preset--color--paper); }
.has-muted-color { color: var(--wp--preset--color--muted); }
.has-gold-color { color: var(--wp--preset--color--gold); }

.mare-thread { width: 100%; }

/* --- Širine / poravnanja ------------------------------------------------- */
.alignfull { width: 100%; }
.mare-inner { max-width: var(--mare-wide); margin-left: auto; margin-right: auto; }
.mare-inner--narrow { max-width: 760px; }
.mare-inner--content { max-width: var(--mare-content); }

/* Bočni razmak na sekcijama (hero ima vlastiti na __inner) */
.mare-section,
.mare-why { padding-left: var(--mare-pad); padding-right: var(--mare-pad); }

.mare-hero__inner {
	/* Blok verzija: alignwide (78rem) s constrained sadržajem na content-size (46rem),
	   što daje centriran stupac. Reproduciramo centriranjem na content-size. */
	max-width: calc(var(--mare-content) + 2 * var(--mare-pad));
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--mare-pad);
	padding-right: var(--mare-pad);
	box-sizing: border-box;
	width: 100%;
}

/* --- Stupci (blog, kontakt) --------------------------------------------- */
.mare-cols {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50, 5.5rem);
	align-items: center;
}
.mare-cols > * { min-width: 0; }
.mare-cols--blog .mare-col--media { flex: 1 1 55%; }
.mare-cols--blog .mare-col--text  { flex: 1 1 40%; }
.mare-cols--contact .mare-col--text { flex: 1 1 40%; }
.mare-cols--contact .mare-col--form { flex: 1 1 52%; }

/* --- Redak naslov/link (blog header) ------------------------------------ */
.mare-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1.5rem;
}

/* --- Gumbi --------------------------------------------------------------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.wp-block-button { margin: 0; }
.wp-block-button__link,
.wp-element-button {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	background: transparent;
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	padding: 1rem 2rem;
	border: 0;
	border-radius: 0;
	transition: background 0.4s var(--mare-ease), color 0.4s var(--mare-ease);
}
.wp-block-button.is-style-outline .wp-block-button__link { border: 1px solid var(--wp--preset--color--cream); }
.wp-block-button__link:hover,
.wp-element-button:hover { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--ink); }

/* --- Slike / figure ------------------------------------------------------ */
figure { margin: 0; }
.wp-block-image { margin: 0; }
.wp-block-image img { max-width: 100%; height: auto; vertical-align: middle; }

/* --- Blog postcard ------------------------------------------------------- */
.mare-col--media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.mare-col--text time { display: block; margin-bottom: 0.6rem; }
.mare-col--text h3 { margin: 0 0 0.8rem; }

/* --- Header (klasična navigacija) --------------------------------------- */
.mare-header__inner {
	max-width: var(--mare-wide);
	margin-inline: auto;
	padding: 1rem var(--mare-pad);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.mare-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	font-family: var(--wp--preset--font-family--archivo);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.74rem;
	font-weight: 500;
}
.mare-nav a { color: var(--wp--preset--color--paper); text-decoration: none; }
.mare-nav a:hover { color: var(--wp--preset--color--cream); }

/* --- Hamburger (samo mobitel) ------------------------------------------- */
.mare-nav-toggle {
	display: none; /* prikazuje se u media queryju ispod, kad je JS dostupan */
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	width: 2.75rem;
	height: 2.75rem;
	cursor: pointer;
	color: var(--wp--preset--color--cream);
	align-items: center;
	justify-content: center;
}
.mare-nav-toggle__bars,
.mare-nav-toggle__bars::before,
.mare-nav-toggle__bars::after {
	display: block;
	width: 22px;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.3s var(--mare-ease), background 0.2s var(--mare-ease);
}
.mare-nav-toggle__bars { position: relative; }
.mare-nav-toggle__bars::before,
.mare-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.mare-nav-toggle__bars::before { top: -6px; }
.mare-nav-toggle__bars::after { top: 6px; }
.mare-nav-toggle[aria-expanded="true"] .mare-nav-toggle__bars { background: transparent; }
.mare-nav-toggle[aria-expanded="true"] .mare-nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.mare-nav-toggle[aria-expanded="true"] .mare-nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
.mare-logo {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 1.2rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--cream);
	text-decoration: none;
}
.mare-header .custom-logo { width: clamp(120px, 14vw, 168px); height: auto; }

/* --- Footer (klasična) --------------------------------------------------- */
.mare-footer__inner {
	max-width: var(--mare-wide);
	margin-inline: auto;
	padding-left: var(--mare-pad);
	padding-right: var(--mare-pad);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 2.5rem;
}
.mare-footer__bottom { text-align: center; margin-top: var(--wp--preset--spacing--40, 3.5rem); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--wp--preset--color--muted); }
.mare-footer .custom-logo { width: 140px; height: auto; }
.mare-social { display: flex; gap: 1rem; list-style: none; margin: 0.5rem 0 0; padding: 0; }
.mare-social a { color: var(--wp--preset--color--paper); text-decoration: none; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 781px) {
	.mare-cols { gap: 2.5rem; }
	.mare-cols--blog .mare-col--media,
	.mare-cols--blog .mare-col--text,
	.mare-cols--contact .mare-col--text,
	.mare-cols--contact .mare-col--form { flex: 1 1 100%; }

	/* Naslov + "Svi članci" link jedan ispod drugoga (inače link izlazi iz ekrana) */
	.mare-row { flex-direction: column; align-items: flex-start; gap: 1rem; }

	/* Header: logo + hamburger u jednom retku (bez prelamanja) */
	.mare-header__inner { flex-wrap: nowrap; }

	/* Hamburger vidljiv samo kad JS može otvoriti izbornik */
	.has-js .mare-nav-toggle { display: inline-flex; }

	/* Bez JS-a izbornik ostaje vidljiv (fallback); s JS-om se sklapa u panel */
	.has-js .mare-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: rgba(5, 5, 5, 0.96);
		backdrop-filter: saturate(140%) blur(10px);
		-webkit-backdrop-filter: saturate(140%) blur(10px);
		border-bottom: 1px solid var(--mare-line-soft);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.5rem);
		transition: opacity 0.3s var(--mare-ease), transform 0.3s var(--mare-ease), visibility 0.3s var(--mare-ease);
		pointer-events: none;
	}
	.has-js .mare-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
	}
	.has-js .mare-nav ul {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		padding: 0.5rem var(--mare-pad) 1.25rem;
		font-size: 0.85rem;
	}
	.has-js .mare-nav li { width: 100%; }
	.has-js .mare-nav li + li { border-top: 1px solid var(--mare-line-soft); }
	.has-js .mare-nav a { display: block; padding: 1rem 0; }
}