/**
 * Kerrigan — Global typographic components
 * Repeated across sections, so they live here rather than in block stylesheets.
 */

/* -------------------------------------------------------------------
 * .section-eyebrow — shamrock + rule decoration above a section heading.
 * Used by: intro (06), services (07), testimonials (08).
 * ------------------------------------------------------------------- */
/* Measured from the Figma nodes: clover 35x35, gap 10, rule 70x1. */
.section-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	/* 25 at the developer's instruction, replacing the 16 this was built with.
	 * Eight blocks state their own value and are unaffected — see the survey in
	 * the QA notes: faq-section/feature-columns/two-column 26, two-column
	 * --head-40 36, testimonials-slider 27, product-rows/project-gallery/
	 * before-after 22, location-map 16, trusted-logos--stacked 0. */
	margin-bottom: 25px;
	color: var(--primary-green);
}

.section-eyebrow svg {
	flex: 0 0 auto;
	width: 35px;
	height: 35px;
}

/**
 * Rule placement differs per section in Figma, so it is opt-in:
 *
 *   .section-eyebrow                — mark then a rule on the RIGHT only
 *                                     (intro, section 06)
 *   .section-eyebrow-both           — rule on both sides (services, 07)
 *   .section-eyebrow-center         — centred, rule on both sides
 *                                     (testimonials, 08)
 *
 * Each rule fades AWAY from the mark: solid green to 39.13%, transparent
 * by 100%.
 */
.section-eyebrow::after,
.section-eyebrow-both::before,
.section-eyebrow-both::after,
.section-eyebrow-center::before,
.section-eyebrow-center::after {
	flex: 0 0 70px;
	height: 1px;
	content: "";
}

/* Both rules fade away from the mark, but they do NOT hold solid for the same
 * distance — the right one carries 39.13%, the left 64.1%. Confirmed by the
 * developer against the file; the two stops are asymmetric on purpose, so do
 * not "tidy" them into one shared value. Sampling the 1:1 export cannot settle
 * this either way: the rule is a 1px line and the JPEG anti-aliases it, so its
 * peak never reaches full green and the ramp looks gentler than it is. */
.section-eyebrow::after,
.section-eyebrow-both::after,
.section-eyebrow-center::after {
	background: linear-gradient(
		90deg,
		var(--primary-green) 39.13%,
		rgba(var(--primary-green-rgb), 0) 100%
	);
}

.section-eyebrow-both::before,
.section-eyebrow-center::before {
	background: linear-gradient(
		270deg,
		var(--primary-green) 64.1%,
		rgba(var(--primary-green-rgb), 0) 100%
	);
}

/* Centred variant — testimonials heading is centred. */
.section-eyebrow-center {
	justify-content: center;
}

/* -------------------------------------------------------------------
 * .section-title — the 64/72 display heading.
 *
 * Two weights in one heading: the black text is 400 and the green accent
 * word is 700 — e.g. "Our Services", where "Our" is light black and
 * "Services" is bold green. (The hero heading is a separate treatment at
 * 800/700 and is styled in blocks/hero-banner.css, not here.)
 * ------------------------------------------------------------------- */
.section-title {
	margin: 0;
	color: var(--primary-black);
	font-family: var(--font-heading);
	font-size: var(--fs-64);
	font-weight: 400;
	line-height: var(--lh-heading);
}

.section-title span,
.section-title .is-accent {
	font-weight: 700;
}

/* The mirror of the accent run: a word the design sets BOLD without changing
 * its colour. The location pages' "Contact Us for a Free Estimate" is drawn
 * with the node at Anek Bold and " for a\nFree Estimate" overridden back to
 * Regular, so the bold half is the exception and needs marking.
 *
 * `color: inherit` is load-bearing — base.css paints every bare <span> inside a
 * heading green, and this run is not green. Companion to `.is-light`, which
 * does the same job in the other direction on the Roof Replacement hero. */
.section-title .is-strong {
	color: inherit;
	font-weight: 700;
}

.section-title-navy {
	color: var(--ink-navy);
}

.section-title-center {
	text-align: center;
}

/* -------------------------------------------------------------------
 * .section-lede — the 20/32 intro paragraph under a section title.
 * ------------------------------------------------------------------- */
.section-lede {
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-20);
	font-weight: 400;
	line-height: var(--lh-body);
}

/* -------------------------------------------------------------------
 * .avatar — circular initials badge.
 * Used by: featured review (04), testimonials (08).
 * Figma: 60x60, radius 30, Roboto 24/700, white label.
 * Fill colour is per-item data, set inline from the ACF colour picker.
 * ------------------------------------------------------------------- */
.avatar {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: var(--radius-30);
	background-color: var(--primary-green);
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--fs-24);
	font-weight: 700;
	line-height: var(--lh-tight);
}

/* -------------------------------------------------------------------
 * .rating-stars — amber star row.
 * Used by: featured review (04), testimonials (08).
 * ------------------------------------------------------------------- */
.rating-stars {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 10px;
	color: var(--star-amber);
}

.rating-stars svg {
	width: 30px;
	height: 30px;
}

/* -------------------------------------------------------------------
 * Inline links in body copy.
 *
 * Figma draws every link inside a paragraph the same way — green and
 * underlined — but the treatment had been restated per block, so a block that
 * had never carried one (the section ledes, the card copy) rendered its links
 * as plain body grey. One rule for every container that holds prose, so a link
 * an editor adds anywhere looks the same as one that shipped with the design.
 * Blocks that need a different colour on their own ground (media-cta on the
 * photo, team-bio, service-tabs) keep their own rule and still win on
 * specificity.
 * ------------------------------------------------------------------- */
.section-lede a,
.feature-columns__item-text a,
.services-grid__item-text a,
.cta-banner__text a,
.before-after__text a,
.location-map__text a,
.project-gallery__text a {
	color: var(--primary-green);
	text-decoration: underline;
	transition: var(--transition);
}

.section-lede a:hover,
.section-lede a:focus-visible,
.feature-columns__item-text a:hover,
.feature-columns__item-text a:focus-visible,
.services-grid__item-text a:hover,
.services-grid__item-text a:focus-visible,
.cta-banner__text a:hover,
.cta-banner__text a:focus-visible,
.before-after__text a:hover,
.before-after__text a:focus-visible,
.location-map__text a:hover,
.location-map__text a:focus-visible,
.project-gallery__text a:hover,
.project-gallery__text a:focus-visible {
	color: var(--primary-black);
}

/* -------------------------------------------------------------------
 * .review-meta — avatar + name/date stack. Shared by 04 and 08.
 * ------------------------------------------------------------------- */
.review-meta {
	display: flex;
	align-items: center;
	gap: var(--space-16);
}

/* Figma sets the name and date as two lines of a SINGLE 22px text node with a
 * 30px line box, 47 tall in total — so the "gap" between them is line spacing,
 * not a margin. 30 + 17 reproduces that BOX exactly; --lh-22 (26.99) and
 * --lh-tight (16) came to 42.98 and ran the pair 4px tight.
 *
 * The box is not the whole story, though, and the 10px margin below is why.
 * Measured as INK on the 1:1 export, the design opens 18px between the bottom
 * of "Bob Gross" and the top of "Feb 26, 2026" (name ink 41..58, date ink
 * 77..90); the two line boxes alone give 8, because Anek hangs the 22px name's
 * ink at the top of its 30px box while the 16px date sits low in its 17. Same
 * ink-versus-node-box gap logged site-wide on 2026-08-19 — do not "restore"
 * this to a flat 47 on the strength of the node height.
 *
 * Only featured review (04) uses this now; the testimonial cards it also used
 * to style are the Google Reviews plugin's markup. */
/* Roboto at the developer's instruction. Note this is a deliberate departure:
 * the design's node is Open Sans SemiBold 22 (family "Open Sans", style
 * "SemiBold"), which is what --font-accent carries — so a Figma check will
 * flag it. The date beneath it is already --font-body. */
.review-meta-name {
	display: block;
	color: var(--primary-black);
	font-family: var(--font-body);
	/* Roboto 24/400 at the developer's instruction. Deliberate departure: the
	 * design's node is Open Sans SemiBold at 22. */
	font-size: var(--fs-24);
	font-weight: 400;
	line-height: 30px;
}

.review-meta-date {
	display: block;
	color: var(--body-grey);
	font-family: var(--font-body);
	margin-top: 10px;
	font-size: var(--fs-16);
	font-weight: 400;
	line-height: 17px;
}

/* -------------------------------------------------------------------
 * .review-body — the 20/32 quote paragraph. Shared by 04 and 08.
 * ------------------------------------------------------------------- */
.review-body {
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-20);
	font-weight: 400;
	line-height: var(--lh-body);
}

.review-body a,
.review-read-more {
	color: var(--primary-green);
	font-weight: 700;
}

/* The Featured Review control is a button, not a link — it reveals the rest of
 * the review rather than navigating — but Figma draws it as a green run inline
 * at the end of the copy, so it is stripped back to text. */
button.review-read-more {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	line-height: inherit;
	text-align: left;
	cursor: pointer;
}

.review-body a:hover,
.review-read-more:hover {
	color: var(--primary-black);
}

/* -------------------------------------------------------------------
 * .icon-row — icon + text line. Used by the top strip phone numbers
 * and the footer contact / office-hours rows.
 * ------------------------------------------------------------------- */
.icon-row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-12);
}

.icon-row svg {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 0.35em;
	color: var(--primary-green);
}

/* -------------------------------------------------------------------
 * .card — flat white panel. Figma applies no shadow anywhere on the
 * delivered pages and the CTA/service cards are square.
 * ------------------------------------------------------------------- */
.card {
	background-color: var(--white);
	box-shadow: none;
}

/* -------------------------------------------------------------------
 * .section-head — centred eyebrow + heading + lede above a block that is
 * otherwise left/right. Shared by two_column and faq_section.
 * ------------------------------------------------------------------- */
.section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: var(--space-40);
	text-align: center;
}

/* Set from rendered ink, not Figma node tops: mark 120..154, heading first line
 * 182, lede first line 336 (Storm Damage section 8, and the same on DaVinci 10).
 * The 64px heading's browser line box sits ~25px deeper than its glyphs, so the
 * gap above it is 26 and the gap below only 4 — the 18/11 this carried put the
 * heading 7px high. The lede runs the full container in the design, so capping
 * it at 1100 pushed it onto an extra line. */
.section-head .section-eyebrow-center {
	margin-bottom: 26px;
}

.section-head__heading {
	margin-bottom: 4px;
	max-width: 1440px;
}

/* A centred head with no lede under it — DaVinci sections 10 and 11 — closes
 * its Title frame on the heading's last ink line, so the 40px the block puts
 * below the head has to absorb the 25px of dead space in the 72px line box. */
.section-head > .section-head__heading:last-child {
	margin-bottom: -25px;
}

.section-head__text {
	max-width: 1440px;
	margin: 0;
}

/* Most centred ledes run the full container, but Windows & Sliding Doors
 * section 9 draws its at 1216 (112 either side) and so takes three lines.
 * Opt in on the row rather than moving the default that twelve pages rely on. */
.two-column--lede-1216 .section-head__text {
	max-width: 1216px;
}

/* -------------------------------------------------------------------
 * Mobile eyebrow. The desktop decoration is 195px wide (70 rule + 10 + 35
 * clover + 10 + 70 rule), which is well over half a 335px container — at the
 * developer's instruction it steps down rather than dominating the band.
 * ------------------------------------------------------------------- */
@media (max-width: 767px) {

	.section-eyebrow svg {
		width: 26px;
		height: 26px;
	}

	.section-eyebrow::after,
	.section-eyebrow-both::before,
	.section-eyebrow-both::after,
	.section-eyebrow-center::before,
	.section-eyebrow-center::after {
		flex: 0 0 40px;
	}
}

@media (max-width: 567px) {

	.section-eyebrow svg {
		width: 22px;
		height: 22px;
	}

	.section-eyebrow::after,
	.section-eyebrow-both::before,
	.section-eyebrow-both::after,
	.section-eyebrow-center::before,
	.section-eyebrow-center::after {
		flex: 0 0 30px;
	}
}