/*!
Theme Name: nascency
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: nascency
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

nascency is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* === Fix: mobile article content cut off by long unbreakable URLs (2026-07-14) === */
/* Root cause: .post-hero-inner is display:grid; grid items default to min-width:auto, */
/* so a long raw URL in body copy forces the column wider than the viewport, and the   */
/* theme's body{overflow:hidden} makes the clipped text unreachable. Allow the grid     */
/* item to shrink and let long tokens wrap. */
.post-single-page .post-hero-inner > * { min-width: 0; }
.post-single-page .post-hero-content { overflow-wrap: anywhere; }
.post-single-page .post-hero-content img { max-width: 100%; height: auto; }

/* === Learn pages: filter bar, theme scroll strip, load more, card fixes (2026-07-15) === */
/* Scoped to the learn/blog templates via .blog-page ancestor (all three templates use it). */

.learn-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 28px;
}

/* --- Search --- */
.learn-search {
	display: flex;
	flex: 1 1 260px;
	max-width: 420px;
	border: 1px solid #404D60;
	border-radius: 999px;
	overflow: hidden;
	background: #FFFFFF;
}
.learn-search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	background: transparent;
	padding: 12px 18px;
	font-size: 15px;
	color: #404D60;
	font-family: inherit;
}
.learn-search button {
	border: 0;
	cursor: pointer;
	background: #404D60;
	color: #F4E9DF;
	font-size: 14px;
	font-weight: 600;
	padding: 0 20px;
	min-height: 44px;
	font-family: inherit;
}

/* --- Audience toggle (segmented) --- */
.learn-audience-toggle {
	display: inline-flex;
	border: 1px solid #404D60;
	border-radius: 999px;
	overflow: hidden;
	background: #FFFFFF;
}
.learn-audience-toggle a {
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 600;
	color: #404D60;
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}
.learn-audience-toggle a + a { border-left: 1px solid #d8d2c9; }
.learn-audience-toggle a.is-active {
	background: #E47358;
	color: #FFFFFF;
}

/* --- Controls row: Sort (left) + Filter by theme (right), both dropdowns --- */
.learn-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	width: 100%;
}
.learn-control {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.learn-control-sort { margin-right: auto; }   /* sort pinned left */
.learn-control-theme { margin-left: auto; }    /* theme pinned right */
.learn-control > label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #2F6B65;
}
.learn-select-wrap {
	position: relative;
	display: inline-block;
}
.learn-select-wrap::after {
	content: "\25BE"; /* ▾ */
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: #404D60;
	font-size: 14px;
}
.learn-select-wrap select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	min-height: 48px;
	padding: 10px 44px 10px 20px;
	border: 1px solid #404D60;
	border-radius: 999px;
	background: #FFFFFF;
	color: #404D60;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	line-height: 1.2;
}
.learn-control-theme .learn-select-wrap,
.learn-control-theme .learn-select-wrap select { width: 100%; }
.learn-apply { min-height: 48px; }

/* --- Load more --- */
.learn-load-more-wrap { text-align: center; margin-top: 32px; }
#learn-load-more.is-loading { opacity: 0.6; pointer-events: none; }

/* --- No results --- */
.learn-no-results { font-size: 16px; color: #404D60; padding: 24px 0; }
.learn-no-results p { margin: 0 0 12px; }

/* --- v2 index engine --- */
html.learn-index-ready .learn-load-more { display: none; }
.learn-result-count {
	font-size: 14px;
	font-weight: 600;
	color: #2F6B65;
	margin: 0;
	min-height: 20px;
}

/* --- Theme row: label + count header, pill list (pills shown on desktop/tablet only) --- */
.learn-theme-row { flex-basis: 100%; }
.learn-theme-row-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.learn-theme-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #2F6B65;
}
.learn-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.learn-pill {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 12px 26px;
	border: 1px solid #404D60;
	border-radius: 999px;
	background: #FFFFFF;
	color: #404D60;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.learn-pill:hover { background: #404D60; color: #F4E9DF; }
.learn-pill.is-active {
	background: #E47358;
	border-color: #E47358;
	color: #FFFFFF;
}

/* Desktop/tablet: pills replace the theme dropdown; search left, toggle center, sort right */
@media (min-width: 769px) {
	.learn-control-theme { display: none; }
	/* Bottom-align the top row so search, toggle, and the SORT dropdown share a baseline
	   (the "SORT" label sits above its dropdown without pushing it down). */
	.learn-filter-bar { align-items: flex-end; }
	.learn-search { flex: 1 1 340px; max-width: 520px; align-self: flex-end; }
	.learn-audience-toggle { align-self: flex-end; }
	.learn-controls { margin-left: auto; flex: 0 0 auto; width: auto; align-items: flex-end; }
	.learn-control-sort { gap: 6px; }
	.learn-theme-row {
		border-top: 1px solid rgba(64, 77, 96, 0.15);
		margin-top: 8px;
		padding-top: 18px;
	}
	.learn-theme-row-head { margin-bottom: 16px; }
}
.learn-inline-action {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 18px;
	margin-right: 8px;
	border: 1px solid #404D60;
	border-radius: 999px;
	background: #FFFFFF;
	color: #404D60;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}
.learn-inline-action:hover { background: #404D60; color: #F4E9DF; }
.learn-nudge { flex-basis: 100%; text-align: center; padding: 24px 0; color: #404D60; }
.learn-nudge p { margin: 0 0 12px; font-size: 15px; }

/* --- Infinite scroll sentinel + loading indicators --- */
#learn-sentinel { width: 100%; height: 1px; }

/* Tail spinner: shown while a scroll batch fetches live (prefetch misses) */
.learn-loading {
	display: none;
	justify-content: center;
	padding: 24px 0 8px;
}
.learn-loading.is-active { display: flex; }
.learn-loading span,
.blog-card-wrap.is-loading::before {
	width: 30px;
	height: 30px;
	border: 3px solid rgba(64, 77, 96, 0.25);
	border-top-color: #E47358;
	border-radius: 50%;
	animation: learn-spin 0.7s linear infinite;
}
@keyframes learn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.learn-loading span, .blog-card-wrap.is-loading::before { animation-duration: 2s; }
}

/* Filter-change loading: dim the grid and show a spinner IN the grid, near the top,
   so it's visible at any scroll position on desktop and mobile alike. */
.blog-card-wrap { position: relative; }
.blog-card-wrap.is-loading { min-height: 320px; }
.blog-card-wrap.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(244, 233, 223, 0.65);
	z-index: 5;
}
.blog-card-wrap.is-loading::before {
	content: "";
	position: absolute;
	top: 110px;
	left: 50%;
	margin-left: -15px;
	z-index: 6;
}

/* --- Card fixes: clamp titles, readable pills ---
   Title crop bug (2026-07-16): the theme's base h6 default is 32px @ 100%
   line-height (0% descender headroom) with our -webkit-line-clamp:3 hard-
   clipping the box — every title with a g/y/p/j on its last visible line got
   its descender cut off. Reference check against HubSpot/Ahrefs blog card
   titles: neither site clamps card titles at all, and both use generous
   line-height (HubSpot: 14-16px @ ~150-157%; Ahrefs: 32px bold @ ~106% but
   unclamped). Since we keep the clamp (fixed card-grid height is intentional)
   and our heading font is a serif display face (IvyPrestoText, deeper
   descenders than a sans UI font), each tier below sets an explicit
   font-size + a line-height generous enough (145-150%) to give descenders
   room inside the clamped box. Desktop/tablet tiers added; mobile tier
   bumped from 1.3 (still too tight) to 1.5. */
.blog-page .blog-card h6,
.blog-page .blog-card h6 a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.blog-page .blog-card .tag-btn { font-size: 12px; }

/* --- Desktop (>=1025px) --- */
@media (min-width: 1025px) {
	.blog-page .blog-card h6,
	.blog-page .blog-card h6 a {
		font-size: 20px;
		line-height: 1.45;
	}
}

/* --- Tablet (769px-1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
	.blog-page .blog-card h6,
	.blog-page .blog-card h6 a {
		font-size: 19px;
		line-height: 1.45;
	}
}

/* --- Mobile --- */
@media (max-width: 768px) {
	/* CRITICAL: theme's style.min.css sets `.blog-wrap .blog-card { display:none }` on mobile
	   (its legacy JS re-showed cards via inline styles). Our engine renders clean cards,
	   so they were invisible on every phone. Re-enable them on the learn templates. */
	.blog-page .blog-wrap .blog-card { display: block; }

	/* Mobile keeps the dropdown UI exactly — hide the desktop pill row (count stays visible) */
	.learn-pill-row { display: none; }
	.learn-theme-label { display: none; }

	.learn-filter-bar { gap: 12px; }
	.learn-search { flex-basis: 100%; max-width: none; }
	.learn-audience-toggle {
		width: 100%;
		display: flex;
		position: sticky;
		top: 8px;
		z-index: 40;
		box-shadow: 0 2px 10px rgba(64, 77, 96, 0.08);
	}
	.learn-audience-toggle a { flex: 1; justify-content: center; padding: 12px 8px; font-size: 13px; }
	/* Sort + theme side by side, each half width */
	.learn-controls { gap: 12px; flex-wrap: nowrap; }
	.learn-control { flex: 1 1 0; min-width: 0; }
	.learn-control-sort,
	.learn-control-theme { margin: 0; }
	.learn-select-wrap { width: 100%; display: block; }
	.learn-control-sort .learn-select-wrap select { width: 100%; }
	.learn-select-wrap select { padding-left: 16px; padding-right: 38px; font-size: 14px; }
	.blog-page .blog-card h6,
	.blog-page .blog-card h6 a {
		font-size: 18px;
		line-height: 1.5;
	}
	.blog-page .blog-card .tag-btn { font-size: 12px; }
}

/* ==========================================================================
   Article breadcrumbs (single posts only) — 2026-07-16
   Desktop/tablet: full trail Home > Audience > Title
   Mobile (<=768px): collapses to "< Audience" back-link
   ========================================================================== */
.post-single-page .nasc-breadcrumb {
	margin: 0 0 4px;
	padding: 18px 0 6px;
	font-family: 'Montserrat', sans-serif;
}
.nasc-breadcrumb-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	line-height: 1.4;
	min-width: 0;
}
.nasc-breadcrumb-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.nasc-breadcrumb-list a {
	color: #404D60;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(64, 77, 96, .35);
	padding-bottom: 1px;
	transition: color .15s ease, border-color .15s ease;
	white-space: nowrap;
}
.nasc-breadcrumb-list a:hover,
.nasc-breadcrumb-list a:focus {
	color: #C95B43;
	border-color: #C95B43;
}
.nasc-bc-sep {
	color: #A9AEB6;
	font-size: 16px;
	line-height: 1;
	font-weight: 400;
}
.nasc-bc-current span {
	color: #8A9099;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 60ch;
}
/* The "<" back chevron only shows in the mobile collapsed state */
.nasc-bc-back {
	display: none;
	margin-right: 6px;
	font-size: 18px;
	line-height: 1;
}

@media (max-width: 768px) {
	.post-single-page .nasc-breadcrumb {
		padding: 14px 0 4px;
	}
	/* Hide Home crumb and current-title crumb; keep only the parent as a back-link.
	   Selectors scoped through .nasc-breadcrumb-list to outrank the base
	   `.nasc-breadcrumb-list li { display:flex }` rule (specificity 0,1,1). */
	.nasc-breadcrumb-list .nasc-bc-home,
	.nasc-breadcrumb-list .nasc-bc-current {
		display: none;
	}
	.nasc-breadcrumb-list .nasc-bc-parent .nasc-bc-sep {
		display: none;
	}
	.nasc-bc-back {
		display: inline-block;
	}
	.nasc-breadcrumb-list a {
		border-bottom: 0;
		font-size: 16px;
		padding-bottom: 0;
	}
}

/* ==========================================================================
   Article typography standard — 2026-07-16
   Unified type scale for blog articles, from the benchmark study
   (HubSpot / Healthline / Ahrefs: 16-18px body, lh 1.6-1.7, near-black text).
   Applies to ALL articles (sample verified on post 10801, 2026-07-16).
   font-size/line-height carry !important so inline styles pasted into post
   content (e.g. Google Docs exports) cannot break the standard.
   ========================================================================== */
.post-single-page .post-hero-content h1 {
	font-size: 40px !important;
	line-height: 1.15 !important;
	margin-bottom: 20px;
}
.post-single-page .post-hero-content h2 {
	font-size: 30px !important;
	line-height: 1.3 !important;
	margin: 44px 0 14px;
}
.post-single-page .post-hero-content h3 {
	font-size: 24px !important;
	line-height: 1.35 !important;
	margin: 34px 0 12px;
}
.post-single-page .post-hero-content h4 {
	font-size: 20px !important;
	line-height: 1.4 !important;
	margin: 28px 0 10px;
}
.post-single-page .post-hero-content p,
.post-single-page .post-hero-content li {
	font-size: 18px !important;
	line-height: 1.7 !important;
	color: #404D60;
}
.post-single-page .post-hero-content p {
	margin-bottom: 18px;
}
.post-single-page .post-hero-content li {
	margin-bottom: 10px;
}

@media (min-width: 769px) and (max-width: 1024px) {
	.post-single-page .post-hero-content h1 { font-size: 34px !important; line-height: 1.2 !important; }
	.post-single-page .post-hero-content h2 { font-size: 27px !important; }
	.post-single-page .post-hero-content h3 { font-size: 22px !important; }
	.post-single-page .post-hero-content h4 { font-size: 19px !important; }
	.post-single-page .post-hero-content p,
	.post-single-page .post-hero-content li { font-size: 17px !important; line-height: 1.65 !important; }
}

@media (max-width: 768px) {
	.post-single-page .post-hero-content h1 { font-size: 28px !important; line-height: 1.25 !important; }
	.post-single-page .post-hero-content h2 { font-size: 24px !important; margin: 34px 0 12px; }
	.post-single-page .post-hero-content h3 { font-size: 20px !important; }
	.post-single-page .post-hero-content h4 { font-size: 18px !important; }
	.post-single-page .post-hero-content p,
	.post-single-page .post-hero-content li { font-size: 16px !important; line-height: 1.6 !important; }
}

/* ==========================================================================
   Related-posts slider cards (article pages) — 2026-07-16
   Same card-title standard as the learn-page grid: the learn fix is scoped
   to .blog-page, so these .post-single-page slider cards were still on the
   theme h6 default (32px serif @ 116%). Mirror: 3-line clamp + tiered sizes.
   ========================================================================== */
.post-single-page .related-posts-slider .blog-card h6,
.post-single-page .related-posts-slider .blog-card h6 a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 20px;
	line-height: 1.45;
}
.post-single-page .related-posts-slider .blog-card .tag-btn { font-size: 12px; }

@media (min-width: 769px) and (max-width: 1024px) {
	.post-single-page .related-posts-slider .blog-card h6,
	.post-single-page .related-posts-slider .blog-card h6 a {
		font-size: 19px;
	}
}

@media (max-width: 768px) {
	.post-single-page .related-posts-slider .blog-card h6,
	.post-single-page .related-posts-slider .blog-card h6 a {
		font-size: 18px;
		line-height: 1.5;
	}
}