rather than . The mock-up's .leiw-tablewrap / bare .leiw-table rules used to live here; they were removed because .leiw-table matches the

too, so their min-width:520px was landing on the scroll container itself and pushing the whole page sideways on phones instead of letting the table scroll inside. */ /* ============ [FAQ] Rank Math accordion ============ */ /* The FAQ is Rank Math's block, not a pattern of ours — it emits the FAQPage schema and keeps it in sync with the visible copy, which a component of our own would only duplicate. What it does not do is collapse: it renders a flat run of headings and answers. These rules plus assets/leiw-faq.js add the disclosure behaviour on top of its markup. Everything that hides an answer is gated behind .leiw-faq-ready, which the script adds once it has wired the buttons up. If the script fails to load, the FAQ stays a readable flat list rather than a column of invisible text. */ .leiw-article.leiw-article #rank-math-faq{margin:36px 0;border-top:1px solid var(--leiw-line);} .leiw-article.leiw-article .rank-math-list-item{border-bottom:1px solid var(--leiw-line);} /* The question is an

, so it arrives carrying the theme's heading rules — padding-bottom:30px from style.css, plus whatever case and face the Elementor kit sets for headings. All of that is reset here: the question is a row label in a list, not a section heading, and it should read in the same face as the article body. / .leiw-article.leiw-article .rank-math-question{ margin:0;padding:0; font-family:inherit;font-size:inherit;line-height:inherit; text-transform:none;letter-spacing:normal; } .leiw-article.leiw-article .rank-math-answer{max-width:var(--leiw-measure);padding-bottom:20px;} .leiw-article.leiw-article .leiw-faq-toggle{ display:block;width:100%;position:relative; padding:15px 34px 15px 0; background:none;border:0;cursor:pointer;text-align:left; font-family:inherit;font-weight:600;font-size:17px;line-height:1.45; text-transform:none;letter-spacing:normal; color:var(--leiw-ink); } / Authors often wrap the question in , which would stack on top of the weight already set here. / .leiw-article.leiw-article .leiw-faq-toggle strong{font-weight:inherit;} .leiw-article.leiw-article .leiw-faq-toggle::after{ content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%); font-family:var(--leiw-mono);font-size:20px;color:var(--leiw-lime); } .leiw-article.leiw-article .leiw-faq-toggle[aria-expanded="true"]::after{content:'\2212';} / Collapsed state — only once the script is in charge. The open/close animates grid-template-rows from 0fr to 1fr. display:none cannot be transitioned at all, and a max-height guess is always either too short for a long answer or too slow for a short one; an fr unit resolves to the content's own height, so the timing is right whatever is inside. Spacing goes on the content, never on .leiw-faq-answer-inner itself — padding on the clipped box would still occupy height at 0fr. / .leiw-article.leiw-article .leiw-faq-ready .rank-math-answer{ display:grid;grid-template-rows:0fr;padding-bottom:0; transition:grid-template-rows .28s ease; } .leiw-article.leiw-article .leiw-faq-ready .is-open .rank-math-answer{grid-template-rows:1fr;} .leiw-article.leiw-article .leiw-faq-answer-inner{overflow:hidden;} .leiw-article.leiw-article .leiw-faq-answer-inner > :last-child{margin-bottom:20px;} @media (prefers-reduced-motion:reduce){ .leiw-article.leiw-article .leiw-faq-ready .rank-math-answer{transition:none;} } / ============ [SOURCES] ============ / .leiw-sources.leiw-sources{margin:48px 0 0;padding:24px 0 0;border-top:1px solid var(--leiw-line);} .leiw-sources-label.leiw-sources-label{ font-family:var(--leiw-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--leiw-muted);display:block;margin-bottom:14px; } .leiw-sources.leiw-sources ol{margin:0;padding-left:20px;font-size:14.5px;color:var(--leiw-muted);} .leiw-sources.leiw-sources li{margin-bottom:9px;} / ============ [AUTHOR] (shell) ============ / .leiw-author.leiw-author{ margin:40px 0 0;padding:24px;background:var(--leiw-navy-soft); border:1px solid var(--leiw-line);border-radius:var(--leiw-r); display:flex;gap:18px;align-items:flex-start; } .leiw-avatar.leiw-avatar{ width:var(--leiw-avatar);height:var(--leiw-avatar);flex:0 0 var(--leiw-avatar); border-radius:50%;object-fit:cover;border:1px solid var(--leiw-line-strong); } .leiw-author-name.leiw-author-name{font-family:var(--leiw-display);font-weight:600;color:var(--leiw-ink);font-size:16px;margin:0 0 3px;} .leiw-author-role.leiw-author-role{font-size:13.5px;color:var(--leiw-lime);margin:0 0 10px;} .leiw-author-bio.leiw-author-bio{font-size:14.5px;line-height:1.6;margin:0;color:var(--leiw-body);} / ============ BUTTONS + [CTA] (shell) ============ / / The mock-up pulled the CTA background photo from images.unsplash.com — a third-party request on every page this file loads. Replaced with a flat gradient; to use a real photo, upload it to the media library and add its URL after the gradient, the way --leiw-hero-image does it. / .leiw-btn.leiw-btn{ display:inline-block;font-family:var(--leiw-display);font-weight:600;font-size:13px; letter-spacing:.06em;text-transform:uppercase;text-decoration:none; padding:14px 30px;border-radius:99px;transition:all .18s ease;border:1px solid transparent; } .leiw-btn--primary.leiw-btn--primary{background:var(--leiw-lime);color:var(--leiw-navy-deep);} .leiw-btn--primary.leiw-btn--primary:hover{background:var(--leiw-lime-dim);} .leiw-btn--ghost.leiw-btn--ghost{border-color:rgba(255,255,255,.5);color:var(--leiw-ink);} .leiw-btn--ghost.leiw-btn--ghost:hover{border-color:var(--leiw-ink);background:rgba(255,255,255,.06);} .leiw-cta.leiw-cta{ padding:clamp(48px,7vw,80px) 24px;text-align:center; background:linear-gradient(180deg,var(--leiw-navy),var(--leiw-navy-deep)); } .leiw-cta.leiw-cta h2{ font-family:var(--leiw-display);font-weight:600;color:var(--leiw-ink); font-size:clamp(22px,3.4vw,32px);line-height:1.25;margin:0 auto 14px;max-width:22ch; } .leiw-cta.leiw-cta p{max-width:52ch;margin:0 auto 28px;color:rgba(255,255,255,.82);} .leiw-cta-btns.leiw-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;} / ============ [RELATED] (shell) ============ / .leiw-related.leiw-related{background:var(--leiw-navy-deep);padding:clamp(48px,7vw,80px) 24px;} .leiw-related-inner.leiw-related-inner{max-width:var(--leiw-shell);margin:0 auto;} .leiw-related.leiw-related h2{ font-family:var(--leiw-display);font-weight:600;color:var(--leiw-ink); font-size:clamp(20px,2.8vw,26px);margin:0 0 28px; } .leiw-cards.leiw-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;} .leiw-card.leiw-card{ background:var(--leiw-navy-raised);border:1px solid var(--leiw-line);border-radius:var(--leiw-r); overflow:hidden;text-decoration:none;display:flex;flex-direction:column; transition:border-color .18s ease,transform .18s ease; } .leiw-card.leiw-card:hover{border-color:rgba(189,235,1,.45);transform:translateY(-3px);} .leiw-card.leiw-card img{width:100%;aspect-ratio:var(--leiw-card-ratio);object-fit:cover;object-position:center;} @supports not (aspect-ratio:16/10){.leiw-card.leiw-card img{height:180px;}} .leiw-card-body.leiw-card-body{padding:20px;} .leiw-card-tag.leiw-card-tag{ font-family:var(--leiw-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--leiw-lime);display:block;margin-bottom:9px; } .leiw-card-t.leiw-card-t{font-family:var(--leiw-display);font-weight:600;color:var(--leiw-ink);font-size:16.5px;line-height:1.35;margin:0 0 8px;} .leiw-card-d.leiw-card-d{font-size:14px;line-height:1.55;color:var(--leiw-muted);margin:0;} / ============ WRITING GUIDES (shell — delete the blocks before publishing) ============ / .leiw-guide.leiw-guide{ border:1px dashed rgba(189,235,1,.45);border-radius:10px; background:rgba(189,235,1,.045);padding:16px 18px;margin:0 0 26px; font-size:14px;line-height:1.6;color:rgba(255,255,255,.72);max-width:var(--leiw-measure); } .leiw-guide.leiw-guide b{ display:block;font-family:var(--leiw-mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--leiw-lime);margin-bottom:7px;font-weight:500; } .leiw-guide.leiw-guide ul{margin:8px 0 0;padding-left:18px;} .leiw-guide.leiw-guide li{margin-bottom:5px;} .leiw-brief.leiw-brief{max-width:var(--leiw-shell);margin:0 auto;padding:20px 24px 0;} .leiw-brief-inner.leiw-brief-inner{border:2px dashed var(--leiw-lime);border-radius:var(--leiw-r);padding:24px;background:rgba(189,235,1,.06);} / Desktop only (shell): hold the text column left so it never runs under the hero photo. / @media (min-width:981px){ .leiw-h1.leiw-h1{max-width:16ch;} .leiw-standfirst.leiw-standfirst{max-width:44ch;} .leiw-meta.leiw-meta{max-width:52ch;} } / ============ RESPONSIVE ============ / / 980px: no room for a side-by-side hero, so the photo goes full width behind a heavier scrim and the text sits on top; the TOC un-sticks and moves above the article. Both are shell-only rules. 620px: the component breakpoint — reg and quotecard drop to one column. The other components are fluid (steps uses auto-fit, figure uses aspect-ratio, table scrolls horizontally) and need no breakpoint. / @media (max-width:980px){ .leiw-hero.leiw-hero{ min-height:0;display:block; background-image: linear-gradient(180deg,rgba(2,10,38,.90) 0%,rgba(2,10,38,.86) 45%,rgba(3,15,57,.92) 80%,var(--leiw-navy) 100%), var(--leiw-hero-image); background-size:auto, cover; background-position:center, 72% center; } .leiw-shell.leiw-shell{grid-template-columns:1fr;} .leiw-toc.leiw-toc{position:static;order:1;} } @media (max-width:620px){ .leiw-article.leiw-article{font-size:16.5px;} .leiw-hero.leiw-hero,.leiw-shell.leiw-shell{padding-left:20px;padding-right:20px;} .leiw-reg.leiw-reg{grid-template-columns:1fr;} .leiw-reg-juris.leiw-reg-juris{grid-column:1;padding-top:0;} .leiw-quotecard.leiw-quotecard{grid-template-columns:1fr;gap:18px;} .leiw-author.leiw-author{flex-direction:column;} } / Narrow phones: pull in the padding the cards carry, and let a long regulation name wrap instead of pushing the card off-screen. / @media (max-width:480px){ .leiw-answer.leiw-answer{padding:18px 18px 18px 20px;} .leiw-quote.leiw-quote{padding-left:20px;} .leiw-reg.leiw-reg{padding:20px 18px;} .leiw-reg-rule.leiw-reg-rule{white-space:normal;} .leiw-steps.leiw-steps{gap:22px;} } @media (prefers-reduced-motion:reduce){ [class="leiw-"]{transition:none !important;animation:none !important;} } /* ========================================================================== SAFETY NET FOR EDITORIAL PROMPTS Uncomment in production if you would rather not rely on authors deleting the writing-guide blocks by hand before publishing. ========================================================================== / / body:not(.wp-admin) .leiw-guide.leiw-guide, body:not(.wp-admin) .leiw-brief.leiw-brief { display:none !important; } / / ========================================================================== BRIDGE TO NATIVE GUTENBERG BLOCKS Every pattern is built on core blocks so authors edit text inline and see the component render live, instead of editing raw HTML in a code box. Core blocks add their own wrappers, classes and margins; these rules hook onto them. ========================================================================== / / Group blocks wrap their children in .wp-block-groupinner-container in some builds and not others. That extra div would leave the three grid components with a single child and collapse the layout. display:contents removes the wrapper from the box tree so the children join the parent grid directly, whichever markup WordPress emits. / .leiw-reg.leiw-reg > .wp-block-groupinner-container, .leiw-steps.leiw-steps > .wp-block-groupinner-container, .leiw-quotecard.leiw-quotecard > .wp-block-groupinner-container{display:contents;} / WordPress renders every Group with is-layout-flow, and its global stylesheet gives each non-first child a margin-block-start. In a flow container that is the intended rhythm. In a grid it is not collapsed away: it pushes items 2..n down their own tracks, so the first card sits high and the rest sag — which looks like broken markup and is not. The core rules are written with :where(), so they carry no specificity at all and a plain class selector is enough to undo them. / .leiw-steps.leiw-steps > , .leiw-reg.leiw-reg > , .leiw-quotecard.leiw-quotecard > {margin-block-start:0;} /* The regulation card does want its body pushed clear of the header line, so that one is re-stated after the reset above rather than lost to it. / .leiw-reg-body.leiw-reg-body{margin-block-start:10px;} / The rule chip, jurisdiction and step lines were /
in the HTML version and are paragraphs now, so the core paragraph margins have to go. / .leiw-reg.leiw-reg > p, .leiw-steps.leiw-steps p, .leiw-quotecard.leiw-quotecard > p{margin-top:0;} .leiw-reg-rule.leiw-reg-rule{justify-self:start;margin:0;} .leiw-reg-juris.leiw-reg-juris{margin:0;} .leiw-step.leiw-step{min-width:0;} / The opening quotation mark used to be a hand-written . As a pseudo-element it is one less block for the author to delete by accident. / .leiw-quotecard-text.leiw-quotecard-text::before{ content:'\201C';display:block; font-family:var(--leiw-display);font-size:38px;line-height:.7; color:var(--leiw-lime);margin-bottom:10px; } / The card's grid gap now sits between quote and attribution, so the paragraph's own bottom margin would double the spacing. / .leiw-quotecard-text.leiw-quotecard-text{margin-bottom:0;} / Except in the logo variant, where the two paragraphs sit inside .leiw-quotecard-body and stack in normal flow, with no gap to rely on. / .leiw-quotecard-body.leiw-quotecard-body .leiw-quotecard-text{margin-bottom:16px;} / wp:image renders the logo as a
, which carries its own margins. / figure.leiw-quotecard-logo.leiw-quotecard-logo{margin:0;} / Some builds wrap Group children in .wp-block-groupinner-container / .leiw-answer.leiw-answer > .wp-block-groupinner-container > p:last-child, .leiw-answer.leiw-answer > p:last-child { margin: 0; color: var(--leiw-ink); font-size: 18px; line-height: 1.6; } / wp:image puts the class on
; the caption carries its own WP class / .leiw-figure.leiw-figure figcaption, .leiw-figure.leiw-figure .wp-element-caption { margin-top: 11px; font-size: 13.5px; color: var(--leiw-muted); line-height: 1.55; padding-left: 13px; border-left: 2px solid var(--leiw-line-strong); text-align: left; } / wp:table puts the class on
, not on