/*
 * SECTION:  Content pages built with Elementor: contact, terms and conditions, privacy policy
 * File:     assets/css/pages/sol-info-pages.css
 * Used by:  the Elementor page templates "Contact", "Terms and conditions" and "Privacy policy"
 *           (the JSON files delivered with the theme; they add the .sol-info-* classes below)
 * To remove: delete this file and its line in inc/assets.php (handle "sol-info-pages").
 *            The pages then show Elementor's plain look.
 *
 * Everything is scoped to .sol-info-*. Text and layout are Elementor widgets, so every
 * word can be edited in Elementor; this file only gives them the Son of Lord look.
 * Colors come only from the tokens, so light and dark mode follow the theme switch.
 * Text colors are !important on purpose: the Elementor kit colors its widgets with
 * stronger selectors.
 *
 * Contents
 *   1. Sections and page width
 *   2. Hero
 *   3. Buttons
 *   4. Info cards (contact)
 *   5. Two-column panels and company details (contact)
 *   6. Questions (contact)
 *   7. Legal text: table of contents and numbered articles
 *   7b. About us: story, quote and company block
 *   8. Closing band
 */

/* ==========================================================================
   1. Sections and page width
   Elementor containers are flex boxes with padding of their own; these rules set
   what the templates need and nothing else.
   ========================================================================== */
.e-con.sol-info-section {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: clamp(28px, 4vw, 52px) var(--sol-gutter);
	gap: 0;
}

.e-con.sol-info-inner {
	width: 100%;
	max-width: var(--sol-container);
	margin-inline: auto;
	padding: 0;
	gap: 24px;
}

/* Widgets inside carry their own spacing in these templates. */
.sol-info-section .elementor-widget {
	margin: 0;
}

/* Padding that Elementor puts on every container is not wanted on the grouping containers. */
.e-con.sol-info-cards,
.e-con.sol-info-split,
.e-con.sol-info-legal,
.e-con.sol-info-body {
	padding: 0;
}

/* Default text color. :where() keeps this rule's weight at the minimum, so the more specific rules
   below (muted lead, gold label, serif quote) win even though both are !important. */
.sol-info-section :where(.elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-widget-text-editor li, .elementor-widget-text-editor dd) {
	color: var(--sol-text) !important;
	font-family: var(--sol-font-sans);
}

.sol-info-section h2.elementor-heading-title,
.sol-info-section h3.elementor-heading-title,
.sol-info-section .elementor-icon-box-title {
	font-family: var(--sol-font-serif);
	font-weight: 500;
	line-height: var(--sol-leading-title);
}

.sol-info-section h2.elementor-heading-title {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
}

/* ==========================================================================
   2. Hero
   A thin arch in the corner and a line before the small label: the brand's
   arched frames and thin yellow lines, kept quiet.
   ========================================================================== */
.e-con.sol-info-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(56px, 9vw, 120px) clamp(48px, 7vw, 96px);
	border-bottom: 1px solid var(--sol-line);
	background: color-mix(in srgb, var(--sol-accent) 7%, var(--sol-bg));
}

.e-con.sol-info-hero::after {
	content: "";
	position: absolute;
	inset-block-end: -1px;
	inset-inline-end: clamp(-60px, 2vw, 40px);
	width: clamp(150px, 26vw, 340px);
	aspect-ratio: 1 / 1.25;
	border: 1.5px solid var(--sol-accent);
	border-bottom: 0;
	border-radius: 999px 999px 0 0;
	opacity: 0.7;
	pointer-events: none;
}

/* On phones the arch would sit behind the buttons. */
@media (max-width: 639px) {
	.e-con.sol-info-hero::after {
		display: none;
	}
}

.sol-info-hero .sol-info-inner {
	position: relative;
	z-index: 1;
	gap: 20px;
}

.sol-info-hero .sol-info-inner .sol-info-actions {
	margin-top: 8px;
}

.sol-info-eyebrow .elementor-widget-container {
	display: flex;
	align-items: center;
	gap: 14px;
}

.sol-info-eyebrow p {
	margin: 0;
	color: var(--sol-gold-text) !important;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sol-info-eyebrow .elementor-widget-container::before {
	content: "";
	width: 40px;
	height: 2px;
	background: var(--sol-accent);
}

.sol-info-hero h1.elementor-heading-title {
	max-width: 16ch;
	margin: 0;
	font-family: var(--sol-font-serif);
	font-size: clamp(2.25rem, 1.4rem + 4vw, 4.25rem);
	font-weight: 500;
	line-height: 1.05;
}

.sol-info-lead p {
	max-width: 52ch;
	margin: 0;
	color: var(--sol-muted) !important;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.6;
}

.sol-info-updated p {
	margin: 0;
	color: var(--sol-muted) !important;
	font-size: var(--sol-text-sm);
}

/* ==========================================================================
   3. Buttons (Elementor button widget with these classes on it)
   ========================================================================== */
.e-con.sol-info-actions {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	padding: 0;
}

.sol-info-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 28px;
	border: 1.5px solid var(--sol-accent);
	border-radius: 10px;
	background: var(--sol-accent);
	box-shadow: none;
	color: var(--sol-accent-ink) !important;
	font: 700 1rem var(--sol-font-sans);
	transition: transform var(--sol-normal) var(--sol-ease), box-shadow var(--sol-normal) var(--sol-ease);
}

.sol-info-btn .elementor-button:hover,
.sol-info-btn .elementor-button:focus {
	background: var(--sol-accent);
	box-shadow: 0 14px 26px -14px var(--sol-shadow);
	color: var(--sol-accent-ink) !important;
	transform: translateY(-2px);
}

.sol-info-btn--ghost .elementor-button {
	border-color: var(--sol-line);
	background: transparent;
	color: var(--sol-text) !important;
}

.sol-info-btn--ghost .elementor-button:hover,
.sol-info-btn--ghost .elementor-button:focus {
	border-color: var(--sol-gold-text);
	background: transparent;
	color: var(--sol-text) !important;
}

/* ==========================================================================
   4. Info cards (contact): Elementor icon box widgets
   ========================================================================== */
.e-con.sol-info-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 16px;
	--display: grid;
}

.sol-info-card .elementor-icon-box-wrapper {
	display: grid;
	align-content: start;
	gap: 18px;
	height: 100%;
	padding: 28px;
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius-lg);
	background: var(--sol-surface);
	text-align: left;
	transition: border-color var(--sol-fast) ease, transform var(--sol-normal) var(--sol-ease);
}

.sol-info-card:hover .elementor-icon-box-wrapper {
	border-color: var(--sol-gold-text);
	transform: translateY(-3px);
}

.sol-info-card .elementor-icon-box-icon {
	margin: 0;
}

.sol-info-card .elementor-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--sol-accent) 24%, var(--sol-surface));
	font-size: 1.375rem;
}

/* Icon and texts must always follow the theme colors. Elementor colors icons in several ways (the
   icon font, an inline SVG with its own fill, the kit's primary color, a rule added to one widget),
   some with !important. These selectors are long on purpose: they must be stronger than all of them. */
.e-con.sol-info-cards .sol-info-card.sol-info-card .elementor-icon-box-icon .elementor-icon,
.e-con.sol-info-cards .sol-info-card.sol-info-card .elementor-icon-box-icon .elementor-icon i,
.e-con.sol-info-cards .sol-info-card.sol-info-card .elementor-icon-box-icon .elementor-icon svg,
.e-con.sol-info-cards .sol-info-card.sol-info-card .elementor-icon-box-icon .elementor-icon svg * {
	color: var(--sol-text) !important;
	fill: currentColor !important;
}

.e-con.sol-info-cards .sol-info-card.sol-info-card .elementor-icon-box-icon .elementor-icon svg {
	width: 1em;
	height: 1em;
}

.e-con.sol-info-cards .sol-info-card.sol-info-card .elementor-icon-box-content .elementor-icon-box-title,
.e-con.sol-info-cards .sol-info-card.sol-info-card .elementor-icon-box-content .elementor-icon-box-title a,
.e-con.sol-info-cards .sol-info-card.sol-info-card .elementor-icon-box-content .elementor-icon-box-title span {
	margin: 0 0 8px;
	color: var(--sol-heading) !important;
	font-size: 1.25rem;
}

.e-con.sol-info-cards .sol-info-card.sol-info-card .elementor-icon-box-content .elementor-icon-box-description,
.e-con.sol-info-cards .sol-info-card.sol-info-card .elementor-icon-box-content .elementor-icon-box-description * {
	margin: 0;
	color: var(--sol-muted) !important;
	line-height: 1.6;
}

/* ==========================================================================
   5. Two-column panels and company details (contact)
   ========================================================================== */
.e-con.sol-info-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	--display: grid;
}

@media (min-width: 900px) {
	.e-con.sol-info-split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

.e-con.sol-info-panel {
	gap: 18px;
	padding: 28px;
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius-lg);
	background: var(--sol-surface);
}

@media (min-width: 640px) {
	.e-con.sol-info-panel {
		padding: 36px;
	}
}

.sol-info-panel ul {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sol-info-panel ul li {
	position: relative;
	margin: 0;
	padding-inline-start: 28px;
	line-height: 1.55;
}

.sol-info-panel ul li::before {
	content: "";
	position: absolute;
	inset-inline-start: 4px;
	top: 0.7em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sol-accent);
}

/* Company details: label and value in rows. */
.sol-info-dl dl {
	display: grid;
	margin: 0;
}

.sol-info-dl dl > div {
	display: grid;
	gap: 2px;
	padding: 14px 0;
	border-top: 1px solid var(--sol-line);
}

.sol-info-dl dl > div:first-child {
	padding-top: 0;
	border-top: 0;
}

.sol-info-dl dt {
	color: var(--sol-muted) !important;
	font-size: 0.8125rem;
	font-weight: 500;
}

.sol-info-dl dd {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

@media (min-width: 520px) {
	.sol-info-dl dl > div {
		grid-template-columns: 150px minmax(0, 1fr);
		gap: 16px;
	}
}

/* ==========================================================================
   6. Questions (contact): <details> inside a text editor widget
   ========================================================================== */
.sol-info-faq details {
	border-top: 1px solid var(--sol-line);
}

.sol-info-faq details:last-child {
	border-bottom: 1px solid var(--sol-line);
}

.sol-info-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0;
	color: var(--sol-heading);
	font: 500 clamp(1.0625rem, 1rem + 0.4vw, 1.25rem)/1.35 var(--sol-font-serif);
	cursor: pointer;
	list-style: none;
}

.sol-info-faq summary::-webkit-details-marker {
	display: none;
}

.sol-info-faq summary::after {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	border-right: 2px solid var(--sol-gold-text);
	border-bottom: 2px solid var(--sol-gold-text);
	transform: translateY(-3px) rotate(45deg);
	transition: transform var(--sol-normal) var(--sol-ease);
}

.sol-info-faq details[open] summary::after {
	transform: translateY(3px) rotate(-135deg);
}

.sol-info-faq summary:hover {
	color: var(--sol-gold-text);
}

.sol-info-faq details > :not(summary) {
	max-width: 68ch;
	margin: 0 0 24px;
	color: var(--sol-muted) !important;
	line-height: 1.7;
}

.sol-info-faq a,
.sol-info-body a,
.sol-info-panel a {
	color: var(--sol-gold-text) !important;
	text-underline-offset: 3px;
}

/* ==========================================================================
   7. Legal text: table of contents (Elementor Pro widget) and numbered articles
   Articles are numbered by CSS, so moving or deleting one renumbers the rest
   and the table of contents (which also counts) always agrees with the text.
   ========================================================================== */
.e-con.sol-info-legal {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	--display: grid;
}

@media (min-width: 960px) {
	.e-con.sol-info-legal {
		grid-template-columns: 280px minmax(0, 1fr);
		gap: 64px;
		align-items: start;
	}
}

.e-con.sol-info-aside {
	padding: 0;
}

@media (min-width: 960px) {
	.e-con.sol-info-aside {
		position: sticky;
		top: var(--sol-sticky-top);
	}
}

.sol-info-toc .elementor-widget-container {
	padding: 22px;
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius-lg);
	background: var(--sol-surface);
}

.sol-info-toc .elementor-toc__header {
	padding: 0 0 14px;
	border-bottom: 1px solid var(--sol-line);
}

.sol-info-toc .elementor-toc__header-title {
	margin: 0;
	color: var(--sol-heading) !important;
	font: 500 1.125rem var(--sol-font-serif);
}

.sol-info-toc .elementor-toc__body {
	padding-top: 12px;
}

.sol-info-toc .elementor-toc__list-wrapper {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sol-info-toc .elementor-toc__list-item {
	margin: 0;
}

.sol-info-toc .elementor-toc__list-item-text {
	display: block;
	padding: 7px 10px;
	border-radius: 8px;
	color: var(--sol-muted) !important;
	font-size: var(--sol-text-sm);
	line-height: 1.4;
	text-decoration: none;
	transition: background-color var(--sol-fast) ease, color var(--sol-fast) ease;
}

.sol-info-toc .elementor-toc__list-item-text:hover,
.sol-info-toc .elementor-toc__list-item-text.elementor-item-active {
	background: color-mix(in srgb, var(--sol-accent) 18%, var(--sol-surface));
	color: var(--sol-text) !important;
}

.e-con.sol-info-body {
	gap: 0;
	counter-reset: sol-article;
}

.sol-info-body h2.elementor-heading-title {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin: 0 0 14px;
	padding-top: 40px;
	border-top: 1px solid var(--sol-line);
	scroll-margin-top: var(--sol-sticky-top);
	counter-increment: sol-article;
}

.sol-info-body h2.elementor-heading-title::before {
	content: counter(sol-article, decimal-leading-zero);
	flex: none;
	min-width: 2ch;
	color: var(--sol-gold-text);
	font: 700 0.875rem var(--sol-font-sans);
	letter-spacing: 0.08em;
}

.sol-info-body .elementor-widget:first-child h2.elementor-heading-title {
	padding-top: 0;
	border-top: 0;
}

.sol-info-body .elementor-widget-text-editor {
	padding-inline-start: 34px;
	margin-bottom: 40px;
}

.sol-info-body .elementor-widget-text-editor > .elementor-widget-container > * {
	max-width: 70ch;
}

.sol-info-body p,
.sol-info-body li {
	font-size: 1.0625rem;
	line-height: 1.75;
}

.sol-info-body p {
	margin: 0 0 14px;
}

.sol-info-body ul,
.sol-info-body ol {
	display: grid;
	gap: 8px;
	margin: 0 0 14px;
	padding-inline-start: 22px;
}

.sol-info-body blockquote {
	margin: 18px 0;
	padding: 18px 22px;
	border: 1px solid var(--sol-line);
	border-inline-start: 3px solid var(--sol-accent);
	border-radius: 0 var(--sol-radius-md) var(--sol-radius-md) 0;
	background: var(--sol-surface);
	font-size: var(--sol-text-sm);
}

.sol-info-body blockquote p {
	margin: 0 0 8px;
	font-size: inherit;
}

.sol-info-body blockquote p:last-child {
	margin: 0;
}

@media (max-width: 639px) {
	.sol-info-body .elementor-widget-text-editor {
		padding-inline-start: 0;
	}
}

/* ==========================================================================
   7b. About us: story, quote and company block
   ========================================================================== */
.e-con.sol-info-story {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	padding: 0;
	--display: grid;
}

@media (min-width: 900px) {
	.e-con.sol-info-story {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 72px;
		align-items: start;
	}
}

.e-con.sol-info-story > .e-con {
	padding: 0;
	gap: 18px;
}

.sol-info-story .elementor-widget-text-editor:not(.sol-info-eyebrow) p {
	margin: 0 0 16px;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.75;
}

.sol-info-story .elementor-widget-text-editor:not(.sol-info-eyebrow) p:last-child {
	margin-bottom: 0;
}

.sol-info-quote blockquote {
	margin: 0;
	padding: 8px 0 8px 28px;
	border: 0;
	border-inline-start: 3px solid var(--sol-accent);
	color: var(--sol-heading) !important;
	font: 500 clamp(1.5rem, 1.1rem + 1.8vw, 2.375rem)/1.25 var(--sol-font-serif);
}

.sol-info-quote blockquote p {
	margin: 0;
	color: inherit !important;
	font: inherit;
}

.sol-info-quote cite {
	display: block;
	margin-top: 14px;
	color: var(--sol-muted) !important;
	font: 500 var(--sol-text-sm) var(--sol-font-sans);
	font-style: normal;
}

/* Small label above a section title. */
.sol-info-section .sol-info-eyebrow + h2.elementor-heading-title {
	margin-top: 4px;
}

/* ==========================================================================
   8. Closing band
   ========================================================================== */
.e-con.sol-info-cta {
	padding-block: clamp(48px, 6vw, 80px);
	border-top: 1px solid var(--sol-line);
	background: color-mix(in srgb, var(--sol-accent) 10%, var(--sol-surface));
}

.sol-info-cta .sol-info-inner {
	align-items: flex-start;
	gap: 14px;
}

.sol-info-cta p {
	max-width: 52ch;
	margin: 0;
	color: var(--sol-muted) !important;
	font-size: 1.0625rem;
	line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
	.sol-info-btn .elementor-button,
	.sol-info-card .elementor-icon-box-wrapper,
	.sol-info-faq summary::after {
		transition: none;
	}
}