/*
 * The help modals (contact, instructions, impressum, cookie policy) - templates/fragments/info.html.
 * Their colours are fixed on purpose: the modals look the same in every theme.
 */
.info-modal {
	--info-bg: #f0f1f2;
	--info-surface: #ffffff;
	--info-border: #dee1e4;
	--info-text: #1a1d1f;
	--info-text-muted: #555c62;
	--info-text-faint: #767c82;
	--info-navbar: #343a40;
	--info-accent: #5a6268;
	--info-accent-dk: #3d4347;
	--info-accent-lt: #f1f2f3;
	--info-accent-mid: #ced4da;
	--info-link: #3f6f93;
	background: var(--info-surface);
	color: var(--info-text);
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	line-height: 1.7;
}

.info-modal,
.info-modal *,
.info-modal *::before,
.info-modal *::after {
	box-sizing: border-box;
}

.info-modal p {
	color: var(--info-text-muted);
	margin: 0 0 10px;
}

.info-modal p:last-child {
	margin-bottom: 0;
}

.info-modal a {
	color: var(--info-link);
}

.info-modal svg {
	flex-shrink: 0;
}

.info-pre-line {
	white-space: pre-line;
}

.info-strong {
	color: var(--info-text) !important;
	font-weight: 500;
}

.info-faint {
	color: var(--info-text-faint);
	font-size: 11.5px;
}

.info-mt {
	margin-top: 10px !important;
}

.info-indent {
	padding-left: 14px;
}

/* Header */
.info-header {
	background: var(--info-navbar);
	padding: 14px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.info-header-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.info-header-icon {
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.info-title {
	font-family: 'Lora', serif;
	font-size: 19px;
	font-weight: 500;
	color: #fff;
	letter-spacing: 0.01em;
	margin: 0;
}

.info-header-meta {
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.7);
}

/* Intro */
.info-intro {
	padding: 18px 28px;
	border-bottom: 1px solid var(--info-border);
	background: var(--info-accent-lt);
}

.info-intro p {
	font-size: 13.5px;
	line-height: 1.75;
}

/* Contact cards */
.info-contacts {
	padding: 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.info-contact-card {
	border: 1px solid var(--info-border);
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow 0.2s;
}

.info-contact-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}

.info-contact-card-header {
	background: var(--info-navbar);
	padding: 12px 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.info-card-header-icon {
	width: 26px;
	height: 26px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0;
}

.info-contact-card-title {
	font-family: 'Lora', serif;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
}

.info-contact-card-subtitle {
	font-size: 10.5px;
	color: rgba(255, 255, 255, 0.7);
	letter-spacing: 0.04em;
	margin-left: auto;
	text-transform: uppercase;
}

.info-contact-card-body {
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.info-modal .info-contact-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	text-decoration: none;
	color: inherit;
}

.info-contact-row-icon {
	width: 30px;
	height: 30px;
	background: var(--info-accent-lt);
	border: 1px solid var(--info-accent-mid);
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--info-accent);
	font-size: 13px;
}

.info-contact-row-content {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding-top: 4px;
	min-width: 0;
}

.info-contact-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--info-text-faint);
	font-weight: 500;
}

.info-contact-value {
	font-size: 13.5px;
	color: var(--info-text);
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.info-modal a.info-contact-row:hover .info-contact-value,
.info-modal a.info-contact-row:focus .info-contact-value {
	color: var(--info-link);
	text-decoration: underline;
}

/* Sections */
.info-sections {
	padding: 8px 0;
}

.info-section {
	padding: 20px 28px;
	border-bottom: 1px solid var(--info-border);
	scroll-margin-top: 8px;
}

.info-section:last-child {
	border-bottom: none;
}

.info-section-label {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 12px;
}

.info-section-icon {
	width: 28px;
	height: 28px;
	background: var(--info-accent-lt);
	border: 1px solid var(--info-accent-mid);
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--info-accent);
	flex-shrink: 0;
}

.info-section-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--info-navbar);
	flex-shrink: 0;
}

.info-section-title {
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--info-navbar);
	margin: 0;
	line-height: 1.4;
}

.info-section-text {
	line-height: 1.75 !important;
	padding-left: 14px;
}

/* Table of contents */
.info-toc {
	padding: 14px 28px;
	border-bottom: 1px solid var(--info-border);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.info-modal .info-toc-chip {
	background: var(--info-accent-lt);
	border: 1px solid var(--info-accent-mid);
	border-radius: 20px;
	padding: 4px 12px;
	font-size: 11.5px;
	color: var(--info-accent);
	text-decoration: none;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 5px;
}

.info-modal .info-toc-chip:hover,
.info-modal .info-toc-chip:focus {
	background: var(--info-accent-mid);
	color: var(--info-navbar);
}

/* Lists */
.info-item-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.info-item-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--info-text-muted);
	line-height: 1.6;
}

.info-item-bullet {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--info-accent);
	flex-shrink: 0;
	margin-top: 8px;
}

.info-item-key {
	font-weight: 500;
	color: var(--info-text);
}

.info-list {
	margin: 0 0 10px;
	padding-left: 18px;
	color: var(--info-text-muted);
}

.info-list strong {
	color: var(--info-text);
}

.info-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	flex-shrink: 0;
	margin-top: 6px;
}

.info-legend-brown { background: #8b6355; }
.info-legend-blue { background: #4a7fa5; }
.info-legend-green { background: #3a7d56; }
.info-legend-orange { background: #c07030; }
.info-legend-yellow { background: #b8960c; }

/* Instructions: cards, rows, chips */
.info-search-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.info-search-card {
	background: var(--info-accent-lt);
	border: 1px solid var(--info-accent-mid);
	border-radius: 8px;
	padding: 12px 14px;
}

.info-search-card-title {
	font-size: 12px;
	font-weight: 500;
	color: var(--info-navbar);
	margin-bottom: 5px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.info-detail-items {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.info-detail-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: var(--info-accent-lt);
	border: 1px solid var(--info-accent-mid);
	border-radius: 7px;
	font-size: 12.5px;
	color: var(--info-text-muted);
}

.info-detail-row-icon {
	color: var(--info-accent);
	flex-shrink: 0;
	display: flex;
}

.info-share-chips,
.info-support-bar,
.info-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.info-share-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--info-accent-lt);
	border: 1px solid var(--info-accent-mid);
	border-radius: 20px;
	padding: 5px 13px;
	font-size: 12px;
	color: var(--info-text-muted);
}

.info-modal .info-support-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--info-navbar);
	color: #fff;
	border-radius: 20px;
	padding: 6px 14px;
	font-size: 12px;
	text-decoration: none;
	transition: background 0.2s;
}

.info-modal .info-support-chip:hover,
.info-modal .info-support-chip:focus {
	background: var(--info-accent-dk);
	color: #fff;
}

.info-modal .info-chip {
	background: var(--info-bg);
	border: 1px solid var(--info-border);
	border-radius: 20px;
	padding: 5px 12px;
	font-size: 12px;
	color: var(--info-link);
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}

.info-modal .info-chip:hover,
.info-modal .info-chip:focus {
	border-color: var(--info-accent-mid);
	color: var(--info-accent);
}

/* FAQ - toggled by js/info-modals.js */
.info-faq-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.info-faq-item {
	border: 1px solid var(--info-border);
	border-radius: 8px;
	overflow: hidden;
}

.info-faq-q {
	width: 100%;
	background: var(--info-accent-lt);
	border: none;
	padding: 11px 16px;
	text-align: left;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--info-navbar);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	transition: background 0.2s;
}

.info-faq-q:hover {
	background: var(--info-accent-mid);
}

.info-faq-arrow {
	transition: transform 0.2s;
}

.info-faq-item.open .info-faq-arrow {
	transform: rotate(180deg);
}

.info-faq-a {
	padding: 12px 16px;
	color: var(--info-text-muted);
	line-height: 1.7;
}

/* Impressum publisher */
.info-publisher {
	background: var(--info-accent-lt);
	border-bottom: 1px solid var(--info-accent-mid);
	padding: 18px 28px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.info-publisher-badge {
	background: var(--info-navbar);
	color: #fff;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 4px;
	flex-shrink: 0;
	margin-top: 2px;
}

.info-publisher-info {
	flex: 1;
	min-width: 0;
}

.info-publisher-name {
	font-family: 'Lora', serif;
	font-size: 15px;
	font-weight: 500;
	color: var(--info-navbar);
	margin-bottom: 4px;
}

.info-publisher-meta {
	font-size: 12.5px;
	color: var(--info-text-muted);
	line-height: 1.7;
}

.info-meta-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.info-meta-icon {
	color: var(--info-accent);
	opacity: 0.7;
	flex-shrink: 0;
	display: flex;
}

/* Cookie policy */
.info-cookie-table-wrap {
	border: 1px solid var(--info-border);
	border-radius: 8px;
	overflow-x: auto;
	margin-bottom: 10px;
}

.info-cookie-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 12.5px;
}

.info-cookie-table th {
	background: var(--info-accent-lt);
	color: var(--info-navbar);
	font-weight: 500;
	text-align: left;
	padding: 9px 12px;
	border-bottom: 1px solid var(--info-accent-mid);
	white-space: nowrap;
}

.info-cookie-table td {
	padding: 9px 12px;
	border-bottom: 1px solid var(--info-border);
	color: var(--info-text-muted);
	line-height: 1.6;
	vertical-align: top;
}

.info-cookie-table tr:last-child td {
	border-bottom: none;
}

.info-cookie-table code {
	font-size: 12px;
	color: var(--info-text);
	background: var(--info-accent-lt);
	border: 1px solid var(--info-border);
	border-radius: 4px;
	padding: 1px 5px;
	white-space: nowrap;
}

.info-tag {
	display: inline-block;
	font-size: 10.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 4px;
	padding: 2px 7px;
	white-space: nowrap;
	border: 1px solid var(--info-accent-mid);
	background: var(--info-accent-lt);
	color: var(--info-accent-dk);
}

.info-note {
	font-size: 12px;
	color: var(--info-text-faint) !important;
}

.info-browser-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 10px;
}

.info-browser-item {
	background: var(--info-accent-lt);
	border: 1px solid var(--info-accent-mid);
	border-radius: 7px;
	padding: 9px 12px;
	font-size: 12.5px;
	color: var(--info-text-muted);
}

.info-browser-item strong {
	color: var(--info-text);
}

.info-cookie-contact {
	border: 1px solid var(--info-border);
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 12.5px;
	color: var(--info-text-muted);
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.info-footnote {
	padding: 12px 28px 18px;
	font-size: 11.5px;
	color: var(--info-text-faint);
}

@media (max-width: 575.98px) {
	.info-header,
	.info-intro,
	.info-contacts,
	.info-section,
	.info-toc,
	.info-publisher,
	.info-footnote {
		padding-left: 16px;
		padding-right: 16px;
	}

	.info-publisher {
		flex-direction: column;
	}

	.info-contact-card-subtitle {
		margin-left: 0;
		flex-basis: 100%;
	}
}