/* Documents accordion — Opći poslovi. Each group is a white card in the
   site's card language, with the accent colour cycling teal → coral → green →
   yellow per group (same rhythm as the nav, service cards, and sidebar). The
   accent draws a left edge bar on the group header, tints it while hovered or
   open, and colours the document numbering. */

.documents-accordion {
	margin-bottom: var(--space-lg);
}

.documents-accordion__item {
	--accent: var(--color-teal);
	background: var(--color-white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	margin-bottom: var(--space-sm);
	overflow: hidden;
}

.documents-accordion__item:nth-child(4n + 2) {
	--accent: var(--color-coral);
}

.documents-accordion__item:nth-child(4n + 3) {
	--accent: var(--color-green);
}

.documents-accordion__item:nth-child(4n + 4) {
	--accent: var(--color-yellow);
}

.documents-accordion__item h2 {
	margin: 0;
}

/* Kadence styles bare button:hover/:focus with its own palette + shadow, so
   background/colour/box-shadow are pinned on every state — same lesson as the
   groups-page tabs. The inset bar is the group's accent identity. */
.documents-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	background: var(--color-white);
	border: none;
	box-shadow: inset 4px 0 0 var(--accent);
	color: var(--color-heading);
	font-family: var(--font-head);
	font-size: var(--font-size-lg);
	text-align: left;
	cursor: pointer;
	transition: var(--transition);
}

.documents-accordion__trigger:hover,
.documents-accordion__trigger:focus,
.documents-accordion__trigger:active,
.documents-accordion__trigger[aria-expanded="true"] {
	background: color-mix(in srgb, var(--accent) 10%, white);
	color: var(--color-heading);
	box-shadow: inset 4px 0 0 var(--accent);
	outline: none;
}

.documents-accordion__trigger:focus-visible {
	box-shadow: inset 4px 0 0 var(--accent), inset 0 0 0 2px var(--color-heading);
}

/* Plus/minus icon in a soft accent-tinted circle (programs-page badge style) */
.documents-accordion__icon {
	position: relative;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	margin-left: var(--space-sm);
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent) 18%, white);
	color: var(--color-heading);
}

.documents-accordion__icon::before,
.documents-accordion__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.documents-accordion__icon::before {
	width: 50%;
	height: 2px;
}

.documents-accordion__icon::after {
	width: 2px;
	height: 50%;
	transition: var(--transition);
}

.documents-accordion__trigger[aria-expanded="true"] .documents-accordion__icon::after {
	transform: translate(-50%, -50%) scaleY(0);
}

/* Open/close animation — the panel is a one-row grid whose track animates
   0fr ↔ 1fr (the auto-height transition trick; same modern-browser floor as
   the color-mix() used above). The hidden attribute stays the state switch
   the JS already toggles, but its display:none is overridden so height can
   animate; visibility keeps closed panels out of the tab order and the
   accessibility tree, and transitions so content stays visible while a
   panel slides shut. */
.documents-accordion__panel {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.3s ease, visibility 0.3s;
}

.documents-accordion__panel[hidden] {
	/* display must be re-declared here: Kadence's all.min.css ships a
	   [hidden]{display:none} that loads after this file and ties with the
	   single-class base rule above — this 2-part selector out-specifies it. */
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
}

/* The one grid item. It must carry NO padding/margin of its own: a 0fr track
   is really minmax(auto, 0fr), whose auto minimum is this item's margin-box —
   so any spacing here would survive as an empty strip under a closed header
   (which is exactly what padding, then margin, on the list did). It clips to
   zero via overflow:hidden + min-height:0; all visible spacing lives on the
   list inside it, where it can't hold the track open. */
.documents-accordion__panel-inner {
	overflow: hidden;
	min-height: 0;
}

.documents-accordion__list {
	margin: var(--space-sm) var(--space-md) var(--space-md);
	padding-left: var(--space-md);
}

.documents-accordion__doc {
	margin-bottom: var(--space-xs);
}

.documents-accordion__doc::marker {
	color: var(--accent);
	font-family: var(--font-head);
}

.documents-accordion__empty {
	color: var(--color-text);
	padding: var(--space-lg) 0;
}

/* Media queries */

@media (prefers-reduced-motion: reduce) {
	.documents-accordion__panel {
		transition: none;
	}
}