/*
 * Blog styles for Critical Hit.
 *
 * Loaded on the posts page, category archives, search, single posts and the
 * service/destination hub pages. Uses the palette tokens from style.css.
 *
 * ClickUp: 86e32f26h
 */

/* Breadcrumbs
--------------------------------------------- */

.smv-breadcrumb {
	font-size: 14px;
	margin-bottom: 2rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #e8e2df;
	color: var(--wp--color--brown);
}

.smv-breadcrumb a {
	color: var(--wp--color--navy);
	text-decoration: none;
}

.smv-breadcrumb a:hover,
.smv-breadcrumb a:focus {
	text-decoration: underline;
}

.smv-breadcrumb .separator {
	color: var(--wp--color--sand);
	margin: 0 0.4rem;
}

/* Archive heading and intro
--------------------------------------------- */

.smv-blog-archive .page-title h1,
.smv-blog-single .entry-title {
	font-size: 3.5rem;
	line-height: 1.08;
}

.smv-blog-archive .archive-description {
	margin-bottom: 3rem;
}

.smv-blog-archive .archive-description p:last-child {
	margin-bottom: 0;
}

/* Gold link treatment
   Shared by "Continue Reading", "See all articles" and "More about Chrissy".
--------------------------------------------- */

.smv-entry-feed .more-link,
.smv-hub-articles__more a,
.smv-author-box__link a {
	display: inline-block;
	font-family: var(--wp--font--primary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--color--gold);
	border-bottom: 2px solid var(--wp--color--sand);
	padding-bottom: 2px;
	transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.smv-entry-feed .more-link::after,
.smv-hub-articles__more a::after,
.smv-author-box__link a::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.5rem;
	transition: transform 0.2s ease-in-out;
}

.smv-entry-feed .more-link:hover,
.smv-entry-feed .more-link:focus,
.smv-hub-articles__more a:hover,
.smv-hub-articles__more a:focus,
.smv-author-box__link a:hover,
.smv-author-box__link a:focus {
	color: var(--wp--color--navy);
	border-bottom-color: var(--wp--color--gold);
}

.smv-entry-feed .more-link:hover::after,
.smv-entry-feed .more-link:focus::after,
.smv-hub-articles__more a:hover::after,
.smv-hub-articles__more a:focus::after,
.smv-author-box__link a:hover::after,
.smv-author-box__link a:focus::after {
	transform: translateX(4px);
}

/* "Continue Reading" carries the arrow alone — no rule under it. */
.smv-entry-feed .more-link,
.smv-entry-feed .more-link:hover,
.smv-entry-feed .more-link:focus {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Category eyebrow
--------------------------------------------- */

.smv-entry-category {
	font-family: var(--wp--font--primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	margin: 0 0 0.6rem;
	line-height: 1.3;
}

.smv-entry-category a {
	color: var(--wp--color--navy);
	text-decoration: none;
	border-bottom: 2px solid var(--wp--color--sand);
	padding-bottom: 1px;
}

.smv-entry-category a:hover,
.smv-entry-category a:focus {
	color: var(--wp--color--gold);
	border-bottom-color: var(--wp--color--gold);
}

/* Archive feed — one column, image right at 50%
--------------------------------------------- */

.smv-entry-feed {
	margin-bottom: 3rem;
}

.smv-entry-feed .entry {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"header"
		"content";
	margin: 0 0 3rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid #ece6e2;
}

.smv-entry-feed .entry:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* Only pair the columns when there is actually an image to pair with —
   search results can include pages that have no featured image. */
.smv-entry-feed .entry:has(> .entry-image-link) {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"header image"
		"content image";
	column-gap: 2.5rem;
	align-items: start;
}

.smv-entry-feed .entry > .entry-image-link {
	grid-area: image;
	display: block;
	line-height: 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--color--sand);
}

.smv-entry-feed .entry > .entry-header {
	grid-area: header;
}

.smv-entry-feed .entry > .entry-content {
	grid-area: content;
}

/* The empty entry footer would otherwise open a third grid row. */
.smv-entry-feed .entry > .entry-footer:empty {
	display: none;
}

/* Overrides the theme's 16px nudge, which belonged to the old float layout. */
.blog .smv-entry-feed article a.entry-image-link img,
.archive .smv-entry-feed article a.entry-image-link img,
.search .smv-entry-feed article a.entry-image-link img,
.smv-entry-feed .entry > .entry-image-link img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.35s ease-in-out;
}

.smv-entry-feed .entry:hover > .entry-image-link img {
	transform: scale(1.03);
}

.smv-entry-feed .entry-title {
	font-family: var(--wp--font--heading);
	font-size: 2rem;
	line-height: 1.2;
	margin: 0 0 0.6rem;
}

.smv-entry-feed .entry-title a {
	color: var(--wp--color--blue);
	text-decoration: none;
}

.smv-entry-feed .entry-title a:hover,
.smv-entry-feed .entry-title a:focus {
	color: var(--wp--color--gold);
}

.smv-entry-feed .entry-meta,
.smv-entry-feed p.entry-meta {
	font-size: 14px;
	color: var(--wp--color--brown);
	margin: 0 0 1rem;
}

.smv-entry-feed .entry-content {
	font-size: 17px;
	line-height: 1.65;
}

.smv-entry-feed .entry-content p {
	margin-bottom: 1.25rem;
}

/* Card grid — hub blocks and prev/next
--------------------------------------------- */

.smv-entry-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem 2rem;
}

.smv-entry-grid .entry {
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
	background: #fff;
	border: 1px solid #ece6e2;
	border-radius: 6px;
	overflow: hidden;
	padding: 0 1.5rem 1.5rem;
	transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.smv-entry-grid .entry:hover,
.smv-entry-grid .entry:focus-within {
	box-shadow: 0 10px 28px rgba(9, 51, 67, 0.12);
	transform: translateY(-2px);
}

.smv-entry-grid .smv-related__image,
.smv-entry-grid .smv-prevnext__image {
	display: block;
	line-height: 0;
	margin: 0 -1.5rem 1.25rem;
	background: var(--wp--color--sand);
}

.smv-entry-grid .smv-related__image img,
.smv-entry-grid .smv-prevnext__image img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.smv-entry-grid .entry > .smv-entry-category:first-child,
.smv-entry-grid .entry > .smv-prevnext__label:first-child {
	padding-top: 1.5rem;
}

.smv-entry-grid .entry-title {
	font-family: var(--wp--font--heading);
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 0 0 0.4rem;
}

.smv-entry-grid .entry-title a {
	color: var(--wp--color--blue);
	text-decoration: none;
}

.smv-entry-grid .entry-title a:hover,
.smv-entry-grid .entry-title a:focus {
	color: var(--wp--color--gold);
}

.smv-entry-grid .entry-meta,
.smv-entry-grid p.entry-meta {
	font-size: 14px;
	color: var(--wp--color--brown);
	margin: auto 0 0;
	padding-top: 0.5rem;
}

/* Pagination
--------------------------------------------- */

.smv-blog-archive .archive-pagination {
	margin: 0 0 4rem;
}

.smv-blog-archive .archive-pagination li a {
	background-color: #fff;
	border: 1px solid #e0d7d2;
	border-radius: 4px;
	color: var(--wp--color--navy);
	font-weight: 700;
	padding: 10px 16px;
}

.smv-blog-archive .archive-pagination li a:focus,
.smv-blog-archive .archive-pagination li a:hover,
.smv-blog-archive .archive-pagination li.active a {
	background-color: var(--wp--color--navy);
	border-color: var(--wp--color--navy);
	color: #fff;
}

/* Single post — heading hierarchy
   The site defaults give .entry-title and h2 the same 3.75rem, so a post title
   and its first subhead read as equals. This sets a deliberate scale.
--------------------------------------------- */

.smv-blog-single .entry-content h2 {
	font-size: 2.25rem;
	line-height: 1.15;
	margin-top: 3rem;
	margin-bottom: 1.25rem;
}

.smv-blog-single .entry-content h3 {
	font-size: 1.5rem;
	line-height: 1.25;
	margin-top: 2.25rem;
	margin-bottom: 1rem;
}

.smv-blog-single .entry-content h4 {
	font-size: 1.25rem;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

.smv-blog-single .entry-content > *:first-child {
	margin-top: 0;
}

.smv-blog-single .entry-content {
	font-size: 18px;
	line-height: 1.7;
}

/* Single post — byline
--------------------------------------------- */

.smv-blog-single .entry-header .entry-meta {
	font-size: 15px;
	color: var(--wp--color--brown);
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid #ece6e2;
}

.smv-blog-single .smv-byline-author {
	color: var(--wp--color--navy);
	font-weight: 700;
	text-decoration: none;
}

.smv-blog-single .smv-byline-author:hover,
.smv-blog-single .smv-byline-author:focus {
	text-decoration: underline;
}

.smv-meta-sep {
	color: var(--wp--color--sand);
	margin: 0 0.35rem;
}

/* Single post — featured image
--------------------------------------------- */

.smv-blog-single .entry-content .singular-image,
.smv-blog-single .entry-content .entry-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 6px;
	margin: 0 0 2.25rem;
	float: none;
}

/* Conversion CTA
--------------------------------------------- */

.smv-post-cta {
	background-color: var(--wp--color--blue);
	border-radius: 6px;
	color: #fff;
	margin: 3rem 0 0;
	padding: 2.5rem;
	text-align: center;
}

.smv-post-cta__title {
	font-family: var(--wp--font--heading);
	color: #fff;
	font-size: 1.75rem;
	margin-bottom: 0.75rem;
}

.smv-post-cta__text {
	color: #fff;
	font-size: 17px;
	line-height: 1.6;
	margin: 0 auto 1.75rem;
	max-width: 44rem;
}

.smv-post-cta__action {
	margin-bottom: 0;
}

/* The global .button:hover only swaps the background, letting the inherited
   link hover colour win and turning the label dark on dark. */
.smv-post-cta .button,
.smv-post-cta .button:hover,
.smv-post-cta .button:focus {
	color: #fff;
}

/* Author box
--------------------------------------------- */

.smv-author-box {
	display: flex;
	align-items: flex-start;
	gap: 1.75rem;
	background-color: #fbf8f6;
	border: 1px solid #ece6e2;
	border-radius: 6px;
	margin: 3rem 0 0;
	padding: 2rem;
}

.smv-author-box__image {
	flex: 0 0 auto;
	line-height: 0;
}

.smv-author-box__image img {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0;
}

.smv-author-box__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wp--color--brown);
	margin: 0 0 0.35rem;
}

.smv-author-box__name {
	font-family: var(--wp--font--heading);
	font-size: 1.5rem;
	margin: 0 0 0.75rem;
}

.smv-author-box__name a {
	color: var(--wp--color--navy);
	text-decoration: none;
}

.smv-author-box__name a:hover,
.smv-author-box__name a:focus {
	color: var(--wp--color--gold);
}

.smv-author-box__bio {
	font-size: 16px;
	line-height: 1.65;
	margin-bottom: 1rem;
}

.smv-author-box__link {
	margin-bottom: 0;
}

/* Previous / next
   Each card is one anchor carrying rel="prev" / rel="next", so everything
   inside is inline-level and laid out with flex.
--------------------------------------------- */

.smv-prevnext {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	margin: 3.5rem 0 0;
	padding-top: 2.5rem;
	border-top: 1px solid #ece6e2;
}

.smv-prevnext__item {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ece6e2;
	border-radius: 6px;
	overflow: hidden;
	padding: 0 1.5rem 1.5rem;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.smv-prevnext__item:hover,
.smv-prevnext__item:focus-visible {
	box-shadow: 0 10px 28px rgba(9, 51, 67, 0.12);
	border-color: var(--wp--color--sand);
	transform: translateY(-2px);
}

.smv-prevnext__label {
	display: block;
	font-family: var(--wp--font--primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wp--color--gold);
	padding: 1.25rem 0 1rem;
}

.smv-prevnext__item--previous .smv-prevnext__label::before {
	content: "\2190";
	margin-right: 0.5rem;
	display: inline-block;
	transition: transform 0.2s ease-in-out;
}

.smv-prevnext__item--previous:hover .smv-prevnext__label::before {
	transform: translateX(-4px);
}

/* Mirror only the label — ragged-left body copy is harder to read. */
.smv-prevnext__item--next .smv-prevnext__label {
	text-align: right;
}

.smv-prevnext__item--next .smv-prevnext__label::after {
	content: "\2192";
	margin-left: 0.5rem;
	display: inline-block;
	transition: transform 0.2s ease-in-out;
}

.smv-prevnext__item--next:hover .smv-prevnext__label::after {
	transform: translateX(4px);
}

.smv-prevnext__image {
	display: block;
	line-height: 0;
	margin: 0 -1.5rem 1.25rem;
	background: var(--wp--color--sand);
}

.smv-prevnext__image img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.35s ease-in-out;
}

.smv-prevnext__item:hover .smv-prevnext__image img {
	transform: scale(1.03);
}

.smv-prevnext__category {
	display: block;
	font-family: var(--wp--font--primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wp--color--navy);
	margin-bottom: 0.6rem;
}

.smv-prevnext__title {
	display: block;
	font-family: var(--wp--font--heading);
	font-size: 1.25rem;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--color--blue);
	margin-bottom: 0.4rem;
	transition: color 0.2s ease-in-out;
}

.smv-prevnext__item:hover .smv-prevnext__title,
.smv-prevnext__item:focus-visible .smv-prevnext__title {
	color: var(--wp--color--gold);
}

.smv-prevnext__date {
	display: block;
	font-size: 14px;
	color: var(--wp--color--brown);
	margin-top: auto;
	padding-top: 0.5rem;
}

/* Breathing room between the last component and the footer.
   The wrap holds two floated columns and has no clearfix, so it collapses to
   zero height and its own padding never shows — the footer ends up butted
   against whichever column is taller. `flow-root` makes it contain the floats
   so the padding below actually renders. Specificity matches the theme's
   shorthand at `.single .site-inner .content-sidebar-wrap`; source order wins. */
.smv-blog-single .site-inner .content-sidebar-wrap,
.smv-blog-archive .site-inner .content-sidebar-wrap,
.search .site-inner .content-sidebar-wrap {
	display: flow-root;
	padding-bottom: 0;
	margin-bottom: var(--wp--spacing--medium);
}

/* Sidebar
--------------------------------------------- */

.sidebar .widget-title,
aside.sidebar h2 {
	font-family: var(--wp--font--primary);
	font-size: 13px;
	font-weight: 700 !important;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--wp--color--navy);
	margin: 0 0 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--wp--color--sand);
}

/* Recent posts and Browse by topic share one list treatment. */
.sidebar .wp-block-latest-posts__list,
.sidebar .wp-block-categories-list {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
}

.sidebar .wp-block-latest-posts__list li,
.sidebar .wp-block-categories-list li {
	list-style: none;
	background: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #ece6e2;
}

.sidebar .wp-block-latest-posts__list li:last-child,
.sidebar .wp-block-categories-list li:last-child {
	border-bottom: 0;
}

.sidebar .wp-block-latest-posts__list li a,
.sidebar .wp-block-categories-list li a {
	position: relative;
	display: block;
	padding: 0.85rem 0 0.85rem 1.75rem;
	font-family: var(--wp--font--primary);
	font-size: 15px;
	line-height: 1.45;
	font-weight: 600;
	color: var(--wp--color--blue);
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

/* Brand arrow, matching the list bullets used in entry content. */
.sidebar .wp-block-latest-posts__list li a::before,
.sidebar .wp-block-categories-list li a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.15rem;
	width: 12px;
	height: 12px;
	background: url(/wp-content/uploads/list-arrow.svg) left center no-repeat;
	background-size: 12px 12px;
	transition: transform 0.2s ease-in-out;
}

.sidebar .wp-block-latest-posts__list li a:hover,
.sidebar .wp-block-latest-posts__list li a:focus,
.sidebar .wp-block-categories-list li a:hover,
.sidebar .wp-block-categories-list li a:focus {
	color: var(--wp--color--gold);
}

.sidebar .wp-block-latest-posts__list li a:hover::before,
.sidebar .wp-block-latest-posts__list li a:focus::before,
.sidebar .wp-block-categories-list li a:hover::before,
.sidebar .wp-block-categories-list li a:focus::before {
	transform: translateX(3px);
}

/* Social icons — the theme strips the block's own background, which left white
   glyphs on a white sidebar. */
.sidebar .wp-block-social-links {
	gap: 0.75rem;
	margin: 0;
	padding: 0;
}

.sidebar .wp-social-link,
.sidebar .wp-block-social-link {
	background: none !important;
	margin: 0;
	padding: 0;
}

.sidebar .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--wp--color--navy);
	color: #fff;
	transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.sidebar .wp-block-social-link-anchor svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.sidebar .wp-block-social-link-anchor:hover,
.sidebar .wp-block-social-link-anchor:focus {
	background-color: var(--wp--color--gold);
	transform: translateY(-2px);
}

/* Hub / about / homepage article block
--------------------------------------------- */

.smv-hub-articles {
	clear: both;
	padding: 3.5rem 5% 4rem;
	background-color: #fbf8f6;
	/* The same full-bleed technique the theme already uses for .alignfull blocks
	   (lib/gutenberg/front-end.css). Without it the cream band stops at the
	   1640px content cap and stops short of the edges past ~1760px, while the
	   sitewide CTA directly below it runs edge to edge. `.site-container` carries
	   overflow-x: hidden, which absorbs the scrollbar width 100vw includes. */
	margin-left: calc(-100vw / 2 + 100% / 2);
	margin-right: calc(-100vw / 2 + 100% / 2);
	max-width: 100vw;
}

.smv-hub-articles__inner {
	max-width: 1640px;
	margin: 0 auto;
}

.smv-hub-articles__title {
	font-family: var(--wp--font--heading);
	color: var(--wp--color--navy);
	font-size: 1.75rem;
	margin-bottom: 1.75rem;
}

.smv-hub-articles .smv-entry-grid {
	margin-bottom: 2rem;
}

.smv-hub-articles__more {
	margin-bottom: 0;
}

.smv-hub-articles__more--button {
	margin-top: 2.5rem;
}

.smv-hub-articles__more--button a.button {
	display: inline-block;
	color: #fff;
	text-decoration: none;
	border-bottom: 0;
}

.smv-hub-articles__more--button a.button:hover,
.smv-hub-articles__more--button a.button:focus {
	color: #fff;
	border-bottom: 0;
}

.smv-hub-articles__more--button a.button::after {
	content: none;
}

/* Media Queries
--------------------------------------------- */

@media only screen and (max-width: 1081px) {

	.smv-blog-archive .page-title h1,
	.smv-blog-single .entry-title {
		font-size: 3rem;
	}

	.smv-blog-single .entry-content h2 {
		font-size: 1.875rem;
	}

	.smv-blog-single .entry-content h3 {
		font-size: 1.375rem;
	}

	.smv-entry-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem 1.5rem;
	}

	.smv-entry-feed .entry-title {
		font-size: 1.75rem;
	}

}

@media only screen and (max-width: 781px) {

	.smv-blog-archive .page-title h1,
	.smv-blog-single .entry-title {
		font-size: 2.25rem;
	}

	.smv-blog-single .entry-content h2 {
		font-size: 1.625rem;
	}

	.smv-blog-single .entry-content h3 {
		font-size: 1.25rem;
	}

	/* Stack the feed: image above the text. */
	.smv-entry-feed .entry,
	.smv-entry-feed .entry:has(> .entry-image-link) {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			"image"
			"header"
			"content";
		column-gap: 0;
	}

	.smv-entry-feed .entry > .entry-image-link {
		margin-bottom: 1.25rem;
	}

	.smv-entry-feed .entry-title {
		font-size: 1.5rem;
	}

	.smv-entry-grid,
	.smv-prevnext {
		grid-template-columns: 1fr;
	}

	.smv-prevnext__item--next .smv-prevnext__label {
		text-align: left;
	}

	.smv-author-box {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 1.75rem;
	}

	.smv-post-cta {
		padding: 2rem 1.5rem;
	}

}

/* Container rhythm
   Interior pages use the full-width-content layout and so never get a
   .content-sidebar-wrap. Blog views do, and it carries padding-top: 10rem on
   top of the fixed-header offset already on .site-container — which is why the
   blog sat much lower than the rest of the site. Horizontal padding is kept.
--------------------------------------------- */

.smv-blog-archive .site-inner .content-sidebar-wrap,
.smv-blog-single .site-inner .content-sidebar-wrap,
.search .site-inner .content-sidebar-wrap {
	padding-top: 0;
}