/**
 * VladPro Articles.
 *
 * Branding is INHERITED, not restated. The custom properties below are
 * overwritten at runtime by VPA_Render::theme_tokens() and are filterable via
 * `vpa_brand_tokens`. The literals here are only fallbacks.
 *
 * They match the RESOURCES PAGE rather than Divi's global theme options,
 * because the two disagree on this site and the page is what the reader sees
 * beside this content: Open Sans body at 16px/1.8, Share Tech headings in
 * #004872 (h2) and #2573f9 (h3). Matching the global options instead made the
 * feed look like a different site embedded in the page.
 *
 * Geometry follows Divi's own button language — 2px border, 3px radius,
 * weight 500, uppercase on primary actions — so these controls read as part of
 * the site rather than as a plugin bolted onto it.
 *
 * Form controls are a flat 1rem and never a fluid scale: Safari zooms the page
 * when a control under 16px takes focus and does not zoom back out.
 */

.vpa-wrap,
.vpa-dialog {
	--vpa-accent: #2ea3f2;
	--vpa-brand: #364a61;
	--vpa-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--vpa-font-head: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--vpa-nav: #364a61;
	--vpa-line: rgba(0, 0, 0, .12);
	--vpa-radius: 3px;
	--vpa-size-body: 16px;
	--vpa-line-body: 1.8;
}

/*
 * Body size is PINNED, not inherited.
 *
 * Divi's own `body` rule is `font-size: 14px`, but the Divi text modules on
 * the Resources page run at 16px/1.8em. Inheriting meant the feed rendered two
 * pixels smaller than the copy directly above it — barely noticeable on a
 * desktop, clearly worse on a phone, which is where it was reported.
 */
.vpa-wrap {
	position: relative;
	font-family: var(--vpa-font-body);
	font-size: var(--vpa-size-body);
	line-height: var(--vpa-line-body);
}

/**
 * [hidden] must actually hide.
 *
 * A class rule such as `.vpa-owner { display: flex }` sits in the AUTHOR
 * stylesheet and therefore beats the browser's built-in `[hidden] { display: none }`
 * from the user-agent stylesheet. That defeat is what exposed the Edit and
 * Delete controls to signed-out visitors: the markup carried `hidden`, and the
 * layout rule quietly overrode it.
 *
 * The buttons were never functional for those visitors — the REST routes
 * answer 403 without a capability — but showing them invited the attempt and
 * looked broken. This guard is deliberately broad and !important so that no
 * future layout rule can reintroduce the same class of bug.
 */
.vpa-wrap [hidden],
.vpa-dialog [hidden] { display: none !important; }

/* ---------- Feed ---------- */

.vpa-list { display: grid; gap: 1.5rem; }

.vpa-card {
	border: 1px solid var(--vpa-line);
	border-radius: var(--vpa-radius);
	padding: 1.5rem;
	background: #fff;
	transition: box-shadow .2s ease, border-color .2s ease;
}
.vpa-card:hover { border-color: rgba(0, 0, 0, .2); box-shadow: 0 2px 12px rgba(0, 0, 0, .06); }

.vpa-title {
	font-family: var(--vpa-font-head);
	margin: 0 0 .4rem;
	font-size: 1.35rem;
	line-height: 1.3;
	font-weight: 600;
	color: var(--vpa-brand);
}
.vpa-title a { color: inherit; text-decoration: none; }
.vpa-title a:hover { color: var(--vpa-accent); }

.vpa-meta {
	font-size: .8rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .6;
	margin-bottom: .9rem;
}

.vpa-preview { margin-bottom: 1rem; font-size: var(--vpa-size-body); line-height: var(--vpa-line-body); }

.vpa-full { margin: 1.25rem 0; font-size: var(--vpa-size-body); line-height: var(--vpa-line-body); }
.vpa-full h2, .vpa-full h3, .vpa-full h4 {
	font-family: var(--vpa-font-head);
	color: var(--vpa-brand);
	margin: 1.5rem 0 .6rem;
	line-height: 1.35;
}
.vpa-full h2 { font-size: 1.65rem; color: var(--vpa-brand); }
.vpa-full h3 { font-size: 1.3rem; color: var(--vpa-accent); }
.vpa-full p { margin: 0 0 1.1rem; }
.vpa-full a { color: var(--vpa-accent); }
.vpa-full img { max-width: 100%; height: auto; border-radius: var(--vpa-radius); }

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.vpa-full pre,
.vpa-full table { overflow-x: auto; display: block; max-width: 100%; }
.vpa-full pre {
	background: rgba(54, 74, 97, .06);
	padding: 1rem 1.15rem;
	border-radius: var(--vpa-radius);
	font-size: .9rem;
}
.vpa-full blockquote {
	margin: 1.25rem 0;
	padding: .25rem 0 .25rem 1.15rem;
	border-left: 3px solid var(--vpa-accent);
	font-style: italic;
	opacity: .92;
}

/* Text wraps around a floated image, and the float releases on a phone. */
.vpa-figure { margin: 1.25rem 0; }
.vpa-figure figcaption,
.vpa-caption { font-size: .85rem; opacity: .7; margin-top: .4rem; font-style: italic; }

.vpa-full .vpa-left, .vpa-full .alignleft { float: left; margin: .25rem 1.5rem 1rem 0; max-width: 50%; }
.vpa-full .vpa-right, .vpa-full .alignright { float: right; margin: .25rem 0 1rem 1.5rem; max-width: 50%; }
.vpa-full .vpa-center, .vpa-full .aligncenter { display: block; margin: 1.25rem auto; }
.vpa-full::after { content: ''; display: block; clear: both; }

/* ---------- Buttons: Divi's language ---------- */

.vpa-expand,
.vpa-bar button,
.vpa-owner button,
.vpa-primary,
.vpa-secondary {
	font-family: var(--vpa-font-body);
	font-size: 1rem;
	font-weight: 500;
	min-height: 44px;
	padding: .45rem 1.1rem;
	border: 2px solid var(--vpa-line);
	border-radius: var(--vpa-radius);
	background: transparent;
	color: var(--vpa-brand);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	transition: all .2s ease;
}

.vpa-expand {
	border-color: var(--vpa-accent);
	color: var(--vpa-accent);
	text-transform: uppercase;
	font-size: .85rem;
	letter-spacing: .06em;
}
.vpa-expand:hover { background: var(--vpa-accent); color: #fff; }

.vpa-bar button:hover { border-color: var(--vpa-accent); color: var(--vpa-accent); }

.vpa-primary {
	background: var(--vpa-accent);
	border-color: var(--vpa-accent);
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .9rem;
}
.vpa-primary:hover { background: var(--vpa-brand); border-color: var(--vpa-brand); color: #fff; }

.vpa-secondary { border-color: var(--vpa-line); }
.vpa-secondary:hover { border-color: var(--vpa-brand); }

.vpa-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--vpa-line);
}
.vpa-bar button { padding: .35rem .85rem; font-size: .9rem; min-height: 40px; }

.vpa-views {
	display: inline-flex; align-items: center; gap: .4rem;
	font-size: .85rem; opacity: .65; margin-left: auto;
	text-transform: uppercase; letter-spacing: .04em;
}

.vpa-like.is-liked {
	border-color: var(--vpa-accent);
	background: var(--vpa-accent);
	color: #fff;
}
.vpa-ico { font-size: 1rem; line-height: 1; }

.vpa-owner { display: flex; gap: .5rem; margin-top: 1rem; }
.vpa-owner button { font-size: .85rem; min-height: 40px; padding: .35rem .85rem; }
.vpa-del { color: #b3261e; border-color: rgba(179, 38, 30, .35); }
.vpa-del:hover { background: #b3261e; color: #fff; border-color: #b3261e; }

.vpa-empty { text-align: center; opacity: .65; padding: 2.5rem 0; font-family: var(--vpa-font-body); }

/* ---------- Launcher ---------- */

/*
 * Bottom-LEFT, deliberately.
 *
 * The bottom-right corner already holds two fixed elements on this site: the
 * reCAPTCHA v3 badge (Divi's contact-form protection) and Divi's own
 * .et_pb_scroll_top button. Sitting there meant the launcher was overlaid on
 * narrow screens.
 *
 * Moving rather than hiding the badge is the right fix: Google's terms permit
 * hiding it ONLY when the reCAPTCHA attribution text is shown in the form
 * instead, so suppressing it to make room for an unrelated button would be
 * borrowing someone else's corner and their compliance.
 */
.vpa-launch {
	position: fixed;
	left: 1.25rem;
	bottom: 1.25rem;
	z-index: 9998;
	width: 56px; height: 56px;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--vpa-font-head);
	font-size: 2rem; line-height: 1; font-weight: 300;
	text-decoration: none;

	/*
	 * Outline treatment: no fill, brand-coloured glyph, hairline ring.
	 *
	 * box-sizing is pinned because the width/height above are the TOUCH TARGET.
	 * Without it the border is added outside the box and a 56px control becomes
	 * 58px — small on desktop, but the phone rule below sits at exactly 48px,
	 * which is the accessibility floor, and it must not drift off it either way.
	 *
	 * The shadow is kept but softened: a heavy drop shadow around a transparent
	 * circle reads as a halo rather than a raised button. This one only exists
	 * to keep the hairline separable when the launcher happens to overlap the
	 * hero image while scrolling.
	 */
	box-sizing: border-box;
	color: var(--vpa-brand);
	background: transparent;
	border: 1px solid var(--vpa-brand);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
	transition: all .2s ease;
}
/* Inverts on interaction, so the affordance is unmistakable once touched. */
.vpa-launch:hover,
.vpa-launch:focus-visible {
	color: #fff;
	background: var(--vpa-brand);
	border-color: var(--vpa-brand);
	transform: translateY(-2px);
}

/* ---------- Dialog ---------- */

.vpa-dialog {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	padding: 1rem;
	font-family: var(--vpa-font-body);
}
.vpa-dialog[hidden] { display: none !important; }
.vpa-backdrop { position: absolute; inset: 0; background: rgba(54, 74, 97, .6); }

.vpa-panel {
	position: relative;
	width: min(780px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	color: #333;
	border-radius: var(--vpa-radius);
	padding: 2rem;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.vpa-close {
	position: absolute; top: .5rem; right: .5rem;
	width: 44px; height: 44px;
	font-size: 1.6rem; line-height: 1;
	border: 0; background: transparent; cursor: pointer; color: var(--vpa-brand);
}
.vpa-close:hover { color: var(--vpa-accent); }

.vpa-pane[hidden] { display: none !important; }
.vpa-pane h2 {
	font-family: var(--vpa-font-head);
	margin: 0 0 1.25rem;
	font-size: 1.4rem;
	color: var(--vpa-brand);
	font-weight: 600;
}

/* ---------- Forms ---------- */

.vpa-login-form { display: grid; gap: 1rem; }
.vpa-login-form label {
	display: grid; gap: .35rem;
	font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
	color: var(--vpa-brand); font-weight: 600;
}
.vpa-inline {
	display: flex !important; align-items: center; gap: .5rem;
	text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important;
}

.vpa-login-form input[type="text"],
.vpa-login-form input[type="password"],
.vpa-title-input {
	font-family: var(--vpa-font-body);
	font-size: 1rem;          /* never below 16px: iOS focus-zoom trap */
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	min-height: 44px;
	padding: .6rem .8rem;
	border: 1px solid var(--vpa-line);
	border-radius: var(--vpa-radius);
	width: 100%;
	background: #fff;
	color: #333;
}
.vpa-login-form input:focus,
.vpa-title-input:focus { outline: 2px solid var(--vpa-accent); outline-offset: 1px; border-color: var(--vpa-accent); }

.vpa-title-input {
	margin-bottom: .85rem;
	font-family: var(--vpa-font-head);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--vpa-brand);
}

/* ---------- Editor ---------- */

.vpa-tools {
	display: flex; flex-wrap: wrap; gap: .3rem;
	margin-bottom: .6rem; padding-bottom: .6rem;
	border-bottom: 1px solid var(--vpa-line);
}
.vpa-tool {
	font-family: var(--vpa-font-body);
	font-size: .9rem; font-weight: 600;
	min-width: 44px; min-height: 44px;
	border: 1px solid var(--vpa-line);
	border-radius: var(--vpa-radius);
	background: #fff; cursor: pointer; color: var(--vpa-brand);
	transition: all .2s ease;
}
.vpa-tool:hover { border-color: var(--vpa-accent); color: var(--vpa-accent); }

.vpa-editor {
	font-family: var(--vpa-font-body);
	min-height: 320px;
	max-height: 55vh;
	overflow-y: auto;
	padding: 1.15rem;
	border: 1px solid var(--vpa-line);
	border-radius: var(--vpa-radius);
	background: #fff;
	font-size: var(--vpa-size-body);
	line-height: var(--vpa-line-body);
	color: #333;
}
.vpa-editor:focus { outline: 2px solid var(--vpa-accent); outline-offset: 1px; }
.vpa-editor h2, .vpa-editor h3 { font-family: var(--vpa-font-head); color: var(--vpa-brand); }
.vpa-editor img { max-width: 100%; height: auto; }
.vpa-editor pre, .vpa-editor table { overflow-x: auto; max-width: 100%; }

.vpa-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }

.vpa-mine { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .5rem; }
.vpa-mine li {
	display: flex; align-items: center; gap: .75rem;
	padding: .7rem .85rem;
	border: 1px solid var(--vpa-line); border-radius: var(--vpa-radius);
}
.vpa-mine-t { flex: 1; }
.vpa-mine-t em { opacity: .6; font-size: .85em; }

.vpa-status {
	margin-top: 1rem; font-size: .9rem; min-height: 1.2em; opacity: .8;
	font-family: var(--vpa-font-body);
}
.vpa-status.vpa-error { color: #b3261e; opacity: 1; font-weight: 600; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Small screens ---------- */

@media (max-width: 600px) {
	.vpa-card { padding: 1.15rem; }
	.vpa-title { font-size: 1.2rem; }

	.vpa-full .vpa-left, .vpa-full .alignleft,
	.vpa-full .vpa-right, .vpa-full .alignright {
		float: none;
		max-width: 100%;
		margin: 1.25rem 0;
		display: block;
	}
	.vpa-panel { padding: 1.25rem; max-height: 94vh; }
	.vpa-views { margin-left: 0; width: 100%; }

	/* Phones: slightly smaller and tucked in, but still a 48px target — never
	   below the 44px minimum, which is the whole point of a floating action. */
	.vpa-launch {
		width: 48px;
		height: 48px;
		font-size: 1.7rem;
		left: 1rem;
		bottom: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vpa-launch:hover { transform: none; }
	.vpa-card, .vpa-tool, .vpa-launch,
	.vpa-primary, .vpa-secondary, .vpa-expand { transition: none; }
}