/* =============================================================
   MuniDocs — [munidocs] card/grid shortcode styles
   Scoped to .munidocs-grid so nothing leaks into the theme.
   CSS custom properties let the future settings page override
   brand colors by outputting --munidocs-brand in wp_head.
   ============================================================= */

.munidocs-grid {
	/* Brand color — override via: .munidocs-grid { --mng-brand: #c0392b; } */
	--mng-brand:       var(--munidocs-brand, #1a6dba);
	--mng-brand-dark:  var(--munidocs-brand-dark, #145699);
	--mng-brand-rgb:   var(--munidocs-brand-rgb, 26 109 186);

	/* Neutral palette */
	--mng-text:        #111827;
	--mng-muted:       #6b7280;
	--mng-border:      #e5e7eb;
	--mng-bg:          #ffffff;
	--mng-header-bg:   #f8f9fb;

	/* Shadows */
	--mng-shadow:      0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
	--mng-shadow-hover:0 4px 12px rgba(0,0,0,.10), 0 8px 28px rgba(0,0,0,.09);

	/* Shape */
	--mng-radius:      10px;
	--mng-gap:         20px;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--mng-text);
	box-sizing: border-box;
}

.munidocs-grid *,
.munidocs-grid *::before,
.munidocs-grid *::after {
	box-sizing: inherit;
}

/* ---- Screen-reader-only utility ---- */
.munidocs-grid .mng-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* =============================================================
   Search bar
   ============================================================= */

.mng-search-wrap {
	position: relative;
	margin-bottom: 28px;
	max-width: 400px;
}

.mng-search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--mng-muted);
	display: flex;
	align-items: center;
	pointer-events: none;
}

.mng-search {
	width: 100%;
	padding: 11px 14px 11px 38px;
	border: 2px solid var(--mng-border);
	border-radius: 8px;
	font-size: .95rem;
	font-family: inherit;
	color: var(--mng-text);
	background: var(--mng-bg);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .2s, box-shadow .2s;
}

.mng-search:focus {
	border-color: var(--mng-brand);
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--mng-brand-rgb) / .18);
}

/* Hide the browser-native clear button — we don't need it */
.mng-search::-webkit-search-cancel-button,
.mng-search::-webkit-search-decoration { -webkit-appearance: none; }

/* =============================================================
   Group headings  (group_by="year" or "month")
   Newest first because posts are sorted desc before grouping.
   ============================================================= */

.mng-group {
	margin-bottom: 40px;
}

.mng-group:last-child { margin-bottom: 0; }

.mng-group.mng-hidden { display: none; }

.mng-group-heading {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--mng-text);
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--mng-border);
	line-height: 1.3;
	/* Reset any heading styles the theme applies */
	letter-spacing: 0;
	text-transform: none;
}

/* =============================================================
   Card grid — CSS Grid with responsive step-down
   ============================================================= */

.mng-cards-grid {
	display: grid;
	gap: var(--mng-gap);
	align-items: start;
}

/* Base column counts */
.mng-cols-1 { grid-template-columns: 1fr; }
.mng-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mng-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mng-cols-4 { grid-template-columns: repeat(4, 1fr); }

/*
 * Graceful step-down regardless of the attribute value set:
 *   4-col → 3 → 2 → 1
 *   3-col → 2 → 1
 *   2-col → 1
 *   1-col → 1 (unchanged)
 */
@media ( max-width: 1100px ) {
	.mng-cols-4 { grid-template-columns: repeat(3, 1fr); }
}

@media ( max-width: 820px ) {
	.mng-cols-3,
	.mng-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media ( max-width: 560px ) {
	.mng-cols-2,
	.mng-cols-3,
	.mng-cols-4 { grid-template-columns: 1fr; }

	.mng-search-wrap { max-width: 100%; }
}

/* =============================================================
   Cards
   ============================================================= */

.mng-card {
	position: relative;        /* anchor for the stretched-link ::after */
	background: var(--mng-bg);
	border: 1px solid var(--mng-border);
	border-radius: var(--mng-radius);
	box-shadow: var(--mng-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease;
}

.mng-card:hover {
	box-shadow: var(--mng-shadow-hover);
	border-color: #c9d3de;
	transform: translateY(-2px);
}

.mng-card.mng-hidden { display: none; }

/* ---- Card header: icon + category ---- */
.mng-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 16px 12px;
	background: var(--mng-header-bg);
	border-bottom: 1px solid var(--mng-border);
}

/* File-type icon (inline SVG, 40×48 viewBox) */
.mng-type-icon {
	display: block;
	flex-shrink: 0;
	/* Drop-shadow makes the icon pop slightly against the header bg */
	filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}

/* Category label */
.mng-card-category {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--mng-muted);
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 55%;
}

/* ---- Card body: title, date, description ---- */
.mng-card-body {
	padding: 14px 16px 10px;
	flex: 1;
}

.mng-card-title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 5px;
	color: var(--mng-text);
	/* Reset theme margins that often bloat headings inside shortcodes */
	padding: 0;
}

/*
 * Stretched-link: the <a> inside .mng-card-title gets a ::after
 * pseudo-element that expands to cover the entire .mng-card.
 * The card is fully clickable via this single semantic link.
 * The footer "Open document" span is decorative (aria-hidden).
 */
.mng-card-link {
	color: var(--mng-text);
	text-decoration: none;
}

.mng-card-link::after {
	content: '';
	position: absolute;
	inset: 0;
	/* z-index: 0 keeps it behind the decorative footer (which is aria-hidden
	   and has no interactive elements, so no z-index is needed there). */
}

.mng-card:hover .mng-card-link { color: var(--mng-brand); }

.mng-card-date {
	font-size: .8rem;
	color: var(--mng-muted);
	margin: 0 0 8px;
	line-height: 1.4;
}

.mng-card-desc {
	font-size: .875rem;
	color: var(--mng-muted);
	line-height: 1.55;
	margin: 0;
	/* Clamp description to 3 lines */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- Card footer: "Open document" download button ---- */
.mng-card-footer {
	padding: 12px 16px 14px;
	border-top: 1px solid var(--mng-border);
	margin-top: auto; /* push to bottom when cards in a row differ in height */
}

/*
 * .mng-dl-btn is a <span> (not an <a>) because the card's entire surface is
 * already an interactive link via the stretched-link above. Visually it looks
 * like a button; screen readers hear the title link and skip this aria-hidden div.
 */
.mng-dl-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: var(--mng-brand);
	color: #fff;
	border-radius: 6px;
	font-size: .8rem;
	font-weight: 700;
	line-height: 1;
	pointer-events: none; /* the stretched link handles the click */
	transition: background .15s;
	white-space: nowrap;
}

.mng-card:hover .mng-dl-btn {
	background: var(--mng-brand-dark);
}

/* =============================================================
   Empty / no-results
   ============================================================= */

.mng-no-results {
	text-align: center;
	padding: 36px 0;
	color: var(--mng-muted);
	font-size: .95rem;
	margin: 0;
}

/* =============================================================
   Multi-file cards  (.mng-card--multi)
   ============================================================= */

/*
 * Disable the stretched-link overlay so each part-link in the footer
 * is independently clickable. The title link still goes to Part 1.
 */
.mng-card--multi .mng-card-link::after { display: none; }

.mng-card--multi .mng-card-link:hover { color: var(--mng-brand); }

.mng-card-footer--multi {
	padding: 12px 16px 14px;
	border-top: 1px solid var(--mng-border);
	margin-top: auto;
}

.mng-parts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mng-part-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 13px;
	background: var(--mng-brand);
	color: #fff;
	border-radius: 6px;
	font-size: .78rem;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s;
	white-space: nowrap;
}

.mng-part-link:hover { background: var(--mng-brand-dark); color: #fff; }

.mng-part-type {
	opacity: .75;
	font-weight: 400;
	font-size: .72rem;
}

/* =============================================================
   Empty state: shown when the shortcode query returns zero documents
   ============================================================= */
.munidocs-grid .munidocs-empty {
	text-align: center;
	padding: 36px 0;
	color: var(--mng-muted);
	font-size: .95rem;
	font-style: italic;
	margin: 0;
}