/*
Theme Name: Converto
Theme URI: https://converto.local
Author: Converto Team
Author URI: https://converto.local
Description: A high-RPM editorial FSE block theme modelled closely on amomama.com. Optimised for ad density, reader engagement, and Core Web Vitals.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: converto
Tags: full-site-editing, block-themes, two-columns, custom-colors, custom-menu, editor-style, featured-images, sticky-post, translation-ready, wide-blocks
*/

/* ═══════════════════════════════════════════════════════════════════════════
   0. DESIGN TOKENS — defined on html element (best practice)
   ─────────────────────────────────────────────────────────────────────────
   • Light theme  : html (default)
   • Dark  theme  : html[data-theme="dark"]
   • All component CSS references --cvt-* vars only.
   • WP preset vars used where the block editor generates them.
   ═══════════════════════════════════════════════════════════════════════════ */

html {
	/* ── Brand ─────────────────────────────────────────────────── */
	--cvt-accent: #D93802;
	--cvt-accent-hover: #b82e00;
	--cvt-accent-muted: rgba(217, 56, 2, 0.08);

	/* ── Header ────────────────────────────────────────────────── */
	--cvt-header-bg: #292929;
	--cvt-header-text: #ffffff;
	--cvt-pill-nav-bg: #ffffff;
	--cvt-pill-nav-border: #e8e8e8;
	--cvt-header-h: 56px;
	--cvt-pill-nav-h: 44px;
	--cvt-total-header-h: calc(var(--cvt-header-h) + var(--cvt-pill-nav-h));

	/* ── Surface / Background ──────────────────────────────────── */
	--cvt-bg: #ffffff;
	--cvt-bg-secondary: #f5f5f5;
	--cvt-bg-tertiary: #f0ede8;

	/* ── Text ──────────────────────────────────────────────────── */
	--cvt-text: #222222;
	--cvt-text-muted: #767676;
	--cvt-text-subtle: #999999;
	--cvt-text-inverse: #ffffff;

	/* ── Borders ───────────────────────────────────────────────── */
	--cvt-border: #e8e8e8;
	--cvt-border-strong: #cccccc;

	/* ── Card ──────────────────────────────────────────────────── */
	--cvt-card-bg: #ffffff;
	--cvt-card-shadow: 0 2px 20px rgba(51, 51, 51, 0.08);
	--cvt-card-radius: 12px;

	/* ── Drawer ────────────────────────────────────────────────── */
	--cvt-drawer-bg: #292929;
	--cvt-drawer-text: #ffffff;
	--cvt-drawer-w: min(320px, 90vw);
	--cvt-overlay-bg: rgba(0, 0, 0, 0.6);
	--cvt-drawer-transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);

	/* ── Spacing ───────────────────────────────────────────────── */
	--cvt-content-pad: 16px;
	--cvt-content-pad-sm: 12px;
	--cvt-sidebar-top: calc(var(--cvt-total-header-h) + 20px);

	/* ── Typography ────────────────────────────────────────────── */
	--cvt-font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--cvt-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* ── Animation ─────────────────────────────────────────────── */
	--cvt-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
	--cvt-duration: 0.2s;

	/* ── Subscribe Modal ───────────────────────────────────────── */
	--cvt-modal-bg: #ffffff;
	--cvt-modal-overlay: rgba(0, 0, 0, 0.65);
	--cvt-modal-radius: 12px;
}

/* ── DARK THEME ──────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
	--cvt-accent: #FF6B35;
	--cvt-accent-hover: #ff5518;
	--cvt-accent-muted: rgba(255, 107, 53, 0.12);

	--cvt-header-bg: #1a1a1a;
	--cvt-pill-nav-bg: #242424;
	--cvt-pill-nav-border: #333333;

	--cvt-bg: #121212;
	--cvt-bg-secondary: #1e1e1e;
	--cvt-bg-tertiary: #2a2a2a;

	--cvt-text: #f0f0f0;
	--cvt-text-muted: #a0a0a0;
	--cvt-text-subtle: #666666;

	--cvt-border: #333333;
	--cvt-border-strong: #444444;

	--cvt-card-bg: #1e1e1e;
	--cvt-card-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);

	--cvt-modal-bg: #1e1e1e;
}

/* FLASH-OF-WRONG-THEME prevention: hidden until JS runs */
html:not([data-theme]) body {
	visibility: hidden;
}


/* ═══════════════════════════════════════════════════════════════════════════
   1. RESETS & BASE
   ═══════════════════════════════════════════════════════════════════════════ */

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

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--cvt-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: var(--cvt-bg);
	color: var(--cvt-text);
	overflow-x: hidden;
	/* The fixed header occupies --cvt-total-header-h. Push body below it. */
	padding-top: var(--cvt-total-header-h);
	transition: background-color var(--cvt-duration) ease, color var(--cvt-duration) ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
	color: var(--cvt-text);
}

p,
li,
figcaption {
	text-wrap: pretty;
}

:focus-visible {
	outline: 2px solid var(--cvt-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

a {
	color: inherit;
}

img,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

.wp-site-blocks {
	overflow-x: hidden;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. IMAGE NORMALIZATION SYSTEM
   ─────────────────────────────────────────────────────────────────────────
   Use these semantic classes everywhere. Never write one-off aspect-ratio
   rules. Add the class to the block's className attribute.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base: applied to every image wrapper by default for block images */
.cvt-img,
.wp-block-post-featured-image img,
.wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Wrapper aspect ratios */
.cvt-img--hero {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.cvt-img--card {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.cvt-img--thumb {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	width: 100px;
	min-width: 100px;
	flex-shrink: 0;
}

.cvt-img--sq {
	aspect-ratio: 1;
	overflow: hidden;
}

.cvt-img--avatar {
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
	width: 64px;
	min-width: 64px;
	flex-shrink: 0;
}

/* Scale transition on hover for cards only */
.converto-card .wp-block-post-featured-image img,
.cvt-img--card img {
	transition: transform 0.35s var(--cvt-ease-out);
}

.converto-card:hover .wp-block-post-featured-image img,
.converto-card:hover .cvt-img--card img {
	transform: scale(1.04);
}

/* Block image overrides */
.wp-block-post-featured-image {
	overflow: hidden;
	contain: layout paint;
}

/* Hero featured image */
.converto-article-image,
.converto-hero-main .wp-block-post-featured-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
}

/* Card featured image */
.converto-card .wp-block-post-featured-image {
	aspect-ratio: 3 / 2;
	border-radius: var(--cvt-card-radius) var(--cvt-card-radius) 0 0;
	overflow: hidden;
}

/* Hero sidebar thumbnails */
.converto-hero-list-item .wp-block-post-featured-image {
	aspect-ratio: 4 / 3;
	width: 100px;
	min-width: 100px;
	border-radius: 6px;
	overflow: hidden;
	flex-shrink: 0;
}

/* Sidebar list item thumbnails */
.converto-sidebar-list-item .wp-block-post-featured-image {
	aspect-ratio: 1;
	width: 80px;
	min-width: 80px;
	border-radius: 4px;
	overflow: hidden;
	flex-shrink: 0;
}

/* In-article images — never overflow column */
.wp-block-post-content .wp-block-image,
.wp-block-post-content figure {
	max-width: 100% !important;
	overflow: hidden;
}

.wp-block-post-content .wp-block-image.alignfull,
.wp-block-post-content .wp-block-image.alignwide {
	margin-inline: 0 !important;
	width: 100% !important;
}

.wp-block-post-content .wp-block-image img {
	border-radius: 8px;
}

/* Single post featured image */
.single .wp-block-post-featured-image,
.single .wp-block-post-content .wp-block-image,
.single .wp-block-post-content figure {
	max-width: 100% !important;
	overflow: hidden;
}

/* Image captions */
.converto-article-image figcaption,
.wp-block-post-featured-image figcaption {
	font-size: 12px;
	color: var(--cvt-text-muted);
	font-style: italic;
	padding: 6px 0;
	line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. FIXED HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

.converto-header {
	position: fixed !important;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 500;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ── Brand bar ───────────────────────────────────────────────────────────── */
.converto-brand-bar {
	height: var(--cvt-header-h);
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 var(--cvt-content-pad);
	background: var(--cvt-header-bg);
	position: relative;
}

/* Logo — left anchor */
.converto-brand-logo {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-width: 0;
}

.converto-site-logo-link {
	font-family: var(--cvt-font-display);
	font-weight: 700;
	font-style: italic;
	font-size: clamp(18px, 2.2vw, 24px);
	color: var(--cvt-accent) !important;
	text-decoration: none;
	letter-spacing: -0.03em;
	line-height: 1;
	white-space: nowrap;
}

/* Common header button styles */
.converto-search-btn,
.converto-hamburger,
.cvt-subscribe-trigger,
.cvt-push-bell,
#cvt-theme-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cvt-header-text);
	flex-shrink: 0;
	border-radius: 6px;
	transition: opacity var(--cvt-duration) ease, background var(--cvt-duration) ease;
}

.converto-search-btn:hover,
.converto-hamburger:hover,
.cvt-push-bell:hover,
#cvt-theme-toggle:hover,
.cvt-subscribe-trigger:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* Subscribe/Account button — stands out with accent color */
.cvt-subscribe-trigger {
	background: var(--cvt-accent);
	color: #fff !important;
}

.cvt-subscribe-trigger:hover {
	background: var(--cvt-accent-hover) !important;
}

/* Push bell — notification dot + subscribed state */
.cvt-push-bell {
	position: relative;
}

.cvt-push-bell__dot {
	position: absolute;
	top: 7px;
	right: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cvt-accent);
	border: 2px solid var(--cvt-header-bg);
	display: none; /* hidden by default, shown when not subscribed */
}

/* Show the dot when push is available but not yet subscribed */
.cvt-push-bell[data-push-state="available"] .cvt-push-bell__dot {
	display: block;
}

/* When subscribed: fill the bell */
.cvt-push-bell[data-push-state="subscribed"] {
	color: var(--cvt-accent);
}

.cvt-push-bell[data-push-state="subscribed"] svg {
	fill: currentColor;
	stroke: currentColor;
}

/* Hide bell entirely if push not supported or denied */
.cvt-push-bell[data-push-state="unsupported"],
.cvt-push-bell[data-push-state="denied"] {
	display: none;
}

/* Hamburger bars */
.converto-hamburger {
	flex-direction: column;
	gap: 5px;
}

.converto-hamburger .bar {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
	transform-origin: center;
}

.converto-hamburger[aria-expanded="true"] .bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.converto-hamburger[aria-expanded="true"] .bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.converto-hamburger[aria-expanded="true"] .bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ── Search overlay (inline brand bar expansion) ─────────────────────────── */
.cvt-search-overlay {
	position: absolute;
	inset: 0;
	background: var(--cvt-header-bg);
	display: flex;
	align-items: center;
	padding: 0 var(--cvt-content-pad);
	z-index: 10;
	animation: fadeIn 0.15s ease;
}

.cvt-search-form {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 8px;
}

.cvt-search-input {
	flex: 1;
	height: 40px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	padding: 0 14px;
	color: #fff;
	font-size: 15px;
	outline: none;
	transition: border-color var(--cvt-duration);
}

.cvt-search-input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.cvt-search-input:focus {
	border-color: var(--cvt-accent);
}

.cvt-search-submit,
.cvt-search-close {
	background: none;
	border: none;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.8);
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	transition: color var(--cvt-duration);
}

.cvt-search-submit:hover,
.cvt-search-close:hover {
	color: #fff;
}

/* ── Category pill nav row ───────────────────────────────────────────────── */
.converto-category-nav {
	background: var(--cvt-pill-nav-bg);
	border-bottom: 1px solid var(--cvt-border);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	transition: background var(--cvt-duration);
}

.converto-category-nav::-webkit-scrollbar {
	display: none;
}

.converto-pill-nav {
	display: flex;
	flex-wrap: nowrap;
	list-style: none;
	margin: 0;
	padding: 0 var(--cvt-content-pad);
	gap: 0;
	align-items: center;
	height: var(--cvt-pill-nav-h);
}

.converto-pill-nav__link {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--cvt-text);
	text-decoration: none;
	border-radius: 999px;
	transition: background var(--cvt-duration) ease, color var(--cvt-duration) ease;
}

.converto-pill-nav__link:hover {
	color: var(--cvt-accent);
	background: var(--cvt-accent-muted);
}

.converto-pill-nav__link.current {
	background: var(--cvt-accent);
	color: #fff !important;
	font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. NAVIGATION DRAWER
   ─────────────────────────────────────────────────────────────────────────
   Available on ALL viewports. Slides from RIGHT by default.
   Left variant: add class .converto-drawer--left to the drawer element.
   ═══════════════════════════════════════════════════════════════════════════ */

.converto-drawer-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--cvt-overlay-bg);
	z-index: 998;
}

.converto-drawer-overlay.is-open {
	display: block;
	animation: fadeIn 0.2s ease;
}

.converto-drawer {
	position: fixed;
	top: 0;
	right: 0;
	/* Default: RIGHT side */
	bottom: 0;
	width: var(--cvt-drawer-w);
	background: var(--cvt-drawer-bg);
	color: var(--cvt-drawer-text);
	z-index: 999;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	/* Off-screen right */
	transition: transform var(--cvt-drawer-transition),
		visibility 0s var(--cvt-drawer-transition);
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
	pointer-events: none;
}

/* LEFT variant */
.converto-drawer--left {
	right: auto;
	left: 0;
	transform: translateX(-100%);
	/* Off-screen left */
}

.converto-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
	pointer-events: auto;
	transition: transform var(--cvt-drawer-transition), visibility 0s 0s;
}

/* Drawer header */
.converto-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	height: var(--cvt-header-h);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	flex-shrink: 0;
}

.converto-drawer__logo {
	font-size: 20px;
	font-weight: 700;
	font-style: italic;
	color: var(--cvt-accent) !important;
	text-decoration: none;
	letter-spacing: -0.02em;
	font-family: var(--cvt-font-display);
}

.converto-drawer__close {
	background: none;
	border: none;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.7);
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	transition: color var(--cvt-duration), background var(--cvt-duration);
}

.converto-drawer__close:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

/* Drawer nav links */
.converto-drawer__nav {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	flex: 1;
}

.converto-drawer__nav li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.converto-drawer__nav a {
	display: block;
	padding: 15px 24px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	transition: color var(--cvt-duration), background var(--cvt-duration);
}

.converto-drawer__nav a:hover {
	color: var(--cvt-accent);
	background: rgba(255, 255, 255, 0.04);
}

/* Secondary legal links */
.converto-drawer__secondary {
	list-style: none;
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	flex-shrink: 0;
}

.converto-drawer__secondary a {
	display: block;
	padding: 10px 24px;
	font-size: 13px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	transition: color var(--cvt-duration);
}

.converto-drawer__secondary a:hover {
	color: rgba(255, 255, 255, 0.85);
}

/* Social row */
.converto-drawer__social {
	display: flex;
	gap: 10px;
	padding: 16px 24px 24px;
	flex-shrink: 0;
}

.converto-drawer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	transition: background var(--cvt-duration);
}

.converto-drawer__social a:hover {
	background: var(--cvt-accent);
}

/* Subscribe CTA in drawer */
.converto-drawer__subscribe {
	margin: 0 16px 8px;
	padding: 12px 16px;
	background: var(--cvt-accent);
	color: #fff;
	border-radius: 8px;
	text-align: center;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	border: none;
	display: block;
	transition: background var(--cvt-duration);
}

.converto-drawer__subscribe:hover {
	background: var(--cvt-accent-hover);
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. SUBSCRIBE MODAL
   ─────────────────────────────────────────────────────────────────────────
   Desktop: centered card overlay
   Mobile (≤767px): fullscreen
   ═══════════════════════════════════════════════════════════════════════════ */

.cvt-subscribe-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	visibility: hidden;
	pointer-events: none;
}

.cvt-subscribe-modal.is-open {
	visibility: visible;
	pointer-events: auto;
}

.cvt-subscribe-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--cvt-modal-overlay);
	animation: fadeIn 0.2s ease;
}

.cvt-subscribe-modal__box {
	position: relative;
	background: var(--cvt-modal-bg);
	border-radius: var(--cvt-modal-radius);
	padding: 40px;
	max-width: 480px;
	width: 100%;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
	animation: modalSlideUp 0.28s var(--cvt-ease-out);
	color: var(--cvt-text);
}

.cvt-subscribe-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--cvt-text-muted);
	padding: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	transition: color var(--cvt-duration), background var(--cvt-duration);
}

.cvt-subscribe-modal__close:hover {
	color: var(--cvt-text);
	background: var(--cvt-bg-secondary);
}

.cvt-subscribe-modal__eyebrow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--cvt-accent);
	margin: 0 0 12px;
}

.cvt-subscribe-modal__heading {
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
	color: var(--cvt-text);
}

.cvt-subscribe-modal__subtext {
	font-size: 15px;
	color: var(--cvt-text-muted);
	line-height: 1.6;
	margin: 0 0 28px;
}

.cvt-subscribe-modal__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cvt-subscribe-modal__input {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1.5px solid var(--cvt-border);
	border-radius: 8px;
	font-size: 15px;
	background: var(--cvt-bg);
	color: var(--cvt-text);
	outline: none;
	transition: border-color var(--cvt-duration);
}

.cvt-subscribe-modal__input:focus {
	border-color: var(--cvt-accent);
}

.cvt-subscribe-modal__input::placeholder {
	color: var(--cvt-text-subtle);
}

.cvt-subscribe-modal__submit {
	width: 100%;
	height: 48px;
	background: var(--cvt-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--cvt-duration);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.cvt-subscribe-modal__submit:hover {
	background: var(--cvt-accent-hover);
}

.cvt-subscribe-modal__privacy {
	font-size: 12px;
	color: var(--cvt-text-subtle);
	text-align: center;
	margin: 4px 0 0;
}

/* ── Magic Link Login UI ── */
.cvt-magic-step { margin: 8px 0 0; }

.cvt-magic-inbox-icon {
	text-align: center;
	margin: 8px 0 16px;
	color: var(--cvt-accent, #e8543e);
}

.cvt-magic-sent-heading {
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	margin: 0 0 6px;
	color: var(--cvt-text);
}

.cvt-magic-sent-text {
	font-size: 14px;
	color: var(--cvt-text-subtle);
	text-align: center;
	margin: 0 0 4px;
}

.cvt-magic-sent-email {
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	color: var(--cvt-accent, #e8543e);
	margin: 0 0 16px;
	word-break: break-all;
}

.cvt-magic-spam-warning {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #fef3cd;
	color: #856404;
	border: 1px solid #ffc107;
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.45;
	margin: 0 0 14px;
}

[data-theme="dark"] .cvt-magic-spam-warning {
	background: rgba(255, 193, 7, 0.12);
	color: #ffd54f;
	border-color: rgba(255, 193, 7, 0.3);
}

.cvt-magic-error {
	background: #fcf0f1;
	color: #d63638;
	border: 1px solid #d63638;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
	margin: 10px 0 0;
	text-align: center;
}

[data-theme="dark"] .cvt-magic-error {
	background: rgba(214, 54, 56, 0.12);
	border-color: rgba(214, 54, 56, 0.4);
}

.cvt-magic-resend {
	display: block;
	margin: 0 auto;
	font-size: 13px;
}

.cvt-subscribe-modal__success {
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	color: var(--cvt-text);
	padding: 24px 0;
	margin: 0;
}

/* Fullscreen on mobile */
@media (max-width: 767px) {
	.cvt-subscribe-modal__box {
		max-width: 100%;
		height: 100%;
		max-height: 100vh;
		border-radius: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.cvt-subscribe-modal {
		padding: 0;
		align-items: stretch;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.converto-card {
	border-radius: var(--cvt-card-radius);
	box-shadow: var(--cvt-card-shadow);
	overflow: hidden;
	background: var(--cvt-card-bg);
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--cvt-duration), background var(--cvt-duration);
}

.converto-card:hover {
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.15);
}

.converto-card__body {
	padding: 16px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.converto-card__body .wp-block-post-terms {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cvt-accent);
	line-height: 1;
}

.converto-card__body .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.converto-card__body .wp-block-post-title {
	font-size: clamp(16px, 1.5vw, 21px);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	margin: 0;
}

.converto-card__body .wp-block-post-title a {
	color: var(--cvt-text);
	text-decoration: none;
}

.converto-card__body .wp-block-post-title a:hover {
	color: var(--cvt-accent);
}

.converto-card__body .wp-block-post-date {
	font-size: 13px;
	color: var(--cvt-text-muted);
	margin-top: 4px;
}

/* ── Section header (heading + "see all" link) ──────────────────────────── */
.converto-section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 3px solid var(--cvt-accent);
	padding-bottom: 10px;
	margin-bottom: 24px;
}

.converto-section-header h2 {
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--cvt-text);
	margin: 0;
}

.converto-section-header a {
	font-size: 12px;
	font-weight: 600;
	color: var(--cvt-text-muted);
	text-decoration: none;
	white-space: nowrap;
}

.converto-section-header a:hover {
	color: var(--cvt-accent);
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. SINGLE POST
   ═══════════════════════════════════════════════════════════════════════════ */

/* Article column: never let images overflow into sidebar */
.single .wp-block-columns .wp-block-column:first-child,
.wp-block-column.is-layout-constrained {
	overflow: hidden;
	min-width: 0;
}

/* Hide tags section when no actual tags exist (WP removes the element entirely) */
.converto-article-col .wp-block-group[style*="border-top"][style*="border-bottom"]:not(:has(.taxonomy-post_tag)) {
	display: none;
}

/* Body text */
.wp-block-post-content p,
.wp-block-post-content li,
.wp-block-post-content address {
	font-size: 20px;
	line-height: 1.7;
	color: var(--cvt-text);
}

/* H1 title */
.wp-block-post-title.converto-article-title,
.single .wp-block-post-title {
	font-size: clamp(24px, 3.5vw, 36px) !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.02em !important;
	color: var(--cvt-text) !important;
}

/* Sticky sidebar */
.converto-sidebar,
.wp-block-column.converto-sidebar-col {
	position: sticky;
	top: var(--cvt-sidebar-top);
	align-self: flex-start;
	max-height: calc(100vh - var(--cvt-total-header-h) - 40px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--cvt-border) transparent;
	min-width: 0;
}

.converto-sidebar::-webkit-scrollbar {
	width: 4px;
}

.converto-sidebar::-webkit-scrollbar-thumb {
	background: var(--cvt-border);
	border-radius: 2px;
}

/* TOP NEWS heading */
.converto-top-news-heading {
	font-size: 11px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--cvt-text);
	border-bottom: 2px solid var(--cvt-accent);
	padding-bottom: 10px;
	margin-bottom: 16px !important;
}

/* Sidebar list (legacy class — kept for backwards compat) */
.converto-sidebar-list-item {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--cvt-border);
	align-items: flex-start;
}

.converto-sidebar-list-item:last-child {
	border-bottom: none;
}

.converto-sidebar-list-item .wp-block-post-title {
	font-size: 14px !important;
	font-weight: 700;
	line-height: 1.35;
}

.converto-sidebar-list-item .wp-block-post-title a {
	color: var(--cvt-text);
	text-decoration: none;
}

.converto-sidebar-list-item .wp-block-post-title a:hover {
	color: var(--cvt-accent);
}

.converto-sidebar-list-item .wp-block-post-date {
	font-size: 11px;
	color: var(--cvt-text-muted);
	margin-top: 3px;
}

/* ── Sidebar top-news: override theme.json uppercase h6 headings ──────── */
.converto-sidebar .wp-block-post-title {
	text-transform: none !important;
	letter-spacing: normal !important;
	font-size: 14px !important;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}

.converto-sidebar .wp-block-post-title a {
	color: var(--cvt-text);
	text-decoration: none;
	transition: color var(--cvt-duration);
}

.converto-sidebar .wp-block-post-title a:hover {
	color: var(--cvt-accent);
}

.converto-sidebar .wp-block-post-date {
	font-size: 11px;
	color: var(--cvt-text-muted);
	margin: 0;
}

/* Sidebar section heading: keep uppercase (it's a label) */
.converto-sidebar .wp-block-heading {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 11px !important;
	font-weight: 700;
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--cvt-accent);
}

/* Sidebar post template: proper gap between items */
.converto-sidebar .wp-block-post-template {
	padding: 0;
	margin: 0;
	list-style: none;
}

/* Sidebar post item row: image + text alignment */
.converto-sidebar .wp-block-post-template .wp-block-group[class*="is-nowrap"] {
	gap: 14px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. AUTHOR CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.converto-author-card,
.wp-block-post-author {
	display: flex;
	gap: 18px;
	padding: 24px;
	border: 1px solid var(--cvt-border);
	border-radius: 8px;
	background: var(--cvt-bg);
	align-items: flex-start;
}

.wp-block-post-author__avatar img,
.converto-author-card__avatar {
	width: 64px !important;
	height: 64px !important;
	border-radius: 50% !important;
	object-fit: cover;
	flex-shrink: 0;
}

.wp-block-post-author__content {
	flex: 1;
	min-width: 0;
}

.wp-block-post-author__name,
.converto-author-card__name {
	font-size: 16px;
	font-weight: 700;
	color: var(--cvt-text);
	margin: 0 0 2px;
}

.wp-block-post-author__byline {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cvt-text-muted);
	margin-bottom: 8px;
}

.wp-block-post-author__bio {
	font-size: 14px !important;
	line-height: 1.6;
	color: var(--cvt-text-muted);
	margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. BREADCRUMB
   ═══════════════════════════════════════════════════════════════════════════ */

.converto-breadcrumb {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cvt-text-muted);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	padding: 14px 0 10px;
	list-style: none;
}

.converto-breadcrumb li {
	list-style: none;
	display: inline;
}

.converto-breadcrumb a {
	color: var(--cvt-text);
	text-decoration: none;
}

.converto-breadcrumb a:hover {
	color: var(--cvt-accent);
}

.converto-breadcrumb .sep {
	color: var(--cvt-text-subtle);
	margin: 0 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. AUTHOR ROW & SHARE BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.converto-author-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

/* Author row (top) — compact inline, no card styling */
.converto-author-row .wp-block-post-author {
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
}

/* Hide duplicate author name in the avatar-only author block */
.converto-author-row__meta > .wp-block-post-author .wp-block-post-author__name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Author bio (bottom) — accent-bordered card */
.wp-block-post-author.has-border-color {
	border-color: var(--cvt-accent) !important;
	border-width: 1px 1px 1px 3px !important;
	border-style: solid !important;
	border-radius: 12px !important;
	background: var(--cvt-bg-secondary);
}

/* Fix: header/footer nesting — reset outer WP template-part wrapper */
header.wp-block-template-part,
footer.wp-block-template-part,
[data-type="core/template-part"][tagname="header"],
[data-type="core/template-part"][tagname="footer"] {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	display: contents !important;
}

.converto-share-buttons {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}

.converto-share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 4px;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	transition: opacity var(--cvt-duration);
}

.converto-share:hover {
	opacity: 0.85;
}

/* ── Post Navigation — visual cards with featured images ────────────────── */
.cvt-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: var(--cvt-space-8, 48px);
}

.cvt-post-nav__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 220px;
	border-radius: var(--cvt-radius, 8px);
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	background: var(--cvt-surface-2, #1a1a1a);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cvt-post-nav__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.cvt-post-nav__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.cvt-post-nav__overlay {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 16px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
}

.cvt-post-nav__label {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.75;
}

.cvt-post-nav__card--next .cvt-post-nav__label {
	justify-content: flex-end;
}

.cvt-post-nav__card--next .cvt-post-nav__overlay {
	text-align: right;
	align-items: flex-end;
}

.cvt-post-nav__cat {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cvt-accent, #e8543e);
}

.cvt-post-nav__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Single card when only prev or next exists */
.cvt-post-nav__card:only-child {
	grid-column: 1 / -1;
	max-height: 240px;
}

@media (max-width: 600px) {
	.cvt-post-nav {
		grid-template-columns: 1fr;
	}
	.cvt-post-nav__card {
		min-height: 180px;
	}
}

/* ── Related Posts — "You might also like" ───────────────────────────────── */
.cvt-related {
	margin-top: var(--cvt-space-8, 48px);
	padding-top: var(--cvt-space-6, 32px);
	border-top: 1px solid var(--cvt-border, rgba(0, 0, 0, 0.08));
}

.cvt-related__heading {
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 20px;
	color: var(--cvt-text);
}

.cvt-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.cvt-related__card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--cvt-text);
	border-radius: var(--cvt-radius, 8px);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	background: var(--cvt-surface, #fff);
}

.cvt-related__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.cvt-related__img {
	aspect-ratio: 16 / 10;
	width: 100%;
	object-fit: cover;
	display: block;
}

.cvt-related__img--placeholder {
	background: var(--cvt-surface-2, #f0f0f0);
}

.cvt-related__body {
	padding: 12px 4px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cvt-related__cat {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cvt-accent, #e8543e);
}

.cvt-related__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 600px) {
	.cvt-related__grid {
		grid-template-columns: 1fr;
	}
	.cvt-related__card {
		flex-direction: row;
		align-items: center;
	}
	.cvt-related__img {
		width: 100px;
		aspect-ratio: 1;
		flex-shrink: 0;
		border-radius: var(--cvt-radius, 8px) 0 0 var(--cvt-radius, 8px);
	}
	.cvt-related__body {
		padding: 8px 12px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. PAGINATION
   ═══════════════════════════════════════════════════════════════════════════ */

.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers span,
.wp-block-query-pagination-previous a,
.wp-block-query-pagination-next a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--cvt-border);
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	color: var(--cvt-text);
	transition: background var(--cvt-duration), color var(--cvt-duration), border-color var(--cvt-duration);
}

.wp-block-query-pagination-numbers .page-numbers.current,
.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-previous:hover a,
.wp-block-query-pagination-next:hover a {
	background: var(--cvt-accent);
	border-color: var(--cvt-accent);
	color: #fff;
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. HERO EDITORIAL (homepage)
   ═══════════════════════════════════════════════════════════════════════════ */

.converto-hero-main {
	overflow: hidden;
	min-width: 0;
}

.converto-hero-main .wp-block-post-title {
	font-size: clamp(20px, 2.5vw, 30px) !important;
	line-height: 1.25;
	font-weight: 800;
	color: var(--cvt-text) !important;
}

.converto-hero-list-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.wp-block-group[class*="footer-bg"] a,
footer a {
	color: var(--cvt-text-inverse);
	text-decoration: none;
}

footer a:hover {
	color: var(--cvt-accent);
}

.converto-social-icons a:hover {
	background: var(--cvt-accent) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. DARK MODE OVERRIDES for WP blocks
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .has-base-background-color,
html[data-theme="dark"] .has-background:not([class*="accent"]) {
	background-color: var(--cvt-bg-secondary) !important;
}

html[data-theme="dark"] .wp-block-separator {
	border-color: var(--cvt-border) !important;
	background-color: var(--cvt-border) !important;
}

html[data-theme="dark"] .has-accent-5-background-color {
	background-color: var(--cvt-bg-tertiary) !important;
}

/* Dark mode — ensure ALL post title links are readable */
html[data-theme="dark"] .converto-list-item .wp-block-post-title a,
html[data-theme="dark"] .converto-sidebar-list-item .wp-block-post-title a,
html[data-theme="dark"] .converto-sidebar .wp-block-post-title a,
html[data-theme="dark"] .converto-posts-list .wp-block-post-title a {
	color: var(--cvt-text) !important;
}

/* Dark mode — section headers readable */
html[data-theme="dark"] .converto-section-header h2 {
	color: var(--cvt-text) !important;
}

/* Dark mode — author card */
html[data-theme="dark"] .wp-block-post-author {
	border-color: var(--cvt-border) !important;
	background: var(--cvt-card-bg) !important;
}

/* Dark mode — ad slot placeholder bg */
html[data-theme="dark"] .cvt-ad-slot {
	background: var(--cvt-bg-secondary) !important;
}

/* Dark mode — list item border colors */
html[data-theme="dark"] .converto-list-item {
	border-color: var(--cvt-border) !important;
}

html[data-theme="dark"] .converto-sidebar-list-item {
	border-color: var(--cvt-border) !important;
}

/* Dark mode — WP preset contrast color (renders #292929 — invisible on dark bg) */
html[data-theme="dark"] .has-contrast-color,
html[data-theme="dark"] [class*="has-contrast"] {
	color: var(--cvt-text) !important;
}

/* Dark mode — hero excerpt text */
html[data-theme="dark"] .converto-hero-main .wp-block-post-excerpt,
html[data-theme="dark"] .converto-hero-main .wp-block-post-excerpt__excerpt {
	color: var(--cvt-text-muted) !important;
}

/* Dark mode — hero main title link (inherits WP contrast #292929) */
html[data-theme="dark"] .converto-hero-main .wp-block-post-title a {
	color: var(--cvt-text) !important;
}

/* Dark mode — hero list item titles and borders */
html[data-theme="dark"] .converto-hero-list-item .wp-block-post-title a {
	color: var(--cvt-text) !important;
}

html[data-theme="dark"] .converto-hero-list-item {
	border-color: var(--cvt-border) !important;
}

/* Dark mode — catch-all: ALL post title links must be readable */
html[data-theme="dark"] .wp-block-post-title a {
	color: var(--cvt-text) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes modalSlideUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   16. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─ Tablet ─────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ─ Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

	/* Sidebar: stack normally */
	.converto-sidebar,
	.wp-block-column.converto-sidebar-col {
		position: static !important;
		max-height: none !important;
		overflow-y: visible !important;
	}

	/* Column stacking */
	.wp-block-columns {
		flex-direction: column !important;
		gap: 0 !important;
	}

	.wp-block-column {
		width: 100% !important;
		flex-basis: 100% !important;
	}

	/* Single column grid */
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}

	/* Mobile lateral padding (12px — amomama exact) */
	.wp-site-blocks>main {
		padding-inline: var(--cvt-content-pad-sm, 12px);
	}

	/* Inline text gets padding */
	.wp-block-post-content p,
	.wp-block-post-content h1,
	.wp-block-post-content h2,
	.wp-block-post-content h3,
	.wp-block-post-content ul,
	.wp-block-post-content ol,
	.wp-block-post-content blockquote {
		padding-inline: 12px;
	}

	/* Full-bleed images ONLY inside post content (not cards/grids/sidebar) */
	.wp-block-post-content .wp-block-image,
	.wp-block-post-content figure {
		margin-inline: -12px !important;
		max-width: calc(100% + 24px) !important;
		width: calc(100% + 24px) !important;
		border-radius: 0 !important;
	}

	/* Single post hero image — full bleed on mobile */
	.single .wp-block-post-featured-image.converto-article-image {
		margin-inline: -12px !important;
		max-width: calc(100% + 24px) !important;
		width: calc(100% + 24px) !important;
		border-radius: 0 !important;
	}

	/* Card/grid/sidebar images — stay contained */
	.converto-card .wp-block-post-featured-image,
	.converto-sidebar .wp-block-post-featured-image,
	.converto-magazine-row .wp-block-post-featured-image {
		margin-inline: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
		overflow: hidden;
	}

	.converto-card .wp-block-post-featured-image img,
	.converto-sidebar .wp-block-post-featured-image img,
	.converto-magazine-row .wp-block-post-featured-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* Typography */
	.wp-block-post-content p,
	.wp-block-post-content li {
		font-size: 18px;
		line-height: 1.6;
	}

	/* Hero/article title — scoped to NOT affect sidebar titles */
	.converto-hero-main .wp-block-post-title,
	.single .wp-block-post-content ~ .wp-block-post-title,
	main > .wp-block-group > .wp-block-post-title,
	.wp-block-post-title.converto-article-title {
		font-size: 22px !important;
		line-height: 1.3 !important;
	}

	/* Prevent sidebar titles from inheriting single post title mobile size */
	.converto-sidebar .wp-block-post-title {
		font-size: 14px !important;
		line-height: 1.4 !important;
		text-transform: none !important;
		letter-spacing: normal !important;
	}

	/* Sidebar section: proper mobile padding */
	.converto-sidebar {
		padding: 0 16px;
	}

	/* Author bio card: breathing room on mobile */
	.wp-block-post-author.has-border-color {
		margin-inline: 12px;
	}

	/* Author row stacks */
	.converto-author-row {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Card featured images: centered on mobile */
	.converto-card .wp-block-post-featured-image {
		display: flex;
		justify-content: center;
	}

	.converto-card .wp-block-post-featured-image img {
		width: 100%;
		object-fit: cover;
	}
	/* Cards: full width, clean on mobile */
	.converto-card {
		border-radius: 0;
		box-shadow: none;
		border-bottom: 1px solid var(--cvt-border);
	}

	/* Brand bar padding tighter on mobile */
	.converto-brand-bar {
		padding-inline: 10px;
		gap: 2px;
	}

	/* Subscribe pill hidden on very narrow screens < 360px */
	@media (max-width: 359px) {
		.cvt-subscribe-trigger {
			display: none;
		}
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   17. DESIGN THEME SYSTEM — 3 Color Variants
   ─────────────────────────────────────────────────────────────────────────
   html[data-color-theme="coral"]   — Default (amomama orange)
   html[data-color-theme="ocean"]   — Ocean Blue (elegant news)
   html[data-color-theme="forest"]  — Forest Green (lifestyle)
   All themes support light + dark mode combinations.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Theme 1: CORAL (Default) — already defined in :root ──────────────────── */
html[data-color-theme="coral"],
html:not([data-color-theme]) {
	/* Accent colors are already the orange defaults */
	--cvt-accent: #D93802;
	--cvt-accent-hover: #b82e00;
	--cvt-accent-muted: rgba(217, 56, 2, 0.08);
	--cvt-header-bg: #292929;
	--cvt-pill-badge-bg: #D93802;
}

html[data-color-theme="coral"][data-theme="dark"] {
	--cvt-accent: #FF6B35;
	--cvt-accent-hover: #ff5518;
}

/* ── Theme 2: OCEAN BLUE — premium editorial ───────────────────────────────── */
html[data-color-theme="ocean"] {
	--cvt-accent: #0066CC;
	--cvt-accent-hover: #0052a3;
	--cvt-accent-muted: rgba(0, 102, 204, 0.08);
	--cvt-header-bg: #003366;
	--cvt-pill-badge-bg: #0066CC;
	--cvt-bg-tertiary: #EBF4FF;
	--cvt-card-shadow: 0 2px 20px rgba(0, 102, 204, 0.08);
}

html[data-color-theme="ocean"][data-theme="dark"] {
	--cvt-accent: #4DA6FF;
	--cvt-accent-hover: #1a8cff;
	--cvt-accent-muted: rgba(77, 166, 255, 0.12);
	--cvt-header-bg: #001833;
	--cvt-bg: #0a0f1a;
	--cvt-bg-secondary: #0d1520;
	--cvt-bg-tertiary: #111b2d;
}

/* Ocean pill nav override */
html[data-color-theme="ocean"] .converto-site-logo-link {
	color: #4DA6FF !important;
}

html[data-color-theme="ocean"] .converto-pill-nav__link.current {
	background: #0066CC;
}

/* ── Theme 3: FOREST GREEN — lifestyle / wellness ──────────────────────────── */
html[data-color-theme="forest"] {
	--cvt-accent: #1A7A4A;
	--cvt-accent-hover: #145f38;
	--cvt-accent-muted: rgba(26, 122, 74, 0.08);
	--cvt-header-bg: #1a2e1d;
	--cvt-pill-badge-bg: #1A7A4A;
	--cvt-bg-tertiary: #EFF7F2;
	--cvt-card-shadow: 0 2px 20px rgba(26, 122, 74, 0.08);
}

html[data-color-theme="forest"][data-theme="dark"] {
	--cvt-accent: #3CB371;
	--cvt-accent-hover: #2e9960;
	--cvt-accent-muted: rgba(60, 179, 113, 0.12);
	--cvt-header-bg: #0d1a0f;
	--cvt-bg: #0a120b;
	--cvt-bg-secondary: #0f1a10;
	--cvt-bg-tertiary: #141f15;
}

html[data-color-theme="forest"] .converto-site-logo-link {
	color: #3CB371 !important;
}

html[data-color-theme="forest"] .converto-pill-nav__link.current {
	background: #1A7A4A;
}

html[data-color-theme="forest"] .cvt-subscribe-trigger {
	background: #1A7A4A;
}

html[data-color-theme="forest"] .cvt-subscribe-trigger:hover {
	background: #145f38 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   18. LAYOUT VARIANTS
   ─────────────────────────────────────────────────────────────────────────
   html[data-layout="default"]   — Standard (current)
   html[data-layout="compact"]   — Tighter spacing, smaller type, more posts
   html[data-layout="magazine"]  — Wider cards, bold big images, editorial feel
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── COMPACT layout ─────────────────────────────────────────────────────── */
html[data-layout="compact"] {
	--cvt-header-h: 48px;
	--cvt-pill-nav-h: 38px;
	--cvt-card-radius: 6px;
	--cvt-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

html[data-layout="compact"] .converto-card {
	border-radius: 6px;
}

html[data-layout="compact"] .converto-card__body {
	padding: 10px 14px 14px;
	gap: 4px;
}

html[data-layout="compact"] .converto-card__body .wp-block-post-title {
	font-size: clamp(14px, 1.2vw, 17px) !important;
}

html[data-layout="compact"] .wp-block-post-template.is-layout-grid {
	gap: 12px !important;
}

html[data-layout="compact"] .converto-section-header {
	margin-bottom: 14px;
}

html[data-layout="compact"] .wp-block-post-content p,
html[data-layout="compact"] .wp-block-post-content li {
	font-size: 17px;
}

/* 4-column grid in compact mode on large screens */
@media (min-width: 1200px) {
	html[data-layout="compact"] .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(4, 1fr) !important;
	}
}

/* ── MAGAZINE layout ─────────────────────────────────────────────────────── */
html[data-layout="magazine"] {
	--cvt-card-radius: 0px;
	--cvt-card-shadow: none;
}

html[data-layout="magazine"] .converto-card {
	border-radius: 0;
	box-shadow: none;
	border-bottom: 1px solid var(--cvt-border);
}

html[data-layout="magazine"] .converto-card .wp-block-post-featured-image {
	aspect-ratio: 16 / 9;
	border-radius: 0;
}

html[data-layout="magazine"] .converto-card__body {
	padding: 16px 0 20px;
}

html[data-layout="magazine"] .converto-card__body .wp-block-post-title {
	font-size: clamp(18px, 2vw, 26px) !important;
	line-height: 1.25 !important;
	letter-spacing: -0.02em !important;
}

html[data-layout="magazine"] .converto-site-logo-link {
	font-size: clamp(20px, 2.5vw, 30px);
	letter-spacing: -0.04em;
	font-style: normal;
	text-transform: uppercase;
	font-weight: 900;
}

html[data-layout="magazine"] .converto-hero-main .wp-block-post-title {
	font-size: clamp(28px, 3.5vw, 44px) !important;
	line-height: 1.1 !important;
}

/* Magazine puts images 16:9 everywhere */
html[data-layout="magazine"] .converto-hero-list-item .wp-block-post-featured-image {
	aspect-ratio: 16 / 9;
	width: 120px;
	min-width: 120px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   19. THEME SELECTOR PANEL
   ─────────────────────────────────────────────────────────────────────────
   Floating settings panel accessible via a gear icon in the header.
   Users can switch color themes and layouts in real-time.
   ═══════════════════════════════════════════════════════════════════════════ */

.cvt-theme-panel {
	position: fixed;
	bottom: 80px;
	right: 20px;
	z-index: 900;
	background: var(--cvt-card-bg);
	border: 1px solid var(--cvt-border);
	border-radius: 12px;
	padding: 20px;
	min-width: 220px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
	display: none;
	flex-direction: column;
	gap: 16px;
	transition: background var(--cvt-duration);
}

.cvt-theme-panel.is-open {
	display: flex;
	animation: modalSlideUp 0.2s ease;
}

.cvt-theme-panel__title {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--cvt-text-muted);
	margin: 0;
}

.cvt-theme-panel__group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cvt-theme-panel__group-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cvt-text-subtle);
}

.cvt-theme-panel__swatches {
	display: flex;
	gap: 8px;
}

.cvt-theme-swatch {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 3px solid transparent;
	cursor: pointer;
	transition: border-color 0.15s, transform 0.15s;
	outline: none;
}

.cvt-theme-swatch:hover {
	transform: scale(1.1);
}

.cvt-theme-swatch.is-active {
	border-color: var(--cvt-text);
}

.cvt-theme-swatch--coral {
	background: #D93802;
}

.cvt-theme-swatch--ocean {
	background: #0066CC;
}

.cvt-theme-swatch--forest {
	background: #1A7A4A;
}

.cvt-layout-btns {
	display: flex;
	gap: 6px;
}

.cvt-layout-btn {
	flex: 1;
	padding: 6px 4px;
	font-size: 11px;
	font-weight: 700;
	border: 1.5px solid var(--cvt-border);
	border-radius: 6px;
	background: none;
	color: var(--cvt-text);
	cursor: pointer;
	transition: all 0.15s;
	text-align: center;
}

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

.cvt-layout-btn.is-active {
	border-color: var(--cvt-accent);
	background: var(--cvt-accent-muted);
	color: var(--cvt-accent);
}

/* Gear/settings toggle button */
.cvt-theme-panel-toggle {
	position: fixed;
	bottom: 24px;
	right: 20px;
	z-index: 901;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--cvt-accent);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	transition: background var(--cvt-duration), transform var(--cvt-duration);
}

.cvt-theme-panel-toggle:hover {
	background: var(--cvt-accent-hover);
	transform: rotate(30deg);
}

.cvt-theme-panel-toggle svg {
	transition: transform 0.3s;
}


/* ═══════════════════════════════════════════════════════════════════════════
   20. AUTHOR CARD — PREMIUM DESIGN
   ─────────────────────────────────────────────────────────────────────────
   Rich author bio card with gradient accent bar, avatar, social links.
   ═══════════════════════════════════════════════════════════════════════════ */

.converto-author-card,
.wp-block-post-author {
	display: flex;
	gap: 20px;
	padding: 28px;
	border-radius: 12px;
	background: var(--cvt-bg);
	border: 1px solid var(--cvt-border);
	position: relative;
	overflow: hidden;
	align-items: flex-start;
	transition: background var(--cvt-duration);
}

/* Top accent bar */
.converto-author-card::before,
.wp-block-post-author::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--cvt-accent), transparent);
}

/* Avatar */
.wp-block-post-author__avatar,
.converto-author-card__avatar-wrap {
	flex-shrink: 0;
}

.wp-block-post-author__avatar img,
.converto-author-card__avatar-wrap img {
	width: 72px !important;
	height: 72px !important;
	min-width: 72px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 3px solid var(--cvt-accent) !important;
	display: block;
}

/* Content area */
.wp-block-post-author__content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* "Written by" label */
.wp-block-post-author__byline,
.converto-author-card__byline {
	display: block;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--cvt-accent);
	margin: 0 0 2px;
}

/* Author name */
.wp-block-post-author__name,
.converto-author-card__name {
	font-size: 18px;
	font-weight: 800;
	color: var(--cvt-text);
	margin: 0;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

/* Author bio */
.wp-block-post-author__bio,
.converto-author-card__bio {
	font-size: 14px !important;
	line-height: 1.65;
	color: var(--cvt-text-muted);
	margin: 4px 0 0 !important;
}

/* Social link row inside author card */
.converto-author-card__social {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.converto-author-card__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--cvt-bg-secondary);
	color: var(--cvt-text-muted);
	font-size: 13px;
	transition: background var(--cvt-duration), color var(--cvt-duration);
}

.converto-author-card__social a:hover {
	background: var(--cvt-accent);
	color: #fff;
}

/* Post count badge */
.converto-author-card__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.converto-author-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	background: var(--cvt-accent-muted);
	color: var(--cvt-accent);
	border-radius: 999px;
	padding: 3px 10px;
}

.converto-author-card__badge svg {
	flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   21. PWA INSTALL BANNER
   ═══════════════════════════════════════════════════════════════════════════ */

.cvt-pwa-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--cvt-header-bg);
	color: var(--cvt-header-text);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
	transform: translateY(100%);
	transition: transform 0.35s var(--cvt-ease-out);
}

.cvt-pwa-banner.is-visible {
	transform: translateY(0);
}

.cvt-pwa-banner.is-hiding {
	transform: translateY(100%);
}

.cvt-pwa-banner__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
}

.cvt-pwa-banner__icon svg {
	width: 40px;
	height: 40px;
	border-radius: 10px;
}

.cvt-pwa-banner__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cvt-pwa-banner__text strong {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.cvt-pwa-banner__text span {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
}

.cvt-pwa-banner__btn {
	flex-shrink: 0;
	border: none;
	cursor: pointer;
	border-radius: 6px;
	font-weight: 700;
	transition: opacity var(--cvt-duration);
}

.cvt-pwa-banner__btn:hover {
	opacity: 0.85;
}

.cvt-pwa-banner__install {
	background: var(--cvt-accent);
	color: #fff;
	padding: 8px 18px;
	font-size: 14px;
}

.cvt-pwa-banner__dismiss {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.7);
	padding: 8px 10px;
	font-size: 16px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   22. IMAGE NORMALIZATION — ALL REMAINING COMPONENTS
   ─────────────────────────────────────────────────────────────────────────
   Ensures every single image location across all pages is normalized:
   correct aspect ratios, object-fit, never overflow containers.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Posts list thumbnails (posts-list.php) */
.converto-list-item .wp-block-post-featured-image,
.converto-posts-list .wp-block-post-featured-image {
	aspect-ratio: 4 / 3;
	width: 110px;
	min-width: 110px;
	border-radius: 4px;
	overflow: hidden;
	flex-shrink: 0;
}

.converto-list-item .wp-block-post-featured-image img,
.converto-posts-list .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* Hero editorial: RIGHT column mini-list thumbnails */
.converto-hero-list-item .wp-block-post-featured-image {
	border-radius: 6px;
	overflow: hidden;
}

.converto-hero-list-item .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* Sidebar top-news thumbnails */
.converto-sidebar .wp-block-post-featured-image {
	aspect-ratio: 4 / 3;
	width: 90px;
	min-width: 90px;
	border-radius: 3px;
	overflow: hidden;
	flex-shrink: 0;
}

.converto-sidebar .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* Archive page hero image */
.page-archive .wp-block-post-featured-image,
.page-category .wp-block-post-featured-image {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.page-archive .wp-block-post-featured-image img,
.page-category .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* WP Core image blocks — normalize overflow */
.wp-block-image {
	overflow: hidden;
	max-width: 100%;
}

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

.wp-block-image.alignfull,
.wp-block-image.alignwide {
	overflow: hidden;
}

.wp-block-image.alignfull img,
.wp-block-image.alignwide img {
	object-fit: cover;
}

/* Lazy-loaded images — prevent layout shift */
img[loading="lazy"] {
	min-height: 1px;
	/* force browser to allocate space */
}

/* Placeholder shimmer for lazy images before load */
.wp-block-post-featured-image::before {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--cvt-bg-secondary) 25%, var(--cvt-bg-tertiary) 50%, var(--cvt-bg-secondary) 75%);
	background-size: 200% 100%;
	animation: shimmer 1.6s infinite;
}

.wp-block-post-featured-image {
	position: relative;
}

.wp-block-post-featured-image img {
	position: relative;
	z-index: 1;
}

@keyframes shimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

/* Media attachment pages */
.attachment .wp-block-image img,
.attachment figure img {
	max-width: 100%;
	height: auto;
}

/* Search results — normalize card images */
.page-search .converto-card .wp-block-post-featured-image {
	aspect-ratio: 3 / 2;
}


/* ═══════════════════════════════════════════════════════════════════════════
   23. MOBILE FINAL POLISH
   ─────────────────────────────────────────────────────────────────────────
   Additional mobile-specific refinements not covered in section 16.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

	/* PWA banner narrower layout */
	.cvt-pwa-banner {
		padding: 12px;
		gap: 8px;
	}

	.cvt-pwa-banner__text strong {
		font-size: 13px;
	}

	.cvt-pwa-banner__text span {
		display: none;
	}

	/* hide subtitle to save space */
	.cvt-pwa-banner__install {
		padding: 8px 14px;
		font-size: 13px;
	}

	/* Theme panel goes bottom-full on mobile */
	.cvt-theme-panel {
		bottom: 80px;
		right: 10px;
		left: 10px;
		min-width: auto;
	}

	.cvt-theme-panel-toggle {
		bottom: 20px;
		right: 14px;
	}

	/* Hero editorial stacks on mobile */
	.converto-hero-main,
	.converto-hero-list-item {
		width: 100% !important;
	}

	/* Hero right-column list is horizontal scroll on mobile */
	.wp-block-column:has(.converto-hero-list-item) {
		overflow-x: auto;
		display: flex;
		flex-direction: row;
		gap: 12px;
	}

	.converto-hero-list-item {
		min-width: 160px;
		flex-direction: column;
		align-items: flex-start;
	}

	.converto-hero-list-item .wp-block-post-featured-image {
		width: 100%;
		min-width: unset;
		aspect-ratio: 16 / 9;
	}

	/* Post list items — vertical stack on mobile for readability */
	.converto-list-item {
		flex-direction: column !important;
	}

	.converto-list-item .wp-block-post-featured-image {
		width: 100% !important;
		min-width: unset !important;
		aspect-ratio: 16 / 9;
	}

	/* Author card stacks on mobile */
	.converto-author-card,
	.wp-block-post-author {
		flex-direction: column;
		gap: 12px;
		padding: 20px;
	}

	.wp-block-post-author__avatar img,
	.converto-author-card__avatar-wrap img {
		width: 56px !important;
		height: 56px !important;
		min-width: 56px !important;
	}

	/* Section headers: tighter on mobile */
	.converto-section-header {
		margin-bottom: 16px;
	}

	/* Footer: full stack */
	footer .wp-block-columns {
		flex-direction: column !important;
		gap: 32px !important;
	}

	footer .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	/* Sidebar in single posts: hidden on mobile — scrolls below content */
	.converto-sidebar-col {
		display: block !important;
	}

	/* Ad slots on mobile — no minimum height constraint */
	.cvt-ad-slot {
		min-height: 100px !important;
	}

	/* WP block padding reset for mobile */
	.wp-block-group.alignfull {
		padding-inline: 12px !important;
	}

	/* Tags cloud normalize */
	.wp-block-post-terms {
		font-size: 12px;
	}

	/* Pagination on mobile  */
	.wp-block-query-pagination {
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px;
	}
}

/* Touch target size compliance (WCAG 2.5.5) */
@media (pointer: coarse) {
	.converto-pill-nav__link {
		padding-inline: 16px;
	}

	.converto-hamburger,
	.converto-search-btn,
	.cvt-subscribe-trigger,
	#cvt-theme-toggle {
		min-height: 44px;
		min-width: 44px;
	}

	.cvt-pwa-banner__install {
		min-height: 44px;
	}

	.wp-block-query-pagination-numbers a,
	.wp-block-query-pagination-previous a,
	.wp-block-query-pagination-next a {
		min-height: 44px;
		min-width: 44px;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   24. THEME SELECTOR PANEL HTML (generated dynamically by pwa.js,
   but CSS handles its appearance here)
   Also: Theme Toggle Quick Access in Header for Color Themes
   ═══════════════════════════════════════════════════════════════════════════ */

/* Color theme dots in the header — small indicator of current color theme */
.cvt-active-theme-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cvt-accent);
	display: inline-block;
	margin-left: 4px;
	vertical-align: middle;
}


/* ═══════════════════════════════════════════════════════════════════════════
   25. PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {

	.converto-header,
	.converto-drawer,
	.converto-drawer-overlay,
	.converto-category-nav,
	.cvt-subscribe-modal,
	.cvt-pwa-banner,
	.cvt-push-banner,
	.cvt-theme-panel,
	.cvt-theme-panel-toggle,
	.converto-author-card__social,
	footer nav,
	.wp-block-query-pagination,
	.converto-share-buttons {
		display: none !important;
	}

	body {
		padding-top: 0 !important;
	}

	a[href]::after {
		content: ' (' attr(href) ')';
		font-size: 80%;
		color: #666;
	}

	.wp-block-post-featured-image img {
		max-height: 300px;
		object-fit: contain;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEMBER MODAL — WP Login / Register (replace old newsletter modal)
   ─────────────────────────────────────────────────────────────────────────
   The modal shell (.cvt-subscribe-modal, backdrop, box, close btn) is
   already styled in the Subscribe Modal section above. This section adds
   the auth-specific elements: tabs, form fields, buttons, logged-in state.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tab navigation ─────────────────────────────────────────────────────── */
.cvt-auth-tabs {
	display: flex;
	gap: 2px;
	border-bottom: 2px solid var(--cvt-border);
	margin-bottom: var(--cvt-space-6);
}

.cvt-auth-tab {
	flex: 1;
	padding: var(--cvt-space-3) var(--cvt-space-4);
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	font: 600 14px/1 var(--cvt-font-body);
	color: var(--cvt-text-muted);
	cursor: pointer;
	transition: color .15s, border-color .15s;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.cvt-auth-tab:hover {
	color: var(--cvt-text);
}

.cvt-auth-tab.is-active {
	color: var(--cvt-accent);
	border-bottom-color: var(--cvt-accent);
}

/* ── Auth panel ─────────────────────────────────────────────────────────── */
.cvt-auth-panel {
	display: none;
}

.cvt-auth-panel.is-active {
	display: block;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.cvt-field {
	display: flex;
	flex-direction: column;
	gap: var(--cvt-space-2);
	margin-bottom: var(--cvt-space-4);
}

.cvt-field label {
	font: 600 12px/1 var(--cvt-font-body);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--cvt-text-muted);
}

/* Re-use the existing .cvt-subscribe-modal__input for actual input elements */
.cvt-auth-form .cvt-subscribe-modal__input {
	width: 100%;
	padding: 12px 14px;
	background: var(--cvt-bg-2);
	border: 1.5px solid var(--cvt-border);
	border-radius: var(--cvt-radius);
	color: var(--cvt-text);
	font: 400 15px/1 var(--cvt-font-body);
	transition: border-color .2s;
}

.cvt-auth-form .cvt-subscribe-modal__input:focus {
	outline: none;
	border-color: var(--cvt-accent);
	box-shadow: 0 0 0 3px var(--cvt-accent-muted);
}

/* ── Remember me / forgot password row ─────────────────────────────────── */
.cvt-auth-form__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--cvt-space-5);
	gap: var(--cvt-space-3);
	flex-wrap: wrap;
}

.cvt-checkbox-label {
	display: flex;
	align-items: center;
	gap: var(--cvt-space-2);
	font-size: 13px;
	color: var(--cvt-text-muted);
	cursor: pointer;
	user-select: none;
}

.cvt-checkbox-label input[type="checkbox"] {
	accent-color: var(--cvt-accent);
	width: 15px;
	height: 15px;
}

.cvt-auth-form__forgot {
	font-size: 13px;
	color: var(--cvt-accent);
	text-decoration: none;
}

.cvt-auth-form__forgot:hover {
	text-decoration: underline;
}

/* ── Account push-toggle row ─────────────────────────────────────────────── */
.cvt-account-push-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--cvt-space-4) 0;
	margin-top: var(--cvt-space-5);
	border-top: 1px solid rgba(128, 128, 128, 0.15);
	border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.cvt-account-push-row__left {
	display: flex;
	align-items: center;
	gap: var(--cvt-space-3);
	font-size: 0.9375rem;
	font-weight: 500;
}

.cvt-account-push-row__left svg {
	flex-shrink: 0;
	opacity: 0.7;
}

/* ── Toggle switch (reusable) ────────────────────────────────────────────── */
.cvt-toggle {
	appearance: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
}

.cvt-toggle__track {
	display: block;
	width: 44px;
	height: 24px;
	border-radius: 12px;
	background: rgba(128, 128, 128, 0.3);
	position: relative;
	transition: background 0.2s ease;
	pointer-events: none;
}

.cvt-toggle__thumb {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	position: absolute;
	top: 3px;
	left: 3px;
	transition: transform 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.cvt-toggle.is-on .cvt-toggle__track {
	background: var(--cvt-accent, #e54d2e);
}

.cvt-toggle.is-on .cvt-toggle__thumb {
	transform: translateX(20px);
}

.cvt-toggle:hover .cvt-toggle__track {
	background: rgba(128, 128, 128, 0.45);
}

.cvt-toggle.is-on:hover .cvt-toggle__track {
	background: color-mix(in srgb, var(--cvt-accent, #e54d2e), #000 10%);
}

/* ── Logged-in welcome state ─────────────────────────────────────────────── */
.cvt-auth-links {
	display: flex;
	flex-direction: column;
	gap: var(--cvt-space-3);
	margin-top: var(--cvt-space-5);
}

/* ── Button utilities ────────────────────────────────────────────────────── */
.cvt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 20px;
	border-radius: var(--cvt-radius);
	font: 700 14px/1 var(--cvt-font-body);
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background .2s, color .2s, border-color .2s;
}

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

.cvt-btn--primary:hover {
	background: var(--cvt-accent-hover);
	border-color: var(--cvt-accent-hover);
}

.cvt-btn--ghost {
	background: transparent;
	color: var(--cvt-text-muted);
	border-color: var(--cvt-border);
}

.cvt-btn--ghost:hover {
	color: var(--cvt-text);
	border-color: var(--cvt-text-muted);
}

/* ── Subscribe modal box — wider for auth forms ─────────────────────────── */
/* Override the box max-width defined above for the auth variant */
.cvt-subscribe-modal__box {
	max-width: 420px;
	/* slightly wider to fit form comfortably */
}

@media (max-width: 480px) {
	.cvt-auth-tabs {
		gap: 0;
	}

	.cvt-auth-tab {
		font-size: 12px;
		padding: 10px var(--cvt-space-3);
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEW PATTERN STYLES — v1.3 variants
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: Breaking News ─────────────────────────────────────────────────── */
.converto-breaking-hero {
	overflow: hidden;
	line-height: 0;
	/* collapse inline gap under image */
}

.converto-breaking-hero .wp-block-post-featured-image img {
	width: 100%;
	height: clamp(260px, 45vw, 620px);
	object-fit: cover;
	display: block;
}

.converto-breaking-hero__overlay {
	line-height: normal;
}

.converto-breaking-hero__overlay .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.converto-breaking-hero__overlay .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

@media (max-width: 600px) {
	.converto-breaking-hero .wp-block-post-featured-image img {
		height: 220px;
	}

	.converto-breaking-hero__overlay {
		padding: var(--cvt-space-5) !important;
	}
}

/* ── Posts: Magazine List rows ───────────────────────────────────────────── */
.converto-magazine-row .wp-block-post-featured-image {
	flex-shrink: 0;
}

.converto-magazine-row .wp-block-post-featured-image img {
	width: clamp(160px, 22vw, 280px);
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: 12px;
}

.converto-magazine-row .wp-block-read-more {
	font-weight: 700;
	font-size: var(--cvt-font-size-sm);
	color: var(--cvt-accent);
	text-decoration: none;
}

.converto-magazine-row .wp-block-read-more:hover {
	text-decoration: underline;
}

@media (max-width: 640px) {
	.converto-magazine-row {
		flex-wrap: wrap !important;
	}

	.converto-magazine-row .wp-block-post-featured-image img {
		width: 100%;
		border-radius: 8px 8px 0 0;
		aspect-ratio: 16 / 9;
	}
}

/* ── Sidebar: Categories widget ─────────────────────────────────────────── */
.converto-widget .wp-block-categories-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.converto-widget .wp-block-categories-list li {
	padding: var(--cvt-space-2) 0;
	border-bottom: 1px solid var(--cvt-border);
	font-size: var(--cvt-font-size-sm);
}

.converto-widget .wp-block-categories-list li:last-child {
	border-bottom: none;
}

.converto-widget .wp-block-categories-list a {
	color: var(--cvt-text);
	text-decoration: none;
	font-weight: 500;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.converto-widget .wp-block-categories-list a:hover {
	color: var(--cvt-accent);
}

/* ── CTA: Member Banner ──────────────────────────────────────────────────── */
.converto-cta-member {
	text-align: center;
}

.converto-cta-member .wp-block-buttons {
	justify-content: center;
}

@media (max-width: 480px) {
	.converto-cta-member .wp-block-buttons {
		flex-direction: column;
		align-items: center;
	}

	.converto-cta-member .wp-block-buttons button {
		width: 100%;
		max-width: 320px;
	}
}

/* ── Archive: Magazine 2-col sidebar layout ─────────────────────────────── */
.converto-archive-with-sidebar {
	align-items: flex-start;
}

@media (max-width: 900px) {
	.converto-archive-with-sidebar {
		flex-direction: column;
	}

	.converto-archive-with-sidebar .converto-sidebar {
		width: 100% !important;
		max-width: 100%;
		flex-basis: auto !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.4 PATCH — Mobile Nav, Button Contrast, Author Row, PWA Banner
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Category pill nav: HIDDEN on mobile ──────────────────────────────── */
@media (max-width: 767px) {
	.converto-category-nav {
		display: none;
	}

	/* Reduce total-header-h to just the brand bar on mobile (no pill row) */
	body {
		padding-top: var(--cvt-header-h);
	}
}

/* ── 2. Button contrast — light and dark mode ────────────────────────────── */

/* Primary button: always orange bg, always white text */
.cvt-btn--primary,
a.cvt-btn--primary {
	background: var(--cvt-accent) !important;
	color: #fff !important;
	border-color: var(--cvt-accent) !important;
}

.cvt-btn--primary:hover,
a.cvt-btn--primary:hover {
	background: var(--cvt-accent-hover) !important;
	border-color: var(--cvt-accent-hover) !important;
	color: #fff !important;
}

/* Ghost button: strong border + visible text on both themes */
.cvt-btn--ghost,
a.cvt-btn--ghost {
	background: transparent !important;
	color: var(--cvt-text) !important;
	border-color: var(--cvt-border-strong) !important;
}

.cvt-btn--ghost:hover,
a.cvt-btn--ghost:hover {
	border-color: var(--cvt-text-muted) !important;
	color: var(--cvt-text) !important;
}

/* WP native block button (wp-element-button) — dark mode fix */
.wp-block-button__link.wp-element-button {
	/* WP injects inline styles; ensure text stays visible */
	text-decoration: none;
}

html[data-theme="dark"] .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	/* Ensure white text on dark bg for default style buttons */
	color: #fff;
}

html[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link {
	/* Ghost outline: accent colour border + text */
	color: var(--cvt-accent);
	border-color: var(--cvt-accent);
}

/* Subscribe modal submit — always readable */
.cvt-subscribe-modal__submit {
	background: var(--cvt-accent) !important;
	color: #fff !important;
}

/* Auth links (Dashboard, Sign out) in modal */
.cvt-auth-links .cvt-btn--ghost {
	color: var(--cvt-text) !important;
	border-color: var(--cvt-border-strong) !important;
}

/* ── 3. Author row — compact, date stacked under name ────────────────────── */
.converto-author-row {
	gap: var(--cvt-space-4, 16px);
}

.converto-author-row__meta {
	align-items: center;
}

/* Ensure the wp-block-post-author avatar-only variant (showName=false)
   shows only the avatar circle, no trailing space */
.converto-author-row .wp-block-post-author {
	flex-shrink: 0;
}

/* Remove premium gradient bar from author row blocks */
.converto-author-row .wp-block-post-author::before {
	display: none !important;
}

.converto-author-row .wp-block-post-author .wp-block-post-author__avatar {
	margin: 0;
}

/* Avatar-only block (first child of the meta row): hide name, show avatar */
.converto-author-row__meta > .wp-block-post-author > .wp-block-post-author__content {
	display: none !important;
}

.converto-author-row__meta > .wp-block-post-author > .wp-block-post-author__avatar {
	display: block !important;
}

/* Name-only post-author (inside the vertical stacking group) */
.converto-author-row__meta .is-vertical > .wp-block-post-author .wp-block-post-author__avatar {
	display: none !important;
}

.converto-author-row__meta .is-vertical > .wp-block-post-author .wp-block-post-author__content {
	display: block !important;
}

/* Date under name */
.converto-author-row .wp-block-post-date {
	font-size: 12px;
	color: var(--cvt-text-muted);
	margin: 0;
	line-height: 1;
}

/* ── 4. PWA Install Banner — styled with dark mode support ───────────────── */
.cvt-pwa-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 40px 12px 16px;
	background: var(--cvt-modal-bg);
	border-top: 1px solid var(--cvt-border);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
	transform: translateY(110%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cvt-pwa-banner.is-visible {
	transform: translateY(0);
}

.cvt-pwa-banner.is-hiding {
	transform: translateY(110%);
}

.cvt-pwa-banner__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	overflow: hidden;
}

.cvt-pwa-banner__icon svg {
	display: block;
	width: 44px;
	height: 44px;
}

.cvt-pwa-banner__text {
	flex: 1;
	min-width: 0;
}

.cvt-pwa-banner__text strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--cvt-text);
	line-height: 1.3;
}

.cvt-pwa-banner__text span {
	display: block;
	font-size: 12px;
	color: var(--cvt-text-muted);
	margin-top: 2px;
}

.cvt-pwa-banner__btn {
	flex-shrink: 0;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	border: none;
	transition: background 0.2s, color 0.2s;
}

.cvt-pwa-banner__install {
	background: var(--cvt-accent);
	color: #fff;
}

.cvt-pwa-banner__install:hover {
	background: var(--cvt-accent-hover);
}

.cvt-pwa-banner__dismiss {
	position: absolute;
	top: 4px;
	right: 4px;
	background: transparent;
	color: var(--cvt-text-muted);
	padding: 4px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
	border-radius: 50%;
	transition: background 0.15s, color 0.15s;
}

.cvt-pwa-banner__dismiss:hover {
	color: var(--cvt-text);
	background: var(--cvt-bg-2, rgba(0,0,0,0.05));
}

/* Dark mode for banner */
html[data-theme="dark"] .cvt-pwa-banner {
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
}

/* ── 5. Push Notification Opt-In Banner ──────────────────────────────────── */
/* Same visual language as the PWA install banner, positioned above it */
.cvt-push-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1999;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 40px 12px 16px;
	background: var(--cvt-modal-bg);
	border-top: 1px solid var(--cvt-border);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
	transform: translateY(110%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cvt-push-banner.is-visible {
	transform: translateY(0);
}

.cvt-push-banner.is-hiding {
	transform: translateY(110%);
}

.cvt-push-banner__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--cvt-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cvt-push-banner__icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.cvt-push-banner__text {
	flex: 1;
	min-width: 0;
}

.cvt-push-banner__text strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--cvt-text);
	line-height: 1.3;
}

.cvt-push-banner__text span {
	display: block;
	font-size: 12px;
	color: var(--cvt-text-muted);
	margin-top: 2px;
}

.cvt-push-banner__btn {
	flex-shrink: 0;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	border: none;
	transition: background 0.2s, color 0.2s;
}

.cvt-push-banner__enable {
	background: var(--cvt-accent);
	color: #fff;
}

.cvt-push-banner__enable:hover {
	background: var(--cvt-accent-hover);
}

.cvt-push-banner__dismiss {
	position: absolute;
	top: 4px;
	right: 4px;
	background: transparent;
	color: var(--cvt-text-muted);
	padding: 4px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
	border-radius: 50%;
	transition: background 0.15s, color 0.15s;
}

.cvt-push-banner__dismiss:hover {
	color: var(--cvt-text);
	background: var(--cvt-bg-2, rgba(0,0,0,0.05));
}

html[data-theme="dark"] .cvt-push-banner {
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
}

/* If both banners are visible, push banner sits above the install banner */
.cvt-pwa-banner.is-visible ~ .cvt-push-banner.is-visible,
.cvt-push-banner.is-visible:has(~ .cvt-pwa-banner.is-visible) {
	bottom: 76px; /* Height of the install banner + gap */
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT & DESIGN SYSTEM FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fix 3 — Main element: no margin-top */
main.wp-block-group {
	margin-top: 0 !important;
}

/* Fix 4 — Post content: prevent text overflow */
.wp-block-post-content {
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Fix 6 — CTA subscribe button: override header trigger white text */
.cvt-cta-subscribe {
	background: #fff !important;
	color: var(--cvt-accent) !important;
	padding: 14px 32px !important;
	font-size: 16px !important;
	height: auto !important;
	width: auto !important;
}

.cvt-cta-subscribe:hover {
	background: #fff !important;
	opacity: 0.9;
}

/* Fix 7 — Header/footer: no wrapper margins */
.converto-header {
	margin: 0;
}

footer.wp-block-group {
	margin: 0;
}

/* Single page — article column uses full width now */
.converto-article-col {
	overflow: visible;
}