/*
Theme Name: SizeLoop
Theme URI: https://sizeloop.com/
Description: Custom child theme of Hello Elementor for SizeLoop. Own code only: a custom premium header and dark footer in the Refined Editorial Luxury system. No premade kit, no marketplace template.
Author: SizeLoop
Version: 1.2.3
Template: hello-elementor
Text Domain: sizeloop
*/

/*
 * Custom header + footer. All colors and type match design-tokens.md
 * (Refined Editorial Luxury): ivory #FAF9F6, white #FFFFFF, charcoal #202522,
 * muted #4A4E47, forest #234B43, forest-dark #1A3731, stone #E8E5DE,
 * champagne #C2A779 (decorative rules only, never text).
 */

/* ---------- Header ---------- */
.sl-site-header {
	background: #FFFFFF;
	border-bottom: 1px solid #E8E5DE;
}
.sl-header-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.sl-wordmark {
	font-family: "DM Serif Display", Georgia, serif;
	font-size: 26px;
	line-height: 1;
	text-decoration: none;
	color: #202522;
	white-space: nowrap;
}
.sl-wordmark:hover {
	text-decoration: none;
}
.sl-wordmark-loop {
	font-style: italic;
	color: #234B43;
}
.sl-wordmark:hover .sl-wordmark-loop {
	color: #1A3731;
}
.sl-site-nav {
	position: relative;
}
.sl-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 28px;
}
.sl-nav-list a {
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	color: #202522;
	text-decoration: none;
}
.sl-nav-list a:hover {
	color: #234B43;
	text-decoration: underline;
}
.sl-nav-mobile {
	display: none;
}
.sl-nav-toggle {
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	color: #202522;
	cursor: pointer;
	list-style: none;
	padding: 10px 14px;
	border: 1px solid #202522;
	border-radius: 8px;
	background: transparent;
}
.sl-nav-toggle::-webkit-details-marker {
	display: none;
}
.sl-nav-toggle::marker {
	content: "";
}
@media (max-width: 768px) {
	.sl-header-inner {
		padding: 14px 20px;
	}
	.sl-nav-desktop {
		display: none;
	}
	.sl-nav-mobile {
		display: block;
	}
	.sl-nav-mobile .sl-nav-list {
		flex-direction: column;
		gap: 0;
		position: absolute;
		right: 0;
		top: calc(100% + 10px);
		min-width: 200px;
		background: #FFFFFF;
		border: 1px solid #E8E5DE;
		border-radius: 8px;
		padding: 8px 0;
	}
	.sl-nav-mobile .sl-nav-list a {
		display: block;
		padding: 12px 20px;
	}
}

/* ---------- Footer ---------- */
.sl-site-footer {
	background: #202522;
	color: #FFFFFF;
}
.sl-footer-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 56px 24px 40px;
	display: grid;
	grid-template-columns: 1.2fr 2fr;
	gap: 48px;
}
.sl-footer-brand .sl-wordmark {
	color: #FFFFFF;
	font-size: 28px;
}
.sl-footer-brand .sl-wordmark-loop {
	color: #FFFFFF;
}
.sl-footer-tag {
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #E8E5DE;
	margin: 12px 0 0;
	max-width: 32ch;
}
.sl-footer-nav {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.sl-footer-heading {
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #E8E5DE;
	margin: 0 0 12px;
}
.sl-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sl-footer-col li {
	margin-bottom: 10px;
}
.sl-footer-col a {
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	color: #FFFFFF;
	text-decoration: none;
}
.sl-footer-col a:hover {
	text-decoration: underline;
}
.sl-footer-bottom {
	border-top: 1px solid #C2A779;
	max-width: 1180px;
	margin: 0 auto;
	padding: 20px 24px;
}
.sl-footer-bottom p {
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	color: #E8E5DE;
	margin: 0;
}
@media (max-width: 768px) {
	.sl-footer-inner {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 40px 20px 32px;
	}
	.sl-footer-nav {
		grid-template-columns: 1fr 1fr;
	}
	.sl-footer-bottom {
		padding: 16px 20px;
	}
}
@media (max-width: 480px) {
	.sl-footer-nav {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * v1.1.0 — Self-hosted fonts + restrained luxury polish.
 * Fonts live in /fonts/ as WOFF2 (latin subset, ~98KB total).
 * No Google Fonts are loaded: Elementor's Google Fonts output is
 * disabled in functions.php, so these @font-face files are the
 * only webfonts on the site.
 * ============================================================ */

/* ---------- Self-hosted fonts (font-display: swap) ---------- */
@font-face {
	font-family: "DM Serif Display";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/dm-serif-display-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
	font-family: "DM Serif Display";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/dm-serif-display-400-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fonts/inter-400-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+2000-206F;
}

/*
 * Route Elementor's global typography to the self-hosted families.
 * Declared on body (not :root) so it wins over the kit stylesheet's
 * :root values by inheritance proximity, regardless of load order.
 * Primary weight is reset to 400: DM Serif Display ships only in 400
 * and a 600 would render as synthetic faux-bold.
 */
body {
	--e-global-typography-primary-font-family: "DM Serif Display";
	--e-global-typography-primary-font-weight: 400;
	--e-global-typography-secondary-font-family: "DM Serif Display";
	--e-global-typography-text-font-family: "Inter";
	--e-global-typography-accent-font-family: "Inter";
}

/* ---------- Base type: Inter for body, UI, forms, tables ---------- */
body,
button,
input,
select,
textarea,
table {
	font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Editorial headings: DM Serif Display ---------- */
h1,
h2,
body .elementor-widget-heading .elementor-heading-title {
	font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
	font-weight: 400;
}

/* ============================================================
 * Restrained luxury gradients. No colorful SaaS gradients, no
 * animation, no images. Decorative only; contrast untouched.
 * ============================================================ */

/* Page background: soft ivory-to-stone with a faint champagne warmth at the top */
html {
	background: #F1EEE7;
}
body {
	background:
		radial-gradient(920px 460px at 50% -120px, rgba(194, 167, 121, 0.15), rgba(194, 167, 121, 0) 70%),
		linear-gradient(180deg, #FAF9F6 0%, #F1EEE7 100%);
}

/*
 * Converter surrounding atmosphere only. The .ssc panel itself is
 * untouched: clean, white, readable, precise. The glow lives on the
 * transparent widget container behind the panel and fades out softly.
 */
.elementor-widget-html .elementor-widget-container:has(> .ssc) {
	position: relative;
}
.elementor-widget-html .elementor-widget-container:has(> .ssc)::before {
	content: "";
	position: absolute;
	inset: -64px -48px;
	background: radial-gradient(closest-side, rgba(194, 167, 121, 0.12), rgba(194, 167, 121, 0) 72%);
	pointer-events: none;
}

/* Footer: subtle dark charcoal gradient, champagne rule kept */
.sl-site-footer {
	background: linear-gradient(180deg, #202522 0%, #151917 100%);
}

/* ============================================================
 * v1.2.0 — polish fixes (approved 2026-10-14).
 * 1. Mobile H1: smaller and airier, still premium.
 * 2. Desktop converter: slightly wider balance on wide screens.
 * 3. Breadcrumb links: forest green, never pink.
 * ============================================================ */

/* 1. Mobile typography — H1 */
@media (max-width: 768px) {
	body .sl-h1 .elementor-heading-title {
		font-size: 30px;
		line-height: 1.3;
	}
}

/* 2. Desktop converter balance — a touch wider, not bulky.
 * Higher specificity than the tool's embedded .ssc rule so it
 * wins regardless of stylesheet order. Tool logic untouched. */
@media (min-width: 1024px) {
	body .ssc {
		max-width: 780px;
	}
}

/* 3. Breadcrumb links — approved forest green.
 * !important guards the brand color against any legacy custom CSS. */
body .sl-crumb a,
body .sl-crumb a:visited {
	color: #234B43 !important;
}
body .sl-crumb a:hover {
	color: #1A3731 !important;
	text-decoration: underline;
}

/* ============================================================
 * v1.2.2 — brand link/button guard.
 * Legacy live Customizer CSS paints content links, cards and the
 * search button pink. These guards restore the approved system:
 * forest-green links, charcoal card titles, forest CTA button.
 * Scoped to page content only; header nav, footer and the
 * converter tool's own styles are untouched.
 * ============================================================ */

/* Body links: forest green, never pink */
body .elementor-widget-text-editor a,
body .elementor-widget-text-editor a:visited {
	color: #234B43 !important;
}
body .elementor-widget-text-editor a:hover {
	color: #1A3731 !important;
}

/* Cards: charcoal title, muted description, forest hover border */
body a.sl-card,
body a.sl-card:visited,
body a.sl-card strong {
	color: #202522 !important;
}
body a.sl-card span {
	color: #4A4E47 !important;
}
body a.sl-card .sl-chip {
	color: #234B43 !important;
}
body a.sl-card:hover {
	border-color: #234B43 !important;
}

/* Search button: forest CTA, white text */
body .sl-search button {
	background: #234B43 !important;
	border-color: #234B43 !important;
	color: #FFFFFF !important;
}
body .sl-search button:hover {
	background: #1A3731 !important;
	border-color: #1A3731 !important;
}

/* ============================================================
 * v1.2.3 — homepage card layout + stronger (still calm) gradient.
 * ============================================================ */

/* 1. Tool/category cards: clean, separated, premium.
 * body-prefixed selectors beat any legacy custom CSS regardless
 * of stylesheet order. Colors are guarded by v1.2.2. */
body .sl-cards {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	body .sl-grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}
body a.sl-card {
	display: block;
	background: #FFFFFF;
	border: 1px solid #E8E5DE;
	border-radius: 8px;
	padding: 20px;
	text-decoration: none;
}
body a.sl-card .sl-chip {
	display: block;
	margin-bottom: 10px;
	font-family: "DM Serif Display", Georgia, serif;
	font-size: 22px;
	line-height: 1;
}
body a.sl-card strong {
	display: block;
	font-size: 17px;
	line-height: 1.4;
	margin-bottom: 6px;
}
body a.sl-card > span:not(.sl-chip) {
	display: block;
	font-size: 15px;
	line-height: 1.6;
}
body a.sl-card:hover {
	border-color: #234B43;
}

/* 2. Gradient, 15–20% more visible — still luxury and calm.
 * Soft ivory-to-stone vertical, faint champagne glow top-left,
 * very light forest glow upper-right. No animation. */
html {
	background: #FAF9F6;
}
body {
	background:
		radial-gradient(620px 400px at 10% -80px, rgba(194, 167, 121, 0.20), rgba(194, 167, 121, 0) 70%),
		radial-gradient(580px 380px at 90% -60px, rgba(35, 75, 67, 0.10), rgba(35, 75, 67, 0) 70%),
		linear-gradient(180deg, #FAF9F6 0%, #F3F0E9 45%, #FAF9F6 100%);
}