/* ── "← Previous: Name" button — sits above breadcrumbs ──────────────── */
#ezis-prev-btn {
	text-align: center;
	padding: 10px 0;
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 0;
}

/* Styled to match .ezis-heading so it reads as part of the same nav system */
#ezis-prev-trigger {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 700;
	font-family: inherit;
	color: #aaa;
	padding: 0;
	transition: color .15s;
}

#ezis-prev-trigger:hover {
	color: #555;
}

#ezis-prev-trigger:disabled {
	cursor: default;
	opacity: .5;
}

body.darkmode #ezis-prev-btn {
	border-bottom-color: #333;
}

body.darkmode #ezis-prev-trigger:hover {
	color: #ddd;
}

/* ── "Most recent article" message (shown when no newer post exists) ────── */
.ezis-prev-end {
	text-align: center;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #ccc;
	padding: 10px 0;
}

body.darkmode .ezis-prev-end {
	color: #555;
}

/* ── Upward mount (prev posts prepended here, above breadcrumbs) ────────── */
#ezis-prev-mount {
	/* No extra margin — first child's divider handles top spacing */
}

/* ── Downward mount container ─────────────────────────────────────────── */
#ezis-mount {
	/* Sits inside #wi-main — no extra margin needed at the top */
}

/* ── Breadcrumb styling preserved after neutralizeEzoicHooks renames it ──
   Token renamed only to dodge Ad Inserter's html_selector — the actual
   visual override (padding/centering, since the theme's own breadcrumb
   styling doesn't apply to a renamed class) lives in the v1.3.11 rule
   further down this file. */
.ezis-breadcrumbs {
}

/* ── Divider between posts ─────────────────────────────────────────────── */
.ezis-divider {
	border: none;
	border-top: 1px solid #e0e0e0;
	margin: 48px 0 0;
}

body.darkmode .ezis-divider {
	border-top-color: #333;
}

/* ── "Next: Post Title" label ─────────────────────────────────────────── */
.ezis-heading {
	padding: 10px 0 28px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #aaa;
	text-align: center;
}

.ezis-heading a {
	color: inherit;
	text-decoration: none;
	font-weight: 700;
}

.ezis-heading a:hover {
	color: #555;
}

/* ── Injected article ─────────────────────────────────────────────────── */
.ezis-post {
	/* Inherits all #wi-main styles — no overrides needed for text/headings */
}

/* ── Injected Ezoic ad slots (anchor boxes for id-less showAds) ─────────── */
.ezis-ad {
	margin: 8px auto;
	text-align: center;
	clear: both;
}

/* The id-less showAds API inserts the ad div (data-inserter="sa-idless") as
   the NEXT SIBLING of our anchor box — reserve the creative's exact height
   there so the page never shifts when the ad renders. Phones request
   300x250/336x280 (mobile_sizes); 250px stays the base reservation since a
   280px floor would leave a gap under every 300x250 fill. text-align:center
   because the inserted sibling is a new element next to our (centered) anchor
   box — it doesn't inherit the anchor's text-align, so without this Ezoic's
   inline-block wrapper span/ins can render off-center. */
.ezis-ad + [data-inserter="sa-idless"] {
	min-height: 250px; /* phones: 300x250 or 336x280 */
	text-align: center;
}

/* GAM's creative container is a fixed-width block div (inline width, no
   margin) — text-align on the wrapper can't center a block, so give the
   container auto side margins. Scoped to our inserted slots only. The
   !important guards against theme/ad-css margin resets; the attribute
   selector catches both the `_container__` div and any variant. */
.ezis-ad + [data-inserter="sa-idless"] div[id*="google_ads_iframe"] {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Header-bidding direct creatives are a bare iframe (no GAM container div);
   theme CSS makes iframes display:block, so text-align can't center them and
   their inline margin:0 keeps them flush left. Auto side margins center the
   block case; inline iframes ignore auto margins and keep centering via
   text-align. Scoped to our inserted slots only. */
.ezis-ad + [data-inserter="sa-idless"] iframe {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Desktop/tablet request 728x90/970x90/970x250 (desktop_sizes) — a leaderboard/
   billboard, not the phone's 300x250/336x280. 90px is the smallest guaranteed
   fill height; a 250px-tall 970x250 fill grows the box once, below the fold,
   rather than reserving 250px up front and leaving a 160px permanent gap
   under every 90px-tall fill. 768px matches the phone/tablet+desktop
   breakpoint isPhone()/resolveDeviceSizes use elsewhere in this plugin. */
@media ( min-width: 768px ) {
	.ezis-ad + [data-inserter="sa-idless"] {
		min-height: 90px;
	}
}

.ezis-carpet-ad + [data-inserter="sa-idless"] {
	/* Reservation matches the smallest guaranteed fill (300x250) — sol may
	   add a 300x600 flying-carpet secondary, but that only renders once GAM
	   actually wins with it, at which point the box grows once, below the
	   fold. Reserving for the 300x600 up front would leave a permanent gap
	   under every 300x250/336x280 fill. */
	min-height: 250px;
}

/* TOP requests 320x100/320x50 on phones (a title-ad size), not the generic
   in-article 300x250/336x280 — 50px is the smallest guaranteed fill there,
   overriding the generic 250px reservation above. */
.ezis-top-ad + [data-inserter="sa-idless"] {
	min-height: 50px;
}

@media ( min-width: 768px ) {
	/* TOP still requests the same 728x90/970x90/970x250 desktop_sizes as every
	   other in-article slot — 90px matches the generic desktop override above,
	   restated here since it must win over the unconditional 50px phone rule
	   just above at this breakpoint. */
	.ezis-top-ad + [data-inserter="sa-idless"] {
		min-height: 90px;
	}
}

/* Slot never filled (ad server declined or no demand) — release the reserved
   space instead of leaving a permanent blank block. Removed again if a late
   fill arrives. */
.ezis-ad-empty {
	min-height: 0 !important;
}

/* Applied to the closest .ezis-carpet-section OR .ezis-top-section (see
   collapseIfEmpty() in the JS) when that section's one ad box never fills —
   hides the whole delineated break rather than leaving an empty bordered box. */
.ezis-carpet-hidden {
	display: none;
}

/* ── Delineated ad sections: flying-carpet break (every 5th article, mobile)
   and the TOP in-article slot (every article) — same visual boundary so a
   "this is an ad" break reads consistently wherever it appears. ─────────── */
.ezis-carpet-section,
.ezis-top-section {
	margin: 40px 0 0;
	padding: 14px 0;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	background: #fafafa;
	text-align: center;
}

.ezis-carpet-ad,
.ezis-top-ad {
	margin: 0 auto;
}

body.darkmode .ezis-carpet-section,
body.darkmode .ezis-top-section {
	border-top-color: #333;
	border-bottom-color: #333;
	background: #1c1c1c;
}

/* ── Loading indicator ─────────────────────────────────────────────────── */
.ezis-loader {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 40px 0;
	color: #bbb;
	font-size: 12px;
}

.ezis-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid #e8e8e8;
	border-top-color: #bbb;
	border-radius: 50%;
	animation: ezis-spin .75s linear infinite;
	flex-shrink: 0;
}

@keyframes ezis-spin {
	to { transform: rotate(360deg); }
}

/* ── Sentinel (invisible trigger element) ──────────────────────────────── */
.ezis-sentinel {
	height: 1px;
	visibility: hidden;
	pointer-events: none;
}

/* ── End-of-category cap ───────────────────────────────────────────────── */
.ezis-end {
	padding: 40px 0 20px;
	text-align: center;
	font-size: 12px;
	color: #ccc;
	letter-spacing: .04em;
}

/* ── "Keep scrolling" nudge ────────────────────────────────────────────── */
.ezis-scroll-nudge {
	position: fixed;
	left: 50%;
	/* 110px clears Ezoic's bottom sticky anchor ad on mobile — 18px sat
	   underneath it. */
	bottom: 110px;
	transform: translate(-50%, 20px);
	max-width: 92%;
	width: 340px;
	box-sizing: border-box;
	padding: 12px 34px 12px 16px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
	opacity: 0;
	transition: opacity .3s ease, transform .3s ease;
	/* Below Ezoic's anchor ad (2147483000+) so the anchor always wins. */
	z-index: 999999;
	pointer-events: none;
}

.ezis-scroll-nudge.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}

.ezis-scroll-nudge__close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: none;
	border: none;
	font-size: 18px;
	line-height: 1;
	color: #aaa;
	cursor: pointer;
	padding: 2px 6px;
}

.ezis-scroll-nudge__label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #aaa;
	margin-bottom: 3px;
}

.ezis-scroll-nudge__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: #222;
	margin-bottom: 6px;
}

.ezis-scroll-nudge__cta {
	font-size: 12px;
	color: #777;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ezis-scroll-nudge__arrow {
	display: inline-block;
	animation: ezis-bounce 1.2s infinite;
}

@keyframes ezis-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(3px); }
}

body.darkmode .ezis-scroll-nudge {
	background: #222;
	border-color: #333;
}

body.darkmode .ezis-scroll-nudge__title {
	color: #eee;
}

/* ── Breadcrumb on auto-loaded posts (added in 1.3.11) ──────────────────────
   The runtime renames .breadcrumbs-container → .ezis-breadcrumbs so Ad
   Inserter's client-side Ezoic blocks can't target it, but the original
   port (from tgg-infinite-scroll's .tgg-is-breadcrumbs) forgot the styling —
   breadcrumbs rendered flush-left with no padding. Same styling as original. */
.ezis-breadcrumbs {
	padding: 15px;
	text-align: center;
	width: 100%;
	margin: 0 auto;
}