/*
Theme Name: Swagify Blog
Theme URI: https://www.swagify.com/blog
Author: Swagify
Description: A clean, purpose-built theme for the Swagify blog (swagify.com). No third-party nav/mega-menu libraries, no page builder, minimal JavaScript, system fonts only (no render-blocking web fonts). Header matches the swagify.com storefront header design and palette.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: swagify-blog
*/

/* =========================================================
   Design tokens
   ========================================================= */
:root {
	--swag-accent: #165749;
	--swag-light: #f1f1f1;
	--swag-dark: #1a1a1a;
	--swag-text: #2b2b2b;
	--swag-muted: #5a5a5a;
	--swag-border: #eaeaea;
	--swag-bg-pink: #fdeef1;
	--swag-bg-blue: #eaf4fb;
	--swag-footer-grad: linear-gradient(120deg, #002925 0%, #0c3b32 22%, #3c3520 55%, #2a2418 75%, #0a0f14 100%);
	--swag-font: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--swag-radius: 14px;
	--swag-max-width: 1270px;

	/* swagify.com storefront header palette (copied from swagify.com's own CSS variables) */
	--swag-header-bg: #ffffff;
	--swag-header-text: #000b11;
	--swag-header-border: #e7e7e9;
	--swag-header-primary: #14142b;
	--swag-header-primary-hover: #292944;

	/* "Swagify Journal" editorial palette */
	--j-primary: #00685f;
	--j-primary-hover: #008378;
	--j-deep-slate: #00302d;
	--j-deep-slate-2: #002422;
	--j-secondary: #4b41e1;
	--j-tertiary: #b15f00;
	--j-canvas: #fdf8f5;
	--j-card: #ffffff;
	--j-surface-low: #f1f3ff;
	--j-outline: #6d7a77;
	--j-outline-variant: #bcc9c6;
	--j-on-surface-variant: #3d4947;
	--j-border: rgba(0,0,0,0.08);
	--j-font-display: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	--j-font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* =========================================================
   Reset & base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--j-font-body);
	color: var(--j-on-surface-variant);
	line-height: 1.6;
	background: var(--j-canvas);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--j-font-display); color: var(--j-deep-slate); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--swag-accent); }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0,0,0,0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--swag-dark);
	color: #fff;
	padding: 12px 20px;
	z-index: 999;
}
.skip-link:focus { left: 10px; top: 10px; }
.container {
	max-width: var(--swag-max-width);
	margin: 0 auto;
	padding: 0 20px;
}

/* =========================================================
   Site header — single clean row: logo, nav links, a compact
   search field, and a CTA button. Colors from swagify.com's
   own CSS variables (see --swag-header-* tokens above).
   ========================================================= */
.site-header { background: var(--swag-header-bg); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--swag-header-border); }
.nav-row { display: flex; align-items: center; gap: 40px; height: 76px; }

.site-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.site-logo .custom-logo-link { display: inline-flex; align-items: center; }
.site-logo img {
	height: auto !important; width: var(--swag-logo-width-desktop, 136px) !important; max-width: 200px !important; max-height: 44px !important; object-fit: contain !important;
}
.site-logo .site-title {
	color: var(--swag-header-text); font-weight: 700; font-size: 20px; text-decoration: none;
}
.site-logo-mobile { display: none; }

.main-nav { min-width: 0; }
.nav-drawer { display: none; }
.drawer-close { display: none; }
.primary-nav { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; row-gap: 6px; }
.primary-nav li { position: relative; }
.primary-nav > li > a {
	display: inline-flex; align-items: center; gap: 6px; color: var(--j-on-surface-variant);
	text-decoration: none; font-family: var(--j-font-body); font-weight: 600; font-size: 13px;
	padding: 8px 0 10px; white-space: nowrap;
}
.primary-nav > li > a:hover { color: var(--j-deep-slate); }
.primary-nav > li.is-current > a {
	color: var(--j-primary); border-bottom: 2px solid var(--j-primary); padding-bottom: 8px;
}
.nav-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--j-primary); display: inline-block; }

.header-search {
	margin-left: auto; flex: 0 0 auto; width: 240px;
	display: flex; align-items: center; gap: 8px;
	height: 38px; border: 1px solid var(--j-border); border-radius: 10px;
	background: var(--j-canvas); padding: 0 12px;
}
.header-search-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--j-outline); }
.header-search input {
	flex: 1 1 auto; border: none; background: none; outline: none; min-width: 0;
	font-family: var(--j-font-body); font-size: 13.5px; font-weight: 400; color: var(--j-deep-slate);
}
.header-search input::placeholder { color: var(--j-outline); }
.header-search-kbd {
	flex-shrink: 0; font-size: 10px; font-family: var(--j-font-body); color: var(--j-outline-variant);
	background: #fff; border: 1px solid var(--j-border); border-radius: 5px; padding: 2px 5px;
}

.nav-cta-btn {
	display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap;
	background: var(--j-primary); color: #fff !important; text-decoration: none !important;
	font-family: var(--j-font-body); font-weight: 600; font-size: 13.5px; border-radius: 10px; padding: 12px 20px; line-height: 1;
}
.nav-cta-btn svg { width: 15px; height: 15px; }
.nav-cta-btn:hover { background: var(--j-primary-hover); }

.cta-group { display: flex; align-items: center; gap: 8px; margin-left: 10px; flex-shrink: 0; }
.btn-signup {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--swag-header-primary); color: #fff; text-decoration: none; white-space: nowrap;
	font-weight: 500; font-size: 14.5px;
	border-radius: 999px; padding: 9px 18px; line-height: 1;
}
.btn-signup:hover { background: var(--swag-header-primary-hover); }

.menu-toggle {
	display: none; background: none; border: 1.5px solid var(--swag-header-border);
	color: var(--swag-header-text); border-radius: 8px; padding: 8px 14px; font-size: 14px;
	font-weight: 600; cursor: pointer; flex-shrink: 0;
}

@media (max-width: 991px) {
	.header-search, .nav-cta-btn { display: none; }
	.nav-row { height: 64px; gap: 16px; }
	.site-logo .site-title { color: var(--swag-header-text); }
	.site-logo-desktop { display: none; }
	.site-logo-mobile { display: inline-flex; }
	.site-logo-mobile img { width: var(--swag-logo-width-mobile, 120px) !important; }
	.main-nav { display: none; }

	.menu-toggle {
		display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
		width: 36px; height: 36px; border: none; background: none; padding: 0;
		margin-left: auto;
	}
	.menu-toggle .bar {
		display: block; width: 22px; height: 2px; background: var(--swag-header-text);
		transition: transform 0.2s ease, opacity 0.2s ease;
	}
	.menu-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.menu-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
	.menu-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.nav-overlay {
		display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 190;
	}
	.nav-overlay.is-open { display: block; }

	.primary-nav {
		display: flex; flex-direction: column; align-items: stretch;
		margin: 0; padding: 0; list-style: none; width: 100%; gap: 0;
	}
	.nav-drawer {
		display: flex; flex-direction: column; align-items: stretch; gap: 0;
		position: fixed; top: 0; right: 0; height: 100vh; width: 85%; max-width: 380px;
		background: #fff; z-index: 200; padding: 70px 0 20px;
		overflow-y: auto; transform: translateX(100%); transition: transform 0.25s ease;
		box-shadow: -10px 0 30px rgba(0,0,0,0.15);
	}
	.nav-drawer.is-open { transform: translateX(0); }
	.drawer-close {
		display: block; position: absolute; top: 16px; right: 16px; width: 36px; height: 36px;
		border: none; background: #f5f5f5; border-radius: 999px; color: var(--swag-dark);
		font-size: 24px; line-height: 1; cursor: pointer; z-index: 1;
	}

	.primary-nav > li { border-bottom: 1px solid #eee; }
	.primary-nav > li > a {
		border-radius: 0; padding: 16px 24px; color: var(--swag-header-primary); font-weight: 600;
		justify-content: space-between; width: 100%;
	}

	.cta-group {
		flex-direction: column; margin: 20px 16px 0; gap: 10px;
	}
	.btn-signup { width: 100%; padding: 13px 20px; }
}
strong {
	font-weight:600;
}

/* =========================================================
   Footer — matches the real swagify.com footer (colors,
   columns and copy pulled directly from the live site).
   ========================================================= */
.site-footer {
	background: #010b0e;
	padding: 48px 20px;
}
.footer-grid {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr 1fr 1.2fr;
	gap: 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 1100px) {
	.footer-grid { grid-template-columns: 1fr 1fr 1fr; }
	.footer-col-about { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
	.footer-col-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
	.footer-grid { grid-template-columns: 1fr; }
}
.footer-logo img { height: 34px; width: auto; margin-bottom: 16px; }
.footer-address { font-family: var(--j-font-body); color: #e8e9f0; font-size: 14px; line-height: 1.5; margin: 0 0 10px; }
.footer-contact-link { display: inline-block; font-family: var(--j-font-body); color: #e8e9f0; font-size: 14px; text-decoration: none; margin: 0 0 18px; }
.footer-contact-link:hover { color: #fff; text-decoration: underline; }
.footer-desc { font-family: var(--j-font-body); color: #e8e9f0; font-size: 14px; line-height: 1.4; max-width: 340px; margin: 0; }
.footer-social { display: flex; gap: 16px; margin: 0 0 18px; }
.footer-social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px;
	color: #d9dbe9; text-decoration: none; font-size: 11px; font-weight: 700;
}
.footer-social a:hover { color: #fff; }
.footer-heading { color: #fcfcfc; font-family: var(--j-font-body); font-size: 14px; font-weight: 600; margin: 0 0 14px; }
.footer-col-about .footer-heading { margin-top: 2px; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin: 0 0 11px; }
.footer-links a { font-family: var(--j-font-body); color: #e8e9f0; font-size: 14px; text-decoration: none; transition: color .15s ease; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-copyright { font-family: var(--j-font-body); color: #e8e9f0; font-size: 14px; margin: 14px 0 0; }

.footer-popular { max-width: 1280px; margin: 0 auto; padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-popular-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.footer-popular-links a { font-family: var(--j-font-body); color: #e8e9f0; font-size: 14px; text-decoration: none; }
.footer-popular-links a:hover { color: #fff; text-decoration: underline; }

.footer-pills { max-width: 1280px; margin: 0 auto; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.footer-pill {
	font-family: var(--j-font-body); color: #fcfcfc; font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em;
	background: #2a2b3e; border-radius: 4px; padding: 8px 12px; text-decoration: none;
}
.footer-pill:hover { background: #38394f; }

/* =========================================================
   Blog homepage
   ========================================================= */
.blog-home { max-width: 1200px; margin: 0 auto; padding: 40px 20px 80px; }
.blog-hero-header { margin-bottom: 40px; max-width: 48rem; }
.blog-eyebrow-badge {
	display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px;
	padding: 6px 14px; border-radius: 999px; background: rgba(75, 65, 225, 0.1);
	color: var(--j-secondary); font-family: var(--j-font-body); font-size: 11px; font-weight: 700;
	letter-spacing: 0.08em; text-transform: uppercase;
}
.blog-eyebrow-badge svg { width: 14px; height: 14px; flex-shrink: 0; }
.blog-title {
	font-family: var(--j-font-display); font-size: clamp(32px, 4.5vw, 56px); font-weight: 800; line-height: 1.15;
	letter-spacing: -0.02em; max-width: 780px; margin: 0 auto; color: var(--j-deep-slate);
}
.blog-subtitle {
	font-family: var(--j-font-body); font-size: 18px; line-height: 1.7; color: var(--j-on-surface-variant);
	max-width: 620px;
}

/* Category filter bar */
.filter-bar {
	position: sticky; top: 76px; z-index: 40; background: rgba(253, 248, 245, 0.92); backdrop-filter: blur(8px);
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 16px 0; margin: 0 0 48px; border-top: 1px solid var(--j-border); border-bottom: 1px solid var(--j-border);
}
.filter-bar-pills { display: flex; align-items: center; gap: 8px; overflow-x: auto; flex: 1 1 auto; min-width: 0; }
.filter-bar-pills::-webkit-scrollbar { height: 4px; }
.filter-bar-pills::-webkit-scrollbar-thumb { background: var(--j-outline-variant); border-radius: 4px; }
@media (max-width: 700px) {
	.filter-bar { flex-wrap: wrap; }
	.filter-bar-pills { flex-basis: 100%; }
}
.filter-pill {
	flex: 0 0 auto; white-space: nowrap; padding: 8px 16px; border-radius: 999px;
	font-family: var(--j-font-body); font-size: 13.5px; font-weight: 600; text-decoration: none;
	background: var(--j-card); color: var(--j-on-surface-variant); border: 1px solid var(--j-border);
}
.filter-pill:hover { background: var(--j-surface-low); }
.filter-pill.is-active { background: var(--j-deep-slate); border-color: var(--j-deep-slate); color: #fdf8f5; }
.filter-bar-sort { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.filter-bar-sort label { font-family: var(--j-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--j-outline); }
.filter-bar-sort select {
	font-family: var(--j-font-body); font-size: 13.5px; color: var(--j-deep-slate);
	background: var(--j-card); border: 1px solid var(--j-border); border-radius: 8px; padding: 6px 12px;
}
@media (max-width: 700px) { .filter-bar { top: 64px; } }

.hero-eyebrow { text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--swag-accent); text-decoration: underline; margin-bottom: 12px; display: inline-block; }

/* Featured guide card */
.featured-card {
	display: grid; grid-template-columns: 1.2fr 1fr; align-items: stretch;
	border: 1px solid var(--j-border); border-radius: 12px; overflow: hidden;
	margin-bottom: 64px; background: var(--j-card);
	box-shadow: 0 1px 3px rgba(0,48,45,0.04), 0 4px 12px rgba(0,48,45,0.02);
}
.featured-card-body { padding: 48px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.featured-card-tags { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.tag-pill {
	background: rgba(75, 65, 225, 0.1); color: var(--j-secondary); font-family: var(--j-font-body); font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px;
}
.tag-dot { color: var(--j-outline-variant); font-size: 10px; }
.tag-readtime { display: inline-flex; align-items: center; gap: 6px; color: var(--j-on-surface-variant); font-family: var(--j-font-body); font-size: 13px; }
.tag-readtime svg, .icon-clock { width: 14px; height: 14px; color: var(--j-tertiary); }
.featured-card-title { font-family: var(--j-font-display); font-size: clamp(24px, 2.6vw, 28px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 16px; }
.featured-card-title a { color: var(--j-deep-slate); text-decoration: none; }
.featured-card-title a:hover { color: var(--j-primary); }
.featured-card-excerpt { font-family: var(--j-font-body); font-size: 16px; line-height: 1.7; color: var(--j-on-surface-variant); margin: 0 0 32px; }
.featured-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid var(--j-border); flex-wrap: wrap; }
.featured-card-author { display: flex; align-items: center; gap: 12px; min-width: 0; }
.featured-card-author img, .featured-card-author .author-box-photo { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; }
.featured-card-author-name { display: block; font-family: var(--j-font-body); font-size: 13.5px; font-weight: 700; color: var(--j-deep-slate); }
.featured-card-author-meta { display: block; font-family: var(--j-font-body); font-size: 12.5px; color: var(--j-outline); }
.featured-card-btn {
	flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
	background: var(--j-primary) !important; color: #fff !important; border-radius: 10px !important;
	font-family: var(--j-font-body); font-weight: 600 !important;
}
.featured-card-btn:hover { background: var(--j-primary-hover) !important; }
.featured-card-btn svg { width: 15px; height: 15px; }
.featured-card-image { position: relative; min-height: 320px; background: var(--j-surface-low); }
.featured-card-image img { width: 100%; height: 100%; object-fit: cover; }
.featured-card-badge {
	position: absolute; top: 16px; right: 16px; z-index: 1;
	background: rgba(0,48,45,0.8); backdrop-filter: blur(6px); color: #fdf8f5; font-family: var(--j-font-body); font-size: 12px; font-weight: 600;
	padding: 5px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2);
}
.featured-card-reverse { grid-template-columns: 1fr 1.2fr; margin-top: 56px; }
@media (max-width: 860px) {
	.featured-card { grid-template-columns: 1fr; }
	.featured-card-body { padding: 32px 24px 28px; order: 2; }
	.featured-card-image { order: 1; min-height: 220px; }
	.featured-card-footer { flex-direction: column; align-items: flex-start; }
	.featured-card-btn { width: 100%; justify-content: center; }
}

/* Buttons */
.btn { display: inline-block; align-self: flex-start; background: var(--swag-accent); color: var(--swag-light) !important; padding: 12px 26px; border-radius: 999px; font-weight: 500; font-size: 14px; text-decoration: none !important; }
.btn:hover { background: #0c4639 !important; }

/* Section headings */
.section-heading { font-family: var(--j-font-display); font-size: 26px; font-weight: 700; margin: 0 0 6px; color: var(--j-deep-slate); }
.curated-head { margin-bottom: 32px; }
.curated-subhead { font-family: var(--j-font-body); font-size: 14px; color: var(--j-on-surface-variant); margin: 0; }

/* Card grid */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 24px; }
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; } }
.card {
	background: var(--j-card); border-radius: 12px; overflow: hidden; border: 1px solid var(--j-border);
	display: flex; flex-direction: column; justify-content: space-between;
	box-shadow: 0 1px 3px rgba(0,48,45,0.04); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px -4px rgba(0,104,95,0.12); }
.card-thumb-wrap { position: relative; }
.card-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--j-surface-low); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover .card-thumb img { transform: scale(1.04); }
.card-cat-badge {
	position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,0.95); backdrop-filter: blur(4px);
	color: var(--j-primary); font-family: var(--j-font-body); font-size: 11px; font-weight: 700;
	padding: 4px 11px; border-radius: 999px; border: 1px solid var(--j-border);
}
.card-body { padding: 22px 22px 8px; }
.card-meta-row { display: flex; align-items: center; gap: 6px; font-family: var(--j-font-body); font-size: 12px; color: var(--j-outline); margin: 0 0 10px; }
.card-meta-row .icon-clock { width: 13px; height: 13px; color: var(--j-tertiary); }
.card-title { font-family: var(--j-font-display); font-size: 17px; font-weight: 700; line-height: 1.4; margin: 0 0 10px; }
.card-title a { color: var(--j-deep-slate); text-decoration: none; }
.card-title a:hover { color: var(--j-primary); }
.card-excerpt { font-family: var(--j-font-body); font-size: 13.5px; line-height: 1.6; color: var(--j-on-surface-variant); margin: 0 0 14px; }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 22px 22px; border-top: 1px solid var(--j-border); margin-top: 8px; }
.card-author { font-family: var(--j-font-body); font-size: 12.5px; font-weight: 600; color: var(--j-deep-slate); }
.card-read-link { display: inline-flex; align-items: center; gap: 5px; font-family: var(--j-font-body); font-size: 12.5px; font-weight: 700; color: var(--j-primary); text-decoration: none; }
.card-read-link svg { width: 13px; height: 13px; }
.card-read-link:hover { text-decoration: underline; }

/* Homepage newsletter */
.home-newsletter { background: var(--j-deep-slate); border-radius: 18px; margin: 0 0 40px; padding: 56px 32px; position: relative; overflow: hidden; }
.home-newsletter-inner { max-width: 640px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.home-newsletter-badge {
	display: inline-flex; align-items: center; gap: 8px; background: rgba(137, 245, 231, 0.12); color: #89f5e7;
	font-family: var(--j-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.home-newsletter-badge svg { width: 14px; height: 14px; }
.home-newsletter-title { font-family: var(--j-font-display); color: #fdf8f5; font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin: 0 0 14px; }
.home-newsletter-text { font-family: var(--j-font-body); color: var(--j-outline-variant); font-size: 15px; line-height: 1.6; margin: 0 0 28px; }
.home-newsletter .newsletter-form { gap: 10px; }
.newsletter-input-wrap {
	position: relative; flex: 1 1 220px; display: flex; align-items: center;
}
.newsletter-input-wrap svg { position: absolute; left: 14px; width: 17px; height: 17px; color: var(--j-outline); pointer-events: none; }
.home-newsletter .newsletter-form input {
	width: 100%; color: var(--j-deep-slate); padding-left: 40px;
}
.home-newsletter .btn { background: var(--j-primary); }
.home-newsletter .btn:hover { background: var(--j-primary-hover) !important; }
.home-newsletter-fine-print { font-family: var(--j-font-body); color: var(--j-outline-variant); font-size: 12.5px; margin: 16px 0 0; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.pagination a, .pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; height: 36px; padding: 0 10px; border-radius: 999px;
	background: #f2f2f2; color: var(--swag-dark); text-decoration: none; font-weight: 500;
}
.pagination .current { background: var(--swag-dark); color: #fff; }

/* =========================================================
   Single post
   ========================================================= */
.post-article { max-width: 1180px; margin: 0 auto; padding: 10px 20px 10px; }
.breadcrumb { font-size: 13px; color: var(--swag-muted); margin-bottom: 0; }
.breadcrumb a { color: var(--swag-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--swag-accent); }
.breadcrumb span[aria-hidden] { margin: 0 6px; }
.breadcrumb-current { color: var(--swag-dark); }

.hero-promo { background: #f4f4f4; padding: 40px 20px; margin-bottom: 30px; background-size: cover; background-position: center; }
.hero-promo.has-bg .hero-promo-tile { display: none; }
.hero-promo.has-bg .hero-promo-text { padding: 28px 36px; border-radius: 16px; }
.hero-promo-inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex; align-items: center; justify-content: center; gap: 40px;
}
.hero-promo-tiles { display: flex; gap: 16px; flex-shrink: 0; }
.hero-promo-tile {
	display: block; width: 90px; height: 110px; background: #e3e3e3; border-radius: 10px;
}
.hero-promo-tiles-left .hero-promo-tile:nth-child(2) { margin-top: 50px; }
.hero-promo-tiles-right .hero-promo-tile:nth-child(1) { margin-top: 50px; }
.hero-promo-text { text-align: center; max-width: 480px; }
.hero-promo-text h2 { font-size: 30px; font-weight: 600; margin: 0 0 8px; color: var(--swag-dark); line-height: 30px;}
.hero-promo-text p { font-size: 15px; color: #555; margin: 0 0 10px; }
@media (max-width: 860px) {
	.hero-promo-inner { flex-wrap: wrap; }
	.hero-promo-tiles { display: none; }
}
.post-article .post-cat { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--swag-accent); text-decoration: underline; }
.post-article .post-title { font-size: clamp(26px, 4vw, 38px); font-weight: 700; line-height: 1.2; margin: 12px 0 16px; color: var(--swag-dark); }
.post-article .post-meta { color: var(--swag-muted); font-size: 14px; margin: 0 0 28px; }
.post-article .post-thumb { border-radius: var(--swag-radius); overflow: hidden; margin-bottom: 40px; box-shadow: 0px 0px 18px 0px #eeeeee;     -webkit-box-shadow: 0px 0px 18px 0px #eeeeee;}
.post-article .post-thumb img{ width: 100%; max-height: 500px; object-fit: cover; object-position: top; }
.post-article .post-heading {text-align: center;}

/* Two-column layout: sticky sidebar + main content */
.post-layout { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: start; }
.post-sidebar { position: sticky; top: 96px; }
.admin-bar .post-sidebar { top: 80px; }
.post-main { min-width: 0; }

/* Table of contents -- Printful / Printify style: bold title, thin rail, active item marked */
.toc-box { margin: 0 0 28px; padding: 0; background: none; border: 0; }
.toc-title { font-weight: 700; font-size: 17px; line-height: 1.3; margin: 0 0 18px; color: var(--swag-dark); }
.toc-list {
	position: relative;
	list-style: none; margin: 0; padding: 0;
	border-left: 1px solid #dcdcdc;
	max-height: calc(100vh - 180px); overflow-y: auto; scrollbar-width: thin;
}
.admin-bar .toc-list { max-height: calc(100vh - 212px); }
.toc-list li { margin: 0; }
.toc-list a {
	display: block; margin-left: -1px; padding: 6px 0 6px 14px;
	border-left: 2px solid transparent;
	font-size: 14px; line-height: 1.5; color: #555; text-decoration: none;
	transition: color .15s ease, border-color .15s ease;
}
.toc-list a:hover { color: var(--swag-dark); }
.toc-list a.is-active { color: var(--swag-dark); font-weight: 600; border-left-color: var(--swag-accent); }

/* Sidebar TOC replaces the in-content Rank Math TOC block */
.post-layout.has-toc .post-content .wp-block-rank-math-toc-block { display: none; }
.toc-toggle { display: none; }

/* Post Sidebar widget area */
.post-layout.no-sidebar { grid-template-columns: minmax(0, 1fr); }
.post-sidebar .sidebar-widget { margin: 0 0 28px; }
.post-sidebar .sidebar-widget:last-child { margin-bottom: 0; }
.post-sidebar .sidebar-widget-title { font-weight: 700; font-size: 17px; line-height: 1.3; margin: 0 0 14px; color: var(--swag-dark); }
.post-sidebar .widget-swag-toc .toc-box { margin: 0; }

.sidebar-promo {
	background: var(--swag-dark); border-radius: 12px; padding: 24px 22px; text-align: center;
}
.sidebar-promo-title { color: #fff; font-weight: 700; font-size: 15px; margin: 0 0 16px; line-height: 1.4; }
.sidebar-promo .btn { width: 100%; }

@media (max-width: 860px) {
	.post-layout { grid-template-columns: 1fr; gap: 24px; }
	.post-sidebar { position: static; order: -1; }
	.toc-box { border: 1px solid var(--swag-border); border-radius: 12px; padding: 0; }
	.toc-box .toc-title { display: none; }
	.toc-toggle {
		display: flex; align-items: center; justify-content: space-between; width: 100%;
		background: none; border: 0; padding: 16px 20px; cursor: pointer;
		font: inherit; font-weight: 700; font-size: 16px; color: var(--swag-dark); text-align: left;
	}
	.toc-toggle-icon {
		width: 8px; height: 8px; flex-shrink: 0; margin-left: 12px;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: rotate(45deg); transition: transform .2s ease;
	}
	.toc-box.is-open .toc-toggle-icon { transform: rotate(-135deg); }
	.toc-list, .admin-bar .toc-list { max-height: none; overflow: visible; display: none; margin: 0 20px 18px; }
	.toc-box.is-open .toc-list { display: block; }
}

.post-article .post-content { font-size: 15px; line-height: 1.65; }
.post-article .post-content h2 { font-size: 24px; font-weight: 700; margin: 0 0 16px; scroll-margin-top: 100px; }
.post-article .post-content h3 { font-size: 20px; font-weight: 600; margin: 32px 0 14px; scroll-margin-top: 100px; }
.admin-bar .post-article .post-content h2, .admin-bar .post-article .post-content h3 { scroll-margin-top: 132px; }
.post-article .post-content p { margin: 0 0 20px; }
.post-article .post-content a { color: var(--swag-dark); text-decoration: none;}
.post-article .post-content a:hover{text-decoration: underline;}
.post-article .post-content img { border-radius: 10px; margin: 24px 0; }
.post-article .post-content blockquote {
	border-left: 4px solid var(--swag-accent); background: var(--swag-bg-pink);
	padding: 16px 20px; margin: 24px 0; border-radius: 0 10px 10px 0;
}
.post-article .post-content ul, .post-article .post-content ol { padding-left: 24px; }
.post-article .post-content table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.post-article .post-content th, .post-article .post-content td { border: 1px solid var(--swag-border); padding: 10px 14px; text-align: left; }
.post-article .post-content th { background: #fafafa; font-weight: 700; }

/* Gutenberg Code block: some imported posts drop long unwrapped text (e.g.
   citations) into a Code block. Wrap it instead of letting it scroll or
   stretch the page. */
.post-article .post-content pre,
.post-article .post-content .wp-block-code {
	max-width: 100%;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-word;
	-webkit-overflow-scrolling: touch;
}

/* Gutenberg Button block used inside post content (e.g. "Buy Now" CTAs) */
.post-article .post-content .wp-block-button__link {
	background: var(--swag-accent);
	color: #fff !important;
	border-radius: 999px;
	padding: 12px 26px;
	font-weight: 500;
	text-decoration: none !important;
	display: inline-block;
}
.post-article .post-content .wp-block-button__link:hover {
	background: #0c4639;
}
.post-article .post-content .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--swag-accent) !important;
	border: 2px solid var(--swag-accent);
}

/* Mobile: wide tables scroll sideways instead of squashing columns */
@media (max-width: 760px) {
	.post-article .post-content .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; }
	.post-article .post-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
	.post-article .post-content .wp-block-table table { display: table; overflow: visible; width: max-content; min-width: 100%; margin: 0; }
	.post-article .post-content th, .post-article .post-content td { min-width: 140px; max-width: 260px; word-break: normal; overflow-wrap: normal; vertical-align: top; }
}

/* Sidebar promo card hidden on all screen sizes (TOC only in the sidebar) */
.post-sidebar .sidebar-promo { display: none; }

.cta-banner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
	background: var(--swag-bg-blue); border-radius: 14px; padding: 28px 32px; margin: 32px 0;
	box-shadow: 0 4px 18px rgba(23, 89, 74, 0.08);
	position: relative; background-size: cover; background-position: center;
}
.cta-banner-icon, .cta-banner-text, .cta-banner > .btn { position: relative; z-index: 1; }
.cta-banner-text { flex: 1 1 260px; }
.cta-banner h3 { margin: 0 0 6px; font-size: 20px; font-weight: 600; color: var(--swag-dark); }
.cta-banner p { margin: 0; color: #3a3a3a; }
.cta-banner .btn { flex-shrink: 0; align-self: auto;}
.cta-banner.has-bg::before {
	content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.42); border-radius: inherit; z-index: 0;
}
.cta-banner.has-bg h3, .cta-banner.has-bg p { color: #fff; }

/* Author box (end of post) */
.author-box {
	display: flex; gap: 20px; align-items: flex-start;
	margin-top: 48px; padding: 24px 28px;
	background: #f7f8f7; border: 1px solid var(--swag-border); border-radius: var(--swag-radius);
}
.author-box-compact { align-items: center; padding: 18px 24px; }
.author-box-avatar { flex-shrink: 0; display: block; line-height: 0; }
.author-box-avatar img, .author-box-photo {
	width: 72px; height: 72px; border-radius: 999px; object-fit: cover; margin: 0 !important;
	border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.author-box-compact .author-box-avatar img, .author-box-compact .author-box-photo { width: 56px; height: 56px; }
.author-box-body { min-width: 0; }
.author-box-label { margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--swag-muted); }
.author-box-name { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.post-article .post-content + .author-box .author-box-name a,
.author-box-name a { color: var(--swag-dark); text-decoration: none; }
.author-box-name a:hover { color: var(--swag-accent); }
.author-box-role { margin: 2px 0 0; font-size: 14px; color: var(--swag-muted); }
.author-box-bio { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--swag-text); }
.author-box-more { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--swag-accent); text-decoration: none; }
.author-box-more:hover { text-decoration: underline; }
.author-box-compact .author-box-more { margin-top: 4px; }
@media (max-width: 600px) {
	.author-box { padding: 20px; gap: 14px; }
	.author-box-avatar img, .author-box-photo { width: 56px; height: 56px; }
}

.newsletter-banner {
	max-width: var(--swag-max-width); margin: 20px auto 20px; background: var(--swag-footer-grad);
	border-radius: 16px; padding: 44px 32px; text-align: center; color: #fff;
}
.newsletter-banner h2 { margin: 0 0 8px; font-size: 24px; font-weight: 700; }
.newsletter-banner p { margin: 0 0 24px; color: #d7d7d7; }
.newsletter-form { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; max-width: 420px; margin: 0 auto; }
.newsletter-form input {
	flex: 1 1 220px; padding: 12px 16px; border-radius: 999px; border: none; font-size: 15px;
}
.newsletter-form .btn { flex-shrink: 0; }
.newsletter-message { margin: 14px 0 0; font-size: 14px; min-height: 1.4em; }
.newsletter-message.is-success { color: #a8e6b8; }
.newsletter-message.is-error { color: #ffb4b4; }

/* Related posts */
.related-posts { max-width: 1180px; margin: 0 auto; padding: 0 20px 80px; }

/* "Keep exploring" carousel */
.related-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 24px; }
.related-head .section-heading { margin: 0; }
.carousel-nav { display: flex; gap: 10px; flex-shrink: 0; }
.carousel-btn {
	position: relative; width: 44px; height: 44px; border-radius: 999px; padding: 0;
	border: 1.5px solid #d8d8d8; background: #fff; color: var(--swag-dark); cursor: pointer;
	transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.carousel-btn::before {
	content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.carousel-prev::before { transform: translate(-30%, -50%) rotate(135deg); }
.carousel-next::before { transform: translate(-70%, -50%) rotate(-45deg); }
.carousel-btn:hover:not(:disabled) { border-color: var(--swag-dark); background: var(--swag-dark); color: #fff; }
.carousel-btn:focus-visible { outline: 2px solid var(--swag-accent); outline-offset: 2px; }
.carousel-btn:disabled { opacity: .35; cursor: default; }
.carousel-nav.is-hidden { display: none; }
.carousel-track {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 56px) / 3); gap: 28px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
	scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 2px 6px; margin: -2px -2px 0;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 2px solid var(--swag-accent); outline-offset: 4px; border-radius: var(--swag-radius); }
.carousel-track > .card { scroll-snap-align: start; min-width: 0; }
@media (max-width: 900px) { .carousel-track { grid-auto-columns: calc((100% - 28px) / 2); } }
@media (max-width: 600px) {
	.carousel-track { grid-auto-columns: 84%; gap: 16px; }
	.carousel-btn { width: 38px; height: 38px; }
}

/* =========================================================
   Archive / category pages
   ========================================================= */
.archive-page { max-width: 1180px; margin: 0 auto; padding: 40px 20px 80px; }
.archive-header { margin-bottom: 32px; }
.archive-header h1 { font-size: 30px; font-weight: 700; color: var(--swag-dark); margin: 0 0 8px; }
.archive-header p { color: var(--swag-muted); margin: 0; }

/* =========================================================
   Simple pages / 404
   ========================================================= */
.page-content { max-width: 760px; margin: 0 auto; padding: 48px 20px 80px; font-size: 17px; line-height: 1.75; }
.not-found { text-align: center; padding: 80px 20px; }
.not-found h1 { font-size: 36px; font-weight: 700; }