/* Shared by every npc/* block: text rhythm, band background, buttons, lists. Colours = tokens only. */

.npcb {
  margin: 40px 0;
  font-family: var(--npc-font-primary); /* the editor canvas has no theme body font */
}

/* Editor only: every section is a full row (not the 840px a classic theme gives text). Width only changes the
   content inside; an alignment class saved on an older section never floats or narrows it. */
.is-root-container > .wp-block:is([data-type^="npc/"], [data-type="core/block"]) {
  float: none;
  clear: both;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Image + Text, Cards and FAQ have no .container of their own. As a page-level row (editor canvas, or a block page
   printed straight into <main>) side padding holds their content to Bootstrap's container; --npcb-cap is its width
   and the Width option overrides it. A band (Soft, Background colour or photo) paints the whole row, square-edged.
   Inside a Content section they follow its column. */
:is(.is-root-container, #main-content) { --npcb-cap: 100%; }
@media (min-width: 576px) { :is(.is-root-container, #main-content) { --npcb-cap: 540px; } }
@media (min-width: 768px) { :is(.is-root-container, #main-content) { --npcb-cap: 720px; } }
@media (min-width: 992px) { :is(.is-root-container, #main-content) { --npcb-cap: 960px; } }
@media (min-width: 1200px) { :is(.is-root-container, #main-content) { --npcb-cap: 1140px; } }
@media (min-width: 1400px) { :is(.is-root-container, #main-content) { --npcb-cap: 1320px; } }
#main-content > .npcb.npc-width-narrow { --npcb-cap: 820px; }
#main-content > .npcb.npc-width-full { --npcb-cap: 100%; }

:is(.is-root-container, .is-root-container > [data-type="core/block"]) > .wp-block:is([data-type="npc/image-text"], [data-type="npc/cards"], [data-type="npc/faq"]),
#main-content > .npcb:is(.npcb-image-text, .npcb-cards, .npcb-faq) {
  --npcb-gutter: max(12px, calc((100% - var(--npcb-cap)) / 2 + 12px));
}

:is(.is-root-container, .is-root-container > [data-type="core/block"]) > .wp-block:is([data-type="npc/image-text"], [data-type="npc/cards"], [data-type="npc/faq"]),
#main-content > .npcb:is(.npcb-image-text, .npcb-cards, .npcb-faq) {
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--npcb-gutter);
  padding-right: var(--npcb-gutter);
  border-radius: 0;
}

/* Every page-level row pads by the theme's section padding, a band (Soft, Background colour or photo) included: the
   canvas and the page share this rule, and the Spacing option moves it through --npc-section-py. */
:is(.is-root-container, .is-root-container > [data-type="core/block"]) > .wp-block:is([data-type="npc/image-text"], [data-type="npc/cards"], [data-type="npc/faq"]),
#main-content > .npcb:is(.npcb-image-text, .npcb-cards, .npcb-faq) {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: var(--npc-section-py, 100px);
  padding-bottom: var(--npc-section-py, 100px);
}

/* In a page column or a Content section, Narrow is the 820px container's measure. */
:is(.npc-page-content__body, .npcb-section__inner) > .npcb:is(.npcb-image-text, .npcb-cards, .npcb-faq).npc-width-narrow {
  max-width: 796px;
  margin-left: auto;
  margin-right: auto;
}

/* Editor only: a section inside a synced pattern gets the same full width (the 840px cap applies to nested blocks too) */
.is-root-container > [data-type="core/block"] > .wp-block {
  max-width: none;
  margin-top: 0;
  margin-bottom: 0;
}

/* Section width (blocks.php adds the class; the editor sets the same rule per section): Full drops the container's
   cap, Narrow is the 820px measure. Normal = the theme's container. */
.npc-width-full .container {
  max-width: none;
}

.npc-width-narrow .container {
  max-width: 820px;
}

/* Editor only: theme sections start hidden until core.js reveals them, and core.js is not loaded there */
.editor-styles-wrapper [data-npc-anim] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Editor only: classic themes centre every .wp-block at 840px, which indents inner blocks. The cap is lifted weaker
   than any class, so a block's own max-width (a Cards title at 820px) applies as on the page. */
.npcb .wp-block {
  margin-left: 0;
  margin-right: 0;
}
html body :where(.npcb) :where(.wp-block) { max-width: none; }

/* Same cap inside a theme section's zones: in a column wider than 840px it pushed titles and lists to the middle.
   Weaker than any class, so a theme's own max-width on a title still applies. */
html body :where(.npc-zone) :where(.wp-block) { max-width: none; }
/* The zone itself is a block there too: uncapped, it is as wide as on the page. */
html body :where(.wp-block.npc-zone) { max-width: none; }

.npcb.is-bg-soft {
  background: var(--npc-bg-alt);
  border-radius: var(--npc-band-radius);
  padding: clamp(32px, 5vw, 64px) clamp(20px, 4.5vw, 56px);
}

/* The theme's section title (core.css .npc-section__title), from the same slots. */
.npcb h2 {
  color: var(--npc-heading);
  font-family: var(--npc-font-heading);
  font-weight: var(--npc-title-weight);
  font-size: var(--npc-title-size);
  line-height: 1.2;
  margin: 0 0 20px;
}

.npcb h3 {
  color: var(--npc-heading);
  font-family: var(--npc-font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 14px;
}

.npcb p {
  line-height: 1.7;
  margin: 0 0 16px;
}

.npcb .has-text-align-center {
  text-align: center;
}

/* Lists: brand check marks unless the block asks for bullets */
.npcb ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 18px;
}

.npcb ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  line-height: 1.55;
}

.npcb ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--npc-primary);
}

.npcb ul li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(.2em + 4px);
  width: 6px;
  height: 10px;
  border: solid var(--npc-btn-color);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.npcb.is-list-bullets ul {
  list-style: disc;
  padding-left: 1.25rem;
}

.npcb.is-list-bullets ul li {
  padding-left: 4px;
}

.npcb.is-list-bullets ul li::before,
.npcb.is-list-bullets ul li::after {
  content: none;
}

.npcb.is-list-bullets ul li::marker {
  color: var(--npc-primary);
}

/* Buttons: our own (attribute buttons) and core/buttons placed inside a block */
.npcb-actions,
:is(.npcb, .npc-elements) .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* wp-block-library is dequeued, so core's layout classes need their rule here */
:is(.npcb, .npc-elements) .wp-block-buttons.is-content-justification-center { justify-content: center; }
:is(.npcb, .npc-elements) .wp-block-buttons.is-content-justification-right  { justify-content: flex-end; }

/* Block buttons are the theme's primary button. On the page a zone's button carries .btn .btn-primary, so the skin
   styles it directly; where it cannot (the editor, Cards, blocks' own buttons) it is drawn from the theme's shape
   slots (core.css --npc-btn-*). One class of specificity, so a skin's .btn-primary rules always win. */
:where(.npcb-button),
:where(.npcb, .npc-elements, .npc-zone) :where(.wp-block-button:not(.is-style-npc-link)) > .wp-block-button__link,
/* A button no section gave .btn to: WordPress's global button style loads later with the same weight. */
:where(.npcb, .npc-elements, .npc-zone) :where(.wp-block-button:not(.is-style-npc-link)) > .wp-block-button__link:not(.btn),
/* The editor loads WordPress's own button styles after ours: there the rule needs their weight. */
.editor-styles-wrapper :where(.npcb, .npc-elements, .npc-zone) :where(.wp-block-button:not(.is-style-npc-link)) > .wp-block-button__link.wp-block-button__link {
  display: inline-block;
  background: var(--npc-btn-fill);
  border: var(--npc-btn-border);
  box-shadow: var(--npc-btn-shadow);
  color: var(--npc-btn-color);
  padding: var(--npc-btn-pad);
  border-radius: var(--npc-btn-radius);
  font-family: var(--npc-btn-font);
  font-size: var(--npc-btn-size);
  font-weight: var(--npc-btn-weight);
  text-transform: var(--npc-btn-transform);
  letter-spacing: var(--npc-btn-spacing);
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s;
}
:where(.npcb-button):is(:hover, :focus-visible),
:where(.npcb, .npc-elements, .npc-zone) :where(.wp-block-button:not(.is-style-npc-link, .is-style-npc-outline)) > .wp-block-button__link:is(:hover, :focus-visible) {
  background: var(--npc-primary-hover);
  border-color: var(--npc-primary-hover);
  color: var(--npc-btn-color);
}
:where(.npcb, .npc-elements, .npc-zone) :where(.is-style-npc-outline) > .wp-block-button__link,
:where(.npcb, .npc-elements, .npc-zone) :where(.is-style-npc-outline) > .wp-block-button__link:not(.btn),
.editor-styles-wrapper :where(.npcb, .npc-elements, .npc-zone) .is-style-npc-outline > .wp-block-button__link.wp-block-button__link { background: transparent; color: var(--npc-primary); border-color: var(--npc-primary); box-shadow: none; }

@media (max-width: 991px) {
  .npcb.is-bg-soft {
    border-radius: min(16px, var(--npc-band-radius));
  }
}

/* Background photo treatment of grid sections (npc_block_photo_treatment): an even tint between photo and content. */
.npc-bgtreat { position: relative; isolation: isolate; }
.npc-bgtreat::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.npc-bgtreat > .container { position: relative; z-index: 1; }
.npc-bgtreat--uniform::before { background: rgba(0, 0, 0, var(--npc-treat, .45)); }

/* ── Background (blocks.php npc_block_background): None | Colour | Photo with a treatment, the same for every
   section. Variables: --npc-sbg-color, --npc-sbg-image, --npc-treat (0-0.9). None drops any photo and keeps the
   design's own colour (a CTA band stays a band). !important: the blocks' older inline backgrounds lose. ── */
:root { --npc-heading-base: var(--npc-heading); --npc-text-base: var(--npc-text); }

[data-npc-sbg~="none"],
[data-npc-sbg~="color"],
[data-npc-sbg~="photo"] { background-image: none !important; }
[data-npc-sbg~="color"] { background-color: var(--npc-sbg-color) !important; }
[data-npc-sbg~="photo"] {
  position: relative;
  isolation: isolate;
  background-image: var(--npc-sbg-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* Phones take the smaller copy when the library has one. */
@media (max-width: 767.98px) {
  [data-npc-sbg~="photo"] { background-image: var(--npc-sbg-image-sm, var(--npc-sbg-image)) !important; }
}

/* Blocks inside the page column (Content, Cards, Image + Text, FAQ) become a rounded band, as Soft always was. */
.npcb:is([data-npc-sbg~="color"], [data-npc-sbg~="photo"]) {
  border-radius: var(--npc-band-radius);
  padding: clamp(32px, 5vw, 64px) clamp(20px, 4.5vw, 56px);
}

/* The treatment layer sits between the photo and the content. */
[data-npc-sbg~="photo"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}
[data-npc-sbg~="photo"] > * { position: relative; z-index: 1; }
[data-npc-sbg~="treat-uniform"]::before { background: rgba(0, 0, 0, var(--npc-treat, .45)); }
[data-npc-sbg~="treat-light"]::before { background: rgba(255, 255, 255, var(--npc-treat, .45)); }
[data-npc-sbg~="treat-scrim"]::before {
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(0, 0, 0, calc(var(--npc-treat, .45) * 1.2)) 0%, rgba(0, 0, 0, calc(var(--npc-treat, .45) * .75)) 45%, rgba(0, 0, 0, 0) 80%),
    linear-gradient(rgba(0, 0, 0, calc(var(--npc-treat, .45) * .25)), rgba(0, 0, 0, calc(var(--npc-treat, .45) * .25)));
}
[data-npc-sbg~="treat-bottom"]::before {
  background: linear-gradient(to top, rgba(0, 0, 0, calc(var(--npc-treat, .45) * 1.5)) 0%, rgba(0, 0, 0, calc(var(--npc-treat, .45) * .75)) 40%, rgba(0, 0, 0, calc(var(--npc-treat, .45) * .2)) 100%);
}
/* Frosted panel: behind the section's content column; a band without one gets it inset from its edges. */
[data-npc-sbg~="treat-panel"] > .container {
  padding: clamp(20px, 3vw, 36px);
  border-radius: 16px;
  background: rgba(20, 24, 28, var(--npc-treat, .45));
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
}
[data-npc-sbg~="treat-panel"]:not(:has(> .container))::before {
  inset: clamp(10px, 2vw, 20px);
  border-radius: 16px;
  background: rgba(20, 24, 28, var(--npc-treat, .45));
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
}
[data-npc-sbg~="treat-scrim"] :is(h1, h2, h3, p) { text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 18px rgba(0, 0, 0, .35); }

/* Light text on a dark colour or a treated photo: the theme's text tokens, so every heading and line follows. The
   light surfaces inside (cards, tables, questions, badges: measured in every block) keep the page's colours. */
[data-npc-sbg~="on-dark"] {
  --npc-sbg-fg: #fff;
  --npc-heading: #fff;
  --npc-text: rgba(255, 255, 255, .92);
  --npc-text-muted: rgba(255, 255, 255, .82);
  color: #fff;
}
[data-npc-sbg~="on-brand"] {
  --npc-sbg-fg: var(--npc-btn-color);
  --npc-heading: var(--npc-btn-color);
  --npc-text: var(--npc-btn-color);
  --npc-text-muted: var(--npc-btn-color);
  color: var(--npc-btn-color);
}
/* An explicit colour, not inherit: themes colour the inner .container too. */
:is([data-npc-sbg~="on-dark"], [data-npc-sbg~="on-brand"]) :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, [class*="__title"], [class*="__subtitle"], [class*="__text"], [class*="__name"], [class*="__eyebrow"], [class*="__desc"], [class*="__quote"], .npc-section__subtitle):not(:where(:is(.npcb-card, .npc-services__card, .npc-compare__table, .npc-checklist__table, .npc-faq__item, .wp-block-details, .wp-block-table, .npc-contact__info-col, .npc-thankyou__card, .npc-posts__item, .npc-rating__badge) *, .btn, .btn *, .wp-block-button__link, .wp-block-button__link *)) {
  color: var(--npc-sbg-fg);
}
:is([data-npc-sbg~="on-dark"], [data-npc-sbg~="on-brand"]) :is(.npcb-card, .npc-services__card, .npc-compare__table, .npc-checklist__table, .npc-faq__item, .wp-block-details, .wp-block-table, .npc-contact__info-col, .npc-thankyou__card, .npc-posts__item, .npc-rating__badge) {
  --npc-heading: var(--npc-heading-base);
  --npc-text: var(--npc-text-base);
  --npc-text-muted: var(--npc-text-base);
  color: var(--npc-text-base);
}
[data-npc-sbg~="on-brand"] :is(.npcb-button, .wp-block-button__link):not(:where(:is(.npcb-card, .npc-services__card, .npc-compare__table, .npc-checklist__table, .npc-faq__item, .wp-block-details, .wp-block-table, .npc-contact__info-col, .npc-thankyou__card, .npc-posts__item, .npc-rating__badge) *)) {
  background: var(--npc-btn-color);
  color: var(--npc-primary);
}
/* Testimonials and Trust print light text for the theme's photo behind them: with None or a light colour, the
   page's own colours. */
/* None (or Photo with no photo yet) also drops the site's colour for that photo, often near-black: never dark on dark. */
:is(.npc-testimonials, .npc-trust)[data-npc-sbg~="none"] { background-color: transparent !important; }
:is(.npc-testimonials, .npc-trust):is([data-npc-sbg~="none"], [data-npc-sbg~="color"]):not([data-npc-sbg~="on-dark"], [data-npc-sbg~="on-brand"]) :is(h2, h3, [class*="__title"], [class*="__name"]) {
  color: var(--npc-heading-base);
}
:is(.npc-testimonials, .npc-trust):is([data-npc-sbg~="none"], [data-npc-sbg~="color"]):not([data-npc-sbg~="on-dark"], [data-npc-sbg~="on-brand"]) :is(p, blockquote, [class*="__subtitle"], [class*="__quote"], [class*="__text"], [class*="__desc"]) {
  color: var(--npc-text-base);
}

/* The carousel's arrows and dots are white (made for a photo behind): on None or a light colour they take the brand. */
.npc-testimonials:is([data-npc-sbg~="none"], [data-npc-sbg~="color"]):not([data-npc-sbg~="on-dark"], [data-npc-sbg~="on-brand"]) .carousel-indicators [data-bs-target] { background: var(--npc-primary); }
.npc-testimonials:is([data-npc-sbg~="none"], [data-npc-sbg~="color"]):not([data-npc-sbg~="on-dark"], [data-npc-sbg~="on-brand"]) :is(.carousel-control-prev-icon, .carousel-control-next-icon) { filter: invert(1) grayscale(1) brightness(.35); }

/* Elements of a section saved before zones (npc_block_elements): basic blocks at the end of its container. */
.npc-elements { margin-top: 32px; }
.npc-elements:empty { display: none; }
/* Editor: an empty slot opens while a block is dragged, so the section can take the drop. */
.npc-elements.is-drop-open:empty { display: block; min-height: 56px; border: 1px dashed var(--npc-primary, #2563eb); border-radius: 8px; }
.npc-elements > :first-child { margin-top: 0; }
.npc-elements > :last-child { margin-bottom: 0; }
.npc-elements .has-text-align-left { text-align: left; }
.npc-elements .has-text-align-center { text-align: center; }
.npc-elements .has-text-align-right { text-align: right; }
.npc-elements .wp-block-buttons > :last-child { margin-bottom: 0; }
/* In a centred section (CTA, full-width Hero) buttons follow the text unless they pick a side. */
.text-center > .npc-elements .wp-block-buttons:not(.is-content-justification-left, .is-content-justification-right, .is-content-justification-space-between) { justify-content: center; }
.npc-elements .wp-block-image { margin: 0 0 24px; }
.npc-elements .wp-block-image img { display: block; max-width: 100%; height: auto; border-radius: var(--npc-card-radius); }
/* The photo's Position (pencil dialog): only shows on a photo narrower than its column. */
.wp-block-image:is(.is-pos-center, .is-pos-right) img { display: block; margin-left: auto; }
.wp-block-image.is-pos-center img { margin-right: auto; }
.npc-elements .wp-block-image.aligncenter img { margin-inline: auto; }
.npc-elements .wp-block-image.alignright img { margin-left: auto; }

/* Zones (npc/zone): a section's free areas, printed where its fields used to be (npc_block_zone). */
.npc-zone .has-text-align-left { text-align: left; }
.npc-zone .has-text-align-center { text-align: center; }
.npc-zone .has-text-align-right { text-align: right; }
/* A left list in a centred zone stays in the middle as a block, its lines flush left. */
:is(.text-center > .npc-zone, .npc-zone.text-center) :is(ul, ol).has-text-align-left { width: fit-content; max-width: 100%; margin-inline: auto; }
.npc-zone .wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.5rem 0 0; }
/* Buttons opening a zone (a footer) sit where the section's own buttons did, with no gap above. */
.npc-zone > .wp-block-buttons:first-child { margin-top: 0; }
.npc-zone .wp-block-buttons.is-content-justification-center { justify-content: center; }
.npc-zone .wp-block-buttons.is-content-justification-right { justify-content: flex-end; }
:is(.text-center > .npc-zone, .npc-zone.text-center, .npc-thankyou__card .npc-zone) .wp-block-buttons:not(.is-content-justification-left, .is-content-justification-right, .is-content-justification-space-between) { justify-content: center; }
.npc-zone .wp-block-image { margin: 0 0 24px; }
.npc-zone .wp-block-image img { display: block; max-width: 100%; height: auto; }
.npc-zone .wp-block-separator { border: 0; border-top: 1px solid currentColor; opacity: .2; margin: 1.5rem 0; }
.npc-zone > .npc-lead-widget { margin-top: 1.5rem; }
.npc-zone > .npc-lead-widget:first-child { margin-top: 0; }
/* Link style: a text link beside the buttons (the old second link). A phone keeps its words and icon. */
/* On the page the link is a plain <a> (npc_block_zone_buttons); the editor keeps the button markup. */
.npc-zone .is-style-npc-link > a.npc-zone-link { display: inline-block; text-decoration: none; }
.npc-zone .is-style-npc-link :is(.wp-block-button__link, a.npc-zone-link) { background: transparent; border-color: transparent; color: var(--npc-primary); padding-inline: 0; font-size: inherit; font-weight: 600; text-transform: none; letter-spacing: 0; }
.npc-zone .is-style-npc-link :is(.wp-block-button__link, a.npc-zone-link):is(.npc-hero__phone-link, .npc-cta__phone-link, .npc-hiw__phone-link) { color: inherit; font-weight: inherit; }
.npc-zone .is-style-npc-link :is(.wp-block-button__link, a.npc-zone-link):hover { background: transparent; text-decoration: underline; }
/* Service Areas: a zone's phone link keeps its icon, as the old second link did (the fields' link prints its own <i>). */
.npc-areas .npc-areas__link[href^="tel:"]:not(:has(> i))::before { content: "\f095"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: .5rem; }

/* Columns swapped (the section's Flip option): the Hero's widget or photo, the Service Areas map, on the other side.
   Desktop only: stacked on a phone, the order stays the one that reads well. */
@media (min-width: 992px) {
  :is(.npc-hero, .npc-areas).npc-flip .container > .row:not(.justify-content-center) { flex-direction: row-reverse; }
}