/*
Theme Name: The Biz Mom
Template: astra
Author: Gabriela
Description: Ink & Clay - a household publication layout for The Biz Mom. Built on Astra.
Version: 1.0
*/

/* ---------------------------------------------------------------
   Ink & Clay. Navy chrome, clay accent, cream paper.
   Kept deliberately calm: ad units arrive in colours we do not
   control, and the page has to stay readable underneath them.
   --------------------------------------------------------------- */
:root {
	--tbm-navy:       #1F3A5F;
	--tbm-navy-soft:  #2E4F79;
	--tbm-clay:       #C4633F;
	--tbm-clay-dk:    #A34F30;
	--tbm-clay-tint:  #F6E7DF;
	--tbm-cream:      #FAF6F0;
	--tbm-sand:       #E8DED0;
	--tbm-card:       #FFFFFF;
	--tbm-ink:        #23262B;
	--tbm-ink-soft:   #5A6068;
	--tbm-ink-faint:  #878D95;
	--tbm-measure:    66ch;
	--tbm-radius:     12px;
	--tbm-shadow:     0 1px 2px rgba(31,58,95,.05), 0 10px 26px -16px rgba(31,58,95,.22);
	--tbm-shadow-up:  0 2px 5px rgba(31,58,95,.07), 0 20px 36px -20px rgba(31,58,95,.32);
}

body,
.ast-container {
	background: var(--tbm-cream);
}

body {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 19px;
	line-height: 1.7;
	color: var(--tbm-ink);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.entry-title,
.tbm-serif {
	font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
	color: var(--tbm-navy);
	letter-spacing: -.012em;
	line-height: 1.22;
	font-weight: 700;
}

a { color: var(--tbm-navy); text-decoration-color: var(--tbm-sand); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--tbm-clay-dk); text-decoration-color: currentColor; }

/* ---------------------------------------------------------------
   Header - cream, not navy. The logo lives on cream by decision.
   --------------------------------------------------------------- */
.site-header,
.ast-primary-header-bar,
.ast-header-break-point .site-header {
	background: var(--tbm-cream) !important;
	border-bottom: 1px solid var(--tbm-sand);
	box-shadow: none !important;
}

.site-logo-img img,
.custom-logo-link img { max-height: 54px; width: auto; }

.main-header-menu > .menu-item > .menu-link,
.ast-header-break-point .main-header-menu .menu-link {
	font-family: Inter, system-ui, sans-serif;
	font-size: 12.5px !important;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--tbm-navy) !important;
}
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .current-menu-item > .menu-link {
	color: var(--tbm-clay-dk) !important;
}

/* ---------------------------------------------------------------
   Shared layout
   --------------------------------------------------------------- */
.tbm-main { padding-top: 0; }
.tbm-shell { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

.tbm-eyebrow {
	font-family: Inter, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tbm-clay-dk);
	margin: 0 0 8px;
	display: block;
}

.tbm-rule { height: 1px; background: var(--tbm-sand); border: 0; margin: 44px 0; }

/* ---- intro band -------------------------------------------------- */
.tbm-intro {
	text-align: center;
	padding: 46px 22px 34px;
	border-bottom: 1px solid var(--tbm-sand);
	margin-bottom: 44px;
}
.tbm-intro__title {
	font-size: clamp(30px, 4.4vw, 46px);
	margin: 0 0 12px;
}
.tbm-intro__sub {
	max-width: 62ch;
	margin: 0 auto;
	color: var(--tbm-ink-soft);
	font-size: 17.5px;
	line-height: 1.65;
}

/* ---- pillars ------------------------------------------------------ */
.tbm-pillars {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
	margin: 0 0 52px;
}
.tbm-pillar {
	background: var(--tbm-card);
	border: 1px solid var(--tbm-sand);
	border-radius: var(--tbm-radius);
	padding: 20px 18px 22px;
	text-decoration: none;
	display: block;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tbm-pillar:hover {
	transform: translateY(-2px);
	box-shadow: var(--tbm-shadow-up);
	border-color: var(--tbm-clay);
}
.tbm-pillar__dot {
	width: 26px; height: 26px; border-radius: 7px;
	background: var(--tbm-navy);
	display: block; margin-bottom: 14px;
}
.tbm-pillar:nth-child(2) .tbm-pillar__dot,
.tbm-pillar:nth-child(4) .tbm-pillar__dot { background: var(--tbm-clay); }
.tbm-pillar__name {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 19px; font-weight: 700; color: var(--tbm-navy);
	display: block; margin-bottom: 5px; line-height: 1.25;
}
.tbm-pillar__desc { font-size: 14px; line-height: 1.5; color: var(--tbm-ink-soft); display: block; }

/* ---- cards -------------------------------------------------------- */
.tbm-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px 26px;
	margin-bottom: 48px;
}
.tbm-grid__full { grid-column: 1 / -1; }

/* belt and braces: Astra can re-add its grid widths after an update */
.tbm-grid .tbm-card,
.tbm-grid .tbm-lead { width: 100%; max-width: none; margin: 0; }

.tbm-card { display: flex; flex-direction: column; }
.tbm-card__media {
	display: block; border-radius: var(--tbm-radius); overflow: hidden;
	background: var(--tbm-sand); aspect-ratio: 3 / 2; margin-bottom: 14px;
}
.tbm-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
/* placeholder tile for posts with no featured image yet */
.tbm-card__ph,
.tbm-lead__media .tbm-card__ph {
	display: block; width: 100%; height: 100%;
	background:
		linear-gradient(var(--tbm-clay) 0 0) 58% 32% / 16% 22% no-repeat,
		linear-gradient(var(--tbm-navy) 0 0) 42% 32% / 16% 22% no-repeat,
		linear-gradient(var(--tbm-navy) 0 0) 42% 64% / 16% 22% no-repeat,
		linear-gradient(var(--tbm-navy) 0 0) 58% 64% / 16% 22% no-repeat,
		var(--tbm-sand);
	opacity: .55;
}
.tbm-card:hover .tbm-card__media img { transform: scale(1.03); }
.tbm-card__title { font-size: 21px; margin: 0 0 7px; }
.tbm-card__title a { text-decoration: none; color: var(--tbm-navy); }
.tbm-card__title a:hover { color: var(--tbm-clay-dk); }
.tbm-card__excerpt { font-size: 15.5px; line-height: 1.6; color: var(--tbm-ink-soft); margin: 0; }

/* lead */
.tbm-lead {
	display: grid; grid-template-columns: 1.15fr 1fr; gap: 34px; align-items: center;
	background: var(--tbm-card); border: 1px solid var(--tbm-sand);
	border-radius: 16px; overflow: hidden; padding: 0;
}
.tbm-lead__media { aspect-ratio: 16 / 9; background: var(--tbm-sand); }
.tbm-lead__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tbm-lead__body { padding: 30px 34px 30px 4px; }
.tbm-lead__title { font-size: clamp(25px, 3vw, 34px); margin: 0 0 12px; }
.tbm-lead__title a { text-decoration: none; color: var(--tbm-navy); }
.tbm-lead__title a:hover { color: var(--tbm-clay-dk); }
.tbm-lead__excerpt { color: var(--tbm-ink-soft); font-size: 17px; margin: 0 0 16px; }
.tbm-lead__cta {
	display: inline-block; font-family: Inter, sans-serif; font-size: 13px; font-weight: 700;
	letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
	color: #fff; background: var(--tbm-clay); padding: 11px 20px; border-radius: 8px;
}
.tbm-lead__cta:hover { background: var(--tbm-clay-dk); color: #fff; }

/* ---- section heads ------------------------------------------------ */
.tbm-sectionhead { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 22px; gap: 16px; }
.tbm-sectionhead h2 { font-size: 24px; margin: 0; }
.tbm-sectionhead a { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; color: var(--tbm-clay-dk); font-family: Inter, sans-serif; }

/* ---- single post -------------------------------------------------- */
.single .entry-title { font-size: clamp(30px, 4vw, 44px); margin-bottom: 14px; }
.single .entry-content { font-size: 19px; line-height: 1.75; }
.single .entry-content p,
.single .entry-content ul,
.single .entry-content ol { max-width: var(--tbm-measure); }
.single .entry-content h2 { font-size: 28px; margin-top: 2em; }
.single .entry-content h3 { font-size: 22px; margin-top: 1.6em; }
.single .entry-content a { color: var(--tbm-clay-dk); }
.single .entry-content blockquote {
	border-left: 3px solid var(--tbm-clay);
	background: var(--tbm-clay-tint);
	padding: 16px 22px; border-radius: 0 10px 10px 0; margin-left: 0;
}
.single .entry-content img { border-radius: var(--tbm-radius); }

.tbm-featured { margin: 0 0 32px; }
.tbm-featured img { width: 100%; height: auto; display: block; border-radius: var(--tbm-radius); }
.tbm-featured figcaption { font-size: 14px; color: var(--tbm-ink-faint); margin-top: 8px; }

/* the transparency line that sourced-reporting articles carry */
.tbm-sourcenote {
	font-size: 15px; line-height: 1.6; color: var(--tbm-ink-soft);
	background: var(--tbm-card); border: 1px solid var(--tbm-sand);
	border-left: 3px solid var(--tbm-clay);
	padding: 14px 18px; border-radius: 0 10px 10px 0; margin: 0 0 28px;
}

/* ---- pagination --------------------------------------------------- */
.tbm-pag { display: flex; gap: 8px; justify-content: center; margin: 12px 0 54px; flex-wrap: wrap; }
.tbm-pag .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--tbm-sand); border-radius: 9px;
	background: var(--tbm-card); text-decoration: none; font-size: 15px; font-weight: 600;
	color: var(--tbm-navy);
}
.tbm-pag .page-numbers:hover { border-color: var(--tbm-clay); color: var(--tbm-clay-dk); }
.tbm-pag .page-numbers.current { background: var(--tbm-navy); border-color: var(--tbm-navy); color: var(--tbm-cream); }

/* ---- footer ------------------------------------------------------- */
.site-footer,
.ast-small-footer,
.site-below-footer-wrap {
	background: var(--tbm-navy) !important;
	color: #CBD6E4 !important;
	border: 0 !important;
}
.site-footer a, .ast-small-footer a, .site-below-footer-wrap a { color: var(--tbm-cream) !important; }
.site-footer a:hover { color: var(--tbm-clay) !important; }

.tbm-footernav { padding: 30px 22px 6px; }
.tbm-footernav__list {
	list-style: none; margin: 0 auto; padding: 0;
	display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: center;
}
.tbm-footernav__list a {
	font-family: Inter, system-ui, sans-serif;
	font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	text-decoration: none; color: var(--tbm-cream) !important;
}
.tbm-footernav__list a:hover { color: var(--tbm-clay) !important; }
.ast-footer-copyright { font-size: 14px; }

/* ---- empty state -------------------------------------------------- */
.tbm-empty { text-align: center; padding: 40px 0 70px; }
.tbm-empty__title { font-size: 28px; margin-bottom: 8px; }
.tbm-empty p { color: var(--tbm-ink-soft); }

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
	.tbm-pillars { grid-template-columns: repeat(3, 1fr); }
	.tbm-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	body { font-size: 18px; }
	.tbm-shell { padding: 0 16px; }
	.tbm-pillars { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.tbm-grid { grid-template-columns: 1fr; gap: 26px; }
	.tbm-lead { grid-template-columns: 1fr; }
	.tbm-lead__body { padding: 22px 20px 26px; }
	.tbm-intro { padding: 34px 16px 26px; margin-bottom: 32px; }
}
@media (max-width: 420px) {
	.tbm-pillars { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Reading width.
   Astra caps .ast-container at 750px on single posts and pages,
   while the header and footer run to 1240 - which left the article
   as a narrow ribbon in a wide page. 860px puts the measure at
   roughly 72 characters, which is where long-form reads best.
   --------------------------------------------------------------- */
/* Scope this to the CONTENT container only. `.ast-container` also matches the
   header and footer wrappers - widening those narrowed the masthead to 840px,
   which was a regression, not a fix. Astra's `ast-narrow-container` body class
   caps the article at 750px; this is what lifts it. */
/* Index pages go wide - a grid wants room. Reading pages stay narrow,
   because line length, not page width, is what makes prose readable. */
.site-content > .ast-container { max-width: 1240px !important; }

/* Index pages go wide - a grid wants room. Reading pages stay narrow,
   because line length, not page width, is what makes prose readable:
   60-75 characters per line is where reading is fastest. Discussed with
   Gabi 2026-09-23; she tried the full-width version and kept this one. */
.single .site-content > .ast-container,
.page .site-content > .ast-container { max-width: 840px !important; }

/* tables may run a little wider than the prose - they read better that way */
.single .entry-content table { max-width: none; }
}

/* Astra prints an inline `width: 710px` on #primary - a fixed content width
   meant for a sidebar layout we do not use. Without this the container widens
   and the article does not. */
/* fill the container - `auto` makes it shrink to its content */
.ast-no-sidebar #primary { width: 100% !important; max-width: none; }

.single .entry-content,
.page .entry-content { font-size: 20px; line-height: 1.75; }

.single .entry-content p,
.single .entry-content ul,
.single .entry-content ol,
.page .entry-content p,
.page .entry-content ul,
.page .entry-content ol { max-width: none; }

.single .entry-content li,
.page .entry-content li { margin-bottom: .5em; }

/* tables need to breathe at this width */
.entry-content table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 17px; }
.entry-content table th {
	text-align: left; background: var(--tbm-navy); color: var(--tbm-cream);
	font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; padding: 11px 14px;
}
.entry-content table td { padding: 11px 14px; border-bottom: 1px solid var(--tbm-sand); vertical-align: top; }
.entry-content table tr:nth-child(even) td { background: #FFFDFA; }

.entry-content blockquote p { margin-bottom: .6em; }
.entry-content blockquote p:last-child { margin-bottom: 0; }

/* in-article photos with captions */
.entry-content .tbm-inline { margin: 38px 0 34px; }
.entry-content .tbm-inline img {
	width: 100%; height: auto; display: block;
	border-radius: var(--tbm-radius);
}
.entry-content .tbm-inline figcaption {
	font-size: 15px; line-height: 1.5; color: var(--tbm-ink-faint);
	margin-top: 10px;
}

/* ---------------------------------------------------------------
   Share buttons. Ink & Clay, not network colours - a row of blue,
   black and blue badges would fight the page. Resting state is quiet
   (navy on cream, sand border); the colour arrives on hover.
   --------------------------------------------------------------- */
.tbm-share {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 30px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--tbm-sand);
}
.tbm-share--bottom {
	margin: 40px 0 0;
	padding: 22px 0 0;
	padding-bottom: 0;
	border-bottom: 0;
	border-top: 1px solid var(--tbm-sand);
}
.tbm-share__label {
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tbm-clay-dk);
}
.tbm-share__btns { display: flex; gap: 10px; }

.tbm-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--tbm-card);
	border: 1px solid var(--tbm-sand);
	color: var(--tbm-navy);
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.tbm-share__btn svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.tbm-share__btn:hover,
.tbm-share__btn:focus-visible {
	background: var(--tbm-clay);
	border-color: var(--tbm-clay);
	color: var(--tbm-cream);
	transform: translateY(-2px);
}
.tbm-share__btn:focus-visible { outline: 2px solid var(--tbm-navy); outline-offset: 2px; }

/* The rail in the left gutter. Astra's article card is 800px wide and
   centred, so 50vw - 484px parks the rail in the cream gutter beside it,
   clear of the card rather than sitting on its edge. Under 1200px there is
   no gutter left to use and it is hidden - the two inline bars still do
   the job on tablet and phone. */
.tbm-rail {
	position: fixed;
	top: 50%;
	left: max(18px, calc(50vw - 484px));
	transform: translateY(-50%);
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px 10px;
	background: var(--tbm-card);
	border: 1px solid var(--tbm-sand);
	border-radius: 999px;
	box-shadow: var(--tbm-shadow);
}
.tbm-rail__label {
	font-family: Inter, system-ui, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tbm-ink-faint);
	writing-mode: vertical-rl;
	margin-bottom: 2px;
}
.tbm-rail .tbm-share__btn { width: 38px; height: 38px; border-color: transparent; background: transparent; }
.tbm-rail .tbm-share__btn:hover,
.tbm-rail .tbm-share__btn:focus-visible { background: var(--tbm-clay); border-color: var(--tbm-clay); }

@media (max-width: 1199px) {
	.tbm-rail { display: none; }
}
@media (max-width: 600px) {
	.tbm-share { gap: 10px; }
	.tbm-share__btn { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
	.tbm-share__btn { transition: none; }
	.tbm-share__btn:hover, .tbm-share__btn:focus-visible { transform: none; }
}