/**
 * Out-N-Out Blog — archive grid + single post. Token-driven; loaded only on blog
 * views. Breadcrumb styling comes from the Breadcrumbs widget CSS (enqueued too).
 */

/* Live's .m-article section: 30px top, 100px bottom (space before the footer). */
.oon-blog,
.oon-single-post {
	padding-block: 30px 100px;
}
/* Blog aligns to the wider header gutter (1660) like live — not the standard
   1170 content container — so the 4-up grid fills the same width and its left
   edge lines up with the header logo. Matches .oon-header__inner geometry. */
.oon-container.oon-blog {
	max-width: 1660px;
	padding-inline: clamp(20px, 2vw, 26px);
	/* Live's blog section leaves 100px below the grid before the footer. */
	padding-bottom: 100px;
}
/* The grid itself is narrower than the 1660 header band and left-packed against
   the gutter — matching live, where 4 cards are ~279px wide (4 x 279 + 3 x 30px
   gaps ≈ 1208) and trailing space is left on the right. */
.oon-blog__grid {
	max-width: 1208px;
}
.oon-breadcrumbs {
	margin-bottom: 16px;
}

/* ---- Archive header ---- */
.oon-blog__header {
	margin-bottom: 30px;
}
.oon-blog__title {
	margin: 0;
	font-family: var(--oon-font-heading);
	font-weight: var(--oon-fw-heading, 500);
	font-size: clamp(1.8rem, 3.5vw, 2.6rem);
	color: var(--oon-color-heading, #332d55);
}
.oon-blog__description {
	margin-top: 10px;
	color: var(--oon-color-text-secondary, #666);
}

/* Centered blog header (matches live: a large centered title with the breadcrumb
   centered directly beneath it, sitting above the left-aligned post grid). */
.oon-blog__header--center {
	text-align: center;
	/* Live's page header pads 60px top + 60px bottom at >=1024px. The container
	   already contributes 30px above, so +30px here totals 60px over the title;
	   60px margin below matches the gap before the grid. */
	padding-top: 30px;
	margin-bottom: 60px;
}
@media (max-width: 1024px) {
	.oon-blog__header--center {
		padding-top: 0;
		margin-bottom: 30px;
	}
}
.oon-blog__header--center .oon-blog__title {
	font-size: clamp(1.9rem, 1rem + 2.2vw, 2.8rem);
	margin-bottom: 12px;
}
.oon-blog__header--center .oon-breadcrumbs {
	margin-bottom: 0;
}
.oon-blog__header--center .oon-breadcrumbs__list {
	justify-content: center;
}

/* Post grid + card styling is the SINGLE source in the Blog Posts widget
   stylesheet (oon-widget-blog-posts), which the theme enqueues on blog views —
   see inc/enqueue.php. Only blog-page-specific styles live here. */

/* ---- Pagination ---- */
.oon-blog .navigation.pagination,
.oon-blog .pagination {
	margin-top: 44px;
	text-align: center;
}
.oon-blog .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	margin: 0 3px;
	border: 1px solid var(--oon-color-border, #eee);
	border-radius: var(--oon-radius-sm, 4px);
	color: var(--oon-color-heading, #332d55);
	text-decoration: none;
}
.oon-blog .page-numbers.current {
	background: var(--oon-color-heading, #332d55);
	color: #fff;
	border-color: var(--oon-color-heading, #332d55);
}

/* =========================================================================
   SINGLE POST
   ========================================================================= */
/* Live uses a sidebar-right layout: the whole post sits in a ~75% left column
   with an empty 25% gutter on the right (so the image is left-aligned, not
   page-centered). We mirror that with a left-aligned column. */
.oon-article__col {
	width: 75%;
	margin: 0;
}
.oon-article {
	margin: 0;
}
/* The feature image spans the full column width; the reading blocks are inset to
   live's ~700px measure (wrapper 847px minus its 50px inner + 24px article
   padding) and centred within the column, so text is narrower than the image. */
.oon-article__header,
.oon-article__content,
.oon-article__footer,
.oon-post-nav,
.oon-related,
.oon-article__comments {
	max-width: 607px;
	margin-inline: auto;
}
@media (max-width: 989px) {
	.oon-article__col {
		width: 100%;
	}
	.oon-article__header,
	.oon-article__content,
	.oon-article__footer,
	.oon-post-nav,
	.oon-related,
	.oon-article__comments {
		max-width: none;
	}
}
.oon-article__header {
	text-align: center;
	margin-bottom: 24px;
}
/* Category eyebrow above the title (matches the live m-article__blog label). */
.oon-article__blog {
	display: inline-block;
	margin-bottom: 8px;
	font-family: var(--oon-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--oon-color-text-secondary, rgba(51, 45, 85, 0.75));
	transition: color 0.25s ease;
}
.oon-article__blog:hover {
	color: var(--oon-color-heading, #332d55);
}
.oon-article__title {
	margin: 0 0 10px;
	font-family: var(--oon-font-heading);
	font-weight: var(--oon-fw-heading, 500);
	font-size: clamp(1.625rem, 1rem + 2vw, 2.25rem);
	line-height: 1.444;
	color: var(--oon-color-heading, #332d55);
}
.oon-article__meta {
	font-family: var(--oon-font-body);
	font-size: 0.9rem;
	color: var(--oon-color-text-secondary, #666);
	display: flex;
	gap: 14px;
	justify-content: center;
}
.oon-article__featured {
	margin: 0 0 32px;
	border-radius: var(--oon-radius-sm, 4px);
	overflow: hidden;
}
.oon-article__featured img {
	width: 100%;
	height: auto;
	display: block;
}

/* Article body typography — matches live exactly:
   Jost 400, 16px, 28px line-height (1.75), colour #212121 (rgb 33,33,33). */
.oon-article__content {
	font-family: var(--oon-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5; /* live renders article paragraphs at ~24px (1.5), not the 28px body default */
	color: var(--oon-color-text, #212121);
	/* Imported content tags paragraphs with WordPress's `.has-medium-font-size`,
	   which forces `font-size: var(--wp--preset--font-size--medium) !important`
	   (20px) and overrides the 16px above. Live's paragraphs are plain 16px body
	   text (the class is inert on Shopify), so redefine the preset to 16px here —
	   the !important still applies, but now resolves to the correct size. */
	--wp--preset--font-size--medium: 16px;
}
.oon-article__content h2,
.oon-article__content h3,
.oon-article__content h4 {
	font-family: var(--oon-font-heading);
	color: var(--oon-color-heading, #332d55);
	margin: 1.6em 0 0.5em;
}
.oon-article__content h2 { font-size: 1.6rem; }
.oon-article__content h3 { font-size: 1.3rem; }
/* Live uses .rte p { margin: .75em 0 } with no top gap on the first / no bottom
   gap on the last paragraph. */
.oon-article__content p { margin: 0.75em 0; }
.oon-article__content > p:first-child,
.oon-article__content > *:first-child { margin-top: 0; }
.oon-article__content > p:last-child,
.oon-article__content > *:last-child { margin-bottom: 0; }
.oon-article__content ul,
.oon-article__content ol { margin: 0.75em 0 0.75em 1.4em; }
.oon-article__content li { margin-bottom: 0.4em; }
.oon-article__content a {
	color: var(--oon-color-accent, #9a84c8);
	text-decoration: underline;
}
.oon-article__content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--oon-radius-sm, 4px);
	margin: 1em 0;
}
.oon-article__content blockquote {
	margin: 1.5em 0;
	padding: 12px 22px;
	border-left: 3px solid var(--oon-color-accent, #9a84c8);
	background: var(--oon-color-bg-secondary, #f5f5f5);
	font-style: italic;
	color: var(--oon-color-heading, #332d55);
}

/* ---- Footer: share + tags ---- */
/* Width + centring come from the shared reading-blocks rule (max-width 607px). */
.oon-article__footer {
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid var(--oon-color-border, #eee);
}
/* Share row — matches live .m-sharing-social: plain icons (no chip), a bold
   "Share:" label with a 20px gap, 16px between the icons, dark colour that
   lightens on hover. */
.oon-share {
	display: flex;
	align-items: center;
	margin-top: 20px;
}
.oon-share__label {
	font-family: var(--oon-font-body);
	font-weight: 500;
	margin-right: 20px;
	color: var(--oon-color-text, #212121);
}
.oon-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	color: var(--oon-color-text, #212121);
	text-decoration: none;
	transition: color var(--oon-transition, 0.25s ease);
}
.oon-share__link + .oon-share__link {
	margin-left: 16px;
}
.oon-share__link svg {
	width: 16px;
	height: 16px;
}
.oon-share__link:hover,
.oon-share__link:focus-visible {
	color: var(--oon-color-text-secondary, #666);
}
.oon-article__tags {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.oon-article__tags a {
	font-size: 0.82rem;
	padding: 5px 12px;
	background: var(--oon-color-bg-secondary, #f5f5f5);
	border-radius: var(--oon-radius-full, 9999px);
	color: var(--oon-color-text-secondary, #666);
	text-decoration: none;
}

/* ---- Prev / next ---- */
/* Prev/Next — matches live .m-article-navigation: a full-width row with a top
   divider line (this is the "missing line"), an arrow, an uppercase label and a
   Jost-500 title that underlines on hover. No boxed card. Width comes from the
   shared 607px reading-blocks rule. */
.oon-post-nav {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--oon-color-border, #eee);
	display: flex;
	gap: 30px;
}
.oon-post-nav .nav-links {
	display: contents;
}
.oon-post-nav a {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 10px 0;
	color: var(--oon-color-text, #212121);
	text-decoration: none;
}
.oon-post-nav .nav-next {
	margin-left: auto;
}
.oon-post-nav .nav-next a {
	flex-direction: row-reverse;
	text-align: right;
}
.oon-post-nav__arrow {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}
.oon-post-nav__label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--oon-color-text-secondary, #666);
	margin-bottom: 4px;
}
.oon-post-nav__title {
	font-family: var(--oon-font-body);
	font-weight: 500;
	color: var(--oon-color-text, #212121);
}
.oon-post-nav a:hover .oon-post-nav__title {
	text-decoration: underline;
}

/* ---- Related ---- */
.oon-related {
	margin-top: 60px;
}
.oon-related__heading {
	margin: 0 0 26px;
	text-align: center;
	font-family: var(--oon-font-heading);
	font-weight: var(--oon-fw-heading, 500);
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--oon-color-heading, #332d55);
}
/* Related always renders 3 posts, so keep it a 3-up row even though the shared
   archive grid is 4-up. Extra specificity wins over .oon-posts-grid at every
   breakpoint regardless of stylesheet load order. */
.oon-related .oon-related__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
	.oon-related .oon-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.oon-related .oon-related__grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Comments ---- */
/* Width + centring come from the shared reading-blocks rule (607px). */
.oon-article__comments {
	margin-top: 60px;
	padding-top: 40px;
	border-top: 1px solid var(--oon-color-border, #eee);
}
.oon-article__comments .comments-title {
	font-family: var(--oon-font-heading);
	color: var(--oon-color-heading, #332d55);
	margin-bottom: 20px;
}
.oon-article__comments .comment-list {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}

/* ---- Comment form: matches live m-comment-form ---- */
.oon-comment-title {
	text-align: center;
	font-family: var(--oon-font-heading);
	font-weight: var(--oon-fw-heading, 500);
	font-size: clamp(1.5rem, 1rem + 1.6vw, 1.875rem); /* live 30px */
	line-height: 1.2;
	color: var(--oon-color-heading, #332d55);
	margin: 0 0 8px;
}
.oon-comment-notes {
	text-align: center;
	color: var(--oon-color-text-secondary, #666);
	line-height: 1.75;
	margin: 0 0 40px;
}
.oon-comment-field--message {
	margin-bottom: 30px;
}
.oon-comment-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
	margin-bottom: 30px;
}
.oon-comment-form textarea,
.oon-comment-form input[type="text"],
.oon-comment-form input[type="email"] {
	width: 100%;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--oon-color-border, #d9d9d9);
	border-radius: var(--oon-radius-sm, 6px);
	font-family: var(--oon-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--oon-color-text, #212121);
}
.oon-comment-form textarea::placeholder,
.oon-comment-form input::placeholder {
	color: var(--oon-color-text-secondary, #666);
}
.oon-comment-form textarea:focus,
.oon-comment-form input:focus {
	border-color: var(--oon-color-text, #212121);
	outline: none;
}
/* "Submit Now" — centred, borderless text button like live. */
.oon-article__comments .form-submit {
	text-align: center;
	margin: 40px 0 0;
}
button.oon-comment-submit {
	display: inline-block;
	padding: 0;
	background: none;
	border: none;
	font-family: var(--oon-font-body);
	font-weight: 600;
	font-size: 16px;
	color: var(--oon-color-text, #212121);
	cursor: pointer;
	transition: opacity var(--oon-transition, 0.25s ease);
}
button.oon-comment-submit:hover {
	opacity: 0.65;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1200px) {
	.oon-posts-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 900px) {
	.oon-posts-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.oon-posts-grid {
		grid-template-columns: 1fr;
		gap: var(--oon-column-gap-mobile, 16px);
	}
	.oon-post-nav {
		flex-direction: column;
	}
	.oon-post-nav a {
		max-width: 100%;
	}
	.oon-post-nav .nav-next {
		text-align: left;
	}
	.oon-article__content {
		font-size: 1rem;
	}
}