/*
Theme Name: Japan Insider — component styles
Description: All component styles for the japaninsider theme. Loads AFTER
             assets/css/tokens.css (design tokens, --ji-* custom properties).
Notes:
 - Mobile-first. Breakpoints: 600px, 760px, 1000px.
 - Sticky header only >= 1000px.
 - All transitions are wrapped in a prefers-reduced-motion guard (end of file).
 - Class contract (templates must use these hooks):
     .ji-container       shared content column, max-width 1200px, 24px padding
     .ji-wrap            outer container, max-width 1200px (alias of .ji-container)
     .ji-main / .ji-home page content column (same box as .ji-container)
     .ji-header-inner    flex row inside .ji-header (sits in .ji-container)
     #ji-nav / .ji-nav   primary menu <nav>; JS toggles .is-open on #ji-nav
     .ji-nav-toggle      hamburger <button> (hidden >= 1000px)
     .ji-single-body     760px column used by single/page templates
     .ji-card-media / .ji-card-body   card image area / card text area
     .ji-heroband         homepage full-width hero (sticky post / latest fallback)
     .ji-cols / .ji-cols-main / .ji-rail   homepage two-column zone (modules + static rail)
     .ji-mod              homepage category module (lead card + row list)
     .ji-rail-box         one card inside .ji-rail (most popular / deals / newsletter / latest)
 - Legacy content: .ji-prose styles ELEMENTS only (p, h2, table, img, ...).
   Bare <div>s from WPBakery-era posts are intentionally left unstyled.
*/

/* ==========================================================================
   1. Base & reset
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--ji-paper);
	color: var(--ji-ink);
	font-family: var(--ji-font-sans);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--ji-red); }
a:hover { color: #a81c30; }

button {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

:focus-visible {
	outline: 2px solid var(--ji-red);
	outline-offset: 2px;
}

/* Comments are disabled site-wide; belt-and-braces if a plugin prints them. */
#comments,
.comments-area { display: none; }

/* ==========================================================================
   2. Layout containers
   ========================================================================== */

/*
 * Global content container. Full-bleed backgrounds (header red bar, deal
 * bar, footer dark bar) stay edge to edge; their INNER content wraps in
 * this class so everything lines up on one shared 1200px column.
 */
.ji-container {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 24px;
}

.ji-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* Narrow article column (single.php / page.php body) */
.ji-single-body,
.ji-narrow {
	max-width: 760px;
	margin: 0 auto;
	padding: 26px 16px 40px;
}

@media (min-width: 760px) {
	.ji-single-body,
	.ji-narrow { padding-left: 26px; padding-right: 26px; }
}

/* ==========================================================================
   3. Accessibility: screen-reader text & skip link
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip-path: none;
	display: block;
	height: auto;
	width: auto;
	left: 5px;
	top: 5px;
	z-index: 100000;
	background: var(--ji-paper);
	color: var(--ji-red);
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(43, 38, 32, .3);
	font-weight: 700;
	padding: 12px 18px;
	text-decoration: none;
}

.skip-link:focus {
	left: 8px;
	top: 8px;
}

/* ==========================================================================
   4. Buttons & forms (generic; header search overrides use higher specificity)
   ========================================================================== */

.ji-btn,
.ji-news-btn {
	display: inline-block;
	background: var(--ji-red);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.ji-btn:hover,
.ji-btn:focus-visible,
.ji-news-btn:hover,
.ji-news-btn:focus-visible { background: #b81f33; color: #fff; }

.search-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.search-form .search-field {
	flex: 1 1 auto;
	min-width: 180px;
	border: 1.5px solid var(--ji-line);
	background: #fff;
	border-radius: 8px;
	padding: 10px 14px;
	font: inherit;
	font-size: 16px;
	color: var(--ji-ink);
}

.search-form .search-field:focus {
	border-color: var(--ji-red);
	outline: none;
}

.search-form .search-submit {
	background: var(--ji-red);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 10px 18px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.search-form .search-submit:hover { background: #b81f33; }

/* ==========================================================================
   5. Header (red bar, stacked logo, nav, search)
   ========================================================================== */

.ji-header {
	background: var(--ji-red);
	color: #fff;
}

@media (min-width: 1000px) {
	.ji-header {
		position: sticky;
		top: 0;
		z-index: 100;
	}
	body.admin-bar .ji-header { top: 32px; }
}

.ji-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 22px;
	padding: 12px 24px;
}

/* Logo: inline SVG (stacked 02-A, white text + gold dot on red).
   40px is the brand minimum size. */
.ji-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: #fff;
	flex: none;
}

.ji-logo svg,
.ji-logo img {
	display: block;
	height: 42px;
	width: auto;
}

/* Nav toggle (mobile only) */
.ji-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, .45);
	border-radius: 8px;
	padding: 7px 12px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.ji-header :focus-visible { outline-color: var(--ji-gold); }

/* Primary nav. Collapsed below 1000px; JS toggles .is-open on #ji-nav. */
.ji-nav {
	display: none;
	width: 100%;
	order: 10; /* drops below logo/search row when open on mobile */
}

.ji-nav.is-open { display: block; }

.ji-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.ji-nav ul ul { display: contents; } /* flatten any nested items; nav is flat by design */

.ji-nav a {
	display: block;
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	padding: 11px 2px;
	border-top: 1px solid rgba(255, 255, 255, .18);
}

.ji-nav a:hover { color: var(--ji-gold-soft); }

.ji-nav .current-menu-item > a,
.ji-nav .current_page_item > a {
	text-decoration: underline;
	text-decoration-color: var(--ji-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

@media (min-width: 1000px) {
	.ji-nav-toggle { display: none; }

	.ji-nav {
		display: block;
		width: auto;
		order: 0;
	}

	.ji-nav ul {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 18px;
	}

	.ji-nav a {
		padding: 4px 0;
		border-top: 0;
		font-size: 15px;
	}
}

/* Header search: white translucent pill on red */
.ji-search { margin-left: auto; }

@media (max-width: 999.98px) {
	.ji-search { margin-left: 0; flex: 1 1 auto; }
	.ji-nav-toggle + .ji-search { flex: 1 1 100%; } /* if placed after toggle */
}

.ji-header .ji-search .search-form { flex-wrap: nowrap; gap: 0; }

.ji-header .ji-search .search-field {
	min-width: 0;
	width: 100%;
	max-width: 220px;
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	color: #fff;
	font-size: 14px;
	padding: 6px 16px;
}

.ji-header .ji-search .search-field::placeholder { color: rgba(255, 255, 255, .92); }

.ji-header .ji-search .search-field:focus {
	border-color: var(--ji-gold);
	background: rgba(255, 255, 255, .26);
}

.ji-header .ji-search .search-submit {
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 6px 10px;
	border-radius: 999px;
	cursor: pointer;
}

/* ==========================================================================
   6. Deal bar
   ========================================================================== */

.ji-dealbar {
	background: var(--ji-gold-soft);
	border-bottom: 1px solid #eedaa0;
	font-size: 13.5px;
	font-weight: 600;
	color: #6d5200;
	text-align: center;
}

.ji-dealbar-inner {
	padding: 8px 24px;
}

@media (min-width: 760px) {
	.ji-dealbar { text-align: left; }
}

.ji-dealbar b,
.ji-dealbar strong,
.ji-dealbar code {
	background: var(--ji-gold);
	color: #3d2e00;
	border-radius: 4px;
	padding: 1px 8px;
	font-family: var(--ji-font-mono);
	font-weight: 700;
	font-size: 12px;
}

.ji-dealbar a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ==========================================================================
   7. Homepage: heroband, category modules, rail
   ========================================================================== */

/* -- 7a. Heroband: full-width sticky/latest post -- */

.ji-heroband { margin: 22px 0 0; }

.ji-heroband-link {
	position: relative;
	display: block;
	width: 100%; /* definite width stops aspect-ratio transferring min-height into width */
	aspect-ratio: 21 / 9;
	min-height: 260px;
	border-radius: var(--ji-radius-lg);
	overflow: hidden;
	background: linear-gradient(25deg, #54222b 5%, #b03a4a 50%, #e88a5e 100%);
	color: #fff;
	text-decoration: none;
}

@media (min-width: 760px) {
	.ji-heroband-link { min-height: 340px; }
}

.ji-heroband-img,
.ji-heroband-ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ji-heroband-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 70px 26px 26px;
	background: linear-gradient(transparent, rgba(20, 8, 10, .88));
	color: #fff;
}

.ji-heroband-kicker {
	display: inline-block;
	font-family: var(--ji-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ji-gold);
	background: rgba(20, 8, 10, .65);
	padding: 3px 9px;
	border-radius: 4px;
}

.ji-heroband-title {
	margin: 8px 0 6px;
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.22;
	font-weight: 800;
	color: #fff;
}

.ji-heroband-dek {
	margin: 0 0 8px;
	max-width: 60ch;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .85);
}

.ji-heroband-meta {
	margin: 0;
	font-family: var(--ji-font-mono);
	font-size: 11.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .75);
}

/* -- 7b. Two-column zone: category modules + rail -- */

.ji-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin: 28px 0 40px;
}

@media (min-width: 1000px) {
	.ji-cols { grid-template-columns: 1fr 320px; }
}

.ji-cols-main { min-width: 0; }

@media (max-width: 999.98px) {
	/* Rail renders after the modules in source order on mobile — no reorder needed. */
	.ji-rail { margin-top: 8px; }
}

/* -- 7c. Category module -- */

.ji-mod { margin: 0 0 44px; }

.ji-mod:last-child { margin-bottom: 0; }

.ji-mod-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

@media (min-width: 760px) {
	.ji-mod-body { grid-template-columns: 1.15fr 1fr; gap: 22px; }
}

.ji-mod-lead-media { display: block; }

.ji-mod-lead-img,
.ji-mod-lead-ph {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: 10px;
	object-fit: cover;
	background: linear-gradient(135deg, #54222b, #e88a5e);
}

.ji-mod-lead-title {
	margin: 10px 0 5px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 800;
}

.ji-mod-lead-title a { color: inherit; text-decoration: none; }
.ji-mod-lead-title a:hover { color: var(--ji-red); }

.ji-mod-lead-dek {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 0 0 6px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ji-ink2);
}

.ji-mod-list {
	display: flex;
	flex-direction: column;
}

.ji-mod-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 0;
	border-bottom: 1px solid var(--ji-line);
}

.ji-mod-row:first-child { padding-top: 0; }
.ji-mod-row:last-child { border-bottom: 0; padding-bottom: 0; }

.ji-mod-row-media { flex: none; }

.ji-mod-row-img,
.ji-mod-row-ph {
	display: block;
	width: 104px;
	height: 74px;
	border-radius: 8px;
	object-fit: cover;
	background: linear-gradient(135deg, #b03a4a, #e88a5e);
}

.ji-mod-row-tx { min-width: 0; }

.ji-mod-row-title {
	margin: 0 0 4px;
	font-size: 15.5px;
	line-height: 1.4;
	font-weight: 700;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.ji-mod-row-title a { color: inherit; text-decoration: none; }
.ji-mod-row-title a:hover { color: var(--ji-red); }

/* -- 7d. Rail (static sidebar) -- */

.ji-rail {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ji-rail-box {
	background: #fff;
	border: 1.5px solid var(--ji-line);
	border-radius: 12px;
	padding: 16px 18px;
}

/* Rendered as <h2> for the document outline; reset heading UA styles so it
   stays visually identical to the old <span> eyebrow. */
.ji-rail-eyebrow {
	display: block;
	font-family: var(--ji-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ji-red);
	margin: 0 0 8px;
	line-height: 1.7;
}

/* Most Popular: ghost numeral + linked title + category label, hairline rows */
.ji-rail-popular-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ji-rail-popular-item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 10px 0;
	border-bottom: 1px solid var(--ji-line);
}

.ji-rail-popular-item:first-child { padding-top: 0; }
.ji-rail-popular-item:last-child { border-bottom: 0; padding-bottom: 0; }

.ji-rail-popular-num {
	flex: none;
	min-width: 22px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	color: #d9d2c3;
	font-variant-numeric: tabular-nums;
}

.ji-rail-popular-tx { min-width: 0; }

.ji-rail-popular-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 0 0 4px;
	font-size: 14.5px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--ji-ink);
	text-decoration: none;
}

.ji-rail-popular-title:hover { color: var(--ji-red); }

.ji-rail-popular-tx .ji-meta-mono { display: block; font-size: 10.5px; }

.ji-rail-deals {
	background: var(--ji-gold-soft);
	border: 1.5px dashed #d9b13c;
}

.ji-rail-deals-line {
	display: block;
	margin: 0 0 4px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ji-ink);
	text-decoration: none;
}

.ji-rail-deals-line:hover { color: var(--ji-red); }

.ji-rail-deals-note {
	margin: 0 0 8px;
	font-size: 11px;
	color: #6d5200;
}

.ji-rail-deals-cta {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: var(--ji-red);
	text-decoration: none;
}

.ji-rail-deals-cta:hover { color: #a81c30; }

.ji-rail-deals-visual{display:block;border-radius:8px;overflow:hidden;margin:2px 0 10px;}
.ji-rail-deals-visual img{display:block;width:100%;height:auto;}
.ji-rail-deals-sub{font-size:12px;color:var(--ji-ink2);margin:4px 0 6px;line-height:1.5;}

/* Rendered as <p> (demoted from h5 for a coherent outline); keep the old
   heading weight explicitly. */
.ji-rail-news-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.ji-rail-news-lede {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ji-ink2);
}

.ji-rail-news-btn { display: inline-block; }

.ji-rail-latest-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ji-rail-latest-item {
	padding: 10px 0;
	border-bottom: 1px solid var(--ji-line);
}

.ji-rail-latest-item:first-child { padding-top: 0; }
.ji-rail-latest-item:last-child { border-bottom: 0; padding-bottom: 0; }

.ji-rail-latest-item a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ji-rail-latest-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 0 0 4px;
	font-size: 13.5px;
	line-height: 1.4;
	font-weight: 700;
}

.ji-rail-latest-item a:hover .ji-rail-latest-title { color: var(--ji-red); }

.ji-rail-latest-date {
	display: block;
	font-family: var(--ji-font-mono);
	font-size: 10.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ji-ink2);
}

/* ==========================================================================
   8. Category chips
   ========================================================================== */

.ji-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 10px 0 4px;
}

.ji-chip {
	display: inline-block;
	border: 1.5px solid var(--ji-line);
	background: #fff;
	border-radius: 18px;
	padding: 5px 14px;
	font-size: 13px;
	font-weight: 700;
	color: #4d463e;
	text-decoration: none;
}

.ji-chip:hover {
	border-color: var(--ji-red);
	color: var(--ji-red);
}

.ji-chip.is-active,
.ji-chip.is-active:hover,
.ji-chip-active,
.ji-chip-active:hover,
.ji-chip[aria-current="page"] {
	background: var(--ji-red);
	border-color: var(--ji-red);
	color: #fff;
}

/* ==========================================================================
   9. Section row heads
   ========================================================================== */

.ji-rowhead {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 26px 0 4px;
}

.ji-rowhead h2,
.ji-rowhead h3 {
	font-size: 19px;
	line-height: 1.4;
	margin: 0;
}

.ji-more {
	margin-left: auto;
	font-size: 13px;
	color: var(--ji-red);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.ji-more:hover { text-decoration: underline; }

/* ==========================================================================
   10. Cards & badges
   ========================================================================== */

.ji-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 10px 0 6px;
}

@media (min-width: 600px) {
	.ji-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.ji-cards { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

.ji-card {
	border: 1px solid var(--ji-line);
	border-radius: var(--ji-radius);
	overflow: hidden;
	background: #fff;
}

.ji-card:hover { box-shadow: 0 6px 20px rgba(43, 38, 32, .10); }

.ji-card a {
	color: inherit;
	text-decoration: none;
}

a.ji-card-media { display: block; }

.ji-card .ji-card-title a:hover { color: var(--ji-red); }

.ji-card-media {
	position: relative;
	aspect-ratio: 3 / 2;
	background: linear-gradient(135deg, #54222b, #e88a5e);
	overflow: hidden;
}

.ji-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* "TESTED JUL 2026" badge from ji_last_tested meta */
.ji-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	font-family: var(--ji-font-mono);
	font-size: 10px;
	background: rgba(255, 255, 255, .94);
	color: var(--ji-red);
	border-radius: 3px;
	padding: 2px 7px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.ji-card-body,
.ji-card-tx { padding: 11px 13px; }

.ji-card-title {
	margin: 0 0 5px;
	font-size: 17px;
	line-height: 1.5;
	font-weight: 700;
}

.ji-card-body small,
.ji-card-tx small {
	font-size: 11px;
	color: var(--ji-ink2);
}

/*
 * Shared "CATEGORY · N MIN READ" mono meta line, echoed by ji_card_meta().
 * Used inside cards, homepage module leads/rows, and the old lead-secondary
 * style meta lines. Category name (if present) is bold red via inline <b>
 * in the future; today the whole string shares one color.
 */
.ji-meta-mono {
	display: inline-block;
	font-family: var(--ji-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ji-ink2);
}

.ji-meta-mono b,
.ji-meta-mono strong { color: var(--ji-red); }

/*
 * Line-clamp utility pattern used throughout the homepage modules/rail.
 * -webkit-line-clamp degrades gracefully: browsers without support simply
 * show the full text without truncation (acceptable fallback, no JS needed).
 */

/* ==========================================================================
   12. Newsletter band
   ========================================================================== */

.ji-news {
	margin: 20px 0 28px;
	background: #fff;
	border: 1.5px solid var(--ji-line);
	border-radius: var(--ji-radius-lg);
	padding: 22px 26px;
	display: flex;
	align-items: center;
	gap: 14px 18px;
	flex-wrap: wrap;
}

.ji-news-kicker {
	display: block;
	font-family: var(--ji-font-mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--ji-red);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ji-news h2,
.ji-news h3,
.ji-news h4 {
	margin: 4px 0 0;
	font-size: 16px;
}

.ji-news p {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--ji-ink2);
	max-width: 46ch;
}

.ji-news .ji-btn,
.ji-news .ji-news-btn { margin-left: auto; }

.ji-news input[type="email"] {
	border: 1.5px solid var(--ji-line);
	border-radius: 8px;
	padding: 9px 14px;
	font: inherit;
	font-size: 14px;
	background: #fff;
	color: var(--ji-ink);
}

.ji-news input[type="email"]:focus {
	border-color: var(--ji-red);
	outline: none;
}

/* ==========================================================================
   13. Footer (layered publisher plate: newsletter strip / sitemap / legal)
   ========================================================================== */

.ji-footer {
	background: var(--ji-data);
	color: #d9d2c7;
	font-size: 13px;
	margin-top: 48px;
	border-top: 4px solid var(--ji-red);
}

.ji-footer b,
.ji-footer strong { color: #fff; }

.ji-footer a {
	color: #d9d2c7;
	text-decoration: none;
}

.ji-footer a:hover { color: #fff; }

/* Band A: newsletter strip */
.ji-footer-news {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
	padding-block: 26px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.ji-footer-news-k { margin: 0 0 3px; }

.ji-footer-news-tx p {
	margin: 0;
	font-size: 15.5px;
	font-weight: 600;
	color: #f2ede4;
	letter-spacing: -.005em;
}

.ji-footer-news-btn {
	margin-left: auto;
	white-space: nowrap;
}

/* Band B: sitemap grid — Brand (wider) / Sections / Company / For Readers */
.ji-footer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px 24px;
	padding-block: 46px 44px;
}

@media (min-width: 1000px) {
	.ji-footer-grid {
		grid-template-columns: 1.7fr 1fr 1fr 1fr;
		gap: 40px;
	}
}

.ji-footer-brand { grid-column: 1 / -1; }

@media (min-width: 1000px) {
	.ji-footer-brand { grid-column: auto; }
}

.ji-footer-brand .ji-logo-svg {
	display: block;
	height: 34px;
	width: auto;
	margin-bottom: 18px;
}

/* Tagline as the brand statement, not a byline */
.ji-footer-tagline {
	margin: 0 0 12px;
	font-size: clamp(20px, 2.2vw, 23px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: #fff;
}

.ji-footer-desc {
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.65;
	color: #b5aa99;
	max-width: 34ch;
}

.ji-footer-pub {
	margin: 0;
	font-size: 12.5px;
	color: #9d9384;
}

.ji-footer-h {
	margin: 0 0 14px;
	font-family: var(--ji-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #c9b083;
}

.ji-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.ji-footer-list a {
	font-size: 14px;
	color: #d9d2c7;
}

.ji-footer-list a:hover { color: #fff; }

/* Band C: legal bottom bar with real breathing room */
.ji-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: 22px 0 38px;
	font-size: 12.5px;
}

.ji-footer-copy { margin: 0; color: #b5aa99; }

.ji-footer-bottom-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
}

.ji-footer-bottom-link { color: #d9d2c7; }
.ji-footer-bottom-link:hover { color: #fff; }

@media (max-width: 599px) {
	.ji-footer-news { padding-block: 22px; }
	.ji-footer-news-btn { margin-left: 0; }
	.ji-footer-grid { padding-block: 36px; }
	.ji-footer-bottom { padding: 20px 0 44px; }
}

/* ==========================================================================
   14. Single post: breadcrumb, title, byline, badges
   ========================================================================== */

.ji-crumb {
	font-family: var(--ji-font-mono);
	font-size: 11.5px;
	color: var(--ji-ink2);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ji-crumb a {
	color: inherit;
	text-decoration: none;
}

.ji-crumb a:hover { color: var(--ji-red); }

.ji-title,
.ji-article-title,
.ji-single-body h1 {
	font-size: clamp(28px, 4vw, 36px);
	line-height: 1.3;
	margin: 10px 0;
	text-wrap: balance;
}

.ji-byline {
	display: flex;
	gap: 10px 14px;
	align-items: center;
	font-size: 13px;
	color: var(--ji-ink2);
	flex-wrap: wrap;
	padding-bottom: 14px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--ji-line);
}

.ji-byline b,
.ji-byline strong { color: var(--ji-ink); }

.ji-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	flex: none;
	object-fit: cover;
	background: linear-gradient(135deg, #b03a4a, #e88a5e);
}

/* "LAST TESTED: JUL 2026" badge */
.ji-tested {
	font-family: var(--ji-font-mono);
	font-size: 10.5px;
	border: 1.5px solid var(--ji-red);
	color: var(--ji-red);
	background: var(--ji-red-soft);
	border-radius: 4px;
	padding: 2px 8px;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ji-updated {
	font-family: var(--ji-font-mono);
	font-size: 11.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ji-ink2);
}

/* ==========================================================================
   15. Transparency note (block pattern .ji-trans)
   ========================================================================== */

.ji-trans {
	border: 1.5px solid #e8b7be;
	background: var(--ji-red-soft);
	border-radius: var(--ji-radius);
	padding: 14px 18px;
	margin: 18px 0;
	font-size: 14px;
	line-height: 1.7;
	color: #5c3238;
}

.ji-trans b,
.ji-trans strong,
.ji-trans h2,
.ji-trans h3,
.ji-trans h4 {
	display: block;
	color: var(--ji-red);
	margin: 0 0 3px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.5;
}

.ji-trans p { margin: 0; font-size: 14px; }
.ji-trans p + p { margin-top: .6em; }

.ji-trans a {
	color: var(--ji-red);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ==========================================================================
   16. Verdict box (block pattern .ji-verdict)
   ========================================================================== */

.ji-verdict {
	background: #fff;
	border: 1.5px solid var(--ji-line);
	border-radius: var(--ji-radius-lg);
	overflow: hidden;
	margin: 20px 0;
}

.ji-verdict-head {
	display: flex;
	gap: 10px;
	align-items: center;
	background: var(--ji-red);
	color: #fff;
	padding: 10px 16px;
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.5;
}

.ji-verdict-date {
	font-family: var(--ji-font-mono);
	font-size: 11px;
	color: var(--ji-gold-soft);
	margin-left: auto;
	letter-spacing: .05em;
}

.ji-vrow {
	display: flex;
	gap: 8px 12px;
	padding: 12px 16px;
	margin: 0;
	border-bottom: 1px solid var(--ji-line);
	align-items: baseline;
	font-size: 14px;
	line-height: 1.6;
	flex-wrap: wrap;
}

.ji-vrow:last-child { border-bottom: 0; }

.ji-vk {
	font-family: var(--ji-font-mono);
	font-size: 11px;
	color: var(--ji-red);
	flex: 0 0 110px;
	letter-spacing: .05em;
	text-transform: uppercase;
}

@media (min-width: 760px) {
	.ji-vk { flex-basis: 150px; }
}

.ji-vrow b,
.ji-vrow strong { font-size: 15px; }

.ji-vrow small { color: var(--ji-ink2); font-size: 13px; }

/* ==========================================================================
   17. Tables (comparison table pattern + core table block)
   ========================================================================== */

.ji-tblwrap {
	border: 1.5px solid var(--ji-line);
	border-radius: var(--ji-radius);
	margin: 20px 0;
	overflow-x: auto;
	background: #fff;
	-webkit-overflow-scrolling: touch;
}

.ji-tblwrap .wp-block-table,
.ji-tblwrap figure {
	margin: 0;
	border: 0;
	overflow: visible;
}

.ji-tblwrap table,
.ji-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	background: #fff;
	margin: 0;
	line-height: 1.55;
}

.ji-tblwrap th,
.ji-prose th {
	text-align: left;
	font-family: var(--ji-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	background: var(--ji-red);
	padding: 10px 13px;
	border: 0;
	white-space: nowrap;
}

.ji-tblwrap td,
.ji-prose td {
	padding: 10px 13px;
	border: 0;
	border-bottom: 1px solid var(--ji-line);
	font-variant-numeric: tabular-nums;
	vertical-align: top;
}

.ji-tblwrap tr:last-child td,
.ji-prose tr:last-child td { border-bottom: 0; }

/* Highlighted pick row */
.ji-pick td,
tr.ji-pick > td { background: var(--ji-red-soft); }

/* Inline tag ("SISTER BRAND") */
.ji-tag {
	font-size: 10px;
	font-family: var(--ji-font-mono);
	color: var(--ji-red);
	border: 1px solid #e8b7be;
	border-radius: 3px;
	padding: 1px 5px;
	margin-left: 6px;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Note under a table */
.ji-tnote {
	font-size: 12.5px;
	color: var(--ji-ink2);
	margin: -10px 0 18px;
}

.ji-tnote a { color: inherit; text-decoration: underline; }
.ji-tnote a:hover { color: var(--ji-red); }

/* ==========================================================================
   18. Discount code box (block pattern .ji-code + copy button)
   ========================================================================== */

.ji-code {
	display: flex;
	align-items: center;
	gap: 12px 16px;
	background: var(--ji-gold-soft);
	border: 1.5px dashed #d9b13c;
	border-radius: var(--ji-radius);
	padding: 15px 18px;
	margin: 18px 0;
	flex-wrap: wrap;
}

.ji-code p { margin: 0; }

.ji-code small {
	color: #6d5200;
	font-size: 12.5px;
	line-height: 1.55;
}

.ji-code-value {
	display: inline-block;
	font-family: var(--ji-font-mono);
	font-weight: 700;
	font-size: 17px;
	background: #fff;
	border: 1px solid #d9b13c;
	border-radius: 6px;
	padding: 6px 14px;
	letter-spacing: .06em;
	color: var(--ji-ink);
}

.ji-code-copy {
	margin-left: auto;
	background: var(--ji-red);
	color: #fff;
	border: 0;
	border-radius: 7px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

.ji-code-copy:hover,
.ji-code-copy:focus-visible { background: #b81f33; }

/* ==========================================================================
   19. Methodology box (block pattern .ji-method)
   ========================================================================== */

.ji-method {
	background: #fff;
	border: 1.5px solid var(--ji-line);
	border-left: 4px solid var(--ji-red);
	border-radius: 10px;
	padding: 15px 18px;
	margin: 20px 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ji-ink2);
}

.ji-method b,
.ji-method strong,
.ji-method h2,
.ji-method h3,
.ji-method h4 {
	display: block;
	color: var(--ji-ink);
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

.ji-method p { margin: 0; }
.ji-method p + p { margin-top: .6em; }

.ji-method .ji-mono,
.ji-method-next {
	font-family: var(--ji-font-mono);
	font-size: 12px;
	color: var(--ji-red);
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ==========================================================================
   20. FAQ (details/summary, block pattern .ji-faq)
   ========================================================================== */

details.ji-faq,
.ji-faq details {
	background: #fff;
	border: 1.5px solid var(--ji-line);
	border-radius: 10px;
	margin: 0 0 10px;
	padding: 0 16px;
}

details.ji-faq[open],
.ji-faq details[open] { border-color: #e8b7be; }

details.ji-faq summary,
.ji-faq summary {
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	padding: 12px 0;
	line-height: 1.55;
}

details.ji-faq summary:hover,
.ji-faq summary:hover { color: var(--ji-red); }

details.ji-faq[open] summary,
.ji-faq details[open] summary { border-bottom: 1px solid var(--ji-line); }

details.ji-faq p,
.ji-faq details p { margin: 12px 0; }

/* ==========================================================================
   21. Author box
   ========================================================================== */

.ji-authorbox {
	display: flex;
	gap: 16px;
	background: #fff;
	border: 1.5px solid var(--ji-line);
	border-radius: var(--ji-radius-lg);
	padding: 16px 18px;
	margin: 28px 0 0;
}

.ji-authorbox .ji-avatar,
.ji-authorbox .ji-authorbox-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	flex: none;
	object-fit: cover;
}

.ji-authorbox h2,
.ji-authorbox h3,
.ji-authorbox h4 {
	margin: 0 0 4px;
	font-size: 16px;
	line-height: 1.5;
}

.ji-authorbox p {
	margin: 0;
	font-size: 13.5px;
	color: var(--ji-ink2);
	line-height: 1.65;
}

/* ==========================================================================
   22. Prose (post content) — element selectors ONLY, so legacy WPBakery
       divs pass through unstyled.
   ========================================================================== */

.ji-prose {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	font-size: 17.5px;
	line-height: 1.8;
	color: var(--ji-ink);
}

.ji-prose p { margin: 0 0 1.25em; }

.ji-prose h2 {
	font-size: 26px;
	line-height: 1.3;
	margin: 1.8em 0 .6em;
}

.ji-prose h3 {
	font-size: 21px;
	line-height: 1.3;
	margin: 1.6em 0 .5em;
}

.ji-prose h4 {
	font-size: 17px;
	margin: 1.4em 0 .4em;
}

.ji-prose h2:first-child,
.ji-prose h3:first-child,
.ji-prose p:first-child { margin-top: 0; }

.ji-prose a {
	color: var(--ji-red);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.ji-prose a:hover { color: #a81c30; }

.ji-prose ul,
.ji-prose ol {
	margin: 0 0 1.25em;
	padding-left: 1.4em;
}

.ji-prose li { margin-bottom: .4em; }

.ji-prose blockquote {
	margin: 1.4em 0;
	padding: .2em 0 .2em 20px;
	border-left: 4px solid var(--ji-gold);
	color: var(--ji-ink2);
	font-style: italic;
	font-size: 18px;
	line-height: 1.6;
}

.ji-prose blockquote p:last-child { margin-bottom: 0; }

.ji-prose blockquote cite {
	display: block;
	margin-top: .4em;
	font-size: 13px;
	font-style: normal;
	color: var(--ji-ink2);
}

.ji-prose img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.ji-prose figure { margin: 1.4em 0; }

.ji-prose figcaption {
	font-size: 13px;
	color: var(--ji-ink2);
	margin-top: 8px;
	line-height: 1.5;
}

.ji-prose hr {
	border: 0;
	border-top: 1.5px solid var(--ji-line);
	margin: 2em 0;
}

.ji-prose code {
	font-family: var(--ji-font-mono);
	font-size: .85em;
	background: #f6f1e7;
	border-radius: 4px;
	padding: 1px 6px;
}

.ji-prose pre {
	background: var(--ji-data);
	color: #f4efe7;
	border-radius: 10px;
	padding: 16px 18px;
	overflow-x: auto;
	font-family: var(--ji-font-mono);
	font-size: 13.5px;
	line-height: 1.6;
	margin: 1.4em 0;
}

.ji-prose pre code {
	background: transparent;
	padding: 0;
	font-size: inherit;
}

.ji-prose iframe {
	max-width: 100%;
	border: 0;
}

/* ==========================================================================
   23. WP core compatibility
   ========================================================================== */

.wp-block-image img { max-width: 100%; height: auto; }

.wp-block-image figcaption,
.wp-caption-text,
.gallery-caption {
	font-size: 13px;
	color: var(--ji-ink2);
	margin: 8px 0 0;
	line-height: 1.5;
}

.wp-block-table {
	margin: 20px 0;
	overflow-x: auto;
}

.wp-caption { max-width: 100%; }

.alignleft {
	float: left;
	margin: 6px 24px 12px 0;
}

.alignright {
	float: right;
	margin: 6px 0 12px 24px;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Wide/full alignments inside the 760px prose column */
.ji-prose .alignwide,
.ji-prose .alignfull { clear: both; }

@media (min-width: 1240px) {
	.ji-prose .alignwide {
		margin-left: -200px;
		margin-right: -200px;
		max-width: 1160px;
	}
}

.ji-prose .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Required theme classes */
.sticky {} /* sticky posts get hero treatment via front-page.php */
.bypostauthor {}

/* ==========================================================================
   24. Archive headers (category.php / author.php / search.php)
   ========================================================================== */

.ji-archive-head { margin: 28px 0 8px; }

.ji-archive-kicker {
	display: block;
	font-family: var(--ji-font-mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--ji-red);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.ji-archive-title {
	font-size: clamp(26px, 3vw, 32px);
	line-height: 1.35;
	margin: 6px 0 4px;
	text-wrap: balance;
}

.ji-archive-desc,
.ji-author-bio {
	color: var(--ji-ink2);
	max-width: 68ch;
	margin: 0;
	font-size: 15.5px;
}

.ji-archive-head .search-form {
	margin-top: 18px;
	max-width: 520px;
}

/* Author archive: avatar next to title */
.ji-archive-head .ji-avatar,
.ji-archive-head .ji-author-avatar {
	width: 64px;
	height: 64px;
	margin-bottom: 10px;
	border-radius: 50%;
	flex: none;
	object-fit: cover;
}

.ji-author-head {
	display: flex;
	align-items: center;
	gap: 18px;
}

.ji-author-head .ji-avatar,
.ji-author-head .ji-author-avatar { margin-bottom: 0; }

.ji-author-head-body { min-width: 0; }

/* ==========================================================================
   25. Pagination (the_posts_pagination -> nav.ji-pagination)
   ========================================================================== */

.ji-pagination { margin: 30px 0 40px; }

.ji-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
}

.ji-pagination .page-numbers {
	display: inline-block;
	min-width: 40px;
	text-align: center;
	border: 1.5px solid var(--ji-line);
	background: #fff;
	border-radius: 8px;
	padding: 8px 13px;
	font-family: var(--ji-font-mono);
	font-size: 14px;
	font-weight: 700;
	color: var(--ji-ink);
	text-decoration: none;
}

.ji-pagination a.page-numbers:hover {
	border-color: var(--ji-red);
	color: var(--ji-red);
}

.ji-pagination .page-numbers.current {
	background: var(--ji-red);
	border-color: var(--ji-red);
	color: #fff;
}

.ji-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* ==========================================================================
   26. 404
   ========================================================================== */

.ji-404 {
	max-width: 640px;
	margin: 0 auto;
	padding: 64px 16px 80px;
	text-align: center;
}

.ji-404-code {
	font-family: var(--ji-font-mono);
	font-size: 56px;
	font-weight: 700;
	color: var(--ji-red);
	letter-spacing: .06em;
	margin: 0;
	line-height: 1.1;
}

.ji-404 h1 {
	font-size: 26px;
	margin: 14px 0 8px;
}

.ji-404 p {
	color: var(--ji-ink2);
	margin: 0 0 8px;
}

.ji-404 .search-form {
	margin-top: 24px;
	justify-content: center;
}

.ji-404 .ji-chips {
	justify-content: center;
	margin-top: 22px;
}

/* ==========================================================================
   27. Motion (all transitions live here, guarded)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	a,
	button,
	.ji-btn,
	.ji-chip,
	.ji-more,
	.ji-code-copy,
	.ji-nav a,
	.ji-mod-lead-title a,
	.ji-mod-row-title a,
	.ji-rail-popular-title,
	.ji-rail-latest-title,
	.ji-rail-deals-line,
	.ji-rail-deals-cta,
	.ji-pagination .page-numbers,
	.search-form .search-field {
		transition: color .15s ease, background-color .15s ease, border-color .15s ease;
	}

	.ji-card { transition: box-shadow .18s ease; }
}

/* ==========================================================================
   28. Integration fixes: selectors for classes the templates/patterns emit
   ========================================================================== */

/* Page containers (templates render content directly inside <main>).
   Same box as .ji-container: max-width 1200px, 24px horizontal padding. */
.ji-main,
.ji-home {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px 40px;
}

/* Single/page article column (760px, gutters come from .ji-main) */
.ji-article-inner {
	max-width: 760px;
	margin: 0 auto;
	padding: 22px 0 8px;
}

/* Mobile nav toggle: hamburger bars */
.ji-nav-toggle {
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-height: 38px;
}

.ji-nav-toggle-bar {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 1px;
	background: #fff;
}

/* Single post featured image (distinct from the homepage .ji-heroband) */
figure.ji-hero {
	display: block;
	margin: 18px 0 6px;
	border-radius: var(--ji-radius-lg);
	overflow: hidden;
}

.ji-hero-img,
figure.ji-hero img {
	display: block;
	width: 100%;
	height: auto;
}

.ji-hero-caption {
	font-size: 12px;
	color: var(--ji-ink2);
	padding: 6px 2px 0;
}

/* Card placeholder (posts without a featured image) */
.ji-card-ph {
	position: absolute;
	inset: 0;
}

/* Related posts: 3-up card row */
.ji-related { margin-top: 8px; }

@media (min-width: 760px) {
	.ji-cards-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Verdict pattern: pick paragraph */
.ji-vpick { margin: 0; }

/* Tag list under single posts */
.ji-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 760px;
	margin: 18px auto 0;
}

.ji-tags a {
	display: inline-block;
	border: 1.5px solid var(--ji-line);
	background: #fff;
	border-radius: 14px;
	padding: 3px 12px;
	font-size: 12px;
	font-weight: 600;
	color: #4d463e;
	text-decoration: none;
}

.ji-tags a:hover {
	border-color: var(--ji-red);
	color: var(--ji-red);
}

/* Paged posts (wp_link_pages) */
.ji-pagelinks {
	margin: 18px 0;
	font-weight: 700;
}

.ji-pagelinks a { margin-left: 6px; }

/* Empty states (no posts / no results) */
.ji-none {
	margin: 26px 0 40px;
	max-width: 520px;
}

.ji-none p {
	margin: 0 0 12px;
	color: var(--ji-ink2);
}

/* Search query echo in result headings */
.ji-search-q { color: var(--ji-red); }

/* Author box text column */
.ji-authorbox-body { min-width: 0; }

/* ==========================================================================
   29. Phase B — reading progress bar (single.php)
   ========================================================================== */

.ji-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 101;
	background: transparent;
}

.ji-progress-fill {
	height: 100%;
	background: var(--ji-red);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* ==========================================================================
   30. Phase B — auto TOC (inc/content-filters.php)
   ========================================================================== */

.ji-toc {
	border: 1.5px solid var(--ji-line);
	border-radius: 10px;
	padding: 14px 16px;
	background: #fff;
	margin: 0 0 22px;
}

.ji-toc-t {
	font-family: var(--ji-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ji-red);
	cursor: pointer;
}

.ji-toc ol {
	margin: 12px 0 0;
	padding-left: 20px;
	font-size: 13px;
	line-height: 1.9;
}

.ji-toc a {
	color: var(--ji-ink);
	text-decoration: none;
}

.ji-toc a:hover { color: var(--ji-red); }

/* ==========================================================================
   31. Phase B — mid-article newsletter CTA (inc/content-filters.php)
   ========================================================================== */

.ji-newscta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	background: #fff3cd;
	border: 1.5px solid #eedaa0;
	border-radius: 10px;
	padding: 12px 16px;
	margin: 20px 0;
}

.ji-newscta-tx b {
	display: block;
	font-size: 15px;
}

.ji-newscta-tx small {
	display: block;
	color: var(--ji-ink2);
	font-size: 12.5px;
	margin-top: 2px;
}

.ji-newscta-btn { margin-left: auto; }

/* ==========================================================================
   32. Phase B — share row (single.php byline)
   ========================================================================== */

.ji-share {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-left: auto;
}

.ji-share-btn {
	border: 1px solid var(--ji-line);
	border-radius: 6px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	background: #fff;
	color: var(--ji-ink);
	text-decoration: none;
	cursor: pointer;
}

.ji-share-btn:hover {
	border-color: var(--ji-red);
	color: var(--ji-red);
}

.ji-byline { flex-wrap: wrap; }

/* ==========================================================================
   33. Phase B — previous / next navigation (single.php)
   ========================================================================== */

.ji-pnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 22px 0 0;
}

@media (max-width: 599px) {
	.ji-pnav { grid-template-columns: 1fr; }
}

.ji-pnav a {
	display: block;
	border: 1.5px solid var(--ji-line);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ji-ink);
	text-decoration: none;
}

.ji-pnav a:hover { border-color: var(--ji-red); color: var(--ji-red); }

.ji-pnav small {
	display: block;
	font-family: var(--ji-font-mono);
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ji-ink2);
	letter-spacing: .1em;
	margin-bottom: 2px;
}

.ji-pnav-next { text-align: right; }

/* ==========================================================================
   34. Phase B — category hero-lite + start here (category.php)
   ========================================================================== */

.ji-herolite {
	background: #fff;
	border-bottom: 1px solid var(--ji-line);
	margin: -1px -24px 20px;
	padding: 28px 24px 20px;
}

.ji-herolite-k {
	display: block;
	width: 26px;
	height: 4px;
	background: var(--ji-red);
	border-radius: 2px;
	margin-bottom: 10px;
}

.ji-herolite h1 {
	font-size: clamp(26px, 3vw, 32px);
	line-height: 1.35;
	margin: 0 0 4px;
}

.ji-herolite-cnt {
	display: block;
	font-family: var(--ji-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ji-ink2);
	margin-top: 10px;
}

.ji-starthere { margin: 18px 0 6px; }

.ji-starthere-head { margin: 0 0 10px; }

.ji-pin {
	display: inline-block;
	font-family: var(--ji-font-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--ji-red-soft);
	color: var(--ji-red);
	border-radius: 3px;
	padding: 2px 7px;
}

/* ==========================================================================
   35. Phase B — author E-E-A-T header (author.php)
   ========================================================================== */

.ji-author-meta {
	font-family: var(--ji-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ji-ink2);
	margin: 2px 0 10px;
}

.ji-author-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

/* ==========================================================================
   36. Phase B — search zero state (search.php)
   ========================================================================== */

.ji-poplist {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	max-width: 640px;
}

.ji-poplist-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 0;
	border-bottom: 1px solid var(--ji-line);
}

.ji-poplist-item:first-child { padding-top: 0; }
.ji-poplist-item:last-child { border-bottom: 0; padding-bottom: 0; }

.ji-poplist-num {
	flex: none;
	min-width: 22px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	color: #d9d2c3;
	font-variant-numeric: tabular-nums;
}

.ji-poplist-tx { min-width: 0; }

.ji-poplist-title {
	display: block;
	margin: 0 0 4px;
	font-size: 14.5px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--ji-ink);
	text-decoration: none;
}

.ji-poplist-title:hover { color: var(--ji-red); }

/* ==========================================================================
   37. Phase B — deal bar "All deals" link (inc/template-tags.php)
   ========================================================================== */

.ji-dealbar-all {
	margin-left: auto;
	color: #fff;
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.ji-dealbar-all:hover { text-decoration: underline; }

.ji-dealbar-inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   38. Phase B — brand pages (template-brand.php + inc/patterns.php)
   ========================================================================== */

.ji-brandpage { max-width: 1160px; }

/* About */
.ji-abouthero-tg {
	text-align: center;
	font-size: clamp(26px, 4vw, 34px);
	font-weight: 800;
	margin: 10px 0 8px;
}

.ji-abouthero-p { max-width: 640px; margin: 0 auto 30px; }

.ji-about3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0 0 30px;
}

@media (min-width: 760px) {
	.ji-about3 { grid-template-columns: repeat(3, 1fr); }
}

.ji-about3-c {
	background: #fff;
	border: 1px solid var(--ji-line);
	border-radius: 10px;
	padding: 18px;
}

.ji-about3-k {
	display: block;
	font-family: var(--ji-font-mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ji-red);
	margin-bottom: 8px;
}

.ji-about3-c h3 { margin: 0 0 6px; font-size: 17px; }
.ji-about3-c p { margin: 0; color: var(--ji-ink2); font-size: 14px; }

.ji-about3-more {
	display: inline-block;
	margin-top: 10px;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
}

.ji-teamlist li { margin: 8px 0; }

/* Deals */
.ji-deals-lede { color: var(--ji-ink2); }

.ji-dealhero {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	background: #fff;
	border: 2px solid var(--ji-red);
	border-radius: 12px;
	padding: 16px 20px;
	margin: 20px 0;
}

.ji-dealhero-img {
	max-width: 180px;
	border-radius: 8px;
	display: block;
	height: auto;
}

.ji-dealhero-tx { flex: 1 1 260px; min-width: 0; }

.ji-dealhero-k {
	display: block;
	font-family: var(--ji-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ji-red);
	margin-bottom: 4px;
}

.ji-dealhero-tx h2 { margin: 0 0 4px; }
.ji-dealhero-tx small { display: block; color: var(--ji-ink2); margin-bottom: 10px; }

.ji-dealhero-note {
	font-size: 13px;
	color: var(--ji-ink2);
	margin: 0 0 12px;
	max-width: 52ch;
}

.ji-dealgrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0 0 20px;
}

@media (min-width: 600px) {
	.ji-dealgrid { grid-template-columns: 1fr 1fr; }
}

.ji-dealgrid-c {
	border: 1.5px solid var(--ji-line);
	border-radius: 10px;
	padding: 16px;
	background: #fff;
}

.ji-dealgrid-c h3 { margin: 0 0 6px; font-size: 16px; }
.ji-dealgrid-c small { color: var(--ji-ink2); }

.ji-deals-disc { font-size: 11px; color: var(--ji-ink2); }

/* Newsletter */
.ji-nlsplit {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}

@media (min-width: 760px) {
	.ji-nlsplit { grid-template-columns: 1.1fr 1fr; }
}

.ji-nlsplit-k {
	display: block;
	font-family: var(--ji-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ji-red);
	margin-bottom: 8px;
}

.ji-nlsplit-list {
	margin: 16px 0;
	padding-left: 20px;
	font-size: 15px;
	line-height: 1.7;
}

.ji-nlform-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 8px;
}

.ji-nlform-row input {
	flex: 1 1 220px;
	min-width: 180px;
	border: 1.5px solid var(--ji-line);
	border-radius: 8px;
	padding: 10px 14px;
	font: inherit;
	font-size: 15px;
}

.ji-nlfine { font-size: 10.5px; color: var(--ji-ink2); }

.ji-nlsample {
	background: #fff;
	border: 1.5px solid var(--ji-line);
	border-radius: 12px;
	padding: 20px;
	transform: rotate(1.5deg);
	box-shadow: 0 8px 24px rgba(43, 38, 32, .1);
}

.ji-nlsample-head { font-weight: 800; margin-bottom: 10px; }
.ji-nlsample p { margin: 0 0 10px; font-size: 14px; }
.ji-nlsample p:last-child { margin-bottom: 0; }

/* Contact */
.ji-lanes {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 20px 0;
}

.ji-lane {
	border: 1.5px solid var(--ji-line);
	border-radius: 10px;
	padding: 14px 18px;
	background: #fff;
}

.ji-lane h2 { margin: 0 0 6px; font-size: 18px; }
.ji-lane p { margin: 0 0 8px; color: var(--ji-ink2); }
.ji-lane a { font-weight: 700; text-decoration: none; margin-right: 14px; }
.ji-lane a:hover { color: var(--ji-red); }

/* ==========================================================================
   Section header (category modules & shared) — kicker bar + title + More link
   ========================================================================== */

.ji-sechead {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 44px 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ji-line);
}

.ji-mod:first-of-type .ji-sechead { margin-top: 4px; }

.ji-sechead-kicker {
	width: 30px;
	height: 4px;
	background: var(--ji-red);
	border-radius: 2px;
	flex: none;
}

.ji-sechead h2 {
	font-size: 24px;
	font-weight: 800;
	margin: 0;
	line-height: 1.3;
}

.ji-sechead-more {
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ji-red);
	text-decoration: none;
	white-space: nowrap;
}

.ji-sechead-more:hover,
.ji-sechead-more:focus-visible { color: #a81c30; }

/* ==========================================================================
   Page: empty-content fallback note
   ========================================================================== */

.ji-page-empty-note {
	max-width: 760px;
	margin: 12px auto 0;
	padding: 16px 18px;
	background: #fff;
	border: 1.5px dashed var(--ji-line);
	border-radius: var(--ji-radius);
	color: var(--ji-ink2);
	font-size: 15px;
	line-height: 1.6;
}