/* WhiteBoar Blog — theme chrome on top of tokens.css.
 * Mirrors the Loop marketing site (wb-loop marketing-header/footer).
 */

/* ── Header ─────────────────────────────────────────────────────────── */

/* Sticky lives on the template-part wrapper WP renders around the header
 * part — sticky on the inner group would only stick within the wrapper's
 * own 68px height. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

.wb-site-header {
	position: relative;
	border-bottom: 1px solid var(--wb-border);
	transition: box-shadow var(--wb-dur-base) var(--wb-ease-standard);
}

/* The blur lives on a pseudo-element: backdrop-filter on the header itself
 * would become the containing block for the mobile nav overlay's
 * position:fixed and trap it inside the 68px bar. */
.wb-site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, #fff 75%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.wb-site-header.is-scrolled {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.wb-site-header__inner {
	height: 68px;
	gap: var(--wb-space-5);
}

.wb-site-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.wb-site-header__logo img {
	height: 45px;
	width: auto;
}

.wb-site-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wb-muted-foreground);
	transition: color var(--wb-dur-fast) var(--wb-ease-standard);
}

.wb-site-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wb-foreground);
}

/* Log in / Free trial live in the actions row on desktop and inside the
 * mobile overlay as nav items — never both at once. */
.wb-site-header__actions {
	display: none;
	gap: var(--wb-space-2);
	flex-shrink: 0;
}

@media (min-width: 600px) {
	.wb-site-header__actions {
		display: flex;
	}

	.wb-site-header .wp-block-navigation:not(.is-menu-open) .wb-nav-app-link {
		display: none;
	}
}

.wb-btn-ghost,
.wb-btn-accent {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border-radius: var(--wb-radius-lg);
	font-size: var(--wb-text-sm);
	font-weight: var(--wb-weight-semibold);
	text-decoration: none;
}

.wb-btn-ghost {
	color: var(--wb-foreground);
	transition: background-color var(--wb-dur-fast) var(--wb-ease-standard);
}

.wb-btn-ghost:hover {
	background: var(--wb-muted);
}

.wb-btn-accent {
	background: var(--wb-color-accent);
	color: var(--wb-color-black);
	transition: opacity var(--wb-dur-fast) var(--wb-ease-standard);
}

.wb-btn-accent:hover {
	opacity: 0.9;
}

/* Mobile overlay */
.wb-site-header .wp-block-navigation__responsive-container.is-menu-open {
	background: rgba(255, 255, 255, 0.97);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* ── Main / editorial list ──────────────────────────────────────────── */

.wb-main {
	padding: var(--wb-space-7) var(--wb-space-4) var(--wb-space-8);
	min-height: 55vh;
}

.wb-post-card {
	padding-bottom: var(--wb-space-6);
	margin-bottom: var(--wb-space-6);
	border-bottom: 1px solid var(--wb-border);
}

.wb-post-list .wp-block-post-template > .wp-block-post:last-child .wb-post-card {
	border-bottom: none;
}

.wb-post-card__meta,
.wb-single__meta {
	gap: var(--wb-space-3);
	color: var(--wb-muted-foreground);
}

.wb-post-card__meta a,
.wb-single__meta a {
	color: var(--wb-muted-foreground);
	text-decoration: none;
}

.wb-post-card__meta a:hover,
.wb-single__meta a:hover {
	color: var(--wb-foreground);
}

.wb-post-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--wb-foreground);
}

.wb-post-card .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wb-color-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

.wb-post-card .wp-block-post-excerpt {
	color: var(--wb-gray-700);
}

.wb-archive-title {
	margin-bottom: var(--wb-space-6);
}

.wb-pagination {
	margin-top: var(--wb-space-7);
	font-size: var(--wb-text-sm);
}

/* ── Single post ────────────────────────────────────────────────────── */

.wb-single .wp-block-post-title {
	margin-top: var(--wb-space-3);
}

.wb-single__hero {
	margin-top: var(--wb-space-6);
	margin-bottom: var(--wb-space-6);
}

.wb-single__hero img {
	border-radius: var(--wb-radius-lg);
	max-width: 100%;
	height: auto;
}

/* Body links: yellow is fill-only (WCAG) — text stays foreground with an
 * accent underline. */
.wp-block-post-content a {
	color: var(--wb-foreground);
	text-decoration: underline;
	text-decoration-color: var(--wb-color-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: background-color var(--wb-dur-fast) var(--wb-ease-standard);
}

.wp-block-post-content a:hover {
	background: color-mix(in srgb, var(--wb-color-accent) 30%, transparent);
}

.wp-block-post-content img {
	border-radius: var(--wb-radius-lg);
	max-width: 100%;
	height: auto;
}

.wp-block-post-content pre,
.wp-block-post-content code {
	font-family: var(--wb-font-mono);
	font-size: var(--wb-text-sm);
}

/* ── Loop CTA panel ─────────────────────────────────────────────────── */

.wb-cta-loop {
	margin-top: var(--wb-space-8);
	padding: var(--wb-space-6);
	background: var(--wb-muted);
	border: 1px solid var(--wb-border);
	border-radius: var(--wb-radius-lg);
}

.wb-cta-loop h3 {
	margin-top: 0;
}

/* ── Footer ─────────────────────────────────────────────────────────── */

.wb-site-footer {
	background: #0a0a0a;
	color: rgba(255, 255, 255, 0.8);
}

.wb-site-footer__inner {
	padding: var(--wb-space-8) var(--wb-space-4);
}

.wb-site-footer__logo {
	height: 28px;
	width: auto;
}

.wb-site-footer__tagline {
	max-width: 24rem;
	margin-top: var(--wb-space-4);
	font-size: var(--wb-text-sm);
	line-height: var(--wb-leading-relaxed);
	color: rgba(255, 255, 255, 0.55);
}

.wb-site-footer__heading {
	margin-bottom: var(--wb-space-4);
	font-family: var(--wb-font-body);
	font-size: var(--wb-text-sm);
	font-weight: var(--wb-weight-semibold);
	letter-spacing: 0;
	color: #fff;
}

.wb-site-footer__links {
	list-style: none;
	padding-left: 0;
	font-size: var(--wb-text-sm);
}

.wb-site-footer__links li {
	margin-bottom: var(--wb-space-3);
}

.wb-site-footer__links a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	transition: color var(--wb-dur-fast) var(--wb-ease-standard);
}

.wb-site-footer__links a:hover {
	color: #fff;
}

.wb-site-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.wb-site-footer__copyright {
	padding: var(--wb-space-5) var(--wb-space-4);
	margin: 0;
	font-size: var(--wb-text-xs);
	color: rgba(255, 255, 255, 0.45);
}