/**
 * Solemnisers directory components.
 *
 * Only styles the markup the shortcodes output: breadcrumbs, cards, the fact
 * list, stat tiles, pills and tags. Page layout, spacing and typography stay in
 * Elementor so your team can change them without touching code.
 *
 * The colours below mirror Elementor's Global Colors. If you set the four
 * globals in Site Settings, these variables pick them up automatically and the
 * components follow your palette.
 */

:root {
	--sol-ink: var(--e-global-color-text, #1c2321);
	--sol-ink-2: var(--e-global-color-secondary, #4a5654);
	--sol-accent: var(--e-global-color-primary, #1f6f5c);
	--sol-accent-2: var(--e-global-color-accent, #134438);
	--sol-line: #e3e1da;
	--sol-card: #ffffff;
	--sol-warm: #f3f0e8;
	--sol-religious: #7a5b2e;
	--sol-civil: #1f5f7a;
	--sol-secular: #6a4a7a;
}

/* ------------------------------------------------------------ breadcrumbs */

.sol-crumbs {
	font-size: .85rem;
	color: var(--sol-ink-2);
	margin: 0 0 4px;
}
.sol-crumbs i {
	color: #b9b6ac;
	font-style: normal;
	margin: 0 4px;
}

/* ------------------------------------------------------------------ lede */

.sol-lede {
	font-size: 1.08rem;
	color: var(--sol-ink-2);
	max-width: 70ch;
}
.sol-fine {
	font-size: .86rem;
	color: var(--sol-ink-2);
}

/* ------------------------------------------------------------ stat tiles */

.sol-stats {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 18px 0;
}
.sol-stat {
	background: var(--sol-card);
	border: 1px solid var(--sol-line);
	border-radius: 10px;
	padding: 14px 18px;
	min-width: 150px;
	display: block;
	text-decoration: none;
	transition: border-color .15s ease;
}
.sol-stat:hover { border-color: var(--sol-accent); }
.sol-stat b {
	display: block;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--sol-accent-2);
}
.sol-stat span {
	font-size: .85rem;
	color: var(--sol-ink-2);
}
.sol-stats.sol-small .sol-stat { padding: 10px 14px; min-width: 120px; }
.sol-stats.sol-small b { font-size: 1.2rem; }

/* ------------------------------------------------------------ county grid */

.sol-prov {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--sol-ink-2);
	font-weight: 600;
	margin: 1.8em 0 .6em;
	border-bottom: 1px solid var(--sol-line);
	padding-bottom: 6px;
}
ul.sol-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
ul.sol-grid a {
	display: block;
	background: var(--sol-card);
	border: 1px solid var(--sol-line);
	border-radius: 9px;
	padding: 12px 14px;
	text-decoration: none;
	transition: border-color .15s ease;
}
ul.sol-grid a:hover { border-color: var(--sol-accent); }
ul.sol-grid b { display: block; color: var(--sol-ink); font-weight: 600; }
ul.sol-grid span { font-size: .82rem; color: var(--sol-ink-2); }

/* ----------------------------------------------------------------- cards */

ul.sol-cards {
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
ul.sol-cards a {
	display: block;
	background: var(--sol-card);
	border: 1px solid var(--sol-line);
	border-radius: 9px;
	padding: 12px 14px;
	height: 100%;
	text-decoration: none;
	transition: border-color .15s ease;
}
ul.sol-cards a:hover { border-color: var(--sol-accent); }
.sol-nm { display: block; font-weight: 600; color: var(--sol-ink); }
.sol-mt { display: block; font-size: .82rem; color: var(--sol-ink-2); margin-top: 2px; }
.sol-lo { display: block; font-size: .78rem; color: #8b9490; margin-top: 4px; }

/* ------------------------------------------------------------ fact list */

dl.sol-facts {
	background: var(--sol-card);
	border: 1px solid var(--sol-line);
	border-radius: 11px;
	padding: 6px 20px;
	margin: 22px 0 0;
	display: grid;
	grid-template-columns: 190px 1fr;
}
dl.sol-facts dt {
	font-size: .85rem;
	color: var(--sol-ink-2);
	padding: 12px 0;
	border-top: 1px solid var(--sol-line);
	margin: 0;
}
dl.sol-facts dd {
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--sol-line);
}
dl.sol-facts dt:first-of-type,
dl.sol-facts dt:first-of-type + dd { border-top: 0; }

/* ------------------------------------------------------------ pill, note */

.sol-pill {
	display: inline-block;
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 99px;
	color: #fff;
	background: var(--sol-accent);
}
.sol-pill.sol-religious { background: var(--sol-religious); }
.sol-pill.sol-civil { background: var(--sol-civil); }
.sol-pill.sol-secular { background: var(--sol-secular); }

.sol-note {
	background: var(--sol-warm);
	border-left: 3px solid var(--sol-accent);
	border-radius: 0 8px 8px 0;
	padding: 14px 18px;
	margin: 24px 0 0;
	font-size: .9rem;
}
.sol-note p { margin: 0; }

/* ------------------------------------------------------------------ tags */

ul.sol-tags {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
ul.sol-tags li {
	background: var(--sol-card);
	border: 1px solid var(--sol-line);
	border-radius: 7px;
	padding: 8px 12px;
	font-size: .88rem;
	display: flex;
	justify-content: space-between;
	gap: 10px;
}
ul.sol-tags b { color: var(--sol-accent-2); }

/* ----------------------------------------------------------------- small */

@media (max-width: 620px) {
	dl.sol-facts { grid-template-columns: 1fr; padding: 4px 16px; }
	dl.sol-facts dd { padding-top: 0; border-top: 0; }
	dl.sol-facts dt { padding-bottom: 2px; }
	dl.sol-facts dt:first-of-type + dd { border-top: 0; }
}