/* ============================================================
   Design Club Widgets — CSS
   Ported 1:1 from the user's Design Club.html design system.
   ============================================================ */

:root {
	--ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }

body {
	font-family: 'Inter Tight', system-ui, sans-serif;
	background: #fafaf9;
	color: #1c1917;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-feature-settings: 'ss01', 'cv11';
}

::selection { background: #c2410c; color: #fff; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* Anchors should not land behind sticky header */
section[id] { scroll-margin-top: 5rem; }

/* ---------- Eyebrow ---------- */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	color: #c2410c;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.eyebrow::before {
	content: '';
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}

/* ---------- Editorial italic accents ---------- */
.accent-italic {
	font-family: 'Instrument Serif', Georgia, serif;
	font-style: italic;
	font-weight: 400;
	color: #c2410c;
	letter-spacing: -0.01em;
}
.accent-italic-muted {
	font-family: 'Instrument Serif', Georgia, serif;
	font-style: italic;
	font-weight: 400;
	color: #78716c;
	letter-spacing: -0.01em;
}

/* ---------- Buttons ---------- */
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.95rem 1.6rem;
	border-radius: 999px;
	background: #fafaf9;
	color: #1c1917;
	font-weight: 500;
	letter-spacing: -0.005em;
	transition: all 0.35s var(--ease-soft);
	will-change: transform;
}
.btn-primary:hover {
	background: #c2410c;
	color: #fff;
	transform: translateY(-1px);
}
.btn-dark { background: #1c1917; color: #fff; }
.btn-dark:hover { background: #c2410c; }
.btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.95rem 1.3rem;
	border-radius: 999px;
	color: #fff;
	font-weight: 500;
	transition: opacity 0.3s var(--ease-soft);
}
.btn-ghost:hover { opacity: 0.75; }
.btn-primary svg, .btn-ghost svg { transition: transform 0.35s var(--ease-soft); }
.btn-primary:hover svg, .btn-ghost:hover svg { transform: translateX(3px); }

/* ---------- Card hover lift ---------- */
.lift { transition: transform 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft); }
.lift:hover { transform: translateY(-3px); }

/* ---------- Hero grain ---------- */
.grain::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.08;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Marquee ---------- */
@keyframes marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.marquee {
	display: flex;
	width: max-content;
	animation: marquee 38s linear infinite;
}
.marquee-wrap:hover .marquee,
.marquee-wrap:focus-within .marquee { animation-play-state: paused; }
.fade-edges {
	-webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
	        mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

/* ---------- Reveal on scroll ---------- */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft);
}
.reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ---------- Underline link ---------- */
.link-u {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.link-u::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform-origin: right;
	transform: scaleX(1);
	transition: transform 0.45s var(--ease-soft);
}
.link-u:hover::after {
	transform-origin: left;
	transform: scaleX(0);
	animation: link-u-redraw 0.7s var(--ease-soft) 0.25s forwards;
}
@keyframes link-u-redraw {
	from { transform-origin: left; transform: scaleX(0); }
	to   { transform-origin: left; transform: scaleX(1); }
}

/* ---------- Numerals ---------- */
.numeral { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum', 'ss01'; }

/* ---------- Focus rings ---------- */
:focus-visible {
	outline: 2px solid #c2410c;
	outline-offset: 3px;
	border-radius: 4px;
}

/* ============================================================
   PHASE ACCORDION (Process section)
   ============================================================ */
details.phase summary { list-style: none; cursor: pointer; }
details.phase summary::-webkit-details-marker { display: none; }
details.phase[open] .chev { transform: rotate(180deg); }
details.phase .chev { transition: transform 0.4s var(--ease-soft); }
details.phase .body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.5s var(--ease-soft);
}
details.phase[open] .body { grid-template-rows: 1fr; }
details.phase .body > div { overflow: hidden; }

details.phase[open] .chev-btn { background: #c2410c; border-color: #c2410c; color: #fff; }

details.phase .phase-card { transition: all 0.5s var(--ease-soft); }
details.phase[open] .phase-card {
	border-color: #c2410c;
	box-shadow: 0 20px 60px -22px rgba(28, 25, 23, 0.18);
}
details.phase .phase-num {
	color: #d6d3d1;
	transition: color 0.5s var(--ease-soft);
}
details.phase[open] .phase-num { color: #c2410c; }

/* Mini-timeline inside expanded phase */
.mini-timeline { position: relative; }
.mini-timeline::before {
	content: '';
	position: absolute;
	left: 19px;
	top: 20px;
	bottom: 20px;
	width: 2px;
	background: linear-gradient(to bottom, #c2410c 0%, rgba(194,65,12,0.22) 100%);
	border-radius: 1px;
	z-index: 0;
}
.mini-step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.55s var(--ease-soft), transform 0.55s var(--ease-soft);
}
details.phase[open] .mini-step { opacity: 1; transform: none; }
details.phase[open] .mini-step:nth-of-type(1) { transition-delay: 100ms; }
details.phase[open] .mini-step:nth-of-type(2) { transition-delay: 180ms; }
details.phase[open] .mini-step:nth-of-type(3) { transition-delay: 260ms; }
.mini-icon {
	position: relative;
	z-index: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid #c2410c;
	color: #c2410c;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 0 0 4px #fff;
	transition: background 0.4s var(--ease-soft), color 0.4s var(--ease-soft), transform 0.4s var(--ease-soft);
}
.mini-step:hover .mini-icon {
	background: #c2410c;
	color: #fff;
	transform: scale(1.05);
}

/* ============================================================
   Reduced-motion accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.marquee { animation: none !important; }
	.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.lift, .lift:hover { transform: none !important; transition: none !important; }
	details.phase .body { transition: none !important; }
	details.phase .mini-step { opacity: 1 !important; transform: none !important; transition: none !important; }
	.btn-primary, .btn-primary:hover { transform: none !important; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* Screen-reader-only text */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   v1.1.0 — Header widget logo image cap
   Tailwind utility classes h-7 / w-auto on the logo <img> aren't
   in the (purged) widgets.css build, so the image rendered at its
   natural size. Constrain it explicitly.
   ============================================================ */
#site-header a img,
header.dc-header a img {
	height: 32px;
	width: auto;
	max-height: 32px;
}

/* ============================================================
   v1.1.4 — Editor preview safety net
   Inside the Elementor editor iframe, IntersectionObserver doesn't
   fire reliably (widgets are inserted, not scrolled into view) so
   `.reveal { opacity:0 }` keeps everything invisible.
   Force every reveal item visible when the document is loaded inside
   any Elementor edit/preview context.
   ============================================================ */
body[class*="elementor-edit"] .reveal,
body[class*="elementor-preview"] .reveal,
body.elementor-editor-active .reveal,
html[class*="elementor-html"] .reveal,
html.elementor-html .reveal {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	visibility: visible !important;
}

/* Same protection for the marquee/lift/grain animations — they should
   render statically inside the editor iframe so the layout is testable. */
body[class*="elementor-edit"] .marquee,
body[class*="elementor-preview"] .marquee,
html.elementor-html .marquee { animation: none !important; }