/*
Theme Name:   WhyDecoded
Description:  WhyDecoded child theme for GeneratePress: AI news cards, home page and reading layout.
Template:     generatepress
Version:      1.7.0
Text Domain:  whydecoded
*/

:root {
	--wd-ink: #0f172a;
	--wd-text: #334155;
	--wd-muted: #64748b;
	--wd-line: #e2e8f0;
	--wd-bg: #f8fafc;
	--wd-card: #ffffff;
	--wd-accent: #4f46e5;
	--wd-accent-dark: #3730a3;
	--wd-accent-soft: #eef2ff;
	--wd-radius: 14px;
	--wd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
	background: var(--wd-bg);
	color: var(--wd-text);
	font-family: var(--wd-font);
	font-size: 17px;
	line-height: 1.65;
}

h1, h2, h3, h4 {
	color: var(--wd-ink);
	font-family: var(--wd-font);
	letter-spacing: -0.01em;
}

a {
	color: var(--wd-accent);
}

a:hover {
	color: var(--wd-accent-dark);
}

/* Header */
.site-header {
	background: var(--wd-card);
	border-bottom: 1px solid var(--wd-line);
}

.inside-header {
	padding-top: 18px;
	padding-bottom: 18px;
}

.wd-wordmark {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 0;
}

.wd-wordmark a,
.wd-wordmark a:hover {
	color: var(--wd-ink);
}

.wd-wordmark .wd-decoded {
	color: var(--wd-accent);
}

.main-navigation,
.main-navigation ul ul {
	background: transparent;
}

.main-navigation .main-nav ul li a {
	color: var(--wd-text);
	font-weight: 600;
	font-size: 15px;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a,
.main-navigation .main-nav ul li.current-menu-parent > a,
.main-navigation .main-nav ul li.current-post-ancestor > a {
	color: var(--wd-accent);
}

/* Page frame: content sits on the page background, not in one big white box. */
.separate-containers .inside-article,
.separate-containers .page-header,
.separate-containers .paging-navigation {
	border-radius: var(--wd-radius);
}

/* Same 40px gutter as the header (16px on phones), so logo and content share a left edge. */
/* #main: the parent theme zeroes #main's side margins below 768px with an ID selector. */
.no-sidebar.home #main,
.no-sidebar.archive #main,
.no-sidebar.search #main {
	margin: 0 40px;
}

@media (max-width: 768px) {
	.no-sidebar.home #main,
	.no-sidebar.archive #main,
	.no-sidebar.search #main {
		margin: 0 30px;
	}
}

/* Buttons */
.wd-btn {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 999px;
	border: 1px solid var(--wd-line);
	background: var(--wd-card);
	color: var(--wd-ink);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
}

.wd-btn:hover {
	border-color: var(--wd-accent);
	color: var(--wd-accent);
}

.wd-btn--primary,
.wd-btn--primary:hover {
	background: var(--wd-accent);
	border-color: var(--wd-accent);
	color: #fff;
}

.wd-btn--primary:hover {
	background: var(--wd-accent-dark);
}

.wd-btn--light,
.wd-btn--light:hover {
	background: #fff;
	border-color: #fff;
	color: var(--wd-ink);
}

/* Hero */
.wd-hero {
	padding: 56px 0 40px;
	max-width: 760px;
}

.wd-hero__kicker {
	color: var(--wd-accent);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.wd-hero__title {
	font-size: clamp(36px, 6vw, 60px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin-bottom: 18px;
}

.wd-hero__title span {
	color: var(--wd-accent);
}

.wd-hero__lead {
	font-size: 19px;
	color: var(--wd-muted);
	margin-bottom: 28px;
}

.wd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Sections */
.wd-section {
	margin-bottom: 56px;
}

.wd-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid var(--wd-line);
	margin-bottom: 24px;
	padding-bottom: 10px;
}

.wd-section__title {
	font-size: 22px;
	font-weight: 750;
	margin: 0;
}

.wd-section__more {
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
}

.wd-empty {
	padding: 40px;
	background: var(--wd-card);
	border: 1px dashed var(--wd-line);
	border-radius: var(--wd-radius);
	color: var(--wd-muted);
	text-align: center;
}

/* Meta line */
.wd-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	font-size: 13px;
	color: var(--wd-muted);
	margin-bottom: 8px;
}

.wd-meta .wd-cat {
	color: var(--wd-accent);
	background: var(--wd-accent-soft);
	padding: 2px 10px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
}

/* Cards */
.wd-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.wd-card {
	display: flex;
	flex-direction: column;
	background: var(--wd-card);
	border: 1px solid var(--wd-line);
	border-radius: var(--wd-radius);
	overflow: hidden;
	transition: box-shadow 0.15s, transform 0.15s;
}

.wd-card:hover {
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
	transform: translateY(-2px);
}

.wd-card__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--wd-accent-soft);
	overflow: hidden;
	text-decoration: none;
}

.wd-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wd-thumb-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #0ea5e9 100%);
	color: rgba(255, 255, 255, 0.92);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -0.01em;
}

.wd-card__body {
	padding: 18px 20px 22px;
}

.wd-card__title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 8px;
}

.wd-card__title a,
.wd-row__title a {
	color: var(--wd-ink);
	text-decoration: none;
}

.wd-card__title a:hover,
.wd-row__title a:hover {
	color: var(--wd-accent);
}

.wd-card__excerpt {
	font-size: 15px;
	color: var(--wd-muted);
	margin: 0;
}

/* Top story + latest list */
.wd-top {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.wd-card--lead .wd-card__title {
	font-size: 28px;
	line-height: 1.2;
}

.wd-card--lead .wd-card__body {
	padding: 22px 26px 28px;
}

.wd-card--lead .wd-thumb-fallback {
	font-size: 30px;
}

.wd-top__list .wd-section__title {
	border-bottom: 1px solid var(--wd-line);
	padding-bottom: 10px;
	margin-bottom: 6px;
}

.wd-row {
	padding: 16px 0;
	border-bottom: 1px solid var(--wd-line);
}

.wd-row__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

/* "Is it really free?" band */
.wd-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 32px 36px;
	margin-bottom: 56px;
	border-radius: var(--wd-radius);
	background: var(--wd-ink);
	color: #cbd5e1;
}

.wd-band__title {
	color: #fff;
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 8px;
}

.wd-band__text {
	margin: 0;
	max-width: 640px;
}

/* Archives: title box + cards */
.archive .page-header,
.search .page-header {
	background: transparent;
	padding: 32px 0 8px;
}

.archive .page-header h1,
.search .page-header h1 {
	font-size: 36px;
	font-weight: 800;
}

.home .site-main,
.archive .site-main,
.search .site-main {
	padding-bottom: 48px;
}

.paging-navigation {
	background: transparent !important;
}

/* Single posts and pages: a narrow reading column. */
.single .inside-article,
.page .inside-article {
	max-width: 780px;
	margin: 32px auto;
	padding: 40px 48px;
	border: 1px solid var(--wd-line);
	border-radius: var(--wd-radius);
}

.single .entry-title,
.page .entry-title {
	font-size: clamp(30px, 4.5vw, 42px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.single .wd-meta {
	margin: 14px 0 0;
}

.single .entry-content h2 {
	font-size: 26px;
	font-weight: 750;
	margin-top: 1.6em;
}

.single .entry-content h3 {
	font-size: 21px;
	font-weight: 700;
}

.single .featured-image,
.single .post-image {
	max-width: 780px;
	margin: 32px auto 0;
}

.single .featured-image img {
	border-radius: var(--wd-radius);
}

/* Footer */
.site-info {
	background: var(--wd-card);
	border-top: 1px solid var(--wd-line);
	color: var(--wd-muted);
	font-size: 14px;
}

.site-info a {
	color: var(--wd-muted);
}

/* Tablet */
@media (max-width: 1024px) {
	.wd-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wd-top {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Phone */
@media (max-width: 640px) {
	body {
		font-size: 16px;
	}

	.no-sidebar.home #main,
	.no-sidebar.archive #main,
	.no-sidebar.search #main {
		margin: 0 16px;
	}

	.inside-header {
		padding-left: 16px;
		padding-right: 16px;
	}

	.wd-hero {
		padding: 32px 0 28px;
	}

	.wd-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wd-band {
		flex-direction: column;
		align-items: flex-start;
		padding: 26px 22px;
	}

	.wd-card--lead .wd-card__title {
		font-size: 23px;
	}

	.single .inside-article,
	.page .inside-article {
		margin: 16px auto;
		padding: 24px 20px;
	}
}

/* ==========================================================================
   Neumorphic ("soft UI") skin for the whole site, matching the tools pages.
   One surface colour; depth comes from a light shadow (top-left) and a dark
   shadow (bottom-right). Text keeps full contrast.
   ========================================================================== */
:root {
	--neu-bg: #e7ecf3;
	--neu-light: #ffffff;
	--neu-dark: #c3cbd8;
	--neu-raised: 9px 9px 18px var(--neu-dark), -9px -9px 18px var(--neu-light);
	--neu-raised-sm: 5px 5px 10px var(--neu-dark), -5px -5px 10px var(--neu-light);
	--neu-inset: inset 5px 5px 10px var(--neu-dark), inset -5px -5px 10px var(--neu-light);
	--neu-inset-sm: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
	--wd-bg: var(--neu-bg);
	--wd-card: var(--neu-bg);
}

body,
.site-header,
.site-footer,
.site-info,
.main-navigation,
.main-navigation ul ul,
.separate-containers .inside-article,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.separate-containers .comments-area,
.one-container .site-content,
.inside-page-header {
	background: var(--neu-bg);
}

.site-header {
	border: 0;
	box-shadow: 0 6px 14px -8px var(--neu-dark);
}

.main-navigation ul ul {
	border-radius: 14px;
	box-shadow: var(--neu-raised-sm);
}

.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus {
	background: var(--neu-bg);
	border-radius: 12px;
	box-shadow: var(--neu-raised-sm);
}

.site-info {
	border-top: 0;
	box-shadow: 0 -6px 14px -8px var(--neu-dark);
}

/* Buttons: raised, press in on click */
.wd-btn {
	border: 0;
	background: var(--neu-bg);
	box-shadow: var(--neu-raised-sm);
}

.wd-btn:hover {
	box-shadow: var(--neu-raised);
}

.wd-btn:active {
	box-shadow: var(--neu-inset-sm);
}

.wd-btn--primary,
.wd-btn--primary:hover {
	background: var(--wd-accent);
	box-shadow: 4px 4px 10px rgba(79, 70, 229, 0.35), -4px -4px 10px var(--neu-light);
}

.wd-btn--primary:active {
	box-shadow: inset 3px 3px 6px rgba(30, 27, 75, 0.45);
}

/* Home hero: a raised panel */
.home .wd-hero {
	max-width: none;
	margin: 32px 0 48px;
	padding: 48px;
	border-radius: 28px;
	box-shadow: var(--neu-raised);
}

.home .wd-hero__lead {
	max-width: 640px;
	color: #475569;
}

/* Section headings sit on the surface with a soft groove */
.wd-section__head,
.wd-top__list .wd-section__title {
	border-bottom: 0;
	box-shadow: 0 2px 0 -1px var(--neu-light), 0 1px 0 var(--neu-dark);
}

/* Article cards */
.wd-grid {
	gap: 28px;
}

.wd-card {
	border: 0;
	border-radius: 22px;
	box-shadow: var(--neu-raised);
}

.wd-card:hover {
	transform: translateY(-2px);
	box-shadow: 12px 12px 24px var(--neu-dark), -12px -12px 24px var(--neu-light);
}

/* The image sits in a pressed frame inside the card */
.wd-card__thumb {
	margin: 12px 12px 0;
	padding: 6px;
	border-radius: 16px;
	background: var(--neu-bg);
	box-shadow: var(--neu-inset-sm);
}

.wd-card__thumb img,
.wd-card__thumb .wd-thumb-fallback {
	border-radius: 12px;
}

.wd-meta .wd-cat {
	box-shadow: 2px 2px 5px var(--neu-dark), -2px -2px 5px var(--neu-light);
}

/* "Latest" list beside the lead story: one raised panel */
.wd-top__list {
	padding: 22px 24px 8px;
	border-radius: 22px;
	box-shadow: var(--neu-raised);
}

.wd-row {
	border-bottom: 0;
	box-shadow: 0 1px 0 var(--neu-dark), 0 2px 0 var(--neu-light);
}

.wd-row:last-child {
	box-shadow: none;
}

/* "Is that AI tool really free?" band: raised panel, accent heading */
.wd-band {
	background: var(--neu-bg);
	color: #475569;
	border-radius: 24px;
	box-shadow: var(--neu-raised);
}

.wd-band__title {
	color: var(--wd-ink);
}

.wd-band .wd-btn--light,
.wd-band .wd-btn--light:hover {
	background: var(--wd-accent);
	color: #fff;
	box-shadow: 4px 4px 10px rgba(79, 70, 229, 0.35), -4px -4px 10px var(--neu-light);
}

/* Empty states and archive headings */
.wd-empty {
	border: 0;
	box-shadow: var(--neu-inset);
}

/* Pagination: raised numbers, current one pressed in */
.paging-navigation .page-numbers,
.nav-links .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: 8px 12px;
	margin: 0 4px 8px 0;
	border-radius: 12px;
	text-align: center;
	text-decoration: none;
	color: var(--wd-text);
	background: var(--neu-bg);
	box-shadow: var(--neu-raised-sm);
}

.paging-navigation .page-numbers.current,
.nav-links .page-numbers.current {
	color: var(--wd-accent);
	box-shadow: var(--neu-inset-sm);
}

/* Articles and pages: a raised reading panel */
.single .inside-article,
.page .inside-article {
	border: 0;
	border-radius: 28px;
	box-shadow: var(--neu-raised);
}

.single .post-image,
.single .featured-image {
	padding: 8px;
	border-radius: 22px;
	box-shadow: var(--neu-inset-sm);
}

.single .featured-image img {
	border-radius: 16px;
}

.entry-content blockquote {
	border-left: 0;
	padding: 16px 22px;
	border-radius: 16px;
	box-shadow: var(--neu-inset-sm);
}

.entry-content table,
.entry-content pre {
	border-radius: 14px;
	box-shadow: var(--neu-inset-sm);
}

/* Forms (contact form, search): fields pressed into the surface */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea,
select {
	background: var(--neu-bg);
	border: 0;
	border-radius: 12px;
	box-shadow: var(--neu-inset-sm);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	padding: 12px 16px;
}

input[type="submit"],
button.wpcf7-submit,
.wpcf7-submit {
	border: 0;
	border-radius: 999px;
	background: var(--wd-accent);
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	padding: 12px 28px;
	box-shadow: 4px 4px 10px rgba(79, 70, 229, 0.35), -4px -4px 10px var(--neu-light);
}

input[type="submit"]:active,
.wpcf7-submit:active {
	box-shadow: inset 3px 3px 6px rgba(30, 27, 75, 0.45);
}

@media (max-width: 768px) {
	.home .wd-hero {
		padding: 32px 22px;
		border-radius: 22px;
	}

	.single .inside-article,
	.page .inside-article {
		margin: 20px 14px 32px;
		padding: 28px 20px;
		border-radius: 22px;
	}
}

@media (max-width: 640px) {
	:root {
		--neu-raised: 6px 6px 12px var(--neu-dark), -6px -6px 12px var(--neu-light);
	}

	.wd-grid {
		gap: 22px;
	}
}

/* ==========================================================================
   Theme toggle button
   ========================================================================== */
.wd-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: auto 0 auto 14px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--neu-bg);
	color: var(--wd-ink);
	box-shadow: var(--neu-raised-sm);
	cursor: pointer;
	transition: box-shadow 0.15s, color 0.15s;
}

.wd-theme-toggle:hover {
	color: var(--wd-accent);
}

.wd-theme-toggle:active {
	box-shadow: var(--neu-inset-sm);
}

.wd-theme-toggle:focus-visible {
	outline: 2px solid var(--wd-accent);
	outline-offset: 3px;
}

.wd-theme-toggle .wd-icon-sun,
[data-theme="dark"] .wd-theme-toggle .wd-icon-moon {
	display: none;
}

[data-theme="dark"] .wd-theme-toggle .wd-icon-sun {
	display: block;
}

/* ==========================================================================
   Dark theme: same soft UI on a dark surface.
   ========================================================================== */
[data-theme="dark"] {
	color-scheme: dark;
	--neu-bg: #1f2531;
	--neu-light: #2a3242;
	--neu-dark: #141821;
	--wd-ink: #eef2f8;
	--wd-text: #cdd5e1;
	--wd-muted: #98a3b5;
	--wd-line: #2c3442;
	--wd-accent: #8b93ff;
	--wd-accent-dark: #a5abff;
	--wd-accent-soft: #2b3150;
	/* GeneratePress colours */
	--contrast: #eef2f8;
	--contrast-2: #98a3b5;
	--contrast-3: #4a5568;
	--base: #1f2531;
	--base-2: #1f2531;
	--base-3: #1f2531;
	--accent: #8b93ff;
}

/* The tools plugin sets its own surface; follow the dark one. */
[data-theme="dark"] .wd-tools-page {
	--neu-bg: #1f2531;
	--neu-light: #2a3242;
	--neu-dark: #141821;
	--wdt-ink: #eef2f8;
	--wdt-text: #cdd5e1;
	--wdt-muted: #98a3b5;
	--wdt-line: #2c3442;
	--wdt-accent: #8b93ff;
	--wdt-accent-soft: #2b3150;
}

[data-theme="dark"] body,
[data-theme="dark"] .entry-content,
[data-theme="dark"] .inside-article {
	color: var(--wd-text);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .entry-title,
[data-theme="dark"] .wd-wordmark .wd-why {
	color: var(--wd-ink);
}

[data-theme="dark"] a {
	color: var(--wd-accent);
}

[data-theme="dark"] .wd-card__title a,
[data-theme="dark"] .wd-row__title a,
[data-theme="dark"] .main-navigation .main-nav ul li a {
	color: var(--wd-ink);
}

[data-theme="dark"] .main-navigation .main-nav ul li.current-menu-item > a,
[data-theme="dark"] .main-navigation .main-nav ul li.current-menu-ancestor > a,
[data-theme="dark"] .main-navigation .main-nav ul li a:hover,
[data-theme="dark"] .wd-card__title a:hover,
[data-theme="dark"] .wd-row__title a:hover {
	color: var(--wd-accent);
}

/* Fixed light-theme greys used for secondary text */
[data-theme="dark"] .home .wd-hero__lead,
[data-theme="dark"] .wd-band,
[data-theme="dark"] .wd-tools-page .wd-dir-hero__lead,
[data-theme="dark"] .wd-tools-page .wd-dir-stats {
	color: var(--wd-muted);
}

/* Primary buttons: a lighter purple needs dark text to stay readable */
[data-theme="dark"] .wd-btn--primary,
[data-theme="dark"] .wd-btn--primary:hover,
[data-theme="dark"] .wd-band .wd-btn--light,
[data-theme="dark"] .wd-tools-page .wd-dir-search button,
[data-theme="dark"] input[type="submit"],
[data-theme="dark"] .wpcf7-submit {
	background: #6d74f7;
	color: #fff;
	box-shadow: 4px 4px 10px var(--neu-dark), -3px -3px 8px var(--neu-light);
}

[data-theme="dark"] .wd-tools-page .wd-dir-search input[type="search"] {
	color: var(--wd-ink);
}

/* Category label pills and status badges: tinted, not pastel */
[data-theme="dark"] .wd-meta .wd-cat {
	background: var(--wd-accent-soft);
	color: #c7cbff;
}

[data-theme="dark"] .wd-status--free,
[data-theme="dark"] .wd-tool-card__free span {
	background: rgba(34, 197, 94, 0.16);
	color: #86efac;
}

[data-theme="dark"] .wd-status--freemium {
	background: rgba(245, 158, 11, 0.16);
	color: #fcd34d;
}

[data-theme="dark"] .wd-status--trial,
[data-theme="dark"] .wd-tool-card__free--trial span {
	background: rgba(14, 165, 233, 0.16);
	color: #7dd3fc;
}

[data-theme="dark"] .wd-status--paid,
[data-theme="dark"] .wd-status--unknown,
[data-theme="dark"] .wd-tool-card__free--paid span,
[data-theme="dark"] .wd-tool-card__free--unknown span {
	background: rgba(148, 163, 184, 0.16);
	color: #cbd5e1;
}

[data-theme="dark"] .wd-verified {
	color: #86efac;
}

[data-theme="dark"] .wd-tools-page .wd-pricing__catch {
	background: rgba(251, 146, 60, 0.1);
	color: #fdba74;
}

/* Category tile icons keep their hue on a dark well */
[data-theme="dark"] .wd-tile--c0 .wd-tile__icon { color: #a5b4fc; }
[data-theme="dark"] .wd-tile--c1 .wd-tile__icon { color: #6ee7b7; }
[data-theme="dark"] .wd-tile--c2 .wd-tile__icon { color: #fdba74; }
[data-theme="dark"] .wd-tile--c3 .wd-tile__icon { color: #f9a8d4; }
[data-theme="dark"] .wd-tile--c4 .wd-tile__icon { color: #67e8f9; }
[data-theme="dark"] .wd-tile--c5 .wd-tile__icon { color: #fde047; }

/* Tool logos stay on white so dark logos remain visible */
[data-theme="dark"] .wd-logo:not(.wd-logo--letter) {
	background: #fff;
}

[data-theme="dark"] .wd-logo--letter {
	color: #c7cbff;
}

[data-theme="dark"] .wd-tools-page .wd-switch__opt {
	color: var(--wd-text);
}

[data-theme="dark"] .wd-tools-page .wd-switch__opt.is-active {
	color: #c7cbff;
}

/* Share buttons */
.wd-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 18px 0 8px;
}

.wd-share__label {
	margin-right: 4px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wd-muted);
}

.wd-share__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--neu-bg);
	box-shadow: var(--neu-raised-sm);
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.15s, transform 0.15s;
}

.wd-share__btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--neu-raised);
}

.wd-share__btn:active {
	transform: none;
	box-shadow: var(--neu-inset-sm);
}

.wd-share__btn:focus-visible {
	outline: 2px solid var(--wd-accent);
	outline-offset: 3px;
}

.wd-share__btn--x { color: #0f1419; }
.wd-share__btn--facebook { color: #0866ff; }
.wd-share__btn--linkedin { color: #0a66c2; }
.wd-share__btn--whatsapp { color: #25d366; }
.wd-share__btn--email { color: #ea580c; }
.wd-share__btn--copy { color: var(--wd-muted); }

[data-theme="dark"] .wd-share__btn--x { color: #eef2f8; }
[data-theme="dark"] .wd-share__btn--facebook { color: #5b9bff; }
[data-theme="dark"] .wd-share__btn--linkedin { color: #4ba3f2; }
[data-theme="dark"] .wd-share__btn--email { color: #fdba74; }

.wd-share__copied {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--wd-ink);
	color: var(--neu-bg);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

/* After the article text: separated by a soft groove */
.entry-content + .wd-share,
.inside-article > .wd-share:last-child {
	margin-top: 32px;
	padding-top: 20px;
	box-shadow: 0 -1px 0 var(--neu-dark), 0 -2px 0 var(--neu-light);
}

/* Inside the tool pricing box */
.wd-pricing .wd-share {
	margin-top: 22px;
}

/* Newsletter sign-up box */
.wd-nl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px 36px;
	margin: 0 0 56px;
	padding: 34px 38px;
	border-radius: 24px;
	background: var(--neu-bg);
	box-shadow: var(--neu-raised);
}

.single .wd-nl {
	margin: 36px 0 8px;
	padding: 28px;
	box-shadow: var(--neu-inset);
}

.wd-nl__text {
	flex: 1 1 320px;
}

.wd-nl__title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 800;
	color: var(--wd-ink);
}

.wd-nl__lead {
	margin: 0;
	color: var(--wd-muted);
	font-size: 16px;
}

.wd-nl__form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	flex: 1 1 340px;
	max-width: 460px;
}

.wd-nl__form input[type="email"] {
	flex: 1 1 200px;
	min-width: 0;
	padding: 13px 18px;
	border-radius: 999px;
	color: var(--wd-ink);
}

.wd-nl__form .wd-btn {
	cursor: pointer;
	font-family: inherit;
}

.wd-nl__msg {
	flex-basis: 100%;
	margin: 0;
	min-height: 1.4em;
	font-size: 14px;
	color: var(--wd-muted);
}

.wd-nl__fine {
	flex-basis: 100%;
	margin: -6px 0 0;
	font-size: 12.5px;
	color: var(--wd-muted);
}

.wd-nl--notice {
	margin: 40px auto;
	max-width: 760px;
}

.wd-nl--notice .wd-nl__lead {
	margin-bottom: 22px;
}

/* Hidden honeypot fields */
.wd-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* Email-share dialog */
.wd-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.wd-modal[hidden] {
	display: none;
}

.wd-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
}

.wd-modal__box {
	position: relative;
	width: 100%;
	max-width: 440px;
	max-height: calc(100vh - 32px);
	overflow: auto;
	padding: 28px;
	border-radius: 24px;
	background: var(--neu-bg);
	box-shadow: 0 20px 60px rgba(2, 6, 23, 0.35);
}

.wd-modal__x {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: var(--neu-bg);
	color: var(--wd-ink);
	font-size: 22px;
	line-height: 1;
	box-shadow: var(--neu-raised-sm);
	cursor: pointer;
}

.wd-modal__title {
	margin: 0 0 4px;
	font-size: 21px;
	font-weight: 800;
	color: var(--wd-ink);
}

.wd-modal__sub {
	margin: 0 0 18px;
	color: var(--wd-muted);
	font-size: 14.5px;
}

.wd-modal__box label {
	display: block;
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wd-text);
}

.wd-modal__box input[type="email"],
.wd-modal__box input[type="text"],
.wd-modal__box textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 11px 14px;
	font-weight: 400;
	color: var(--wd-ink);
}

.wd-modal__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
}

.wd-modal__actions .wd-btn {
	cursor: pointer;
	font-family: inherit;
}

.wd-modal__msg {
	font-size: 14px;
	color: var(--wd-muted);
}

.wd-modal__fine {
	margin: 14px 0 0;
	font-size: 12.5px;
	color: var(--wd-muted);
}

@media (max-width: 640px) {
	.wd-nl {
		padding: 26px 22px;
	}

	.wd-nl__form .wd-btn {
		flex: 1 1 100%;
	}
}

/* About page */
.wd-about {
	padding-bottom: 32px;
}

.wd-about__hero {
	margin: 32px 0 48px;
	padding: 52px 48px 44px;
	border-radius: 28px;
	box-shadow: var(--neu-raised);
}

.wd-about__title {
	max-width: 820px;
	margin: 0 0 18px;
	font-size: clamp(34px, 5.5vw, 56px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--wd-ink);
}

.wd-about__title span {
	color: var(--wd-accent);
}

.wd-about__lead {
	max-width: 700px;
	font-size: 19px;
	color: var(--wd-muted);
}

.wd-about__lead p:last-child {
	margin-bottom: 0;
}

.wd-about__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.wd-about__stats li {
	display: flex;
	flex-direction: column;
	min-width: 160px;
	padding: 16px 22px;
	border-radius: 18px;
	box-shadow: var(--neu-inset-sm);
}

.wd-about__stats strong {
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--wd-accent);
}

.wd-about__stats span {
	font-size: 14px;
	color: var(--wd-muted);
}

.wd-about__section {
	margin-bottom: 56px;
}

.wd-about__h2 {
	margin: 0 0 22px;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wd-ink);
}

.wd-about__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

.wd-about__card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border-radius: 22px;
	box-shadow: var(--neu-raised);
	color: var(--wd-text);
	text-decoration: none;
	transition: box-shadow 0.15s, transform 0.15s;
}

.wd-about__card:hover {
	transform: translateY(-2px);
	color: var(--wd-text);
	box-shadow: 12px 12px 24px var(--neu-dark), -12px -12px 24px var(--neu-light);
}

.wd-about__card h3 {
	margin: 18px 0 8px;
	font-size: 20px;
	font-weight: 800;
	color: var(--wd-ink);
}

.wd-about__card p {
	margin: 0 0 18px;
	font-size: 16px;
	color: var(--wd-muted);
}

.wd-about__more {
	margin-top: auto;
	font-weight: 700;
	color: var(--wd-accent);
}

.wd-about__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	box-shadow: var(--neu-inset-sm);
}

.wd-about__icon.wd-tile--c0 { color: #4f46e5; }
.wd-about__icon.wd-tile--c1 { color: #059669; }
.wd-about__icon.wd-tile--c2 { color: #ea580c; }
[data-theme="dark"] .wd-about__icon.wd-tile--c0 { color: #a5b4fc; }
[data-theme="dark"] .wd-about__icon.wd-tile--c1 { color: #6ee7b7; }
[data-theme="dark"] .wd-about__icon.wd-tile--c2 { color: #fdba74; }

.wd-about__panel {
	padding: 40px 44px;
	border-radius: 26px;
	box-shadow: var(--neu-raised);
}

.wd-about__steps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wd-about__steps li {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.wd-about__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-weight: 800;
	font-size: 18px;
	color: var(--wd-accent);
	box-shadow: var(--neu-raised-sm);
}

.wd-about__steps h3 {
	margin: 4px 0 6px;
	font-size: 18px;
	font-weight: 800;
	color: var(--wd-ink);
}

.wd-about__steps p {
	margin: 0;
	font-size: 16px;
	color: var(--wd-muted);
}

.wd-about__promises {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wd-about__promises li {
	padding: 18px 22px 18px 52px;
	position: relative;
	border-radius: 18px;
	box-shadow: var(--neu-inset-sm);
	color: var(--wd-text);
}

.wd-about__promises li::before {
	content: "\2713";
	position: absolute;
	left: 20px;
	top: 17px;
	font-weight: 800;
	color: #059669;
}

[data-theme="dark"] .wd-about__promises li::before {
	color: #6ee7b7;
}

.wd-about__promises strong {
	color: var(--wd-ink);
}

.wd-about__contact {
	margin-top: 8px;
}

@media (max-width: 1024px) {
	.wd-about__cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 768px) {
	.wd-about__hero,
	.wd-about__panel {
		padding: 30px 22px;
		border-radius: 22px;
	}

	.wd-about__steps,
	.wd-about__promises {
		grid-template-columns: minmax(0, 1fr);
	}

	.wd-about__stats li {
		flex: 1 1 140px;
		min-width: 0;
	}

	.wd-about__contact {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* About page side gutters: GeneratePress zeroes #main margins on small screens */
@media (max-width: 768px) {
	#main.wd-about {
		margin-left: 22px;
		margin-right: 22px;
	}
}

@media (max-width: 640px) {
	#main.wd-about {
		margin-left: 16px;
		margin-right: 16px;
	}
}

/* Logo icon beside the wordmark */
.wd-wordmark a {
	display: inline-flex;
	align-items: center;
}

.wd-logo-icon {
	width: 36px;
	height: 36px;
	margin-right: 10px;
	border-radius: 9px;
	box-shadow: 3px 3px 7px var(--neu-dark), -3px -3px 7px var(--neu-light);
}

@media (max-width: 640px) {
	.wd-logo-icon {
		width: 32px;
		height: 32px;
		margin-right: 8px;
	}
}