/* IZB Nordic: components (icons, buttons, meta, more, date tile, top bar links, main nav, mega panel, drawer, footer). Ported from izb-pravci/v2/style.css. */

/* Icons */
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon.ext { width: 14px; height: 14px; opacity: .7; }
.chev { width: 16px; height: 16px; transition: transform .25s var(--izb-ease); }
button[aria-expanded="true"] .chev,
details[open] > summary .chev { transform: rotate(180deg); }

/* An acronym with its case ending ("IZBUŠ-a") stays on one line, see izb_title_html() */
.nobr { white-space: nowrap; }

/* Meta line and "more" link */
.meta { font-size: 14.5px; color: var(--izb-ink-2); font-variant-numeric: tabular-nums; }
.meta b { font-weight: 600; color: var(--izb-green); }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--izb-green); min-height: 44px; }
.more .icon { width: 18px; height: 18px; transition: transform .3s var(--izb-ease); }
.more:hover .icon { transform: translateX(3px); }

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--izb-radius-md);
	font: 600 15.5px/1.2 var(--izb-font-body);
	cursor: pointer;
}
.btn .icon { width: 18px; height: 18px; }
.btn.wide { justify-content: center; }
.btn-gold { background: var(--izb-gold); color: var(--izb-green-deep); }
.btn-gold:hover { background: var(--izb-gold-hover); color: var(--izb-green-deep); }
.btn-green { background: var(--izb-green); color: var(--izb-paper); }
.btn-green:hover { background: var(--izb-green-deep); color: var(--izb-paper); }
.btn-soft { background: transparent; border: 1.5px solid var(--izb-line); color: var(--izb-ink); }
.btn-soft:hover { border-color: var(--izb-green); color: var(--izb-green); }
.btn-line { background: transparent; border: 1.5px solid var(--izb-on-dark-outline); color: var(--izb-paper); }
.btn-line:hover { border-color: var(--izb-paper); color: var(--izb-paper); }
.btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* Icon buttons */
.icon-btn {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	flex: none;
	padding: 0;
	border-radius: var(--izb-radius-md);
	border: 1px solid var(--izb-line);
	background: var(--izb-paper);
	color: var(--izb-ink);
	cursor: pointer;
}
.icon-btn:hover,
.icon-btn[aria-expanded="true"] { border-color: var(--izb-green); color: var(--izb-green); }
.tools .join { min-height: 44px; padding: 0 16px; display: none; }
.menu-btn { display: grid; }
@media (min-width: 640px) { .tools .join { display: inline-flex; } }
@media (min-width: 1180px) { .menu-btn { display: none; } }

/* Date tile: green (events) and soft (hutbe) */
.date { width: 64px; background: var(--izb-green); color: var(--izb-paper); border-radius: var(--izb-radius-md); text-align: center; padding: 8px 0 7px; font: 700 24px/1 var(--izb-font-head); font-variant-numeric: tabular-nums; }
.date time { display: block; }
.date small { display: block; margin-top: 4px; font: 600 12px var(--izb-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--izb-gold-on-dark); }
.date.alt { background: var(--izb-green-tint); color: var(--izb-green); }
.date.alt small { color: var(--izb-gold-ink); }

/* Top bar links */
.top-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.top-links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 8px 10px;
	border-radius: var(--izb-radius-xs);
	color: var(--izb-green-ink-1);
	font-weight: 600;
}
.top-links a:hover { color: var(--izb-paper); background: var(--izb-on-dark-wash); }
.top-links .icon { width: 16px; height: 16px; }

/* Main nav */
.nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.nav > ul > li > a,
.nav > ul > li > button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	padding: 10px 11px;
	border-radius: var(--izb-radius-sm);
	font: 600 15.5px/1.2 var(--izb-font-body);
	color: var(--izb-ink);
	background: none;
	border: 0;
	cursor: pointer;
}
.nav > ul > li > a:hover,
.nav > ul > li > button:hover { background: var(--izb-sand); color: var(--izb-green); }
.nav [aria-current],
.nav .is-current > button,
.nav button[aria-expanded="true"] { color: var(--izb-green); background: var(--izb-green-tint); }

/* Mega panel (also used by the search panel) */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--izb-paper); border-bottom: 1px solid var(--izb-line); box-shadow: var(--izb-shadow-mega); }
.mega[hidden] { display: none; }
.mega-in { display: flex; gap: 48px; padding: 28px 0 32px; }
.mcol h3 { font: 600 13px/1.4 var(--izb-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--izb-gold-ink); margin: 0 0 10px; }
.mcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mcol a { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 7px 0; font-weight: 600; font-size: 16px; line-height: 1.35; }
.mcol a:hover,
.mcol a[aria-current] { color: var(--izb-green); }

/* Search panel */
.search-pop .wrap { padding: 20px 0 24px; }
.search-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 760px; }
.search-form input {
	flex: 1 1 240px;
	min-height: 48px;
	padding: 0 16px;
	border-radius: var(--izb-radius-md);
	border: 1px solid var(--izb-line);
	background: var(--izb-paper);
	color: var(--izb-ink);
	font: inherit;
}
.search-form input:focus-visible { border-color: var(--izb-green); }

/* Drawer contents */
.drawer-top strong { font: 700 22px var(--izb-font-head); }
.drawer .dl,
.drawer summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 52px;
	font: 600 18px var(--izb-font-head);
	border-bottom: 1px solid var(--izb-line);
	cursor: pointer;
	list-style: none;
}
.drawer summary::-webkit-details-marker { display: none; }
.drawer .dl[aria-current] { color: var(--izb-green); }
.drawer details .mcol { padding: 8px 0 12px 4px; }
.drawer .mcol h3[aria-hidden] { display: none; }
.drawer-foot a { display: flex; align-items: center; min-height: 44px; padding: 10px 0; font-weight: 600; color: var(--izb-green); }

/* Footer contents */
.site-footer h2 { color: var(--izb-paper); font-size: 22px; margin-bottom: 4px; }
.site-footer p { margin: 0; }
.site-footer h3 { color: var(--izb-paper); font: 600 15px var(--izb-font-body); margin: 0 0 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; }
.site-footer a:hover { color: var(--izb-paper); }
.site-footer .btn-gold:hover { background: var(--izb-gold-hover); color: var(--izb-green-deep); }

/* Section headings (homepage sections, "Još iz rubrike") */
.sec { padding: var(--izb-space-section) 0 8px; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sec-head h2 { font-size: clamp(26px, 3vw, 34px); }

/* News grid and card (homepage "Naše vijesti", archives, search). Below 640px one paper list. */
.news-grid { display: grid; gap: 20px; }
.card { display: grid; gap: 12px; align-content: start; min-width: 0; }
.card .ph { aspect-ratio: 3 / 2; border-radius: var(--izb-radius-photo); overflow: hidden; background: var(--izb-line); }
.card .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: var(--izb-grade); transition: transform .8s var(--izb-ease); }
.card:hover .ph img { transform: scale(1.04); }
.card h3 { font-size: 19px; letter-spacing: -.01em; }
.card h3 + .meta { margin-top: 6px; }
@media (max-width: 639px) {
	.news-grid { gap: 0; background: var(--izb-paper); border-radius: var(--izb-radius-panel); padding: 4px 16px; box-shadow: var(--izb-shadow); }
	.card { grid-template-columns: minmax(0, 1fr) 96px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--izb-line); }
	.card:last-child { border-bottom: 0; }
	.card .ph { order: 2; aspect-ratio: 1; border-radius: var(--izb-radius-md); }
	.card h3 { font-size: 17px; }
	.card .meta { margin-top: 4px; font-size: 13.5px; }
	.card.no-ph { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 640px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .news-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 24px; } }