/* Pinecroft header responsive tweaks */
.pinecroft-topbar-left { flex-wrap: nowrap; min-width: 0; }
.pinecroft-topbar-left .wp-block-social-links { flex-wrap: nowrap; }
.pinecroft-topbar-tagline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pinecroft-topbar-mobile { display: none !important; }
@media (max-width: 781px) {
  .pinecroft-topbar-desktop { display: none !important; }
  .pinecroft-topbar-mobile { display: flex !important; margin-block-start: 0 !important; }
  .pinecroft-navbar { padding-top: 6px !important; padding-bottom: 6px !important; }
}

/* Pinecroft circle badges */
.pinecroft-circle { display: flex; width: 64px; height: 64px; border-radius: 50%; align-items: center; justify-content: center; padding: 0 !important; }
.pinecroft-circle-center { margin-left: auto !important; margin-right: auto !important; }

/* Full-width page sections butt together like the source */
.wp-block-post-content > * + * { margin-block-start: 0 !important; }

.pinecroft-icon-sq { display: flex; width: 48px; height: 48px; border-radius: 8px; align-items: center; justify-content: center; padding: 0 !important; }

/* About page timeline center line */
.pinecroft-timeline { position: relative; }
.pinecroft-timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; transform: translateX(-50%); background: linear-gradient(to bottom, #059669, #10b981, #059669); opacity: 0.9; }
.pinecroft-timeline > * { position: relative; z-index: 1; }

/* Contact form styled like the source (underline fields) */
.wp-block-jetpack-contact-form input[type=text], .wp-block-jetpack-contact-form input[type=email], .wp-block-jetpack-contact-form input[type=tel], .wp-block-jetpack-contact-form textarea, .wp-block-jetpack-contact-form select { border: 0; border-bottom: 1px solid #CBD5E1; border-radius: 0; background: transparent; padding: 8px 2px; }
.wp-block-jetpack-contact-form input:focus, .wp-block-jetpack-contact-form textarea:focus, .wp-block-jetpack-contact-form select:focus { outline: none; border-bottom-color: #059669; box-shadow: none; }
.wp-block-jetpack-contact-form label { color: #64748B; font-weight: 400; font-size: 15px; }

/* Mobile layout tweaks */
@media (max-width: 781px) {
  .pinecroft-cols-2m { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .wp-block-button__width-50 { width: 100% !important; flex-basis: 100% !important; }
  .wp-block-post-content h1.wp-block-heading { font-size: clamp(34px, 9vw, 56px) !important; }
}


/* =========================================================================
   Parents of Pinecroft (POP) flyer
   -------------------------------------------------------------------------
   Lives here (Appearance > Customize > Additional CSS) rather than in the
   pinecroft-pop plugin so it can be edited from wp-admin without file access.
   WordPress loads this stylesheet in the block editor too, so the flyer looks
   like the flyer while you edit page 166.

   Repo mirror: site-config/additional-css.css in pinecroft-website.

   The print rules are gated on body:has(.pop-flyer) because this stylesheet
   loads on every page -- without the gate, printing any page would drop the
   site header and footer.
   ========================================================================= */

/* ===== Parents of Pinecroft (POP) flyer =====
   The flyer is ordinary blocks on the page. These classes give it the
   printed-flyer look on screen, in the editor, and when printed to PDF. */

.pop-flyer {
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
	border: 1px solid #e5e7eb;
	border-radius: 12px;
}

/* --- Masthead --- */
.pop-wordmark {
	font-family: Poppins, "Helvetica Neue", Arial, sans-serif !important;
	font-weight: 900 !important;
	line-height: 0.85 !important;
	letter-spacing: -0.02em;
	color: #0d3b22;
}
.pop-script {
	font-family: "Dancing Script", "Brush Script MT", cursive !important;
	font-weight: 700;
	color: #d97d07;
	line-height: 1.1;
}
.pop-masthead-right {
	border-bottom: 2px solid #d97d07;
}
.pop-tagline {
	font-family: Georgia, "Times New Roman", serif !important;
	font-weight: 700;
	color: #0d3b22;
}
.pop-tagline .pop-dot { color: #d97d07; padding: 0 0.35em; }

/* --- Cards --- */
.pop-card {
	overflow: hidden;
	background: #fff;
}
.pop-card-title {
	font-family: Oswald, "Arial Narrow", sans-serif !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.pop-card-body p:last-child { margin-bottom: 0; }

/* --- Focus columns --- */
.pop-focus-title {
	font-family: Oswald, "Arial Narrow", sans-serif !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.15;
}
.pop-focus-title::after {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	background: #d97d07;
	margin: 6px auto 0;
}
@media (min-width: 782px) {
	.pop-focus .wp-block-column + .wp-block-column,
	.pop-involved .wp-block-column + .wp-block-column {
		border-left: 1px dotted #9ca3af;
	}
}

/* --- Key dates table --- */
.pop-dates table,
.pop-dates table td {
	border: 0 !important;
}
.pop-dates table { border-collapse: collapse; width: 100%; }
.pop-dates td {
	padding: 12px 10px !important;
	text-align: center;
	vertical-align: middle;
	border-top: 1px dotted #d97d07 !important;
	font-size: 17px;
}
.pop-dates tr:first-child td { border-top: 0 !important; }
.pop-dates td + td { border-left: 1px dotted #d97d07 !important; }
.pop-dates td:first-child { font-weight: 700; width: 30%; }
.pop-dates td:nth-child(2) { width: 40%; }

/* --- Checklist --- */
.pop-checks {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 0 !important;
}
.pop-checks li {
	position: relative;
	padding-left: 32px;
	margin: 0 0 10px !important;
}
.pop-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%230d3b22'/%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.pop-flyer-url a { color: #d97d07 !important; text-decoration: none; }
.pop-flyer-url a:hover { text-decoration: underline; }

/* --- Mobile (screen only: the print page box is also < 782px) --- */
@media screen and (max-width: 781px) {
	.pop-wordmark { font-size: 84px !important; text-align: center; }
	.pop-script { text-align: center; font-size: 40px !important; }
	.pop-tagline { text-align: center; font-size: 20px !important; }
	.pop-focus .wp-block-column { margin-bottom: 12px; }
	.pop-involved .wp-block-column + .wp-block-column { border-top: 1px dotted #9ca3af; padding-top: 16px; }
}

/* ===== Print: only the flyer, one US-letter page ===== */
@media print {
	@page { size: letter; margin: 0.35in; }
	html:has(.pop-flyer), body:has(.pop-flyer) { background: #fff !important; }
	body:has(.pop-flyer) * {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
	body:has(.pop-flyer) header.wp-block-template-part,
	body:has(.pop-flyer) footer.wp-block-template-part,
	body:has(.pop-flyer) .pinecroft-navbar,
	body:has(.pop-flyer) .pop-screen-only,
	body:has(.pop-flyer) .skip-link,
	body:has(.pop-flyer) #wpadminbar,
	body:has(.pop-flyer) .jetpack-notes-cookie-check {
		display: none !important;
	}
	html:has(.pop-flyer) { margin-top: 0 !important; }
	body:has(.pop-flyer) main.wp-block-group { margin: 0 !important; padding: 0 !important; }
	.pop-flyer-wrap {
		padding: 0 !important;
		margin: 0 !important;
		background: #fff !important;
	}
	.pop-flyer {
		zoom: 0.74;
		max-width: none !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
		border-radius: 0 !important;
	}
	.pop-flyer a { color: inherit; text-decoration: none; }
	.pop-card, .pop-masthead { break-inside: avoid; }
	.pop-focus .wp-block-column + .wp-block-column,
	.pop-involved .wp-block-column + .wp-block-column {
		border-left: 1px dotted #9ca3af;
	}
	/* The printable page box (~7.5in = 720px) is narrower than the 782px
	   mobile breakpoint, so WordPress core and the theme's Additional CSS
	   stack the flyer into a tall mobile layout when printing. That pushed
	   the last card off the bottom of the page (Safari / iPad). Force the
	   desktop flyer layout for print. */
	.pop-flyer .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: nowrap !important; }
	.pop-flyer .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1 !important;
		margin-bottom: 0 !important;
	}
	.pop-flyer .pinecroft-cols-2m { display: flex !important; }
	.pop-flyer .pop-masthead > .wp-block-column:first-child { flex-basis: 36% !important; flex-grow: 0 !important; }
	.pop-flyer .pop-masthead > .wp-block-column:last-child { flex-basis: 64% !important; flex-grow: 0 !important; }
	.pop-flyer .pop-involved > .wp-block-column:first-child { flex-basis: 40% !important; flex-grow: 0 !important; }
	.pop-flyer .pop-involved > .wp-block-column:last-child {
		flex-basis: 60% !important;
		flex-grow: 0 !important;
		border-top: 0 !important;
		padding-top: 0 !important;
	}
	.pop-flyer .pop-masthead .pop-wordmark { font-size: 128px !important; text-align: left !important; }
	.pop-flyer .pop-masthead .pop-script { font-size: 56px !important; }
	.pop-flyer .pop-masthead .pop-tagline { font-size: 24px !important; }
}
