@charset "UTF-8";
/*
 * CubeLaw bespoke styling — layered on top of the block-level styles already
 * generated from theme.json. Compile with: sass assets/css/cubelaw.scss assets/css/cubelaw.css
 */
/*
 * Neutralize WP's default "flow" layout block-gap margin
 * (:where(.is-layout-flow) > * { margin-block-start: ... }) — it was adding
 * an unwanted default gap between unrelated stacked blocks (e.g. between
 * full-bleed sections). Overridden here via plain CSS at the same
 * selector/specificity rather than disabling blockGap support in
 * theme.json — that approach previously killed flex/grid gaps everywhere
 * too (broke spacing between header nav items), since WP ties the flow
 * default and the flex/grid fallback to the same root toggle.
 */
:root :where(.is-layout-flow) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

:root {
  --heading-font: var(--wp--preset--font-family--playfair-display);
  --body-font: var(--wp--preset--font-family--dm-sans);
  --font-size-h1: var(--wp--preset--font-size--heading-1);
  --font-size-h2: var(--wp--preset--font-size--heading-2);
  --font-size-h3: var(--wp--preset--font-size--heading-3);
  --font-size-body: var(--wp--preset--font-size--body);
  --color-ink: var(--wp--preset--color--custom-ink);
  --color-sage: var(--wp--preset--color--custom-sage);
  --color-linen: var(--wp--preset--color--custom-linen);
  --color-white: var(--wp--preset--color--custom-white);
  --color-body: var(--wp--preset--color--custom-body);
  --color-alert: var(--wp--preset--color--custom-alert);
  --space-xx-large: var(--wp--preset--spacing--xx-large);
  --space-x-large: var(--wp--preset--spacing--x-large);
  --space-large: var(--wp--preset--spacing--large);
  --space-medium: var(--wp--preset--spacing--medium);
  --space-small: var(--wp--preset--spacing--small);
}

/*
 * Heading typography — asserted directly here rather than left to
 * theme.json's styles.elements.h1/h2/h3 alone. Those still define the same
 * rule, but we've hit two separate WP quirks that silently dropped it in
 * practice: preset slugs like "h1" get kebab-cased into "h-1" when WP
 * generates the CSS variable (hence the "heading-1/2/3" slugs in
 * theme.json's fontSizes, not "h1/h2/h3"), and WP 7.0's on-demand block
 * asset loading doesn't reliably print per-block variation CSS. This reads
 * the same --wp--preset--* custom properties theme.json defines, so a
 * palette or typography change there still propagates — it's a resilient
 * mirror, not a separate source of truth. Because it targets bare
 * h1/h2/h3 tags, individual heading blocks no longer need to repeat
 * fontFamily/fontSize attributes — only per-instance overrides (color,
 * alignment, etc.) belong on the block.
 */
h1,
h2,
h3 {
  font-family: var(--heading-font);
  font-weight: 400;
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

/*
 * Body copy typography — mirrors theme.json's root styles.typography
 * (fontFamily: dm-sans, fontSize: body preset — 16px desktop, 15px
 * mobile via fluid clamp). Same resilience rationale as the heading rules
 * above: asserted directly here rather than left to theme.json alone.
 */
body {
  font-family: var(--body-font);
  font-size: var(--font-size-body);
  font-weight: 400;
}

/*
 * Navigation and buttons — DM Sans baseline. Nav links and buttons keep
 * their own intentionally distinct size/case/weight (x-small uppercase
 * nav, small uppercase semibold buttons) via more specific classes
 * already set in the patterns — this only guarantees the font-family.
 */
nav,
.wp-block-button,
.wp-element-button {
  font-family: var(--body-font);
}

p {
  font-family: var(--body-font);
  font-size: var(--font-size-body);
  font-weight: 400;
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}

/* Service page breadcrumb — Home > Parent > Current Page */
.cubelaw-breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.85;
}
.cubelaw-breadcrumb a:hover {
  opacity: 1;
}
.cubelaw-breadcrumb .cubelaw-breadcrumb-sep {
  opacity: 0.5;
}

/*
 * Practice area numerals — large, faint, editorial. Also the vertical
 * spacing between everything stacked inside a card (icon/number, heading,
 * description, learn-more link): shared by three renderers — the
 * acf/practice-areas block (raw HTML, not run through do_blocks(), so it
 * can never pick up a Gutenberg blockGap value) and two real-block
 * patterns (Why Cube Law — Cards, Services Archive Grid) whose card group
 * has "layout":{"type":"constrained"} but no blockGap set. Plain CSS
 * margins here work identically for all three, rather than needing a
 * blockGap fix in two places and something else entirely in the third.
 */
.cubelaw-practice-card {
  border-top: 1px solid color-mix(in srgb, var(--color-body) 25%, transparent);
  padding-top: var(--space-medium);
}
.cubelaw-practice-card h3 {
  margin-bottom: var(--space-small);
}
.cubelaw-practice-card > p {
  margin-bottom: var(--space-small);
}
.cubelaw-practice-card > p:last-child {
  margin-bottom: 0;
}

/*
 * Recent Blog Posts / Related Reading — boxed image card (not the thin-line
 * editorial treatment practice cards use). Featured image is full-bleed at
 * the top; everything else sits in a padded body wrapper below it.
 *
 * Card and body are both flex columns so "Read More" can be pinned to the
 * bottom (margin-top:auto) regardless of how many lines the title/date
 * above it take — height:100% on the card lets it fill the grid row's
 * full height (CSS Grid already stretches row items by default), which
 * is what gives the flex column any extra space to push "Read More" into
 * in the first place.
 */
.cubelaw-blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-body) 15%, transparent);
  overflow: hidden;
}

.cubelaw-blog-card-image {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.cubelaw-blog-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cubelaw-blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 10px 20px 0;
}
.cubelaw-blog-card-body.is-layout-constrained > * {
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.cubelaw-blog-card-body .wp-block-post-date,
.cubelaw-blog-card-body .cubelaw-blog-date {
  opacity: 0.8;
  margin-bottom: 4px;
  margin-top: 4px;
}

.cubelaw-blog-card-body .wp-block-post-title,
.cubelaw-blog-card-body .cubelaw-blog-title {
  margin-bottom: var(--space-small);
  font-size: var(--wp--preset--font-size--base);
}
.cubelaw-blog-card-body .wp-block-post-title a,
.cubelaw-blog-card-body .cubelaw-blog-title a {
  font-family: inherit;
}

.cubelaw-blog-card-body .cubelaw-learn-more {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: var(--space-small);
  padding-bottom: 10px;
  border-top: 1px solid var(--color-sage);
  text-align: center;
}

/* Service page — pricing table row dividers */
.cubelaw-pricing-row {
  padding-bottom: var(--space-small);
  margin-bottom: var(--space-small) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-body) 20%, transparent);
}
.cubelaw-pricing-row:last-child {
  border-bottom: none;
  margin-bottom: 0 !important;
  padding-bottom: 0;
}

/*
 * Pricing table — optional "Included Items" bullet list under an item's
 * description (blocks/service-pricing.php). A bare <ul> from raw block
 * output, so it gets its own plain bullets rather than relying on a core
 * list block's styles.
 */
.cubelaw-pricing-row .cubelaw-pricing-list {
  margin: var(--space-small) 0 0;
  padding-left: 1.25em;
  list-style: disc;
}
.cubelaw-pricing-row .cubelaw-pricing-list li {
  margin: 0 0 0.25em;
  padding: 0;
}
.cubelaw-pricing-row .cubelaw-pricing-list li:last-child {
  margin-bottom: 0;
}

.cubelaw-practice-number {
  font-family: var(--heading-font);
  font-size: var(--font-size-h2);
  color: var(--color-sage);
  opacity: 0.35;
  line-height: 1;
  margin-bottom: var(--space-small) !important;
}

/*
 * Why Cube Law — Cards (patterns/why-cubelaw-cards.php) icon, in place of
 * the "01/02/03" numeral style used elsewhere (Practice Areas Grid) — this
 * row is 3 fixed differentiators, not an ordered list, so it gets its own
 * class rather than reusing .cubelaw-practice-number.
 */
.cubelaw-why-icon {
  margin-bottom: var(--space-small);
}
.cubelaw-why-icon svg {
  width: 36px;
  height: 36px;
  color: var(--color-sage);
}

.cubelaw-learn-more a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, opacity 0.15s ease;
  padding-bottom: 2px;
}
.cubelaw-learn-more a:hover {
  border-bottom-color: currentColor;
  opacity: 0.8;
}

/*
 * Why Cube Law — differentiator list. Explicit flex+gap rather than relying
 * on the block's own blockGap style: that value referenced a spacing slug
 * ("x-small") that doesn't exist in this scale, and separately, WP's
 * per-instance blockGap CSS isn't reliably printed (the same on-demand
 * block asset loading gap hit elsewhere in this file).
 *
 * The `> *` override matters: this block still carries WP's auto-injected
 * is-layout-constrained class, which applies max-width + auto margins to
 * its children (meant for centering a reading column). That's normally
 * invisible since block children default to full width, but flex+column
 * shrinks children to content size, which makes those auto margins
 * visibly center everything. Neutralize it so children stay left-aligned.
 */
.cubelaw-diff-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
}
.cubelaw-diff-item > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

.cubelaw-diff-item:first-child {
  border-top: none !important;
}

/*
 * Service Overview — the text column (eyebrow/heading/paragraph/button)
 * has no blockGap of its own, so it falls under the site-wide flow-margin
 * zeroing rule at the top of this file with nothing to replace it. Same
 * fix as .cubelaw-diff-item above: explicit flex+gap instead of relying
 * on WP's blockGap CSS.
 *
 * This column also carries WP's own "constrained" layout support
 * (needed so the column's own max-width behaves correctly), which
 * generates `margin-inline: auto` on every direct child. Combined with
 * this flex column, that auto margin disables cross-axis stretch on
 * each child (per the flexbox spec) — content that naturally fills the
 * column's width (the heading, body paragraphs) isn't visibly affected,
 * but short content (the "Overview" eyebrow label, the button) shrinks
 * to its own content width and then gets centered by those same auto
 * margins. Forcing every child to stretch/margin:0 here overrides that,
 * so everything stays left-aligned and full-width regardless of how
 * short its content is.
 */
.cubelaw-overview-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
}
.cubelaw-overview-copy.cubelaw-overview-copy > * {
  align-self: stretch;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/*
 * Service Overview — image column. The two columns no longer set
 * verticalAlignment (removed so the row uses flex's default stretch
 * instead of centering the image in the middle of a taller text column),
 * but stretch alone only gives the COLUMN the full row height — the
 * <figure>/<img> inside it still shrink-wrap to the image's own
 * intrinsic size unless told otherwise. This makes the image itself
 * fill that full height, cropping via object-fit rather than
 * stretching/distorting it.
 */
.cubelaw-overview-image-col {
  align-self: stretch;
}

.cubelaw-overview-image {
  height: 100%;
  margin: 0;
}
.cubelaw-overview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cubelaw-why-lead {
  font-family: var(--heading-font);
  font-size: var(--font-size-h2);
  font-weight: 400;
  line-height: 1.3;
}

/* Footer — text wordmark instead of the logo image, which read poorly on the ink background */
.cubelaw-footer-wordmark {
  font-family: var(--heading-font);
  font-size: var(--font-size-h3);
  font-weight: 400;
}
.cubelaw-footer-wordmark a {
  color: inherit;
  text-decoration: none;
}

/*
 * Footer column headings — Contact / Office Hours / Practice Areas /
 * Quick Links all share this one class, same sage-eyebrow-plus-underline
 * treatment as the "Our Services" mega menu's column headings
 * (.cubelaw-services-mega-title), specifically so they read clearly as
 * headings against the plain white/linen body text under them — that
 * distinction was missing before (both were similar size/weight).
 */
.cubelaw-footer-heading {
  display: inline-block;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-sage);
  padding-bottom: var(--space-small);
  margin-bottom: var(--space-small);
  border-bottom: 2px solid var(--color-sage);
}

/*
 * Footer contact rows (address / phone / fax / hours) — icon + text.
 * align-items: flex-start (not center) because the address and hours
 * lines wrap to 2 lines each; center-aligning would visually float the
 * icon at the midpoint between both lines instead of level with the
 * first one.
 */
.cubelaw-footer-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: var(--space-small);
}
.cubelaw-footer-row:last-child {
  margin-bottom: 0;
}
.cubelaw-footer-row svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-sage);
}
.cubelaw-footer-row p {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.6;
}

/*
 * Process steps come in two shapes, and both must keep rendering:
 *
 * - LEGACY: a Columns block (.wp-block-columns) — what every page created
 *   before the pattern became a grid still has saved in its content. Thin
 *   vertical dividers between the columns on desktop (stacked with top
 *   rules on mobile, below). Left exactly as it was so those pages don't
 *   change until they're re-inserted/converted.
 * - CURRENT: a Group with a grid layout (.wp-block-group), whose column
 *   count the editor can change. A vertical divider needs to know which
 *   step starts a row, which a re-flowable grid can't tell CSS, so each step
 *   gets a thin rule ABOVE it instead (like the Practice Area cards) — that
 *   works at any column count.
 */
.wp-block-columns.cubelaw-process-steps .cubelaw-step {
  border-left: 1px solid color-mix(in srgb, var(--color-body) 20%, transparent);
  padding-left: var(--space-medium);
}
.wp-block-columns.cubelaw-process-steps .cubelaw-step:first-child {
  border-left: none;
  padding-left: 0;
}

.wp-block-group.cubelaw-process-steps .cubelaw-step {
  border-top: 1px solid color-mix(in srgb, var(--color-body) 20%, transparent);
  padding-top: var(--space-medium);
}

.cubelaw-step-number {
  font-family: var(--heading-font);
  font-size: var(--font-size-h2);
}

/* Testimonials — decorative quote mark */
.cubelaw-quote-mark {
  font-family: var(--heading-font);
  font-size: 4.5rem;
  line-height: 0.5;
  color: var(--color-sage);
  opacity: 0.5;
  margin-bottom: var(--space-small) !important;
}

/*
 * FAQ — firm-level accordion (patterns/faq.php). Built on the core
 * <wp:details> block; each item carries .cubelaw-faq-item. Thin rules between
 * rows, Playfair question, a Sage chevron that flips when the item is open.
 * No JS — native <details>/<summary> disclosure.
 */
.cubelaw-faq {
  margin-top: var(--space-large);
}

.cubelaw-faq-item {
  border-top: 1px solid color-mix(in srgb, var(--color-body) 20%, transparent);
}
.cubelaw-faq-item:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--color-body) 20%, transparent);
}
.cubelaw-faq-item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-medium);
  cursor: pointer;
  list-style: none;
  padding: var(--space-medium) 0;
  font-family: var(--heading-font);
  font-size: var(--font-size-h3);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-ink);
}
.cubelaw-faq-item > summary::-webkit-details-marker {
  display: none;
}
.cubelaw-faq-item > summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.6em;
  height: 0.6em;
  margin-top: 0.3em;
  border-right: 2px solid var(--color-sage);
  border-bottom: 2px solid var(--color-sage);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.cubelaw-faq-item[open] > summary::after {
  transform: rotate(-135deg);
}
.cubelaw-faq-item > summary:focus-visible {
  outline: 2px solid var(--color-sage);
  outline-offset: 2px;
}
.cubelaw-faq-item > :not(summary) {
  margin: 0 0 var(--space-medium);
  max-width: 65ch;
  color: var(--color-body);
}

/*
 * Header contact bar phone — sage line icon (was a 📞 emoji, which
 * renders full-color regardless of surrounding text color/theme, and
 * looks inconsistent across platforms/fonts). stroke="currentColor" on
 * the SVG itself means this color rule is all it takes to recolor it.
 */
/*
 * Sticky header — the whole template-part <header> (contact bar + nav row,
 * or the single landing-page bar) stays pinned to the top while scrolling.
 *
 * Done on the template-part wrapper (every template renders it as
 * <header class="wp-block-template-part site-header"> directly inside
 * .wp-site-blocks) rather than as a "sticky" position setting on the
 * pattern's own group: sticking an inner group can't work, since a sticky
 * element only travels within its parent and the header's parent is just the
 * header itself. `.wp-site-blocks >` also keeps this to the front end — the
 * editor canvas has no such wrapper, so headers don't stick while editing.
 *
 * top follows core's admin-bar height so it clears the WP toolbar when
 * logged in (the bar scrolls away on phones, hence top: 0 there). z-index
 * sits above page content and the slider arrows; the services mega menu
 * (z-index 40) lives inside the header, so it's carried along and overlays
 * content as before.
 */
.wp-site-blocks > header.site-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
}
@media (max-width: 600px) {
  .wp-site-blocks > header.site-header {
    top: 0;
  }
}

.cubelaw-header-phone {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cubelaw-header-phone svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-sage);
}

/*
 * "Our Services" mega menu — constrained-width panel (matches the site's
 * normal 1140px content width, same as every other section) with a
 * 3-column grid, so 6 top-level services wrap into 2 neat rows of 3
 * rather than 6 cramped-narrow columns. Lives outside the wp:navigation
 * block entirely (raw HTML in patterns/header.php) — a native
 * navigation-submenu only ever renders as a narrow single-column flyout,
 * which can't produce this grid layout.
 *
 * .cubelaw-nav-row is the positioning anchor (position: relative) — Nav
 * Row itself is already alignfull with a "constrained" (1140px) layout,
 * so a plain left:0/right:0/top:100% panel naturally lands flush with
 * the header bar and shares its same width, no extra sizing needed here.
 */
.cubelaw-nav-row {
  position: relative;
}

.cubelaw-services-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 40;
}
.cubelaw-services-mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (max-width: 781px) {
  .cubelaw-services-mega {
    display: none;
  }
}

.cubelaw-services-mega-inner {
  max-width: 1140px;
  margin-inline: auto;
  padding: var(--space-large) var(--space-medium);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-large) var(--space-x-large);
  text-align: left;
}

.cubelaw-services-mega-col .cubelaw-services-mega-title {
  display: block;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--small);
  color: var(--color-ink);
  text-decoration: none;
  padding-bottom: var(--space-small);
  margin-bottom: var(--space-small);
  border-bottom: 2px solid var(--color-sage);
}
.cubelaw-services-mega-col .cubelaw-services-mega-title:hover {
  color: var(--color-sage);
}
.cubelaw-services-mega-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cubelaw-services-mega-col li a {
  font-size: var(--wp--preset--font-size--x-small);
  color: var(--color-body);
  text-decoration: none;
}
.cubelaw-services-mega-col li a:hover {
  color: var(--color-sage);
}

/* Main nav — Sage underline on hover / current item */
.cubelaw-main-nav .wp-block-navigation-item__content {
  position: relative;
  padding-bottom: 4px !important;
}
.cubelaw-main-nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-sage);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.cubelaw-main-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.cubelaw-main-nav .current-menu-item > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}
.cubelaw-main-nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--color-ink) !important;
}
.cubelaw-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--color-white) !important;
}

/* Accessible focus outline in brand color */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-sage);
  outline-offset: 2px;
}

/*
 * Mobile — stack the process steps. LEGACY Columns blocks stack themselves
 * (core), so only their divider flips from left to top; the CURRENT grid
 * doesn't collapse on its own, so it's told to go single-column here (same
 * breakpoint). Two classes beat core's single generated .wp-container-*
 * grid-template-columns rule without !important.
 */
@media (max-width: 781px) {
  .wp-block-columns.cubelaw-process-steps .cubelaw-step {
    border-left: none;
    border-top: 1px solid color-mix(in srgb, var(--color-body) 20%, transparent);
    padding-left: 0;
    padding-top: var(--space-medium);
  }
  .wp-block-columns.cubelaw-process-steps .cubelaw-step:first-child {
    border-top: none;
    padding-top: 0;
  }
  .wp-block-group.cubelaw-process-steps {
    grid-template-columns: 1fr;
  }
}
main.wp-block-group {
  margin: 0;
}

/* Hero — trust row (Google rating + TrustAnalytica badge, side by side) */
.cubelaw-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 50px;
  margin-top: var(--space-medium);
}

/* Hero — Google rating badge */
.cubelaw-google-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-small);
  padding: var(--space-small);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.cubelaw-google-badge__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.cubelaw-google-badge__body {
  text-align: left;
}
.cubelaw-google-badge__stars {
  color: #f4a016;
  font-size: 0.9rem;
  letter-spacing: 1px;
  line-height: 1;
}
.cubelaw-google-badge__rating {
  font-weight: 700;
  color: var(--color-white);
  margin: 4px 0 0;
  line-height: 1.2;
}
.cubelaw-google-badge__reviews {
  color: var(--color-linen);
  font-size: 0.8rem;
  opacity: 0.8;
  margin: 2px 0 0;
}

/*
 * The badge above was built for the homepage Hero (ink background, white
 * text) — the Landing/Location Trust Bar section reuses the same badge on
 * a light (linen/white) background, where that white-on-white-ish text is
 * nearly invisible. Override to dark text + a light ink-tinted background
 * whenever it sits inside one of the light section variations instead.
 */
.is-style-white-section .cubelaw-google-badge,
.is-style-linen-section .cubelaw-google-badge {
  background: color-mix(in srgb, var(--color-ink) 5%, transparent);
}
.is-style-white-section .cubelaw-google-badge__rating,
.is-style-linen-section .cubelaw-google-badge__rating {
  color: var(--color-ink);
}
.is-style-white-section .cubelaw-google-badge__reviews,
.is-style-linen-section .cubelaw-google-badge__reviews {
  color: var(--color-body);
  opacity: 1;
}

/* TrustAnalytica badge — their script injects its own SVG with no size set */
.trustanalytica-badge svg {
  width: 100px;
  height: auto;
}

/*
 * Group block style variations (ink-section, sage-section) are NOT
 * duplicated here. They're registered in functions.php and styled in
 * theme.json's styles.blocks.core/group.variations, which WordPress 6.6+
 * compiles through a dedicated, unconditionally-enqueued mechanism
 * (wp-includes/block-supports/block-style-variations.php) — unlike the
 * general per-block global-styles pathway, which IS gated by on-demand
 * asset loading and unreliable (see the h1/h2/h3 rule above). Confirmed
 * via the #block-style-variation-styles-inline-css tag in production.
 */
/* CTA banner — tick-mark trust list */
.cubelaw-tick-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cubelaw-tick-list li {
  position: relative;
  padding-left: 1.75em;
  font-weight: 600;
  font-size: var(--wp--preset--font-size--x-small);
  color: var(--color-white);
}
.cubelaw-tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}
.cubelaw-tick-list li::after {
  content: "";
  position: absolute;
  left: 0.36em;
  top: 0.36em;
  width: 0.5em;
  height: 0.28em;
  border-left: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: rotate(-45deg);
}

/*
 * Same reasoning as the Google badge override above — this list was built
 * for dark (ink/sage) backgrounds. The Trust Bar reuses it on linen/white.
 */
.is-style-white-section .cubelaw-tick-list li,
.is-style-linen-section .cubelaw-tick-list li {
  color: var(--color-ink);
}
.is-style-white-section .cubelaw-tick-list li::before,
.is-style-linen-section .cubelaw-tick-list li::before {
  background: color-mix(in srgb, var(--color-ink) 10%, transparent);
}
.is-style-white-section .cubelaw-tick-list li::after,
.is-style-linen-section .cubelaw-tick-list li::after {
  border-left-color: var(--color-sage);
  border-bottom-color: var(--color-sage);
}

/*
 * Trust Bar's left-column bullets (patterns/trust-bar.php) — same list,
 * bumped up a size so it reads as the primary content next to the badges
 * rather than a small aside.
 */
.cubelaw-tick-list-large li {
  font-size: var(--wp--preset--font-size--base);
}

/*
 * CTA Banner — No Form (patterns/cta-banner-no-form.php) centers its whole
 * content column, so the list itself needs to shrink to its content width
 * and center within that column — the default is a full-width flex column
 * with left-aligned items, fine when it sits beside a form card, but it
 * would otherwise stretch the full width of the centered CTA and look
 * left-aligned within that wide space.
 *
 * That alone only centers the LIST as a block — each row (icon+text) still
 * stretches to match the widest row (flex-column default align-items:
 * stretch), so the checkmark+text pair itself stays hugged to the left
 * edge of that shared width. `align-items: center` centers each row
 * within the column, and `width: fit-content` on the row shrinks it back
 * to its own text width so centering has something narrower than the
 * widest sibling to center against.
 */
.cubelaw-tick-list-center {
  width: fit-content;
  margin-inline: auto;
  align-items: center;
}
.cubelaw-tick-list-center li {
  width: fit-content;
}

/*
 * The Icon Block plugin (outermost/icon-block) — global default styling so
 * every icon the client drops in via the block inserter (Blocks → search
 * "Icon") matches the brand automatically, instead of the plugin's own
 * unstyled default (plain black — the raw SVGs carry no fill of their own,
 * and the plugin's stylesheet only sets a fill once a color has been
 * explicitly picked, via its own ".has-icon-color" class).
 *
 * Deliberately low-specificity, un-gated by ".has-icon-color": when the
 * client DOES pick a custom color from the block's own sidebar control,
 * the plugin writes it as an inline `color` style on ".icon-container",
 * and inline styles always win over this stylesheet regardless of
 * specificity — so this is a default, not a lock. Per-instance overrides
 * (a red "warning" icon, etc.) still work exactly as the client expects.
 */
.wp-block-outermost-icon-block .icon-container {
  color: var(--wp--preset--color--custom-sage);
}
.wp-block-outermost-icon-block .icon-container svg {
  fill: currentColor;
}

/*
 * Blog archive (templates/home.html) — Query Pagination numbers.
 * margin-top set here in plain CSS rather than the block's own "style.
 * spacing.margin" attr (which is what the template file's wp:query-
 * pagination comment actually declares) — that attr isn't translating
 * into an inline style on this block's server-rendered <nav> wrapper in
 * this WP version, confirmed via computed styles (margin-top: 0px
 * despite the attr being set), so it needs a real CSS rule instead.
 */
.wp-block-query-pagination {
  margin-top: var(--space-x-large);
}
.wp-block-query-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2em;
  height: 2.2em;
  padding: 0 0.4em;
  font-weight: 600;
  font-size: var(--wp--preset--font-size--small);
  color: var(--color-ink);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--color-body) 25%, transparent);
}
.wp-block-query-pagination a.page-numbers:hover {
  border-color: var(--color-sage);
  color: var(--color-sage);
}
.wp-block-query-pagination .page-numbers.current {
  background: var(--color-sage);
  border-color: var(--color-sage);
  color: var(--color-white);
}
.wp-block-query-pagination .page-numbers.dots {
  border: none;
}

/*
 * CTA banner / Hero - Landing / Contact - Info and Form — "Leave a
 * Message" contact form. White rounded card (border + radius) sitting on
 * top of the section's own color (sage on the CTA banner / contact info
 * card, ink on the landing hero) — wraps the heading AND the WPForms
 * shortcode together so the heading reads as part of the same card
 * rather than floating above it (see assets/css/wpforms.scss for the
 * form's own field/button styling, which now sits card-less inside this
 * wrapper). Heading is forced to sage (not the custom-white it's set to
 * in the pattern source — see patterns/cta-banner.php,
 * patterns/contact-info-form.php, patterns/hero-landing.php — since it's
 * no longer sitting directly on a colored section) to match the sage
 * headings used elsewhere (footer, mega menu column titles).
 *
 * !important + explicit override here (rather than relying on the
 * pattern's own textColor attr) because the CTA Banner on the live
 * homepage is a fully-expanded copy baked into the Home page's own
 * post_content, not a live reference to patterns/cta-banner.php — so it
 * still carries the old has-custom-white-color class no matter how the
 * pattern source is edited (0,2,0 specificity beats a plain class+element
 * selector). A CSS override here fixes every occurrence, expanded or
 * not, instead of DB-patching already-published pages.
 */
.cubelaw-contact-card {
  background: var(--color-white);
  border: 2px solid var(--color-sage);
  border-radius: 16px;
  padding: 15px 25px;
}
.cubelaw-contact-card h3,
.cubelaw-contact-card .wp-block-heading {
  margin-top: 0;
  color: var(--color-sage) !important;
}

/*# sourceMappingURL=cubelaw.css.map */