/*
 * About. Values: [m] audit/measure/about-1440 and -390. Approved changes: 1300 width (A10), A3 text colours,
 * link underline (main.css), H1 promotion of the intro heading (looks like today's h2).
 */

/* Shared heading look: Roboto Slab 600, green, 42px/42 (25px/25 at <= 767) [m] */
.canopy-about__h1,
.canopy-about__h2 { margin: 0 0 20px; font-size: var(--cc-fs-h2); line-height: 1; }
.canopy-about__h3 { margin: 0 0 20px; font-size: var(--cc-fs-h3); line-height: 1; }

.canopy-about__body { font-family: var(--cc-font-ui); color: var(--cc-text-kit-on-white); }

/* 1. Intro: both columns grey, 20/20/0/20 on the text column [m] */
.canopy-about__intro .canopy-grid { gap: 0; background: var(--cc-panel-grey); }
.canopy-about__intro-text { padding: 20px 20px 0; background: var(--cc-panel-grey); }
.canopy-about__intro-video { background: var(--cc-panel-grey); align-self: start; }
.canopy-about__intro-text .canopy-prose { font-family: var(--cc-font-body); font-weight: 700; color: var(--cc-text-kit-on-grey); }

/* 2. Story + Roots */
.canopy-about__story-text { margin: 20px 10px 0; }
.canopy-about__story-text .canopy-about__body img.alignright { float: right; margin: 0 0 20px 20px; width: 333px; height: 500px; max-width: 100%; }
.canopy-about__story-text .canopy-about__body > p:first-child { margin: 0; }
.canopy-about__story-text .canopy-about__body::after { content: ""; display: table; clear: both; }

.canopy-about__roots {
	margin: 35px 0 20px 20px;
	padding: 10px 0;
	/* Baselines at 1440 and 390 show no visible border or shadow (Elementor data sets them; they don't render).
	   Following the render (Michael ruling, R-22); design-spec asked for the double border. */
	position: relative;
	background-color: var(--cc-white);
	align-self: stretch; /* fills the row height, as the 1440 baseline shows */
}
/* Parchment is a 28% overlay on white today (Elementor background_overlay_opacity 0.28) */
.canopy-about__roots::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--cc-roots-bg) center / cover;
	opacity: 0.28;
	pointer-events: none;
}
.canopy-about__roots > * { position: relative; }
.canopy-about__roots-h { margin: 0 20px 9px; text-align: center; }
.canopy-about__roots-text { margin: 0 20px; font-family: var(--cc-font-ui); color: var(--cc-text-on-parchment); }
.canopy-about__roots-text > :last-child { margin-bottom: 0; }

/* 3. Sponsorships and Scholarships: heading on white, tab bar and panel full width [spec 3b] */
.canopy-about__sponsors { padding-block: 30px 0; }

/* 4. Ohio Forestry Association: logo natural size, paragraph at measure */
.canopy-about__ofa { padding-block: 30px 40px; }
.canopy-about__logo { margin: 10px 0 20px; }
.canopy-about__logo img { display: block; width: 300px; height: 120px; max-width: 100%; }

@media (max-width: 767px) {
	.canopy-about__h1,
	.canopy-about__h2 { line-height: 1; }
	.canopy-about__h3 { line-height: 1; }
	.canopy-about__story-text { margin: 20px 0 0; }
	/* Photo stacks above the text at phone width, scaled to the column [m 390: 310x465] */
	.canopy-about__story-text .canopy-about__body img.alignright { float: none; display: block; margin: 0 0 20px; width: 100%; height: auto; }
	.canopy-about__roots { margin: 35px 0 20px; }
}

/* B10-1: the old site switched to phone type at <= 768px (Astra 4.7.3 inline responsive CSS: html 85.5%,
   h1 30 / h2 25 / h3 20), while columns stacked only at <= 767. These are this file's <= 767 type rules, repeated so
   768 gets them too; 769+ stays desktop, 390 is unchanged. Source: audit/measure/live-tablet-breakpoint.txt */
@media (max-width: 768px) {
	.canopy-about__h1,
	.canopy-about__h2 { line-height: 1; }
	.canopy-about__h3 { line-height: 1; }
}

/* B10-3: at exactly 768 the intro, Roots and OFA text kept 15px on the old site (inline font-size: 15px spans in the
   Elementor HTML resisted Astra's 85.5% root), while the story and tab text dropped to the 13.68px root. Measured on
   live: audit/measure/live-768-text-probe-chars.txt. 769+ desktop and <= 767 unchanged. */
@media (min-width: 768px) and (max-width: 768px) {
	.canopy-about__intro-text p,
	.canopy-about__roots-text p,
	.canopy-about__ofa p { font-size: 15px; line-height: 22.57px; }
}