/* Header and homepage hero — the "tinted band" treatment.
 *
 * The band runs from the very top of the page, through the wordmark and the
 * H1, and stops just above the calculator, which is a white card pulled up so
 * that it breaks the band's lower edge. That overlap is the only real design
 * move on the page and it costs one negative margin; without it the hero is
 * three stacked rectangles.
 *
 * Astra owns the header markup, so everything above .pt-hero is an override of
 * theme defaults rather than our own markup. Those defaults were never brand
 * colours: the wordmark and nav shipped as #334155 and #045CB4, neither of
 * which is a token in typography.css. That is what these rules correct.
 */

/* ------------------------------------------------------------------ header */

/* Site-wide, not just the homepage: the header should be brand-coloured
   everywhere, and only the background tint is specific to the home page. */
.site-title,
.site-title a,
.ast-site-identity .site-title a {
	color: var(--pt-ink-900);
	font-weight: 600;
	letter-spacing: -0.015em;
}

.site-title a:hover,
.site-title a:focus {
	color: var(--pt-brand-700);
}

/* Astra sizes the logo with `header .custom-logo-link img` (0,1,2). Adding the
   image's own class takes this to (0,2,2), which is the smallest change that
   outranks it. An earlier attempt used `.ast-site-identity`, a class this
   theme build does not output at all, so the rule matched nothing and looked
   like a specificity problem when it was really a typo-level mistake.
   The other half of the fix is in PHP: `sizes` is rewritten so the browser
   picks a source big enough for a 2x screen. CSS cannot choose the file. */
header .custom-logo-link img.custom-logo {
	width: 40px;
	height: 40px;
	max-width: 40px;
}

/* Navigation ---------------------------------------------------------------
 *
 * The active item previously differed from the rest by colour alone, which is
 * both hard to scan and a WCAG 1.4.1 failure. It now differs by weight and by
 * a filled chip as well, so colour is never the only carrier.
 *
 * Every selector here is prefixed with `.ast-builder-menu-1` for one reason:
 * Astra's own rules are
 *     .ast-builder-menu-1 .menu-item > .menu-link                    (0,3,0)
 *     .ast-builder-menu-1 .menu-item.current-menu-item > .menu-link  (0,4,0)
 * and they ship in an inline <style> that loads after this file. Matching
 * their specificity is not enough — an exact tie is decided by document order
 * and the theme wins. The prefix buys one class of headroom. This was visible
 * only in computed styles: the background from these same rulesets applied
 * cleanly, because Astra sets no background there, which made the colour look
 * like it should have worked too.
 */
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link,
.ast-builder-menu-1 .main-header-menu > .page_item > a {
	color: var(--pt-ink-600);
	font-weight: 500;
	font-size: 15.5px;
	border-radius: 8px;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:hover,
.ast-builder-menu-1 .main-header-menu > .page_item > a:hover {
	color: var(--pt-brand-700);
	background: var(--pt-brand-100);
}

.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .main-header-menu > .page_item.current_page_item > a,
.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-ancestor > .menu-link {
	color: var(--pt-brand-900);
	background: var(--pt-c1-bg);
	font-weight: 600;
}

/* "Due date" is the second calculator, not a fifth content section. Apricot
   marks it as a different kind of destination without spending a word on it.
   Matched on href so it survives the menu item being renamed. */
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link[href*="dog-pregnancy-calculator"],
.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-item > .menu-link[href*="dog-pregnancy-calculator"] {
	color: var(--pt-c2);
	font-weight: 600;
}

.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link[href*="dog-pregnancy-calculator"]:hover,
.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-item > .menu-link[href*="dog-pregnancy-calculator"] {
	background: var(--pt-c2-bg);
}

/* The off-canvas menu is a separate Astra module with its own rules, so none
   of the above reaches it. Its selectors sit at (0,4,0):
       .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link
   Adding .main-header-menu to ours matches that structure and clears it. This
   was missed on the first pass because the desktop menu looked correct and the
   mobile one is a second, identical-looking list further down the DOM. */
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link {
	color: var(--pt-ink-600);
	font-weight: 500;
}

.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item.current-menu-item > .menu-link {
	color: var(--pt-brand-900);
	background: var(--pt-c1-bg);
	font-weight: 600;
}

.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link[href*="dog-pregnancy-calculator"] {
	color: var(--pt-c2);
	font-weight: 600;
}

/* --------------------------------------------------------------- the band */

/* The tint has to cover the header too, or the band starts halfway down the
   page and the effect reads as a stray coloured box. */
body.home .ast-main-header-wrap,
body.home .main-header-bar {
	background: var(--pt-brand-50);
}

.pt-hero {
	position: relative;
	padding: 34px 0 74px;
}

/* Full-bleed backdrop, painted rather than laid out.
 *
 * The obvious approach — a ::before at `width:100vw; left:calc(50% - 50vw)` —
 * works visually and then costs more than it is worth. 100vw counts the
 * scrollbar, so the band ends up wider than the viewport and the document
 * gains a few pixels of horizontal scroll (measured: 1272 against a 1265
 * viewport). Suppressing that with overflow-x on html/body then broke the
 * header on mobile: Astra lays the header out as a CSS grid whose items carry
 * min-width:0, the new formatting context collapsed the branding track, and
 * because Astra also sets overflow-wrap:anywhere on .site-title the wordmark
 * wrapped one letter per line.
 *
 * A spread box-shadow paints outside the element without participating in
 * layout at all, so there is nothing to overflow and nothing to suppress.
 * clip-path trims it to the element's own height, leaving a clean horizontal
 * band. 100vmax rather than 100vw so it still covers a landscape phone. */
.pt-hero {
	background: var(--pt-brand-50);
	box-shadow: 0 0 0 100vmax var(--pt-brand-50);
	clip-path: inset(0 -100vmax);
}

.pt-hero__title {
	font-size: clamp(34px, 5vw, 50px);
	line-height: 1.03;
	letter-spacing: -0.025em;
	margin: 0;
}

/* Two weights of one typeface rather than two typefaces. The light weight on
   the second line is what keeps a three-word product name from reading as a
   slab of bold. */
.pt-hero__title .pt-t1 {
	display: block;
	font-weight: 700;
	color: var(--pt-brand-900);
}

.pt-hero__title .pt-t2 {
	display: block;
	font-weight: 300;
	color: var(--pt-brand-500);
}

/* The lede is a pull-quote, not body copy: it is the one genuinely surprising
   sentence on the page and the rule marks it as a statement. */
.pt-hero__lede {
	margin: 18px 0 0;
	max-width: 34em;
	border-left: 3px solid var(--pt-c2);
	padding-left: 14px;
	font-size: clamp(15px, 1.5vw, 17px);
	line-height: 1.55;
	color: var(--pt-ink-600);
}

/* ------------------------------------------------- the card breaking the edge */

body.home .pt-calc {
	margin-top: -46px;
	position: relative;
	z-index: 2;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 28px rgba(20, 33, 61, 0.09);
}

/* Reassurances belong under the tool, where someone deciding whether to trust
   the number is actually looking. */
.pt-hero-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--pt-ink-600);
}

.pt-hero-trust li::before {
	content: "\2713";
	color: var(--pt-c3);
	font-weight: 700;
	margin-right: 6px;
}

@media (max-width: 600px) {
	.pt-hero {
		padding: 22px 0 58px;
	}

	body.home .pt-calc {
		margin-top: -40px;
	}

	.pt-hero__lede {
		max-width: none;
	}
}