/*
Theme Name:   Peilmark
Theme URI:    https://peilmark.com
Description:  Kadence child theme for Peilmark. Carries the custom homepage template, locally hosted Newsreader, and GDPR hardening.
Author:       Peilmark
Template:     kadence
Version:      4.9.7
Text Domain:  peilmark
*/

/* ---------------------------------------------------------------------
   Header
   Kadence has no option for backdrop blur or a sub-pixel hairline, so
   both live here. Values from the design handoff.
   --------------------------------------------------------------------- */

#main-header,
#main-header.item-is-fixed .kadence-sticky-header {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(15, 26, 46, 0.08);
}

/* Sticky clone inherits the translucent paper rather than going solid. */
#main-header .kadence-sticky-header.item-is-fixed:not(.item-at-start) {
	background: rgba(250, 247, 242, 0.92) !important;
}

/* The wordmark is an SVG; height drives it, width follows. */
.site-branding a.brand img {
	height: 52px;
	width: auto;
}

/* ---------------------------------------------------------------------
   Buttons
   Primary is Cerise with a 2px radius. Nothing else on the site is round.
   --------------------------------------------------------------------- */

.wp-block-button__link,
.button,
input[type="submit"] {
	border-radius: 2px;
}

/* ---------------------------------------------------------------------
   Footer
   Ink Navy, reversed wordmark left, two-column link grid right.
   --------------------------------------------------------------------- */

.pm-footer-brand img {
	height: 56px;
	width: auto;
	display: block;
}

.pm-footer-nav {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 40px;
}

.pm-footer-nav a {
	font-size: 16px;
	line-height: 1.4;
	color: rgba(250, 247, 242, 0.75);
	text-decoration: none;
}

.pm-footer-nav a:hover,
.pm-footer-nav a:focus-visible {
	color: #FAF7F2;
}

#colophon .footer-html {
	font-size: 14px;
	color: rgba(250, 247, 242, 0.7); /* was 0.45 (4.2:1); 0.7 clears AA comfortably. 14.10.26 */
}

@media (max-width: 767px) {
	.pm-footer-nav {
		grid-template-columns: 1fr;
	}
}

/* ---------- Sticky header (added 2026-08-26) ----------
   Kadence has header_sticky set to "main" but this build emits no sticky
   markup or script, so the child theme handles it. Sitewide by design: the
   header should behave the same on every page, not just the homepage. */

#masthead {
	position: sticky;
	top: 0;
	z-index: 200;
	background: #FAF7F2;
	border-bottom: 1px solid rgba(15, 26, 46, 0.1);
}

/* The admin bar is fixed above everything, so the header has to clear it. */
.admin-bar #masthead { top: 32px; }

@media (max-width: 782px) {
	.admin-bar #masthead { top: 46px; }
}

/* ---------- Sticky row offset (added 2026-09-24) ----------
   Kadence's sticky script now runs and fixes the main header row with an
   inline top equal to the admin bar height. The backdrop-filter on
   #main-header makes that wrapper the containing block for the fixed row,
   and #masthead is already offset by the admin bar through its own sticky
   top, so the offset landed twice: a 32px band under the header for anyone
   logged in. The wrapper already sits in the right place, so the row takes
   no offset of its own. Visitors without the admin bar are unaffected. */
#main-header .kadence-sticky-header.item-is-fixed { top: 0 !important; }

/* ---------- Insights index (added 2026-10-08, tiles same day) ----------
   [peilmark_insights] on /insights/. Tiles 1 / 2 / 3 across, pinned
   article first. Whole tile clickable via the title link. Hairline border,
   2px radius, no shadows, matching the rest of the site. */

.pm-insights {
	list-style: none;
	margin: 48px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

.pm-insight {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #FAF7F2;
	border: 1px solid #E4DED4;
	border-radius: 2px;
	overflow: hidden;
}

.pm-insight__media {
	aspect-ratio: 16 / 9;
	background: #F2EDE4;
	overflow: hidden;
}

.pm-insight__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pm-insight__body {
	padding: 24px 24px 28px;
}

.pm-insight__title {
	font-family: "Newsreader", Georgia, serif;
	font-size: 24px;
	line-height: 1.25;
	font-weight: 500;
	margin: 0 0 12px;
}

.pm-insight__title a {
	color: #0F1A2E;
	text-decoration: none;
}

.pm-insight__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pm-insight:hover .pm-insight__title a,
.pm-insight__title a:focus-visible {
	color: #B3355F;
}

.pm-insight:hover {
	border-color: #0F1A2E;
}

.pm-insight__excerpt {
	font-size: 17px;
	line-height: 1.5;
	color: #4A5266;
	margin: 0;
}

@media (min-width: 640px) {
	.pm-insights {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.pm-insights {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Footer legal line: same quiet tone as the copyright. */
#colophon .footer-html a {
	color: rgba(250, 247, 242, 0.6);
	text-decoration: none;
	margin-left: 20px;
}

#colophon .footer-html a:hover,
#colophon .footer-html a:focus-visible {
	color: #FAF7F2;
}

@media (max-width: 767px) {
	#colophon .footer-html a {
		display: inline-block;
		margin: 8px 20px 0 0;
	}
}

/* ---------- Face Value announcement bar (added 2026-10-13) ----------
   One slim Aubergine line above the header on every page except
   /events-mean-business/. Scrolls away; the sticky header stays. Temporary:
   remove with peilmark_announcement_bar() in functions.php around 6 Nov. */

.pm-announce {
	background: #3D2241;
	color: rgba(250, 247, 242, 0.85);
	font-size: 14px;
	line-height: 1.45;
	text-align: center;
	padding: 10px 20px;
}

.pm-announce p { margin: 0; max-width: 1040px; margin-inline: auto; }
.pm-announce strong { color: #FAF7F2; font-weight: 600; }

.pm-announce a {
	color: #FAF7F2;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-color: #B5D43A;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.pm-announce a:hover,
.pm-announce a:focus-visible { color: #B5D43A; }

@media (max-width: 767px) {
	.pm-announce { font-size: 13px; text-align: left; padding: 9px 20px; }
}

/* Bar sticks with the header (her call, 2026-10-13). The bar is sticky at
   the top; the header sits right under it, offset by the bar's measured
   height (--pm-announce-h, set by the script printed with the bar). */
.pm-announce { position: sticky; top: 0; z-index: 201; }
#masthead { top: var(--pm-announce-h, 0px); }
.admin-bar .pm-announce { top: 32px; }
.admin-bar #masthead { top: calc(32px + var(--pm-announce-h, 0px)); }

@media (max-width: 782px) {
	.admin-bar .pm-announce { top: 46px; }
	.admin-bar #masthead { top: calc(46px + var(--pm-announce-h, 0px)); }
}

/* Polish 2026-10-14: one edge line for header, content and footer.
   Desktop: footer moves in to the header's 56px. Below 1025px (mobile header):
   header and footer follow the content padding (40px, then 24px on phones). */
#colophon .site-container { padding-left: 56px; padding-right: 56px; }
@media (max-width: 1024px) {
	#masthead .site-container,
	#colophon .site-container { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 767px) {
	#masthead .site-container,
	#colophon .site-container { padding-left: 24px; padding-right: 24px; }
}