/*
 * Ausclin blog presentation: index hero, tidier post cards, single-post sidebar.
 *
 * Two site-specific rules this file has to respect:
 *  1. Astra resets max-width to none on page-builder-template children, so any
 *     constrained wrapper uses `width: min(1280px, 100%)`, never `max-width`.
 *     (Documented after this bug bit four separate sections on this site.)
 *  2. #6d7a6a fails AA on cream; #5f6c5b is the accessible sage. Muted text is
 *     #666c60, which passes on both white and #f4f3ee.
 */

:root {
	--abl-sage: #5f6c5b;
	--abl-sage-dark: #4d5849;
	--abl-cream: #f4f3ee;
	--abl-muted: #666c60;
	--abl-ink: #2f342c;
	--abl-line: #e4e2d9;
	--abl-tan: #8d705a;
}

/* ------------------------------------------------------------------ hero */

.abh {
	background-color: var(--abl-sage);
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 5.5rem 40px;
	margin-bottom: 3rem;
	text-align: center;
}

.abh__inner {
	width: min(760px, 100%);
	margin-inline: auto;
}

.abh__title {
	color: #fff;
	margin: 0 0 1rem;
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.15;
}

.abh__intro {
	color: #fff;
	margin: 0;
	font-size: clamp(1rem, 2vw, 1.15rem);
	line-height: 1.6;
	opacity: .95;
}

@media (max-width: 976px) { .abh { padding: 4rem 32px; } }
@media (max-width: 767px) { .abh { padding: 3rem 24px; margin-bottom: 2rem; } }

/* ------------------------------------------------- blog index post cards */

/* The category line is removed via Astra's own blog-post-structure setting
   rather than hidden here - every recent post sits in "Uncategorized", so it
   read as noise above the title. Left as a note because the obvious CSS
   selector (.ast-blog-category) is NOT the one Astra renders; the real class
   is .ast-taxonomy-container, and hiding it in CSS would have been the wrong
   fix anyway. */

/* Page surface: cream, so the white cards stand out (modelled on
   rebusfinance.com.au/blog). Only the posts index carries body.blog. */
body.blog { background-color: var(--abl-cream); }

/* The card lives on .ast-article-inner, not on the grid column: the column has
   16px side padding, so a border there made neighbouring cards share an edge. */
.blog .ast-article-post {
	border: 0;
	background: transparent;
}

.blog .ast-article-post .ast-article-inner {
	height: 100%;
	background: #fff;
	border: 1px solid var(--abl-line);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(47, 52, 44, .06);
	transition: transform .18s ease, box-shadow .18s ease;
}

.blog .ast-article-post:hover .ast-article-inner {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(47, 52, 44, .12);
}

/* Astra forces the thumbnail box to 16:9 with object-fit: fill, which stretched
   every non-16:9 photo (a square one by 78%). Crop to fill instead. */
.blog .ast-article-post .post-thumb img {
	object-fit: cover;
	object-position: center;
}

.blog .ast-article-post .entry-title {
	font-size: 1.2rem;
	line-height: 1.35;
}

.blog .ast-article-post .entry-title a { color: var(--abl-ink); }
.blog .ast-article-post .entry-title a:hover { color: var(--abl-sage); }
.blog .ast-article-post .entry-meta,
.blog .ast-article-post .entry-meta * { color: var(--abl-muted); font-size: .85rem; }

/* --------------------------------------------------------------- sidebar */

.abs { display: flex; flex-direction: column; gap: 1.5rem; }

.abs-card {
	background: #fff;
	border: 1px solid var(--abl-line);
	border-radius: 14px;
	padding: 1.4rem;
}

.abs-card__title {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	color: var(--abl-ink);
}

/* More articles */
.abs-more__list { list-style: none; margin: 0; padding: 0; }

.abs-more__item + .abs-more__item { border-top: 1px solid var(--abl-line); }

.abs-more__item a {
	display: flex;
	gap: .85rem;
	align-items: flex-start;
	padding: .8rem 0;
	text-decoration: none;
}

.abs-more__thumb {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background: var(--abl-cream) center/cover no-repeat;
}

.abs-more__thumb--empty { background: var(--abl-cream); }

.abs-more__text { display: flex; flex-direction: column; gap: .2rem; }

.abs-more__title {
	color: var(--abl-ink);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.35;
}

.abs-more__item a:hover .abs-more__title { color: var(--abl-sage); }
.abs-more__date { color: var(--abl-muted); font-size: .8rem; }

/* Try a calculator */
.abs-tools__list { list-style: none; margin: 0 0 .9rem; padding: 0; }
.abs-tools__list li + li { border-top: 1px solid var(--abl-line); }

.abs-tools__list a {
	display: block;
	padding: .7rem 0;
	color: var(--abl-ink);
	text-decoration: none;
	font-size: .95rem;
}

.abs-tools__list a:hover { color: var(--abl-sage); }

.abs-tools__all {
	display: inline-block;
	color: var(--abl-sage);
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
}

.abs-tools__all:hover { text-decoration: underline; }

/* Talk to a dietitian */
.abs-cta { background: var(--abl-cream); }
.abs-cta__lead { margin: 0 0 1rem; font-size: .92rem; line-height: 1.55; color: var(--abl-muted); }

.abs-cta__btn {
	display: block;
	text-align: center;
	padding: .75rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--abl-sage);
	color: var(--abl-sage);
	text-decoration: none;
	font-weight: 600;
	font-size: .95rem;
	margin-bottom: .6rem;
}

.abs-cta__btn--primary { background: var(--abl-sage); border-color: var(--abl-sage); color: #fff; }
.abs-cta__btn--primary:hover { background: var(--abl-sage-dark); border-color: var(--abl-sage-dark); color: #fff; }
.abs-cta__btn:not(.abs-cta__btn--primary):hover { background: rgba(95, 108, 91, .08); color: var(--abl-sage); }

.abs-cta__link { display: inline-block; margin-top: .3rem; color: var(--abl-tan); font-weight: 600; font-size: .9rem; text-decoration: none; }
.abs-cta__link:hover { text-decoration: underline; }

/* Sticky only where there is room to scroll past it. */
@media (min-width: 993px) {
	.single-post .widget-area .abs { position: sticky; top: 100px; }
}

@media (max-width: 992px) {
	.single-post .widget-area { margin-top: 2.5rem; }
	.abs { gap: 1.2rem; }
}