/*
Theme Name: CROHM Glasno
Theme URI: https://crohm.hr
Author: CROHM – Udruga korisnika osobnih isparivača
Description: Blok tema za crohm.hr, smjer „A – Glasno”: tirkizna, crna i signalna žuta, Archivo i Source Sans 3 (lokalno, bez Google servera).
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crohm-glasno
*/

/* ---------- Osnove ---------- */
:root {
	--crohm-ink: var(--wp--preset--color--ink);
	--crohm-brand: var(--wp--preset--color--brand);
	--crohm-brand-dark: var(--wp--preset--color--brand-dark);
	--crohm-signal: var(--wp--preset--color--signal);
	--crohm-white: var(--wp--preset--color--base);
	--crohm-section-y: clamp(3rem, 6vw, 4.25rem);
}

body { -webkit-font-smoothing: antialiased; }

h1, h2,
.crohm-display,
.crohm-stat-number {
	font-stretch: 125%;
}

:where(a, button, input, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--crohm-brand);
	outline-offset: 3px;
	border-radius: 4px;
}

img { height: auto; }

/* Uklanja razmak između obojenih traka na naslovnici */
.wp-site-blocks > main,
.crohm-front > .alignfull,
.crohm-front > .wp-block-group.alignfull { margin-block-start: 0; margin-block-end: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------- Gornja traka ---------- */
.crohm-topbar { background: var(--crohm-signal); text-align: center; }
.crohm-topbar p { margin: 0; }
.crohm-topbar a {
	display: block;
	padding: 0.7rem 1rem;
	color: var(--crohm-ink);
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 800;
	font-size: 0.9375rem;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.crohm-topbar a:hover { text-decoration: underline; color: var(--crohm-ink); }

/* ---------- Zaglavlje ---------- */
.crohm-header { background: var(--crohm-white); }
.crohm-logo img { height: 64px; width: auto; display: block; }
.crohm-header .wp-block-navigation a { text-decoration: none; color: var(--crohm-ink); }
.crohm-header .wp-block-navigation a:hover { color: var(--crohm-brand-dark); }
.crohm-header .wp-block-navigation .crohm-nav-cta > a,
.crohm-header .wp-block-navigation .crohm-nav-cta .wp-block-navigation-item__content {
	background: var(--crohm-ink);
	color: var(--crohm-white);
	padding: 0.75rem 1.4rem;
	border-radius: 999px;
}
.crohm-header .wp-block-navigation .crohm-nav-cta > a:hover { background: var(--crohm-brand-dark); color: var(--crohm-white); }
.crohm-header .wp-block-navigation__responsive-container.is-menu-open { padding: 2rem; }
.crohm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.25rem; font-size: 1.375rem; }

/* ---------- Gumbi ---------- */
.crohm-btn-light .wp-block-button__link { background: var(--crohm-white); color: var(--crohm-ink); }
.crohm-btn-light .wp-block-button__link:hover { background: var(--crohm-ink); color: var(--crohm-white); }
.crohm-btn-brand .wp-block-button__link { background: var(--crohm-brand); color: var(--crohm-ink); }
.crohm-btn-brand .wp-block-button__link:hover { background: var(--crohm-ink); color: var(--crohm-white); }

/* ---------- Naslovnica: hero ---------- */
.crohm-hero {
	position: relative;
	overflow: hidden;
	background: var(--crohm-brand);
	color: var(--crohm-ink);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(3rem, 6vw, 4.75rem);
}
.crohm-hero::before {
	content: "";
	position: absolute;
	right: -8rem;
	top: -3rem;
	width: min(760px, 70vw);
	aspect-ratio: 209 / 150;
	background: url("assets/images/omega.png") no-repeat center / contain;
	opacity: 0.18;
	pointer-events: none;
}
.crohm-hero > * { position: relative; }
.crohm-hero-cols { max-width: var(--wp--style--global--wide-size); margin-inline: auto; gap: clamp(2.5rem, 5vw, 3.5rem); align-items: center; }
.crohm-hero a:not(.wp-element-button) { color: inherit; }

.crohm-kicker {
	display: inline-block;
	margin: 0;
	background: var(--crohm-ink);
	color: var(--crohm-white);
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 800;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.45rem 0.85rem;
	border-radius: 4px;
}
.crohm-display {
	font-size: var(--wp--preset--font-size--display) !important;
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.02em;
	margin-block: 1.25rem 1.25rem;
}
.crohm-lead { font-size: 1.25rem; line-height: 1.45; max-width: 32rem; }

/* Kartica s najnovijom objavom */
.crohm-hero-card .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.crohm-hero-card .wp-block-post {
	position: relative;
	background: var(--crohm-white);
	border-radius: 14px;
	overflow: visible;
	transform: rotate(2deg);
	box-shadow: 14px 14px 0 var(--crohm-ink);
}
.crohm-hero-card .wp-block-post-featured-image { margin: 0; border-radius: 14px 14px 0 0; overflow: hidden; }
.crohm-hero-card .wp-block-post-featured-image img { display: block; width: 100%; }
.crohm-sticker {
	position: absolute;
	top: -6px;
	left: 1.5rem;
	z-index: 2;
	margin: 0 !important;
	background: var(--crohm-signal);
	color: var(--crohm-ink);
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 900;
	font-size: 0.9375rem;
	text-transform: uppercase;
	padding: 1.1rem 0.9rem 0.6rem;
	border-radius: 0 0 8px 8px;
	transform: rotate(-4deg);
}
.crohm-card-body { padding: 1.5rem 1.75rem 1.75rem; display: flex; flex-direction: column; gap: 0.6rem; }
.crohm-card-body > * { margin: 0 !important; }
.crohm-card-title { font-size: 1.4rem; line-height: 1.15; }
.crohm-card-title a { text-decoration: none; color: var(--crohm-ink); }
.crohm-card-title a:hover { color: var(--crohm-brand-dark); }
.crohm-more { font-family: var(--wp--preset--font-family--archivo); font-weight: 800; color: var(--crohm-brand-dark) !important; text-decoration: none; }

/* ---------- Brojke ---------- */
.crohm-stats { background: var(--crohm-ink); color: var(--crohm-white); padding-block: clamp(2.5rem, 5vw, 3.25rem); }
.crohm-stats .wp-block-columns { max-width: var(--wp--style--global--wide-size); margin-inline: auto; gap: 2.5rem; }
.crohm-stat { border-top: 4px solid var(--crohm-signal); padding-top: 1.25rem; }
.crohm-stat p { margin: 0; color: #E4E1DD; }
.crohm-stat .crohm-stat-number {
	color: var(--crohm-signal);
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 900;
	font-size: clamp(2.75rem, 5vw, 3.75rem);
	line-height: 1;
	margin-bottom: 0.5rem;
}

/* ---------- Vijesti ---------- */
.crohm-news { padding-block: var(--crohm-section-y); }
.crohm-news > * { max-width: var(--wp--style--global--wide-size); }
.crohm-section-head { align-items: flex-end; margin-bottom: 2rem; }
.crohm-section-head h2 { margin: 0; font-size: var(--wp--preset--font-size--xx-large); }
.crohm-link-underline { margin: 0; }
.crohm-link-underline a {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 800;
	color: var(--crohm-ink);
	text-decoration: none;
	border-bottom: 3px solid var(--crohm-brand);
	padding-bottom: 4px;
}
.crohm-news-grid .wp-block-post-template,
.crohm-archive-grid .wp-block-post-template { gap: 1.75rem; }
.crohm-news-grid .wp-block-post,
.crohm-archive-grid .wp-block-post {
	background: var(--wp--preset--color--mint);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.crohm-news-grid .wp-block-post:nth-child(3n+2),
.crohm-archive-grid .wp-block-post:nth-child(3n+2) { background: var(--wp--preset--color--butter); }
.crohm-news-grid .wp-block-post:nth-child(3n+3),
.crohm-archive-grid .wp-block-post:nth-child(3n+3) { background: var(--wp--preset--color--sand); }
.crohm-news-grid .wp-block-post-featured-image,
.crohm-archive-grid .wp-block-post-featured-image { margin: 0; }
.crohm-news-grid .wp-block-post-featured-image img,
.crohm-archive-grid .wp-block-post-featured-image img { display: block; width: 100%; }
.crohm-tag a,
.crohm-tag .wp-block-post-terms__separator { display: none; }
.crohm-tag a:first-of-type {
	display: inline-block;
	background: var(--crohm-ink);
	color: var(--crohm-white);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
}

/* ---------- Biram bez dima (kompaktno: slika lijevo, kartica desno) ---------- */
body .crohm-biram {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: stretch;
	width: min(var(--wp--style--global--wide-size), calc(100% - 2 * clamp(1.25rem, 4vw, 2rem)));
	max-width: none;
	margin: 0 auto !important;
	padding: 0 0 var(--crohm-section-y) !important;
	background: none;
}
body .crohm-biram > * { max-width: none !important; margin: 0 !important; }
body .crohm-biram .crohm-biram-photo { position: relative; width: 100%; min-height: 320px; overflow: hidden; border-radius: 16px 0 0 16px; }
body .crohm-biram .crohm-biram-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100% !important; object-fit: cover; }
body .crohm-biram .crohm-biram-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
	background: var(--crohm-brand);
	color: var(--crohm-ink);
	border-radius: 0 16px 16px 0;
	padding: clamp(1.75rem, 3.5vw, 2.75rem) !important;
	box-shadow: 12px 12px 0 var(--crohm-signal);
}
body .crohm-biram .crohm-biram-card > * { margin: 0 !important; }
body .crohm-biram .crohm-biram-card h2 { font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 0.95; }
.crohm-chevron { display: flex; align-items: center; gap: 0.9rem; }
.crohm-chevron::before {
	content: "";
	flex: none;
	width: 0.7em;
	height: 0.8em;
	background: var(--crohm-ink);
	clip-path: polygon(0 0, 100% 50%, 0 100%, 0 72%, 55% 50%, 0 28%);
}

/* ---------- Učlanjenje i newsletter ---------- */
.crohm-join { background: var(--crohm-signal); padding-block: var(--crohm-section-y); }
.crohm-join .wp-block-columns { max-width: var(--wp--style--global--wide-size); margin-inline: auto; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.crohm-join h2 { font-size: var(--wp--preset--font-size--xx-large); line-height: 0.98; margin-top: 0; }
.crohm-newsletter {
	background: var(--crohm-white);
	border: 3px solid var(--crohm-ink);
	border-radius: 16px;
	padding: clamp(1.5rem, 4vw, 2.25rem) !important;
}
.crohm-newsletter h3 { margin-top: 0; font-size: 1.625rem; }

/* ---------- Pojedinačna objava i stranice ---------- */
.crohm-page-head { background: var(--crohm-brand); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.crohm-page-head h1 { margin: 0; font-size: var(--wp--preset--font-size--xx-large); }
.crohm-single-head { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.crohm-single-head .wp-block-post-title { font-size: var(--wp--preset--font-size--xx-large); margin-block: 0.75rem; }
.crohm-single-image img { border-radius: 16px; }
.crohm-single-content { padding-bottom: var(--crohm-section-y); }
.crohm-single-content > p:first-child { font-size: var(--wp--preset--font-size--large); line-height: 1.5; }
.crohm-more-news { background: var(--wp--preset--color--sand); padding-block: var(--crohm-section-y); }
.crohm-archive { padding-block: var(--crohm-section-y); }
.crohm-archive .wp-block-query-title { font-size: var(--wp--preset--font-size--xx-large); }

/* ---------- Podnožje ---------- */
.crohm-footer { background: var(--crohm-ink); color: #D9D6D2; font-size: 1rem; padding-block: clamp(3rem, 6vw, 4rem) 2rem; }
.crohm-footer a { color: #D9D6D2; text-decoration: none; }
.crohm-footer a:hover { color: var(--crohm-white); text-decoration: underline; }
.crohm-footer h2 { font-size: 1rem; font-stretch: 100%; color: var(--crohm-signal); margin: 0 0 0.75rem; }
.crohm-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.crohm-footer .crohm-logo-inv img { width: 130px; height: auto; display: block; }
.crohm-footer-bottom { border-top: 1px solid #3D3836; padding-top: 1.25rem; margin-top: 2.5rem; font-size: 0.875rem; color: #A9A4A0; }

/* ---------- Mobitel ---------- */
@media (max-width: 781px) {
	.crohm-hero::before { right: -12rem; opacity: 0.12; }
	.crohm-hero-card .wp-block-post { transform: rotate(1deg); box-shadow: 8px 8px 0 var(--crohm-ink); }
	.crohm-logo img { height: 52px; }
	body .crohm-biram { grid-template-columns: 1fr; }
	body .crohm-biram .crohm-biram-photo { min-height: 240px; border-radius: 16px 16px 0 0; }
	body .crohm-biram .crohm-biram-card { border-radius: 0 0 16px 16px; box-shadow: 8px 8px 0 var(--crohm-signal); }
}

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