/* ========================================================================== page-gutenberg-2 — layout, accordions, featured image -------------------------------------------------------------------------- Hand-written, not compiled from SCSS. page-gutenberg.php gets its rules from assets/dev/scss/custom/layouts/_gutenberg-template.scss, every one of them scoped to .andrew-custom-columns — the class that template adds to the authored core/columns block. This template has no columns block, so none of that CSS applies and the equivalent rules live here, scoped to .apl-content. Kept deliberately in plain CSS so the template can be reviewed, changed and deployed without a webpack build. ========================================================================== */ /* -------------------------------------------------------------------------- Content shell -------------------------------------------------------------------------- .apl-content wraps ALL of the_content, and the_content on these pages is not only prose: acf/page-hero, the Results pattern and the Reviews slider are blocks in the content too, and every one of them is a full-bleed section. So the wrapper carries no width — putting a max-width here squeezed the hero banner into a 1100px column, which is exactly the bug this template exists to avoid, one level up. The width belongs to the prose, and the prose alone: .apl-prose, the group the content tool wraps the former first-column blocks in. -------------------------------------------------------------------------- */ .apl-content { --apl-prose-width: 1100px; } .apl-content .apl-prose { max-width: var(--apl-prose-width); margin: 80px auto; padding: 0 24px; } /* Interim, and self-retiring: until the content tool unwraps it, the prose is still inside the authored core/columns block. page-gutenberg.php gave that block .container.andrew-custom-columns via a render_block filter this template does not run, so reproduce the same box here. When the columns block is gone from the content this rule matches nothing. */ .apl-content > .wp-block-columns { max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0 24px; } @media (max-width: 767px) { .apl-content .apl-prose { margin: 40px auto; padding: 0 16px; } .apl-content > .wp-block-columns { padding: 0 16px; } } /* -------------------------------------------------------------------------- /* ----------------------------------------------------------------- Featured image - beside the case-type list ----------------------------------------------------------------- main.css 11930-11947 floats this image right, scoped to `.wp-block-column > .wp-block-image:has(+ p + ul)`. The v2 content tool removes the core/column wrapper, so that selector stops matching and the image dropped below the links. Re-scoped here to the prose group. An earlier version of this file set float:none instead, to stop the Titusville 1024x1024 image rendering 368x1022. That was the wrong fix: the stretch was an unconstrained img, not the float. Constrain the img and the float is fine - both hubs then render at 400px, which is what Melbourne has always shown. :has(+ p + ul) is main.css's own test and is what keeps this to the hub featured image; verified present on /melbourne/ and /titusville/ 28 Aug 26. ----------------------------------------------------------------- */ .apl-content .apl-prose .wp-block-image:has(+ p + ul) { margin-bottom: 30px; } .apl-content .apl-prose .wp-block-image:has(+ p + ul) img { display: block; width: 100%; height: auto; border-radius: 10px; } /* The branded image on pages migrated from the default template (Oct 2026). It opens the prose group rather than sitting between a paragraph and a list, so it carries its own class instead of matching the hub selector above. Same size and float as the hubs; the callout that follows becomes a flow-root so it sits beside the image instead of running its border underneath it. Phones never see this copy - the same image renders under the H1 there (apl-hero-mobile-image.php). */ .apl-content .apl-prose .wp-block-image.apl-featured-image { max-width: 400px; margin: 0 auto 30px; } .apl-content .apl-prose .wp-block-image.apl-featured-image img { display: block; width: 100%; height: auto; border-radius: 10px; } /* The figure is hidden on phones; hide its alignment wrapper too, or its margin leaves an empty gap above the callout. */ @media (max-width: 767px) { .apl-content .apl-prose .wp-block-image.apl-featured-image:has(> figure.apl-hide-on-phone) { display: none; } } /* Float from 1024px, not 782px: between the two, a 40% image left the text beside it about 420px wide - five or six words a line (Oct 2026). Below 1024 the image sits centred above the text instead. */ @media (min-width: 1024px) { .apl-content .apl-prose .wp-block-image:has(+ p + ul), .apl-content .apl-prose .wp-block-image.apl-featured-image { float: right; width: 40%; max-width: 400px; margin: 0 0 24px 32px; } .apl-content .apl-prose .wp-block-image.apl-featured-image + .apl-callout { display: flow-root; } .apl-content .apl-prose > h2, .apl-content .apl-prose > section, .apl-content .apl-prose > * > h2, .apl-content .apl-prose > * > section { clear: both; } } /* ----------------------------------------------------------------- .andrew-custom-columns on the content wrapper ----------------------------------------------------------------- page-gutenberg-2.php puts .andrew-custom-columns on .apl-content so that main.css 11684-11904 applies again: accordions, group spacing, .related-pages, .faq-anchor and the h2-h5.wp-block-heading sizes. Its base rule adds 80px top and bottom margin, which on a wrapper that opens with the full-bleed hero would push the hero off the header. `container` is never added, so .andrew-custom-columns.container (max-width:1400px) stays inert. ----------------------------------------------------------------- */ .apl-content.andrew-custom-columns { margin-top: 0; margin-bottom: 0; } /* -------------------------------------------------------------------------- Accordions — core/details in the site's card language -------------------------------------------------------------------------- Translated from _gutenberg-template.scss (which mirrors blocks/faq-accordion/faq-accordion.scss) with $darkBlue = #1f2a44 and $orange = #e47200 resolved. Two selectors, same declarations: .apl-accordion is the class every accordion group carries, and .apl-content is the safety net so a stray details block is never left unstyled. Appearance never depends on .apl-faq, which carries meaning only. -------------------------------------------------------------------------- */ .apl-accordion details.wp-block-details > summary, .apl-content details.wp-block-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 600; color: #1f2a44; line-height: 1.4; } /* caret in a disc: soft orange tint closed, solid orange open */ .apl-accordion details.wp-block-details > summary::after, .apl-content details.wp-block-details > summary::after { content: ''; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background-color: rgba(228, 114, 0, 0.12); background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8L10 12L14 8' stroke='%23e47200' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 18px 18px; transform: rotate(-90deg); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease; } @media (max-width: 767px) { } /* answer content — everything after the summary */ .apl-accordion details.wp-block-details > :not(summary), .apl-content details.wp-block-details > :not(summary) { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 400; color: #333; line-height: 1.6; max-width: 680px; margin: 0 0 12px; padding: 0 20px; } @media (max-width: 767px) { } /* Map embeds inside an answer are full-bleed within the answer padding */ .apl-accordion details.wp-block-details iframe, .apl-content details.wp-block-details iframe { display: block; width: 100%; max-width: 100%; border: 0; } /* smooth expand where ::details-content is supported; snaps elsewhere */ .apl-accordion details.wp-block-details::details-content, .apl-content details.wp-block-details::details-content { opacity: 0; block-size: 0; overflow-y: clip; transition: content-visibility 0.3s allow-discrete, opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), block-size 0.3s cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { } /* -------------------------------------------------------------------------- Spacing around accordion runs and groups -------------------------------------------------------------------------- */ .apl-content details.wp-block-details + :not(details.wp-block-details), .apl-content .wp-block-group + .wp-block-group, .apl-content .wp-block-group:has(details.wp-block-details) + * { margin-top: 56px; } @media (max-width: 767px) { .apl-content details.wp-block-details + :not(details.wp-block-details), .apl-content .wp-block-group + .wp-block-group, .apl-content .wp-block-group:has(details.wp-block-details) + * { margin-top: 40px; } } .apl-content .wp-block-group h2.wp-block-heading, .apl-content .wp-block-group h3.wp-block-heading { margin-bottom: 20px; } /* In-page anchor targets land clear of the fixed header */ .apl-content .faq-anchor, .apl-content .wp-block-heading[id] { scroll-margin-top: 110px; } /* -------------------------------------------------------------------------- Mobile type scale -------------------------------------------------------------------------- !important plus the body prefix is required: the Customizer's "Additional CSS" ships `.city-location .entry-content h2 { font-size: 30px !important }`, printed after enqueued stylesheets, so only higher specificity wins. Scoped to .wp-block-heading so component headings stay untouched. -------------------------------------------------------------------------- */ @media (max-width: 767px) { body .apl-content h2.wp-block-heading { font-size: 24px !important; line-height: 1.3 !important; } body .apl-content h3.wp-block-heading { font-size: 20px !important; line-height: 1.3 !important; } body .apl-content h4.wp-block-heading { font-size: 18px !important; line-height: 1.35 !important; } body .apl-content h5.wp-block-heading { font-size: 16px !important; line-height: 1.4 !important; } } /* -------------------------------------------------------------------------- Injected sections keep the content rhythm -------------------------------------------------------------------------- */ .apl-content > .service.section-j { margin: 56px 0; } /* The "Injured in {city}?" banner is a sibling of .apl-content inside .entry-content, full-bleed, exactly as it renders today. */ .entry-content > .community-cta { margin-top: 56px; } /* Lists inside accordion answers: room for their markers and air between items. The answer rule above pads every child 20px each side, which put list markers on the card's edge; main.css's `ol, ul {padding:0}` and `li {list-style:none}` had already removed them. References lists (.apl-sources) are numbered - the in-text footnotes cite them by number - and each source is a separate paragraph's worth. */ .apl-content details.wp-block-details > ul, .apl-content details.wp-block-details > ol { padding-left: 44px; } .apl-content details.wp-block-details > ul > li { list-style-type: disc; } .apl-content details.wp-block-details > ol > li { list-style-type: decimal; } .apl-content details.wp-block-details > ul > li + li, .apl-content details.wp-block-details > ol > li + li { margin-top: 6px; } .apl-content details.wp-block-details > ol.apl-sources { max-width: none; padding-right: 32px; padding-bottom: 12px; } .apl-content details.wp-block-details > ol.apl-sources > li { font-size: 15px !important; padding-left: 4px; } .apl-content details.wp-block-details > ol.apl-sources > li + li { margin-top: 10px; } @media (max-width: 767px) { .apl-content details.wp-block-details > ul, .apl-content details.wp-block-details > ol { padding-left: 38px; } .apl-content details.wp-block-details > ol.apl-sources { padding-right: 20px; } } /* Areas Served accordion: the zip-code entries are a list of links, not a bulleted list. Keyed on the links (every entry is a /zip-NNNNN/ page) - it was keyed on ".apl-accordion:not(.apl-faq)" until Oct 2026, which also caught the FAQ groups that carry no .apl-faq class: 25 References lists lost their numbers and 8 answer lists their bullets. Without :has() support the markers stay. */ .apl-content details.wp-block-details > ul:has(> li > a[href*="/zip-"]) { padding-left: 20px; } .apl-content details.wp-block-details > ul:has(> li > a[href*="/zip-"]) > li { list-style: none; padding-left: 0; } /* -------------------------------------------------------------------------- Hero breadcrumb on deep trails -------------------------------------------------------------------------- The hubs carry a two-level trail. Pages migrated from the default template (Oct 2026) can carry four (Home > Areas We Serve > Cocoa Personal Injury Lawyer > page), and page-hero.scss lays the trail out as a single nowrap flex row, so on a phone each crumb was squeezed into a narrow column of one or two words. Let the row wrap; each crumb then keeps its own width. -------------------------------------------------------------------------- */ .apl-content .page-hero__breadcrumb ol { flex-wrap: wrap; row-gap: 4px; } /* -------------------------------------------------------------------------- Prose type scale -------------------------------------------------------------------------- One size for running text, whatever block it is in, stepping up with the viewport: 16px on phones, 17px on tablets, 18px from 1024px (the desktop size paragraphs already had). Measured before this rule (Oct 2026): paragraphs 18px, numbered lists 18px, accordion text 16px, and every bulleted list 20px at every width - the legacy Customizer rule `.entry-content ul li {font-size:20px !important}`, which is why "What You Need To Know" read larger than the page around it and ran six words a line on a phone. Scoped to blocks sitting directly in a group (the classic theme wraps group children in .wp-block-group__inner-container), so the CTA sections injected into the content keep their own sizes. The !important is only there to beat the legacy rule's. -------------------------------------------------------------------------- */ .apl-content .apl-prose .wp-block-group__inner-container > p, .apl-content .apl-prose .wp-block-group__inner-container > ul > li, .apl-content .apl-prose .wp-block-group__inner-container > ol > li { font-size: 16px !important; line-height: 1.65; } /* Lists inside accordion answers match the answer text around them. */ .apl-content details.wp-block-details li { font-size: 16px !important; line-height: 1.6; } /* The callout's label ("What You Need To Know") stays a step above its bullets. */ .apl-content .apl-prose .apl-callout > .wp-block-group__inner-container > p:first-child { font-size: 17px !important; line-height: 1.3; } @media (min-width: 768px) { .apl-content .apl-prose .wp-block-group__inner-container > p, .apl-content .apl-prose .wp-block-group__inner-container > ul > li, .apl-content .apl-prose .wp-block-group__inner-container > ol > li { font-size: 17px !important; } .apl-content .apl-prose .apl-callout > .wp-block-group__inner-container > p:first-child { font-size: 18px !important; } } @media (min-width: 1024px) { .apl-content .apl-prose .wp-block-group__inner-container > p, .apl-content .apl-prose .wp-block-group__inner-container > ul > li, .apl-content .apl-prose .wp-block-group__inner-container > ol > li { font-size: 18px !important; line-height: 1.6; } } /* -------------------------------------------------------------------------- Free Case Evaluation (mid-page CTA) - semantic markup, same look -------------------------------------------------------------------------- apl-free-case-evaluation.php renders this block as an