/*
Theme Name: Deco Mesh Guide
Theme URI: https://tpdecoapp.com
Author: tpdecoapp.com
Author URI: https://tpdecoapp.com
Description: A custom theme for tpdecoapp.com — a clean, classic, content-first layout for the TP-Link Deco app setup and management guide.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dmg
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
	--ink: #1A1A1A;
	--text: #222222;
	--text-soft: #555B66;
	--bg: #FFFFFF;
	--bg-soft: #F7F8F9;
	--line: #E5E7EB;

	--accent: #127C76;
	--accent-dark: #0E625D;
	--link: #1457C9;

	--led-blue: #1457C9;
	--led-amber: #C9790E;
	--led-red: #C92E1E;

	--font-body: Arial, Helvetica, sans-serif;
	--font-display: Arial, Helvetica, sans-serif;

	--radius-s: 6px;
	--radius-m: 10px;
	--radius-pill: 999px;
	--container: 800px;
	--container-wide: 1040px;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--text);
	background: var(--bg);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 0.5em;
	color: var(--ink);
}
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 17px; }
p { margin: 0 0 1em; }
.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}
.container-wide {
	max-width: var(--container-wide);
	margin: 0 auto;
	padding: 0 24px;
}
.section { padding: 64px 0; }
.section--tight { padding: 44px 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-head { margin-bottom: 28px; }
.section-head.is-centered { text-align: center; }
.section-head h2 {
	font-size: 24px;
	position: relative;
	padding-bottom: 14px;
	margin-bottom: 16px;
}
.section-head h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 36px;
	height: 3px;
	background: var(--accent);
	border-radius: 2px;
}
.section-head.is-centered h2::after { left: 50%; transform: translateX(-50%); }
.section-head p { color: var(--text-soft); font-size: 15.5px; max-width: 680px; }
.note { color: var(--text-soft); font-size: 15.5px; }
.hl { color: var(--ink); font-weight: 700; }
strong { color: var(--ink); }

/* status dot — kept for LED color references */
.dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.dot--blue { background: var(--led-blue); }
.dot--amber { background: var(--led-amber); }
.dot--red { background: var(--led-red); }

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	padding: 11px 24px;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); text-decoration: none; }
.btn--outline { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn--outline:hover { background: var(--accent); color: #fff; text-decoration: none; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	border-bottom: 1px solid var(--line);
	background: var(--bg);
}
.site-header .container-wide {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.brand-mark { width: 26px; height: 26px; flex-shrink: 0; }
.header-cta a.btn { font-size: 13px; padding: 9px 18px; }

/* ==========================================================================
   Page intro (replaces the old hero)
   ========================================================================== */
.page-intro { padding: 56px 0 20px; }
.page-intro h1 {
	text-align: center;
	font-size: 34px;
	margin-bottom: 24px;
}
.page-intro p {
	color: var(--text-soft);
	font-size: 15.5px;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.page-intro .hero-actions {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 28px;
	flex-wrap: wrap;
}

/* ==========================================================================
   Three-column "Discover" intro band
   ========================================================================== */
.discover-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-top: 32px;
}
.discover-item .discover-icon {
	font-size: 22px;
	color: var(--accent);
	margin-bottom: 14px;
}
.discover-item h3 {
	font-size: 17px;
	color: var(--accent);
	margin-bottom: 8px;
}
.discover-item p { color: var(--text-soft); font-size: 14.5px; margin: 0; }

/* ==========================================================================
   Bullet feature / step lists
   ========================================================================== */
.bullet-list { display: flex; flex-direction: column; gap: 14px; }
.bullet-list li {
	position: relative;
	padding-left: 22px;
	color: var(--text-soft);
	font-size: 15.5px;
}
.bullet-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}
.bullet-list li strong { color: var(--ink); }

.sub-heading {
	font-size: 17px;
	font-weight: 700;
	margin: 36px 0 16px;
	color: var(--ink);
}
.sub-heading:first-child { margin-top: 0; }

/* ==========================================================================
   Numbered step cards (Setting Up Your TP-Link Devices)
   ========================================================================== */
.step-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 32px;
}
.step-card {
	background: var(--bg-soft);
	border-radius: var(--radius-m);
	padding: 28px 24px;
}
.step-card .step-number {
	font-size: 13px;
	color: var(--text-soft);
	margin-bottom: 14px;
}
.step-card h3 { margin-bottom: 10px; }
.step-card p { color: var(--text-soft); font-size: 14.5px; margin-bottom: 18px; }

/* ==========================================================================
   Closing CTA band
   ========================================================================== */
.cta-band {
	background: var(--bg-soft);
	border-radius: var(--radius-m);
	padding: 48px 32px;
	text-align: center;
}
.cta-band h2 { font-size: 24px; margin-bottom: 12px; }
.cta-band p { color: var(--text-soft); margin-bottom: 24px; }

/* ==========================================================================
   Step-by-step walkthrough (longer setup guides)
   ========================================================================== */
.guide-step { margin-bottom: 28px; }
.guide-step h3 { margin-bottom: 10px; }
.guide-step p { color: var(--text-soft); font-size: 15.5px; margin: 0 0 8px; }
.guide-step .bullet-list { margin-top: 8px; }

/* ==========================================================================
   LED status row
   ========================================================================== */
.led-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.led-item {
	border: 1px solid var(--line);
	border-radius: var(--radius-m);
	padding: 22px;
}
.led-item .dot { width: 14px; height: 14px; margin-bottom: 14px; }
.led-item h3 { font-size: 15px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.led-item p { color: var(--text-soft); font-size: 14px; margin: 0; }

/* ==========================================================================
   IP / web-interface callout
   ========================================================================== */
.ip-box {
	background: var(--bg-soft);
	border-radius: var(--radius-m);
	padding: 28px;
}
.ip-box h3 { margin-bottom: 10px; }
.ip-box p { color: var(--text-soft); font-size: 15px; }
.ip-box .ip-address {
	display: inline-block;
	font-weight: 700;
	color: var(--accent);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	padding: 8px 16px;
	margin: 10px 0 16px;
}
.ip-box ol { margin: 0; padding-left: 18px; list-style: decimal; color: var(--text-soft); font-size: 14.5px; }
.ip-box ol li { margin-bottom: 6px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}
.faq-header h2 { margin: 0; font-size: 24px; }
.faq-pair { margin-bottom: 26px; }
.faq-pair h3 { margin-bottom: 6px; }
.faq-pair p { color: var(--text-soft); font-size: 15px; margin: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--line); }
.site-footer .container-wide { padding-top: 48px; padding-bottom: 28px; }
.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 40px;
	padding-bottom: 32px;
}
.footer-brand .brand { margin-bottom: 12px; }
.footer-brand p { font-size: 14px; color: var(--text-soft); max-width: 360px; margin: 0; }
.footer-col h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 14px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { font-size: 14px; color: var(--text-soft); }
.footer-col ul a:hover { color: var(--accent); }
.footer-col p { font-size: 14px; color: var(--text-soft); margin: 0; }
.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: var(--text-soft);
	flex-wrap: wrap;
	gap: 10px;
}
.footer-disclaimer { font-size: 12px; line-height: 1.6; color: #828A99; max-width: 760px; margin: 16px 0 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 820px) {
	.discover-grid { grid-template-columns: 1fr; gap: 28px; }
	.step-cards { grid-template-columns: 1fr; }
	.led-row { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) {
	.section { padding: 40px 0; }
	.faq-header { flex-direction: column; align-items: flex-start; }
	h1 { font-size: 26px; }
	.page-intro h1 { font-size: 26px; }
	h2, .section-head h2, .faq-header h2 { font-size: 21px; }
}