/**
 * SE Content Aggregator - front end styling
 * Copyright (C) 2026 SE24 Media. GPL v2 or later.
 *
 * Every visual property is a CSS custom property with a sensible default.
 * The module writes overrides for whichever properties the admin has set, so
 * anything left blank inherits from the site template rather than being forced
 * to a value here. Template overrides can redeclare any variable.
 */

.mod-secontentagg {
	/* Container */
	--sca-bg: transparent;
	--sca-padding: 0;
	--sca-radius: 0;
	--sca-border-width: 0;
	--sca-border-style: solid;
	--sca-border-colour: rgba(0, 0, 0, .12);
	--sca-shadow: none;
	--sca-max-width: none;
	--sca-align: left;

	/* Typography */
	--sca-font: inherit;
	--sca-font-size: 1rem;
	--sca-line-height: 1.45;
	--sca-colour: inherit;

	/* Title */
	--sca-title-size: 1.05rem;
	--sca-title-weight: 600;
	--sca-title-colour: inherit;
	--sca-title-align: left;
	--sca-title-transform: none;
	--sca-title-spacing: normal;
	--sca-title-margin: .6rem;

	/* Table */
	--sca-table-font-size: 1em;
	--sca-cell-padding-y: .4rem;
	--sca-cell-padding-x: .55rem;
	--sca-row-border-width: 1px;
	--sca-row-border-colour: rgba(0, 0, 0, .1);
	--sca-stripe-colour: rgba(0, 0, 0, .025);
	--sca-hover-colour: transparent;
	--sca-numeric-align: right;

	/* Table header */
	--sca-head-bg: transparent;
	--sca-head-colour: inherit;
	--sca-head-size: .82rem;
	--sca-head-weight: 600;
	--sca-head-transform: none;
	--sca-head-align: left;
	--sca-head-spacing: normal;
	--sca-head-border-width: 2px;
	--sca-head-border-colour: rgba(0, 0, 0, .2);

	/* Highlighted row */
	--sca-highlight-bg: rgba(46, 72, 107, .1);
	--sca-highlight-colour: inherit;
	--sca-highlight-weight: 600;

	/* Lists and pairs */
	--sca-item-padding: .6rem;
	--sca-item-divider: rgba(0, 0, 0, .1);
	--sca-heading-size: 1em;
	--sca-heading-weight: 600;
	--sca-heading-colour: inherit;
	--sca-text-size: .9em;
	--sca-text-colour: inherit;
	--sca-meta-size: .8em;
	--sca-meta-colour: inherit;
	--sca-meta-opacity: .7;
	--sca-label-colour: inherit;
	--sca-value-weight: 600;

	/* Charts */
	--sca-series-1: #2E486B;
	--sca-series-2: #4F7CA8;
	--sca-series-3: #7FA8C9;
	--sca-series-4: #A8C4DC;
	--sca-series-5: #C9A227;
	--sca-series-6: #8C6D3F;
	--sca-series-7: #6B7A8F;
	--sca-series-8: #94A7B8;
	--sca-grid-colour: rgba(0, 0, 0, .1);
	--sca-axis-colour: currentColor;
	--sca-axis-size: 12px;
	--sca-axis-opacity: .7;
	--sca-bar-radius: 2px;
	--sca-chart-max-height: none;
	--sca-legend-size: .87em;

	/* Footer note */
	--sca-note-size: .78em;
	--sca-note-colour: inherit;
	--sca-note-opacity: .65;
	--sca-note-align: left;

	background: var(--sca-bg);
	padding: var(--sca-padding);
	border-radius: var(--sca-radius);
	border: var(--sca-border-width) var(--sca-border-style) var(--sca-border-colour);
	box-shadow: var(--sca-shadow);
	max-width: var(--sca-max-width);
	text-align: var(--sca-align);
	font-family: var(--sca-font);
	font-size: var(--sca-font-size);
	line-height: var(--sca-line-height);
	color: var(--sca-colour);
}

.secontentagg__title {
	font-size: var(--sca-title-size);
	font-weight: var(--sca-title-weight);
	color: var(--sca-title-colour);
	text-align: var(--sca-title-align);
	text-transform: var(--sca-title-transform);
	letter-spacing: var(--sca-title-spacing);
	margin: 0 0 var(--sca-title-margin);
}

/* Table ------------------------------------------------------------------ */

.secontentagg__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--sca-table-font-size);
	font-variant-numeric: tabular-nums;
	text-align: left;
}

.secontentagg__table th,
.secontentagg__table td {
	padding: var(--sca-cell-padding-y) var(--sca-cell-padding-x);
	border-bottom: var(--sca-row-border-width) solid var(--sca-row-border-colour);
}

.secontentagg__table thead th {
	background: var(--sca-head-bg);
	color: var(--sca-head-colour);
	font-size: var(--sca-head-size);
	font-weight: var(--sca-head-weight);
	text-transform: var(--sca-head-transform);
	text-align: var(--sca-head-align);
	letter-spacing: var(--sca-head-spacing);
	border-bottom: var(--sca-head-border-width) solid var(--sca-head-border-colour);
}

.secontentagg__table td.is-numeric,
.secontentagg__table th.is-numeric {
	text-align: var(--sca-numeric-align);
}

.secontentagg__table.is-striped tbody tr:nth-child(odd) {
	background: var(--sca-stripe-colour);
}

.secontentagg__table tbody tr:hover {
	background: var(--sca-hover-colour);
}

.secontentagg__table tbody tr.is-highlighted {
	background: var(--sca-highlight-bg);
	color: var(--sca-highlight-colour);
	font-weight: var(--sca-highlight-weight);
}

.secontentagg__table tbody tr.is-highlighted:hover {
	background: var(--sca-highlight-bg);
}

.secontentagg__table.is-first-strong tbody td:first-child {
	font-weight: 600;
}

/* List ------------------------------------------------------------------- */

.secontentagg__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.secontentagg__item {
	padding: var(--sca-item-padding) 0;
	border-bottom: 1px solid var(--sca-item-divider);
}

.secontentagg__item:last-child { border-bottom: 0; }

.secontentagg__item-heading {
	display: block;
	font-size: var(--sca-heading-size);
	font-weight: var(--sca-heading-weight);
	color: var(--sca-heading-colour);
}

.secontentagg__item-meta {
	font-size: var(--sca-meta-size);
	color: var(--sca-meta-colour);
	opacity: var(--sca-meta-opacity);
}

.secontentagg__item-text {
	margin: .25rem 0 0;
	font-size: var(--sca-text-size);
	color: var(--sca-text-colour);
}

/* Label and value pairs -------------------------------------------------- */

.secontentagg__pairs { margin: 0; }

.secontentagg__pair {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: calc(var(--sca-item-padding) * .6) 0;
	border-bottom: 1px solid var(--sca-item-divider);
}

.secontentagg__pair:last-child { border-bottom: 0; }

.secontentagg__pair dt {
	margin: 0;
	font-weight: 400;
	color: var(--sca-label-colour);
}

.secontentagg__pair dd {
	margin: 0;
	text-align: right;
	font-weight: var(--sca-value-weight);
}

/* Charts ----------------------------------------------------------------- */

.secontentagg__chart { margin: .5rem 0; }

.secontentagg__svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: var(--sca-chart-max-height);
}

.secontentagg__svg .sca-grid {
	stroke: var(--sca-grid-colour);
	stroke-width: 1;
}

.secontentagg__svg .sca-axis {
	font-size: var(--sca-axis-size);
	fill: var(--sca-axis-colour);
	opacity: var(--sca-axis-opacity);
}

.secontentagg__svg .sca-bar { rx: var(--sca-bar-radius); }

.secontentagg__chart--pie {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
}

.secontentagg__chart--pie .secontentagg__svg {
	max-width: 260px;
	flex: 0 1 260px;
}

.secontentagg__legend {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 160px;
	font-size: var(--sca-legend-size);
}

.secontentagg__legend li {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .18rem 0;
}

.secontentagg__swatch {
	width: 12px;
	height: 12px;
	border-radius: 2px;
	flex: 0 0 12px;
}

.secontentagg__legend-value {
	margin-left: auto;
	font-weight: var(--sca-value-weight);
}

/* Notes ------------------------------------------------------------------ */

.mod-secontentagg__updated,
.mod-secontentagg__attribution,
.secontentagg__empty {
	font-size: var(--sca-note-size);
	color: var(--sca-note-colour);
	opacity: var(--sca-note-opacity);
	text-align: var(--sca-note-align);
	margin: .5rem 0 0;
}

.mod-secontentagg__notice {
	font-size: .85em;
	opacity: .7;
}

/* Small screens ---------------------------------------------------------- */

@media (max-width: 480px) {
	.mod-secontentagg {
		font-size: var(--sca-font-size-mobile, var(--sca-font-size));
	}

	.secontentagg__table th,
	.secontentagg__table td {
		padding: calc(var(--sca-cell-padding-y) * .75) calc(var(--sca-cell-padding-x) * .65);
	}

	/* Optional: drop chosen columns on narrow screens. */
	.secontentagg__table.is-compact .sca-hide-sm { display: none; }
}