/* =========================================================================
   BoatBrief — blog.css
   Blog-only styles, layered on top of styles.css (which supplies the design
   tokens, reset, wordmark, header, footer, buttons, cards and containers).
   Loaded only on /blog/ pages. Mobile-first, accessible, printer-friendly.
   ========================================================================= */

/* ------------------------- Sticky site header -------------------------- */
/* The homepage header is fixed and hidden until the user scrolls. On blog
   pages we keep it pinned to the top of the viewport so the wordmark and CTA
   stay reachable while reading (no scroll script needed). It starts in the
   document flow and sticks once it reaches the top edge. */
.site-header--sticky {
	position: sticky;
	top: 0;
	transform: none;
	opacity: 1;
	pointer-events: auto;
}

/* ----------------------------- Breadcrumb ------------------------------ */
.breadcrumb { margin: 0 0 var(--space-5); }
.breadcrumb__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	color: var(--gray);
}
.breadcrumb__item { display: flex; align-items: center; gap: var(--space-2); }
/* A chevron separator before every item except the first. */
.breadcrumb__item + .breadcrumb__item::before {
	content: "\203A"; /* › */
	color: var(--gray);
}
.breadcrumb__item a { color: var(--blue); text-decoration: none; }
.breadcrumb__item a:hover { color: var(--dark-blue); text-decoration: underline; }
.breadcrumb__item[aria-current="page"] { color: var(--gray); }

/* ------------------------------- Post ---------------------------------- */
.post { padding: var(--space-7) 0 var(--space-8); }

.post__header {
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid rgba(8, 31, 53, 0.10);
}
.post__title {
	font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.5rem);
	margin: 0 0 var(--space-3);
	color: var(--dark-blue);
}
.post__meta {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	color: var(--gray);
}

/* --------------------------- Article body ------------------------------ */
/* Long-form reading typography. The narrow container already caps the
   measure; a slightly taller line-height improves readability. */
.post__body { line-height: 1.7; }

.post__body h2 {
	font-size: clamp(1.35rem, 1rem + 1.4vw, 1.7rem);
	margin: var(--space-7) 0 var(--space-4);
	color: var(--dark-blue);
}
.post__body h3 {
	font-size: 1.2rem;
	margin: var(--space-6) 0 var(--space-3);
	color: var(--dark-blue);
}

.post__body ul,
.post__body ol {
	margin: 0 0 var(--space-4);
	padding-left: var(--space-6);
}
.post__body li { margin-bottom: var(--space-2); }

/* Body links use the bright brand accent, underlined for clarity. */
.post__body a {
	color: #2E86C1;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.post__body a:hover { color: var(--blue); }

/* Inline code (used for sample survey readings). */
.post__body code {
	font-family: var(--font-mono);
	font-size: 0.85em;
	background: var(--white);
	color: var(--dark-blue);
	padding: 0.12em 0.4em;
	border: 1px solid rgba(8, 31, 53, 0.12);
	border-radius: var(--radius-sm);
}

/* ------------------------- Closing CTA block --------------------------- */
/* The distinct, enticing call to action that replaces each post's closing
   blockquote. Uses the brand cover gradient so it stands apart from the
   article, with a high-contrast white button. */
.post-cta {
	margin-top: var(--space-8);
	padding: var(--space-7) var(--space-6);
	background: var(--cover-gradient);
	color: var(--white);
	border-radius: var(--radius);
}
.post-cta__hook {
	font-size: clamp(1.3rem, 1rem + 1.2vw, 1.6rem);
	margin: 0 0 var(--space-3);
	color: #FFFFFF;
}
.post-cta__text {
	margin: 0 0 var(--space-5);
	color: var(--white);
	max-width: 54ch;
}
/* White button that pops against the gradient (the base .btn--primary
   accent would blend into the gradient's bright-blue end). */
.post-cta .btn--primary {
	background: #FFFFFF;
	color: var(--blue);
	border-color: #FFFFFF;
}
.post-cta .btn--primary:hover {
	background: var(--light-blue);
	border-color: var(--light-blue);
	color: var(--dark-blue);
}

/* --------------------------- Blog index -------------------------------- */
.blog-index__intro {
	font-size: 1.125rem;
	color: var(--gray);
	max-width: 60ch;
	margin: 0 0 var(--space-7);
}

/* Post cards reuse .card; the title is the link and the "Read" line is a
   decorative affordance (aria-hidden), so each card has a single target. */
.post-card { display: flex; flex-direction: column; }
.post-card__title { font-size: 1.2rem; margin: 0 0 var(--space-2); }
.post-card__title a { color: var(--dark-blue); text-decoration: none; }
.post-card__title a:hover { color: #2E86C1; text-decoration: underline; }
.post-card__summary {
	margin: 0 0 var(--space-4);
	color: var(--gray);
	font-size: 0.9875rem;
}
.post-card__more {
	margin: auto 0 0;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 700;
}
.post-card__more a { color: #2E86C1; text-decoration: none; }
.post-card__more a:hover { text-decoration: underline; }

/* ---------------------------- Breakpoints ------------------------------ */
@media (min-width: 880px) {
	/* Three guide cards to a row on wide screens. */
	.cards--blog { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------- Print --------------------------------- */
/* styles.css already hides .site-header, .skip-link and .btn and prints
   links in black; here we additionally drop the breadcrumb and the gradient
   CTA card so the article prints cleanly. */
@media print {
	.breadcrumb,
	.post-cta { display: none !important; }
	.post__body a { color: #000000; }
}