/*
 * SaveDou — design tokens and page CSS, matched to douyinsaver.com's own stylesheet (fetched and
 * inspected directly: Tailwind v4 + Geist, bg #0a0a0a, white-at-opacity text, #FF2D55→#FF9500 accent
 * gradient, translucent "glass" cards, rounded-xl corners). Scoped under body.sd so it can't leak into
 * — or be leaked into by — wp-admin or any other theme still installed alongside it.
 */

:root {
	--sd-bg: #0a0a0a;
	--sd-ink: #ffffff;
	--sd-muted-80: rgba(255, 255, 255, .8);
	--sd-muted-40: rgba(255, 255, 255, .4);
	--sd-muted-35: rgba(255, 255, 255, .35);
	--sd-muted-30: rgba(255, 255, 255, .3);
	--sd-muted-25: rgba(255, 255, 255, .25);
	--sd-muted-20: rgba(255, 255, 255, .2);
	--sd-line-10: rgba(255, 255, 255, .1);
	--sd-line-8: rgba(255, 255, 255, .08);
	--sd-line-7: rgba(255, 255, 255, .07);
	--sd-line-6: rgba(255, 255, 255, .06);
	--sd-glass-5: rgba(255, 255, 255, .05);
	--sd-glass-3: rgba(255, 255, 255, .03);
	--sd-pink: #ff2d55;
	--sd-pink-dark: #e0283f;
	--sd-orange: #ff9500;
	--sd-gradient: linear-gradient(135deg, var(--sd-pink), var(--sd-orange));
	--sd-radius: .75rem;
	--sd-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--sd-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { background: var(--sd-bg); }
body.sd {
	margin: 0;
	background: var(--sd-bg);
	color: var(--sd-ink);
	font-family: var(--sd-font);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
.sd-wrap { max-width: 42rem; margin: 0 auto; padding-inline: 20px; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

/* --- Header ------------------------------------------------------------------------------------ */
.sd-header { border-bottom: 1px solid var(--sd-line-8); padding: 8px 0; overflow: visible; }
.sd-header .sd-wrap { min-height: 44px; }
.sd-header .sd-wrap { display: flex; align-items: center; justify-content: space-between; }
.sd-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sd-brand__mark { width: auto; height: 75px; flex: none; margin: -16px 0; }
.sd-brand__name { font-weight: 800; font-size: 16px; letter-spacing: -.01em; }

.sd-nav { display: flex; gap: 18px; font-size: 13px; color: var(--sd-muted-40); align-items: center; flex-wrap: wrap; }
.sd-nav a { text-decoration: none; }
.sd-nav a:hover { color: var(--sd-ink); }
.sd-nav ul,
.sd-nav li { list-style: none; margin: 0; padding: 0; }
.sd-nav li::marker { content: ""; }
.sd-nav ul { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

@media (max-width: 640px) {
	.sd-header .sd-wrap { flex-wrap: wrap; row-gap: 12px; }
	.sd-brand { flex: 1 1 auto; }
	.sd-nav,
	.sd-nav ul { width: 100%; justify-content: flex-start; gap: 10px 16px; font-size: 12.5px; }
}

/* --- Hero -------------------------------------------------------------------------------------- */
.sd-hero { padding: 56px 0 8px; text-align: center; }
.sd-hero__title {
	font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
	font-weight: 900;
	letter-spacing: -.02em;
	line-height: 1.1;
	margin: 0 0 16px;
}
.sd-hero__gradient {
	background: var(--sd-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sd-hero__sub {
	color: var(--sd-muted-40);
	font-size: 1rem;
	max-width: 30rem;
	margin: 0 auto 30px;
	line-height: 1.65;
}
.sd-hero__hint { color: var(--sd-muted-20); font-size: 12px; margin: 10px 0 0; }

/* --- Sections ------------------------------------------------------------------------------------ */
.sd-section { padding: 48px 0; border-top: 1px solid var(--sd-line-6); }
.sd-section__title { font-size: 18px; font-weight: 700; text-align: center; margin: 0 0 8px; color: var(--sd-muted-80); }
.sd-section__lede { color: var(--sd-muted-30); font-size: 12px; text-align: center; margin: 0 0 32px; }

/* --- Cards (steps, benefits) -------------------------------------------------------------------- */
.sd-grid { display: grid; gap: 16px; }
.sd-grid--3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sd-grid--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sd-card { background: var(--sd-glass-3); border: 1px solid var(--sd-line-7); border-radius: var(--sd-radius); padding: 16px; }
.sd-card--step .sd-card__n { color: var(--sd-pink); font-family: var(--sd-mono); font-weight: 800; font-size: 12px; margin-bottom: 8px; }
.sd-card--benefit { display: flex; gap: 12px; }
.sd-card__icon { font-size: 20px; flex: none; line-height: 1.3; }
.sd-card h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.sd-card p { color: var(--sd-muted-35); font-size: 12.5px; line-height: 1.6; margin: 0; }

/* --- About prose ---------------------------------------------------------------------------------- */
.sd-prose { color: var(--sd-muted-35); font-size: 12.5px; line-height: 1.7; }
.sd-prose p { margin: 0 0 12px; }
.sd-prose p:last-child { margin-bottom: 0; }

/* --- Long-form document pages (legal, how-to): more readable than the homepage's muted --about--
   blurb above, since a visitor is here to actually read a whole page, not skim a sentence. -------- */
.sd-prose--doc { max-width: 720px; color: var(--sd-muted-80); font-size: 14.5px; line-height: 1.75; }
.sd-prose--doc p { margin: 0 0 16px; }
.sd-prose--doc h2 { color: var(--sd-ink); font-size: 20px; font-weight: 800; margin: 36px 0 12px; }
.sd-prose--doc h2:first-child { margin-top: 0; }
.sd-prose--doc h3 { color: var(--sd-ink); font-size: 16px; font-weight: 700; margin: 24px 0 10px; }
.sd-prose--doc ul, .sd-prose--doc ol { margin: 0 0 16px; padding-left: 22px; }
.sd-prose--doc li { margin-bottom: 8px; }
.sd-prose--doc li:last-child { margin-bottom: 0; }
.sd-prose--doc a { color: var(--sd-pink); text-decoration: underline; text-underline-offset: 2px; }
.sd-prose--doc a:hover { color: var(--sd-orange); }
.sd-prose--doc strong { color: var(--sd-ink); font-weight: 700; }
.sd-prose--doc hr { border: none; border-top: 1px solid var(--sd-line-8); margin: 32px 0; }
.sd-prose--doc code { background: var(--sd-glass-5); border: 1px solid var(--sd-line-8); border-radius: 4px; padding: 1px 6px; font-family: var(--sd-mono); font-size: 13px; }
.sd-prose--doc .sd-updated { color: var(--sd-muted-30); font-size: 12.5px; margin-bottom: 28px; }

/* --- FAQ (native <details>, no JS needed) --------------------------------------------------------- */
.sd-faq { border: 1px solid var(--sd-line-7); border-radius: var(--sd-radius); overflow: hidden; }
.sd-faq details { border-bottom: 1px solid var(--sd-line-7); }
.sd-faq details:last-child { border-bottom: 0; }
.sd-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 14px 16px;
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.sd-faq summary::-webkit-details-marker { display: none; }
.sd-faq summary::after { content: "+"; color: var(--sd-muted-30); font-weight: 400; font-size: 18px; flex: none; }
.sd-faq details[open] summary::after { content: "\2212"; }
.sd-faq summary:hover { background: var(--sd-glass-3); }
.sd-faq__a { padding: 0 16px 16px; color: var(--sd-muted-35); font-size: 12.5px; line-height: 1.65; }

/* --- Footer ---------------------------------------------------------------------------------------- */
.sd-footer { border-top: 1px solid var(--sd-line-8); padding: 28px 0 40px; }
.sd-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; font-size: 12.5px; color: var(--sd-muted-40); margin: 0 0 14px; padding: 0; }
.sd-footer__links li { list-style: none; } /* wp_nav_menu()'s <li> items, once a real Footer menu is assigned — the single-link fallback never needed this. */
.sd-footer__links a { text-decoration: none; }
.sd-footer__links a:hover { color: var(--sd-ink); }
.sd-footer__meta { text-align: center; color: var(--sd-muted-20); font-size: 11px; line-height: 1.7; }

/* --- Mobile hamburger menu --------------------------------------------------------------------- */
.sd-menu-btn { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; cursor: pointer; }
.sd-menu-btn span { display: block; width: 100%; height: 2px; background: var(--sd-ink); border-radius: 2px; }

@media (max-width: 640px) {
	.sd-header .sd-wrap { flex-wrap: wrap; position: relative; }
	.sd-brand { flex: 1 1 auto; }
	.sd-menu-btn { display: flex; }
	.sd-nav {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid var(--sd-line-8);
	}
	.sd-menu-toggle:checked ~ .sd-nav { display: flex; }
}

/* --- Visually hidden (for SEO/accessibility, not shown on screen) ------------------------------- */
.sd-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; }
/* --- The [douyin_downloader] shortcode is styled via the Douyin Downloader plugin's own Settings →
   Appearance (color/radius/font tokens + a Custom CSS block matching this exact glass/gradient look —
   configured to ship with this theme, see functions.php savedou_configure_dydl_plugin()). Nothing
   about the tool's own markup/behavior lives in this theme. */
   
.sd-footer__social { display: flex; justify-content: center; gap: 16px; margin: 0 0 14px; font-size: 12.5px; }
.sd-footer__social a { color: var(--sd-muted-40); text-decoration: none; }
.sd-footer__social a:hover { color: var(--sd-ink); }

/* --- Blog article spacing ------------------------------------------------ */
.sd-post-list { display: grid; gap: 20px; margin-top: 8px; }