/* AlfaGate Blog presentation.
 *
 * The Blog marketplace app (frappe/blog) ships stock Bootstrap markup —
 * .card grids, .navbar-light, .web-footer — with none of AlfaGate's brand
 * on it. Its templates aren't ours to edit (marketplace app, no local fork),
 * so every rule here is a CSS-only override riding on real classes read
 * straight out of its rendered HTML and out of Frappe core's own navbar/
 * footer/comment includes. See docs/blog-seo-plan.md §5 for the audit this
 * was built from.
 *
 * Scoping: post pages (`/blog/<route>`) are matched by `body[data-path^=
 * "blog/"]`, same as before — base.html sets that attribute from the real
 * URL for a Document-page render. The list page (`/blog` itself) is
 * different: Frappe's ListPage renderer (frappe/website/page_renderers/
 * list_renderer.py) hard-codes `data-path="portal"` for every DocType list
 * view on the whole site, blog or otherwise, so a body[data-path="blog"]
 * selector — this file's original approach — silently never matched,
 * meaning the hero/category-select/card-grid rules below had never
 * actually applied to the one page they were written for. Matched instead
 * by `body:has(.blog-list-content)` — `.blog-list-content` is blog_post_
 * list.html's own always-present wrapper (present with zero posts too, not
 * just when `#blog-list` itself renders), unique to this template, and a
 * reliable stand-in for "this is genuinely the blog list page" that no
 * data-path value can give here. Neither selector touches the desk or the
 * standalone marketing pages (home.html/contact.html carry their own
 * complete, self-contained CSS and must stay that way).
 *
 * Tokens mirror www/home.html's own :root block so the blog reads as the
 * same brand as the marketing site, not a second design system. !important
 * is used the same way alfagate_web.css already does — Blog's own
 * blog.bundle.css and Frappe's website.bundle.css can load after this file
 * depending on installed-app order, so specificity alone isn't reliable
 * against a competing Bootstrap declaration on the same property.
 *
 * Bump the query string in hooks.py's web_include_css (matching
 * alfagate_web.css's ?v=... convention) whenever this file changes, so
 * Frappe Cloud's CDN doesn't serve a stale copy.
 */

body:has(.blog-list-content),
body[data-path^="blog/"] {
	--agb-ink: #1a1a1a;
	--agb-muted: #565058;
	--agb-faint: #767676;
	--agb-line: #e9e6ea;
	--agb-hair: #f1eef2;
	--agb-canvas: #f8f7f4;
	--agb-surface: #fff;
	--agb-soft: #faf8fb;
	--agb-violet: #996eff;
	--agb-violet-deep: #5b21b6;
	--agb-violet-ink: #4c1d95;
	--agb-violet-soft: #f5f0ff;
	--agb-violet-pale: #faf7ff;
	--agb-radius: 14px;
	--agb-radius-lg: 22px;
	--agb-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	background: var(--agb-canvas) !important;
	color: var(--agb-ink);
	font-family: var(--agb-font) !important;
}

/* ── Navbar ──────────────────────────────────────────────────────────────
 * Frappe's Standard Navbar (templates/includes/navbar/navbar.html) is
 * shared by every web.html page on the site, so all of this is scoped
 * under the blog body selector rather than styled globally. */

body:has(.blog-list-content) .navbar,
body[data-path^="blog/"] .navbar {
	background: rgba(255, 255, 255, 0.92) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--agb-line);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
	padding-top: 14px;
	padding-bottom: 14px;
}

body:has(.blog-list-content) .navbar .navbar-brand,
body[data-path^="blog/"] .navbar .navbar-brand {
	font-weight: 800;
	font-size: 1.15rem;
	color: var(--agb-ink) !important;
	letter-spacing: -0.01em;
}

body:has(.blog-list-content) .navbar .nav-link,
body[data-path^="blog/"] .navbar .nav-link {
	color: var(--agb-muted) !important;
	font-weight: 600;
	font-size: 0.92rem;
}

body:has(.blog-list-content) .navbar .nav-link:hover,
body[data-path^="blog/"] .navbar .nav-link:hover {
	color: var(--agb-violet-deep) !important;
}

/* The links and the signed-in avatar are different heights (text vs a 32px
 * circle), and Bootstrap's navbar only stretches them — so the row read as
 * slightly ragged, the avatar sitting low against the words beside it. */
body:has(.blog-list-content) .navbar .navbar-nav,
body[data-path^="blog/"] .navbar .navbar-nav {
	align-items: center;
	gap: 4px;
}

/* Frappe marks the page you're on with .active, which its own stylesheet
 * renders as plain near-black text with a dark underline — the one item that
 * should read as "you are here" was the least branded thing in the bar. */
body:has(.blog-list-content) .navbar .nav-link.active,
body[data-path^="blog/"] .navbar .nav-link.active {
	color: var(--agb-violet-deep) !important;
	font-weight: 700;
	border-bottom: 2px solid var(--agb-violet);
}

/* The signed-in chip. Frappe picks an avatar colour per user and writes it
 * as an inline style (--pink-avatar-bg here), so a committee member could
 * land on the blog and meet a bright pink circle sitting in an otherwise
 * violet brand bar. Inline styles are why these need !important. */
body:has(.blog-list-content) .navbar .avatar-frame,
body[data-path^="blog/"] .navbar .avatar-frame {
	background-color: var(--agb-violet-deep) !important;
	color: #fff !important;
	font-weight: 700;
	text-transform: uppercase;
	box-shadow: 0 0 0 2px var(--agb-violet-soft);
}

body:has(.blog-list-content) .navbar .dropdown-menu,
body[data-path^="blog/"] .navbar .dropdown-menu {
	border: 1px solid var(--agb-line);
	border-radius: var(--agb-radius);
	box-shadow: 0 10px 30px rgba(20, 10, 40, 0.1);
	padding: 6px;
}

body:has(.blog-list-content) .navbar .dropdown-item,
body[data-path^="blog/"] .navbar .dropdown-item {
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--agb-muted);
}

body:has(.blog-list-content) .navbar .dropdown-item:hover,
body[data-path^="blog/"] .navbar .dropdown-item:hover {
	background: var(--agb-violet-pale);
	color: var(--agb-violet-deep);
}

/* ── Shell + hero (blog list & category pages) ───────────────────────── */

body:has(.blog-list-content) .page_content,
body[data-path^="blog/"] .page_content {
	max-width: 1120px;
}

/* blog_post_list.html wraps the hero in a bare `.row.py-8 > .col-md-8`
 * with no sibling column — a plain Bootstrap grid leftover that otherwise
 * leaves a blank quarter of the page beside every hero. Widened to fill
 * the row instead, since there's nothing to share it with. `.py-8`'s own
 * vertical padding is zeroed too — the `.hero` box below already carries
 * its own top/bottom padding, so the two together were doubling up into a
 * dead gap between the title and the card grid. */
body:has(.blog-list-content) .page_content > .row.py-8 {
	margin-left: 0;
	margin-right: 0;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body:has(.blog-list-content) .page_content > .row.py-8 > .col-md-8 {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	padding-left: 0;
	padding-right: 0;
}

body:has(.blog-list-content) .hero,
body[data-path^="blog/"] .hero {
	background: linear-gradient(180deg, var(--agb-violet-pale) 0%, var(--agb-canvas) 100%);
	border-radius: var(--agb-radius-lg);
	padding: 56px 40px !important;
	margin-bottom: 32px;
}

body:has(.blog-list-content) .hero h1,
body[data-path^="blog/"] .hero h1 {
	font-size: clamp(2.2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--agb-ink);
	margin-bottom: 12px;
}

body:has(.blog-list-content) .hero p,
body[data-path^="blog/"] .hero p {
	color: var(--agb-muted);
	font-size: 1.05rem;
	max-width: 640px;
}

/* Category picker — a native <select>, restyled as a soft pill so it reads
 * as a filter chip instead of a stray form control dropped in the hero. */
body:has(.blog-list-content) #category-select,
body[data-path^="blog/"] #category-select {
	appearance: none;
	-webkit-appearance: none;
	background: var(--agb-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234c1d95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 14px center;
	border: 1px solid var(--agb-line) !important;
	border-radius: 999px !important;
	padding: 10px 40px 10px 18px !important;
	font-weight: 600;
	color: var(--agb-violet-ink);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	/* Bootstrap pins .custom-select to a fixed `height` (_custom-forms.scss).
	 * The pill padding above is taller than that, so the box stayed at
	 * Bootstrap's height while the label overflowed it — "Browse by category"
	 * rendered with its descenders sliced off along the bottom edge. Letting
	 * the height follow the content is what actually makes the pill fit the
	 * words inside it. */
	height: auto !important;
	line-height: 1.3;
}

/* blog_post_list.html puts the picker in a bare `<div style="max-width:
 * 20rem">` that carries no spacing of its own — it relied entirely on
 * `.row.py-8`'s bottom padding, which the rule above deliberately zeroes so
 * the hero doesn't double up its own. With a category list present that left
 * the pill sitting flush on the card grid, its lower edge colliding with the
 * first card. Spaced here, on the wrapper itself (matched by what it
 * contains, since its only other handle is an inline style), so the hero
 * keeps its tight spacing and the picker gets the room it actually needs. */
body:has(.blog-list-content) .page_content > .row.py-8 > .col-md-8 > div:has(> #category-select) {
	margin-top: 4px;
	margin-bottom: 36px;
}

body:has(.blog-list-content) #category-select:focus,
body[data-path^="blog/"] #category-select:focus {
	border-color: var(--agb-violet) !important;
	outline: none;
	box-shadow: 0 0 0 3px var(--agb-violet-soft) !important;
}

/* ── Post cards (blog_post_row.html) ─────────────────────────────────── */

/* Bootstrap's row is a flex container with the default `align-items:
 * stretch`, so every card in it is forced to match the tallest sibling's
 * height — here, the featured card's, whose image is naturally taller in
 * absolute pixels than a regular card's (same 16:9 ratio, wider column).
 * That left ordinary cards stretched well past their own content, with a
 * dead gap below the footer. `flex-start` lets each card be exactly as
 * tall as its own content instead. */
body:has(.blog-list-content) #blog-list.row {
	align-items: flex-start;
}

/* Bootstrap's grid gives columns a horizontal gutter but no vertical one —
 * cards in a wrapped row would otherwise butt straight into the row above. */
body:has(.blog-list-content) .blog-card,
body[data-path^="blog/"] .blog-card {
	margin-bottom: 28px;
}

body:has(.blog-list-content) .blog-card .card,
body[data-path^="blog/"] .blog-card .card {
	border: 1px solid var(--agb-line) !important;
	border-radius: var(--agb-radius-lg) !important;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(20, 10, 40, 0.04);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

body:has(.blog-list-content) .blog-card .card:hover,
body[data-path^="blog/"] .blog-card .card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(76, 29, 149, 0.12);
	border-color: var(--agb-violet-soft) !important;
}

body:has(.blog-list-content) .blog-card .card-img-top,
body[data-path^="blog/"] .blog-card .card-img-top {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

body:has(.blog-list-content) .blog-card .card-img-top img,
body[data-path^="blog/"] .blog-card .card-img-top img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

body:has(.blog-list-content) .blog-card .card:hover .card-img-top img,
body[data-path^="blog/"] .blog-card .card:hover .card-img-top img {
	transform: scale(1.04);
}

/* A post with no cover image gets a violet gradient card instead of a bare
 * grey box — most posts won't have dedicated cover art for a while, and a
 * plain placeholder is the single biggest thing that reads as "unfinished
 * template" rather than "premium blog". */
body:has(.blog-list-content) .blog-card .default-cover,
body[data-path^="blog/"] .blog-card .default-cover {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
	background: linear-gradient(135deg, var(--agb-violet-deep) 0%, var(--agb-violet) 100%);
}

body:has(.blog-list-content) .blog-card .default-cover span,
body[data-path^="blog/"] .blog-card .default-cover span {
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.35;
}

body:has(.blog-list-content) .blog-card .card-body,
body[data-path^="blog/"] .blog-card .card-body {
	padding: 22px 22px 20px;
}

/* Category label above the title, restyled from plain uppercase text into
 * a small pill so it reads as a tag, matching the category chips used
 * elsewhere on the marketing site. */
body:has(.blog-list-content) .blog-card .text-uppercase,
body[data-path^="blog/"] .blog-card .text-uppercase {
	display: inline-block;
	background: var(--agb-violet-soft);
	color: var(--agb-violet-ink) !important;
	font-size: 0.7rem !important;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 3px 10px;
	border-radius: 999px;
	margin-bottom: 10px;
}

/* "Featured · " prefix inside the same pill, on a featured (col-md-8) card —
 * given its own accent so the one wide card in a row actually reads as
 * singled out, rather than just being a wider copy of every other card. */
body:has(.blog-list-content) .blog-card .text-uppercase .text-body,
body[data-path^="blog/"] .blog-card .text-uppercase .text-body {
	color: var(--agb-violet-deep) !important;
	font-weight: 800;
}

body:has(.blog-list-content) .blog-card h5,
body[data-path^="blog/"] .blog-card h5 {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 8px;
}

/* col-md-8 only ever applies when post.featured (blog_post_row.html) — the
 * wider card earns a heavier title to match, rather than just more
 * whitespace around the same size text. */
body:has(.blog-list-content) .blog-card.col-md-8 h5,
body[data-path^="blog/"] .blog-card.col-md-8 h5 {
	font-size: 1.5rem;
}

body:has(.blog-list-content) .blog-card h5 .text-dark,
body[data-path^="blog/"] .blog-card h5 .text-dark {
	color: var(--agb-ink) !important;
	transition: color 0.15s ease;
}

body:has(.blog-list-content) .blog-card .card:hover h5 .text-dark,
body[data-path^="blog/"] .blog-card .card:hover h5 .text-dark {
	color: var(--agb-violet-deep) !important;
}

body:has(.blog-list-content) .blog-card .post-description,
body[data-path^="blog/"] .blog-card .post-description {
	color: var(--agb-muted) !important;
	font-size: 0.92rem;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body:has(.blog-list-content) .blog-card-footer,
body[data-path^="blog/"] .blog-card-footer {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--agb-hair);
}

body:has(.blog-list-content) .blog-card-footer .avatar-frame,
body[data-path^="blog/"] .blog-card-footer .avatar-frame {
	background: var(--agb-violet-soft) !important;
	color: var(--agb-violet-ink) !important;
	font-weight: 700;
}

body:has(.blog-list-content) .blog-card-footer a,
body[data-path^="blog/"] .blog-card-footer a {
	color: var(--agb-ink) !important;
	font-weight: 600;
	font-size: 0.88rem;
}

body:has(.blog-list-content) .blog-card-footer .small,
body[data-path^="blog/"] .blog-card-footer .small {
	color: var(--agb-faint) !important;
	font-size: 0.78rem;
}

/* ── Post page ───────────────────────────────────────────────────────── */

body[data-path^="blog/"] .blog-container {
	max-width: 760px;
	margin: 0 auto;
	padding: 8px 0 48px;
}

body[data-path^="blog/"] .blog-header a {
	display: inline-flex;
	align-items: center;
	background: var(--agb-violet-soft);
	color: var(--agb-violet-ink) !important;
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	padding: 4px 12px;
	border-radius: 999px;
	text-decoration: none !important;
}

body[data-path^="blog/"] .blog-header .text-muted {
	color: var(--agb-faint) !important;
}

body[data-path^="blog/"] .blog-title {
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--agb-ink);
	margin: 18px 0 14px;
}

body[data-path^="blog/"] .blog-intro {
	font-size: 1.15rem;
	color: var(--agb-muted) !important;
	line-height: 1.6;
}

body[data-path^="blog/"] .blog-header .text-muted time,
body[data-path^="blog/"] .blog-header .text-muted span {
	font-weight: 600;
	color: var(--agb-faint) !important;
}

body[data-path^="blog/"] hr.my-5 {
	border-color: var(--agb-line);
	margin: 32px 0 !important;
}

/* Article body typography — this is the part people actually read, so it
 * gets the most deliberate sizing: a wider line-height and a slightly
 * larger base size than Bootstrap's default, headings with real
 * separation from the paragraph above them, and a violet accent instead
 * of the browser-default blue on links. */
body[data-path^="blog/"] .from-markdown {
	font-size: 1.125rem;
	line-height: 1.8;
	color: var(--agb-ink);
}

body[data-path^="blog/"] .from-markdown h2 {
	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 44px 0 16px;
	padding-top: 4px;
	border-top: 3px solid var(--agb-violet-soft);
	padding-top: 20px;
}

body[data-path^="blog/"] .from-markdown h3 {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 32px 0 12px;
}

body[data-path^="blog/"] .from-markdown p {
	margin-bottom: 20px;
}

body[data-path^="blog/"] .from-markdown a {
	color: var(--agb-violet-deep) !important;
	text-decoration: underline;
	text-decoration-color: var(--agb-violet);
	text-underline-offset: 2px;
	font-weight: 600;
}

body[data-path^="blog/"] .from-markdown a:hover {
	color: var(--agb-violet-ink) !important;
}

body[data-path^="blog/"] .from-markdown ul,
body[data-path^="blog/"] .from-markdown ol {
	margin-bottom: 20px;
	padding-left: 1.4em;
}

body[data-path^="blog/"] .from-markdown li {
	margin-bottom: 8px;
}

body[data-path^="blog/"] .from-markdown blockquote {
	margin: 24px 0;
	padding: 16px 20px;
	background: var(--agb-violet-pale);
	border-left: 4px solid var(--agb-violet);
	border-radius: 0 var(--agb-radius) var(--agb-radius) 0;
	font-style: italic;
	color: var(--agb-violet-ink);
}

body[data-path^="blog/"] .from-markdown code {
	background: var(--agb-soft);
	border: 1px solid var(--agb-line);
	border-radius: 6px;
	padding: 2px 6px;
	font-size: 0.9em;
}

/* Images dropped in between paragraphs. `width: 100%` used to be forced on
 * every one of them, which upscaled anything narrower than the column — a
 * 400px screenshot or a small diagram got stretched to 720px and went soft.
 * `max-width` lets an image render at its own size up to the column and no
 * further; `height: auto` keeps the aspect ratio when it does have to come
 * down. Centred so a narrow image sits in the measure rather than hugging
 * the left edge. */
body[data-path^="blog/"] .from-markdown img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 8px auto 28px;
	border-radius: var(--agb-radius-lg);
	box-shadow: 0 8px 24px rgba(20, 10, 40, 0.08);
}

/* A captioned image — <figure><img><figcaption>…</figcaption></figure>, which
 * is what both the rich-text editor and a Markdown post with raw HTML emit.
 * The figure owns the spacing so the image inside it doesn't double up on
 * its own bottom margin and leave the caption floating away from it. */
body[data-path^="blog/"] .from-markdown figure {
	margin: 8px 0 28px;
}

body[data-path^="blog/"] .from-markdown figure img {
	margin-bottom: 0;
}

body[data-path^="blog/"] .from-markdown figcaption {
	margin-top: 10px;
	color: var(--agb-muted);
	font-size: 0.9rem;
	text-align: center;
}

/* CTA block — web_block("Section With Small CTA") renders whatever
 * Website Theme colors are active, so it needs the same !important
 * treatment as the rest of this file to actually show the brand gradient
 * instead of the default theme's plain surface. Exact classes taken from
 * frappe/website/web_template/section_with_small_cta/section_with_small_cta.html. */
body[data-path^="blog/"] .section-cta-container {
	background: linear-gradient(135deg, var(--agb-violet-deep) 0%, var(--agb-violet-ink) 100%) !important;
	border-radius: var(--agb-radius-lg);
	padding: 36px 40px !important;
}

/* The inner panel is what actually made this card unreadable. Frappe's own
 * page_builder.scss gives .section-small-cta `background-color:
 * var(--gray-200)` plus its own padding and radius — so the brand gradient
 * above was only ever a border around a light-grey box, and the white
 * heading/subtitle this file sets were landing on that grey: near-invisible.
 * Cleared to transparent so the text sits on the gradient it was written
 * for; the padding and radius move to the container above, which is now the
 * only box being drawn. */
body[data-path^="blog/"] .section-small-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background-color: transparent !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

body[data-path^="blog/"] .section-title {
	color: #fff !important;
	font-weight: 800;
	font-size: 1.4rem;
	margin-bottom: 6px;
}

body[data-path^="blog/"] .section-small-cta .subtitle {
	color: rgba(255, 255, 255, 0.82) !important;
	margin-bottom: 0;
}

body[data-path^="blog/"] .section-small-cta .action a.no-decoration {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--agb-violet-ink) !important;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 10px 20px;
	border-radius: 999px;
	text-decoration: none !important;
	white-space: nowrap;
}

body[data-path^="blog/"] .section-small-cta .action a.no-decoration:hover {
	background: var(--agb-violet-pale);
}

body[data-path^="blog/"] .section-small-cta .action a.no-decoration svg {
	width: 16px;
	height: 16px;
}

/* Author bio (templates/includes/blog/blogger.html) */
body[data-path^="blog/"] .media {
	background: var(--agb-soft);
	border: 1px solid var(--agb-line);
	border-radius: var(--agb-radius-lg);
	padding: 24px;
}

body[data-path^="blog/"] .media h5 a {
	color: var(--agb-ink) !important;
	font-weight: 700;
}

body[data-path^="blog/"] .media .text-muted {
	color: var(--agb-muted) !important;
}

/* Likes + comments */
body[data-path^="blog/"] .like-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--agb-soft);
	border: 1px solid var(--agb-line);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

body[data-path^="blog/"] .like-icon:hover {
	border-color: var(--agb-violet);
}

body[data-path^="blog/"] .like-icon.liked {
	background: var(--agb-violet-soft);
	border-color: var(--agb-violet);
}

body[data-path^="blog/"] .like-icon svg {
	color: var(--agb-faint);
}

body[data-path^="blog/"] .like-icon.liked svg {
	color: var(--agb-violet-deep);
}

body[data-path^="blog/"] .comment-form-wrapper .form-control {
	border: 1px solid var(--agb-line) !important;
	border-radius: var(--agb-radius) !important;
}

body[data-path^="blog/"] .comment-form-wrapper .form-control:focus {
	border-color: var(--agb-violet) !important;
	box-shadow: 0 0 0 3px var(--agb-violet-soft) !important;
}

body[data-path^="blog/"] #submit-comment,
body[data-path^="blog/"] .add-comment-button {
	background: var(--agb-violet-deep) !important;
	border-color: var(--agb-violet-deep) !important;
	border-radius: 999px !important;
	padding: 8px 20px !important;
	font-weight: 600;
}

body[data-path^="blog/"] #submit-comment:hover,
body[data-path^="blog/"] .add-comment-button:hover {
	background: var(--agb-violet-ink) !important;
}

/* ── Footer ──────────────────────────────────────────────────────────── */

body:has(.blog-list-content) .web-footer,
body[data-path^="blog/"] .web-footer {
	background: var(--agb-ink) !important;
	color: #cfc9d6 !important;
	margin-top: 48px;
	padding: 40px 0;
}

body:has(.blog-list-content) .web-footer a,
body[data-path^="blog/"] .web-footer a {
	color: #e8e3f0 !important;
}

body:has(.blog-list-content) .web-footer a:hover,
body[data-path^="blog/"] .web-footer a:hover {
	color: var(--agb-violet) !important;
}

/* ── Mobile ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	body:has(.blog-list-content) .hero,
	body[data-path^="blog/"] .hero {
		padding: 36px 24px !important;
	}

	body[data-path^="blog/"] .blog-container {
		padding: 0 4px 32px;
	}

	body[data-path^="blog/"] .from-markdown {
		font-size: 1.05rem;
	}
}