/* Converted pages (migration/convert-elementor.mjs): the section, column, and card classes it writes.
   Baseline values from the reference screenshots; Phase 7 tunes them against .context/visual-reference/. */

/* Sections: full-width bands with 100 px vertical padding. */
.wp-block-post-content > :is(.jspa-section, .wp-block-cover) { margin-block: 0; }
.jspa-section { padding: 100px 25px; }
.jspa-section > * { margin-block: 0; }
.jspa-section > * + * { margin-block-start: 20px; }
.jspa-section .wp-block-columns { margin-block: 0; }
.jspa-section.is-vector-bg { background-color: var(--wp--preset--color--white); }
/* Space between a section title or intro text and the columns or card grid under it. */
.jspa-section > :is(h2, h3, p) + :is(.wp-block-columns, .card-row) { margin-block-start: 40px !important; }

/* Accordion columns outside the FAQ panel (Dos and Do Nots): a white card in the intro band, a grey
   card elsewhere, as on the old site. */
.wp-block-columns:has(.faq-item):not(.faq-split) { gap: 40px; padding: 25px 40px 40px; background: var(--wp--preset--color--light); }
.cta-band__card > .wp-block-columns:has(.faq-item) { background: var(--wp--preset--color--white); box-shadow: 0 0 30px rgba(0, 0, 0, 0.08); }
.wp-block-columns:has(.faq-item):not(.faq-split) h2 { font-size: 40px; margin: 0; }
.wp-block-columns:has(.faq-item):not(.faq-split) .faq-item summary { padding: 9px 36px 9px 0; }
@media (max-width: 767.98px) { .wp-block-columns:has(.faq-item):not(.faq-split) { padding: 20px; } }

/* Photo bands: dark overlay, white headings; white cards inside keep dark text. */
.jspa-section.is-photo-bg { position: relative; color: var(--wp--preset--color--white); }
.jspa-section.is-photo-bg::before { content: ""; position: absolute; inset: 0; background: rgba(34, 30, 32, 0.8); }
.jspa-section.is-photo-bg > * { position: relative; }
.jspa-section.is-photo-bg h2,
.jspa-section.is-photo-bg h3 { color: var(--wp--preset--color--white); }
/* A white card on a photo band (a one-column Elementor section). Grid cells are columns, not groups. */
.jspa-section .wp-block-group.is-white { background: var(--wp--preset--color--white); color: var(--wp--preset--color--text); padding: 50px; }
.jspa-section .wp-block-group.is-white h2,
.jspa-section .wp-block-group.is-white h3 { color: var(--wp--preset--color--ink); }

/* Home hero: kicker with a rule, large title, text, button; content starts below the header. */
.home-hero.wp-block-cover { padding: 190px 25px 150px; min-height: 0 !important; align-items: flex-start; }
.home-hero .wp-block-cover__inner-container { max-width: 1140px; margin-inline: auto; }
.home-hero .wp-block-columns { max-width: 560px; align-items: center; margin-bottom: 10px; gap: 20px; }
.home-hero h3 { font-family: var(--wp--preset--font-family--body); font-size: 18px; font-weight: 500; letter-spacing: 4px; color: var(--wp--preset--color--white); margin: 0; }
.home-hero h1 { color: var(--wp--preset--color--white); max-width: 900px; margin: 0 0 20px; }
.home-hero p { color: var(--wp--preset--color--white); max-width: 760px; }
.home-hero .wp-block-buttons { justify-content: center; } /* Steve's review, 2026-10-21 */
.home-hero .wp-block-separator.is-style-jspa-short { width: 100% !important; border-top-width: 1px; border-color: var(--wp--preset--color--white); margin: 0; }

/* The intro band after the hero: the card is pulled up over the hero. */
.cta-band.jspa-section { padding-top: 0; }
.cta-band__card > * + * { margin-block-start: 20px; }
.wp-block-separator.is-style-jspa-short.alignleft { float: none; margin-left: 0; margin-right: auto; }
.cta-band__card > .wp-block-columns.about-split { margin-top: 0; }
/* The section rule above resets child margins, so the overlap needs the section in the selector. */
.jspa-section > .cta-band__card { margin-top: -200px; }
.jspa-section > .cta-band__card:not(:has(.cta-band__image)) { margin-top: -108px; }
@media (max-width: 767.98px) { .jspa-section > .cta-band__card { margin-top: -120px; } }

/* About split headings (the pattern's title style). */
.about-split h2 { font-size: var(--wp--preset--font-size--title-2-caps); font-weight: 500; text-transform: uppercase; margin: 0; }
.about-split__card { padding: 40px 30px; }

/* Rows of cards: a 1140 px grid of equal cells, content centred, white and grey in a checkerboard
   (the rendered old site; its Elementor column colours differ from what it showed). */
.card-row { gap: 0 !important; max-width: 1140px; margin-inline: auto !important; }
.card-row + .card-row { margin-block-start: 0 !important; }
.card-row > .wp-block-column { display: flex; flex-direction: column; min-width: 0; }
/* Equal cells from 782 px up, where core Columns stop stacking. Below that, core stacks each
   column at full width (one card per row, as the old site did on phones). */
@media (min-width: 782px) {
	.card-row > .wp-block-column:not([style*="flex-basis"]) { flex-basis: 0 !important; flex-grow: 1; }
	/* A column with its own width (a merged card spans two thirds) keeps it. */
	.card-row > .wp-block-column[style*="flex-basis"] { flex-grow: 0; flex-shrink: 0; }
}
.card-row > .wp-block-column > * { flex: 1; margin: 0; }
.card-row .image-box-card { display: flex; flex-direction: column; justify-content: center; }

/* A full-width topic card (Construction Liens): no card frame, so its text lines up with the
   checklist and paragraphs under it (Steve, 2026-10-20). */
.jspa-section > .wp-block-group:not(.card-row) > .image-box-card.is-topic:only-child { padding: 0; border: 0; background: none; }
.jspa-section > .wp-block-group:not(.card-row) > .image-box-card.is-topic:only-child p { font-size: inherit; line-height: inherit; }

/* Topic cards (practice pages): left-aligned and top-aligned, text in short paragraphs, no link. */
.card-row .image-box-card.is-topic { justify-content: flex-start; }
.image-box-card.is-topic { text-align: left; padding: 40px 36px; }
.image-box-card.is-topic > * + * { margin-block-start: 12px; }
.image-box-card.is-topic .image-box-card__icon { margin: 0 0 20px; }
.image-box-card.is-topic h3 { margin-bottom: 4px; }
.image-box-card.is-topic ul { margin-block-start: 16px; }
.card-row:nth-of-type(odd) > .wp-block-column:nth-child(even) > .image-box-card,
.card-row:nth-of-type(even) > .wp-block-column:nth-child(odd) > .image-box-card { background: var(--wp--preset--color--light); }
/* A lone card after the rows (its Elementor row had empty columns): one cell wide, centred, grey. */
.jspa-section > .image-box-card { max-width: 570px; margin-inline: auto !important; margin-block-start: 0 !important; background: var(--wp--preset--color--light); border-width: 1px; }
.card-row + .image-box-card { border-top-width: 0; }

/* Grid borders: each cell draws its right and bottom edge, the first row its top, the first column
   its left, so every cell has an even 1 px edge. Stacked on phones, every cell draws its left edge. */
.card-row:not(.card-row + .card-row) > .wp-block-column > .image-box-card { border-top-width: 1px; }
.card-row > .wp-block-column:first-child > .image-box-card { border-left-width: 1px; }
@media (max-width: 781.98px) { .card-row > .wp-block-column > .image-box-card { border-left-width: 1px; } }
.card-row > .wp-block-column > .service-card { margin: 15px; }
.image-box-card h3 a,
.why-card h3 a,
.service-card__title a { color: inherit; text-decoration: none; }
.why-card { margin: 8px; }

/* FAQ and consultation side by side, edge to edge. */
.jspa-section:has(> .faq-split) { padding: 0; }
.jspa-section > .faq-split { max-width: none; gap: 0 !important; }
.faq-split > .wp-block-column { padding: 100px 50px 60px; color: var(--wp--preset--color--white); }
/* The backgrounds run edge to edge, but the content keeps to the 1140 px grid of the other sections:
   the outer padding is the grid margin (50% of the row, less 570 px), at least 50 px. */
.faq-split__faq { padding-left: max(50px, calc(50% - 570px)) !important; }
.faq-split__form { padding-right: max(50px, calc(50% - 570px)) !important; }
/* The photo has a fixed size from the top: opening an answer makes the panel taller but does not re-zoom the photo. */
.faq-split__faq { position: relative; background: url("../images/faq-background.jpg") center top / auto max(900px, 100%) no-repeat var(--wp--preset--color--ink); display: flex; flex-direction: column; justify-content: flex-start; }
.faq-split__faq::before { content: ""; position: absolute; inset: 0; background: rgba(34, 30, 32, 0.6); }
.faq-split__faq > * { position: relative; }
.faq-split__form { background: linear-gradient(rgba(34, 30, 32, 0.92), rgba(34, 30, 32, 0.92)), url("../images/monogram-white.png") right 40px top 60px / 300px no-repeat, var(--wp--preset--color--ink); }
.faq-split h2 { color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--title-2-caps); font-weight: 500; text-transform: uppercase; }
.faq-split p { color: var(--wp--preset--color--white); }

/* Elements the old site showed only on some devices. */
@media (min-width: 1025px) { .jspa-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024.98px) { .jspa-hide-tablet { display: none !important; } }
@media (max-width: 767.98px) {
	.jspa-hide-mobile { display: none !important; }
	.jspa-section { padding: 60px 20px; }
	.home-hero.wp-block-cover { padding: 140px 20px 100px; }
	.faq-split > .wp-block-column { padding: 60px 20px; }
	.jspa-section .wp-block-group.is-white { padding: 30px 20px; }
}

/* Links inside running text are underlined, so colour is not the only cue (WCAG 1.4.1, axe
   link-in-text-block). :where keeps this at element specificity, so buttons, card arrows, and the
   breadcrumb keep their own styles. */
:where(.wp-block-post-content :is(p, li):not(.page-hero__crumbs)) a { text-decoration: underline; text-underline-offset: 0.15em; }