/*
Theme Name: Recipetra PDF
Text Domain: recipetra-pdf
Description: Custom lightweight WordPress theme for PDFNexa browser-based PDF tools and practical PDF guides.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
WPVibe: yes
*/

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fffdf8; color: #142033; font-family: Manrope, Arial, sans-serif; line-height: 1.6; }
img { display: block; max-width: 100%; }
svg { display: block; width: 24px; height: 24px; max-width: 100%; }
.mobile-nav, .menu-toggle { display: none; }
a { color: inherit; }
.site-wrap { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; z-index: 1000; }
.privacy-strip { min-height: 34px; padding: 8px 20px; background: #142033; color: #e9eef8; text-align: center; font-size: 12px; }
.site-header { min-height: 76px; border-bottom: 1px solid #dfe4ed; background: #fffdf8; }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 800; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 40px; border-radius: 11px; background: #2457f5; color: #fff; }
.brand-mark svg { width: 22px; height: 22px; }
.primary-nav ul { display: flex; align-items: center; gap: 27px; margin: 0; padding: 0; list-style: none; }
.primary-nav a, .header-action { text-decoration: none; }
.menu-toggle svg { width: 25px; height: 25px; }
.hero { min-height: 580px; background: #f3f6fb; }
.document-icon svg, .tool-icon svg, .shield-icon svg { width: 36px; height: 36px; }
.site-footer .brand-mark svg { width: 22px; height: 22px; }

/* Premium editorial article system */
.article-page { background: #fffdf8; }
.article-shell { overflow: hidden; }
.article-hero {
	position: relative;
	padding: 58px 0 0;
	background:
		radial-gradient(circle at 85% 5%, rgba(36,87,245,.10), transparent 28%),
		linear-gradient(180deg,#f3f6fb 0%,#fffdf8 100%);
	border-bottom: 1px solid #e2e6ee;
}
.article-hero-wrap { position: relative; }
.article-breadcrumbs {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 34px;
	color: #6f7a8c;
	font-size: 12px;
	font-weight: 750;
}
.article-breadcrumbs a { text-decoration: none; }
.article-breadcrumbs a:hover { color: #2457f5; }
.article-hero-copy {
	max-width: 930px;
	margin: 0 auto;
	text-align: center;
}
.article-eyebrow {
	display: inline-flex;
	align-items: center;
	padding: 7px 11px;
	border-radius: 999px;
	background: #eaf0ff;
	color: #1943cc;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.article-hero h1 {
	margin: 20px auto 18px;
	max-width: 980px;
	font-family: "Fraunces", Georgia, serif;
	font-size: clamp(46px,6.1vw,76px);
	line-height: .99;
	letter-spacing: -3.2px;
	font-weight: 620;
}
.article-deck {
	max-width: 790px;
	margin: 0 auto;
	color: #566176;
	font-size: 19px;
	line-height: 1.75;
}
.article-meta {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	color: #7b8596;
	font-size: 12px;
	font-weight: 700;
}
.article-hero-media {
	margin-top: 42px;
	transform: translateY(38px);
}
.article-hero-media img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	border-radius: 24px;
	box-shadow: 0 28px 70px rgba(20,32,51,.17);
}
.article-content { padding-top: 92px; }
.article-content p,
.article-content li { color: #526075; font-size: 16px; line-height: 1.84; }
.article-content h2,
.article-content h3 { color: #142033; }

.article-band { padding: 72px 0; }
.article-band-soft { background: #f4f6fa; border-block: 1px solid #e2e6ee; }
.article-band-dark { background: #142033; color: #fff; }
.article-band-dark h2,
.article-band-dark h3 { color: #fff; }
.article-band-dark p,
.article-band-dark li { color: #cbd4e2; }
.article-band-inner { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.article-intro-grid {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	gap: 54px;
	align-items: start;
}
.article-intro-copy h2,
.article-section-head h2,
.article-decision-copy h2,
.article-source-wrap h2,
.article-tool-copy h2 {
	margin: 0 0 16px;
	font-family: "Fraunces", Georgia, serif;
	font-size: clamp(34px,4vw,50px);
	line-height: 1.05;
	letter-spacing: -1.8px;
	font-weight: 620;
}
.article-intro-copy p:first-of-type {
	margin-top: 0;
	font-size: 20px;
	line-height: 1.75;
	color: #334056;
}
.article-kicker {
	display: inline-block;
	margin-bottom: 10px;
	color: #2457f5;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.article-kicker-light { color: #9fb5ff; }
.article-diagnosis-card {
	position: sticky;
	top: 110px;
	padding: 28px;
	border-radius: 20px;
	background: #142033;
	box-shadow: 0 18px 48px rgba(20,32,51,.14);
}
.article-diagnosis-card .article-kicker { color: #91abff; }
.article-diagnosis-card h3 {
	margin: 0 0 16px;
	font-family: "Fraunces", Georgia, serif;
	font-size: 29px;
	line-height: 1.12;
	color: #fff;
}
.article-diagnosis-card p { margin: 0 0 14px; color: #d6deea; }
.article-diagnosis-card p:last-child { margin-bottom: 0; }
.article-section-head {
	max-width: 810px;
	margin-bottom: 34px;
}
.article-section-head p { margin: 0; font-size: 17px; }
.article-check-grid {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 20px;
	counter-reset: article-check;
}
.article-check-card {
	position: relative;
	min-height: 100%;
	padding: 28px 28px 26px 78px;
	border: 1px solid #dfe4ed;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 9px 24px rgba(20,32,51,.045);
}
.article-check-card::before {
	counter-increment: article-check;
	content: counter(article-check);
	position: absolute;
	left: 24px;
	top: 27px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: #eef2ff;
	color: #2457f5;
	font-weight: 900;
}
.article-check-card h3 {
	margin: 0 0 10px;
	font-size: 20px;
	line-height: 1.28;
}
.article-check-card p { margin: 0 0 12px; font-size: 14.5px; }
.article-check-card p:last-child { margin-bottom: 0; }

.article-visual {
	padding: 78px 0;
	background: #fffdf8;
}
.article-visual figure {
	width: min(1040px, calc(100% - 40px));
	margin: 0 auto;
}
.article-visual img {
	width: 100%;
	border-radius: 22px;
	box-shadow: 0 24px 60px rgba(20,32,51,.12);
}
.article-visual figcaption {
	max-width: 820px;
	margin: 14px auto 0;
	text-align: center;
	color: #7b8595;
	font-size: 12.5px;
	line-height: 1.7;
}
.article-warning {
	display: grid;
	grid-template-columns: .72fr 1.28fr;
	gap: 42px;
	align-items: center;
}
.article-warning-mark {
	font-family: "Fraunces", Georgia, serif;
	font-size: clamp(68px,10vw,132px);
	line-height: .8;
	color: #f0a34a;
	opacity: .95;
}
.article-warning-copy h2 {
	margin: 0 0 16px;
	font-family: "Fraunces", Georgia, serif;
	font-size: clamp(34px,4vw,52px);
	line-height: 1.04;
	letter-spacing: -1.8px;
}
.article-warning-copy p { margin: 0; font-size: 17px; }
.article-decision-grid {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 42px;
	align-items: start;
}
.article-decision-list {
	display: grid;
	gap: 14px;
}
.article-decision-item {
	padding: 20px 22px;
	border: 1px solid #dde3ed;
	border-radius: 15px;
	background: #fff;
}
.article-decision-item strong {
	display: block;
	margin-bottom: 5px;
	color: #142033;
	font-size: 15px;
}
.article-decision-item p { margin: 0; font-size: 14px; }
.article-tool {
	padding: 0 0 82px;
	background: #f4f6fa;
}
.article-tool-card {
	width: min(1160px, calc(100% - 40px));
	margin: 0 auto;
	padding: 38px 42px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 34px;
	align-items: center;
	border-radius: 22px;
	background: linear-gradient(135deg,#2457f5,#173bb5);
	color: #fff;
	box-shadow: 0 24px 60px rgba(36,87,245,.2);
}
.article-tool-copy h2 { color: #fff; }
.article-tool-copy p { margin: 0; max-width: 720px; color: #e1e8ff; }
.article-tool-card a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	padding: 14px 18px;
	border-radius: 12px;
	background: #fff;
	color: #173bb5;
	font-weight: 900;
	text-decoration: none;
}
.article-after-grid {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 18px;
}
.article-after-card {
	padding: 24px;
	border-radius: 17px;
	background: #fff;
	border: 1px solid #dfe4ed;
}
.article-after-card h3 { margin: 0 0 9px; font-size: 19px; }
.article-after-card p { margin: 0; font-size: 14px; }
.article-source-wrap { max-width: 980px; }
.article-source-grid {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 16px;
	margin-top: 26px;
}
.article-source-card {
	display: block;
	padding: 20px;
	border: 1px solid #dfe4ed;
	border-radius: 16px;
	background: #fff;
	text-decoration: none;
	transition: transform .2s, box-shadow .2s;
}
.article-source-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(20,32,51,.08);
}
.article-source-card strong { display: block; margin-bottom: 7px; color: #142033; }
.article-source-card span { color: #687487; font-size: 13px; line-height: 1.65; }
.article-end { padding: 54px 0; background: #0f1828; color: #fff; }
.article-end-inner {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 34px;
	align-items: center;
}
.article-end span { color: #9fb5ff; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.article-end h2 { margin: 6px 0 0; font-family: "Fraunces", Georgia, serif; font-size: 30px; line-height: 1.08; }
.article-end p { margin: 0; color: #c7d1df; font-size: 14px; line-height: 1.75; }
.article-end a {
	padding: 12px 16px;
	border: 1px solid #34445f;
	border-radius: 11px;
	color: #fff;
	font-size: 12px;
	font-weight: 850;
	text-decoration: none;
	white-space: nowrap;
}

@media (max-width: 920px) {
	.primary-nav, .header-action { display: none; }
	.menu-toggle { display: block; }
	.site-wrap { width: min(100% - 26px, 1160px); }
	.article-intro-grid,
	.article-warning,
	.article-decision-grid,
	.article-tool-card,
	.article-end-inner { grid-template-columns: 1fr; }
	.article-diagnosis-card { position: static; }
	.article-check-grid,
	.article-after-grid,
	.article-source-grid { grid-template-columns: 1fr; }
	.article-tool-card a { justify-self: start; }
	.article-warning-mark { font-size: 82px; }
}
@media (max-width: 640px) {
	.article-hero { padding-top: 34px; }
	.article-breadcrumbs { margin-bottom: 24px; }
	.article-hero h1 { font-size: 44px; letter-spacing: -2px; }
	.article-deck { font-size: 17px; }
	.article-hero-media { margin-top: 30px; transform: translateY(24px); }
	.article-hero-media img { border-radius: 16px; }
	.article-content { padding-top: 58px; }
	.article-band { padding: 54px 0; }
	.article-check-card { padding: 23px 19px 22px 66px; }
	.article-check-card::before { left: 19px; top: 23px; }
	.article-tool-card { padding: 28px 24px; }
}