/*
 * CTA COLOUR AUTHORITY -- single owner of every button colour the design source
 * design system asserts.
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * Every CTA colour rule in the design system was written as
 * `:where(.entry-content, .editor-styles-wrapper) .r-cta-outline
 * .wp-block-button__link`. `:where()` contributes ZERO specificity, so those
 * rules landed at (0,2,0)/(0,3,0). The theme's own vendored legacy sheet
 * (`style.css`, the 206KB Twenty-Twenty-One derivative baked into
 * `sequoia-v2`) asserts the same properties at (0,6,0):
 *
 *   .wp-block-button:not(.is-style-outline)
 *     .wp-block-button__link:not(:hover):not(:active):not(.has-text-color)
 *       -> color: var(--global--color-background)   [ #fff ]
 *   .wp-block-button:not(.is-style-outline)
 *     .wp-block-button__link:not(:hover):not(:active):not(.has-background)
 *       -> background-color: var(--global--color-primary)
 *
 * `.wp-block-button:not(.is-style-outline)` matches EVERY composed CTA,
 * because the composers mark variants with `.r-cta-filled`/`.r-cta-outline`
 * and never with Core's `is-style-outline`. Legacy therefore won on strict
 * specificity, painting every label white -- verified with
 * `CSS.getMatchedStylesForNode` against a real render, not by reading source.
 * Legacy also asserts its hover/active colours with `!important`, so nothing
 * short of `!important` can reclaim those states while that sheet is present.
 *
 * THE CONTRACT
 * ------------
 * These declarations are the design system's non-negotiable CTA colours. They
 * are deliberately load-order independent and specificity independent: the
 * page renders the same whether or not `style.css` was dequeued, whether the
 * The reference stack arrives via `wp_enqueue_scripts` or `enqueue_block_assets`, and
 * whether Core's `global-styles-inline-css` rule
 * (`:root :where(.wp-element-button, .wp-block-button__link)`) emits its
 * #32373c / #fff default. That is what `!important` buys here, and it is
 * scoped to nothing but the design system's own `.r-cta-*`, hero and
 * `.fq-anchors` classes, which exist only in composed-route markup. No
 * legacy route contains them, so the blast radius is the composed routes only.
 *
 * `:not(.has-text-color)` / `:not(.has-background)` keep an editor-authored
 * per-button colour working: an explicit choice in the block editor still wins.
 *
 * WHEN `style.css` IS DELETED the `!important` flags can go. Nothing else in
 * this file needs to change -- the selectors already carry real specificity
 * and are ordered light -> dark -> state.
 *
 * This file must stay LAST in `sequoia_v2_stylesheets()`.
 */

/* ---------------------------------------------------------------- shared -- */

.r-cta .wp-block-button__link,
.r-cta-filled .wp-block-button__link,
.r-cta-outline .wp-block-button__link {
  transition: background-color .18s ease-out, border-color .18s ease-out, color .18s ease-out;
}

/* -------------------------------------------------- light band (default) -- */

.r-cta-filled .wp-block-button__link:not(.has-background) {
  background-color: var(--sq-ink, #17160f) !important;
  border-color: var(--sq-ink, #17160f) !important;
}

.r-cta-filled .wp-block-button__link:not(.has-text-color) {
  color: #fff !important;
}

.r-cta-filled .wp-block-button__link:hover,
.r-cta-filled .wp-block-button__link:active,
.r-cta-filled .wp-block-button__link:focus-visible {
  background-color: var(--sq-sage, #82b479) !important;
  border-color: var(--sq-sage, #82b479) !important;
  color: var(--sq-ink, #17160f) !important;
}

.r-cta-outline .wp-block-button__link:not(.has-background) {
  background-color: transparent !important;
}

.r-cta-outline .wp-block-button__link:not(.has-text-color) {
  border-color: var(--sq-ink, #17160f) !important;
  color: var(--sq-ink, #17160f) !important;
}

.r-cta-outline .wp-block-button__link:hover,
.r-cta-outline .wp-block-button__link:active,
.r-cta-outline .wp-block-button__link:focus-visible {
  background-color: var(--sq-sage, #82b479) !important;
  border-color: var(--sq-sage, #82b479) !important;
  color: var(--sq-ink, #17160f) !important;
}

/* ------------------------------------------------------- dark CTA bands -- */

.dark-cta .r-cta-filled .wp-block-button__link:not(.has-background) {
  background-color: var(--sq-sage, #82b479) !important;
  border-color: var(--sq-sage, #82b479) !important;
}

.dark-cta .r-cta-filled .wp-block-button__link:not(.has-text-color) {
  color: var(--sq-ink, #17160f) !important;
}

.dark-cta .r-cta-filled .wp-block-button__link:hover,
.dark-cta .r-cta-filled .wp-block-button__link:active,
.dark-cta .r-cta-filled .wp-block-button__link:focus-visible {
  background-color: #96c48d !important;
  border-color: #96c48d !important;
  color: var(--sq-ink, #17160f) !important;
}

.dark-cta .r-cta-outline .wp-block-button__link:not(.has-background) {
  background-color: transparent !important;
}

.dark-cta .r-cta-outline .wp-block-button__link:not(.has-text-color) {
  border-color: var(--sq-mute, #6b6860) !important;
  color: #fff !important;
}

.dark-cta .r-cta-outline .wp-block-button__link:hover,
.dark-cta .r-cta-outline .wp-block-button__link:active,
.dark-cta .r-cta-outline .wp-block-button__link:focus-visible {
  background-color: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* ------------------------------------------------------- hero CTA pairs -- */
/* `design-hero-proof.css` describes the hero pair at (0,3,0); the same legacy
 * rules outrank it. Colour only -- geometry stays in that sheet. */

.h-hero-copy .wp-block-button:first-child .wp-block-button__link:not(.has-background),
.lt-hero-copy .wp-block-button:first-child .wp-block-button__link:not(.has-background) {
  background-color: var(--sq-ink, #17160f) !important;
  border-color: var(--sq-ink, #17160f) !important;
}

.h-hero-copy .wp-block-button:first-child .wp-block-button__link:not(.has-text-color),
.lt-hero-copy .wp-block-button:first-child .wp-block-button__link:not(.has-text-color) {
  color: #fff !important;
}

.h-hero-copy .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background),
.lt-hero-copy .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
  background-color: transparent !important;
}

.h-hero-copy .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
.lt-hero-copy .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
  border-color: var(--sq-ink, #17160f) !important;
  color: var(--sq-ink, #17160f) !important;
}

/* -------------------------------------------------- FAQ anchor text rail -- */
/* Quiet text links, not pills: legacy would otherwise paint them as solid
 * primary-coloured buttons with white labels. */

.fq-anchors .wp-block-button__link:not(.has-background) {
  background-color: transparent !important;
}

.fq-anchors .wp-block-button__link:not(.has-text-color) {
  border-color: transparent !important;
  border-left-color: var(--sq-line2, #dcd8cc) !important;
  color: var(--sq-ink, #17160f) !important;
}

.fq-anchors .wp-block-button__link:hover,
.fq-anchors .wp-block-button__link:active,
.fq-anchors .wp-block-button__link:focus-visible {
  background-color: transparent !important;
  border-left-color: var(--sq-sage, #82b479) !important;
  color: var(--sq-green, #3f6d3f) !important;
}

/* ------------------------------------------------- sticky mobile call bar -- */
/* `.mob-cta` is a DARK surface that is not marked `.dark-cta`.
 * `components/content-bands-grids.css` paints the bar `background: var(--sq-ink)`
 * (#17160f) at the <=760px step, but the buttons inside it carry only
 * `.r-cta-filled` / `.r-cta-outline`, so the LIGHT-band defaults above applied:
 * the outline button resolved to `color: #17160f` on `#17160f` -- a measured
 * contrast ratio of 1.00, i.e. the highest-intent action on mobile rendered
 * completely invisible. Measured with `CSS.getMatchedStylesForNode` against a
 * real 390px render of the shipping bundle, not read out of source.
 *
 * The colours below are not invented. The source archive draws this bar
 * itself, in `source/components/Sequoia Paver Hub - Page.dc.html` line 649,
 * with inline styles:
 *
 *   bar       background:#17160f
 *   call      color:#17160f  background:#82b479          (sage fill, ink label)
 *   estimate  color:#fff     border:1px solid #6b6860    (muted outline, white label)
 *
 * Those are byte-for-byte the values the `.dark-cta` block above already
 * asserts, so the bar joins that treatment rather than growing a second,
 * competing one.
 *
 * THE MEDIA STEP IS LOAD-BEARING, and is the one exception to this file's
 * order-independence. `.mob-cta` is only a dark surface below 760px: the
 * archive states `.mob-cta{display:none}` with
 * `@media (max-width:760px){.mob-cta{display:flex}}`, and
 * `components/content-bands-grids.css` ports that faithfully -- it paints
 * `background: var(--sq-ink)` inside the same 760px step and nowhere else.
 * Above it the bar is `display:none` over a white page, so asserting a white
 * label unconditionally would describe a state that does not exist. Measured:
 * at 1440px the bar's outline label computes `#ffffff` on `#ffffff`, contrast
 * 1.00, while `display:none` keeps it off the page. Binding these colours to
 * the same step keeps the sheet true at every width instead of relying on the
 * bar staying hidden. */

@media (max-width: 760px) {
  .mob-cta .r-cta-filled .wp-block-button__link:not(.has-background) {
    background-color: var(--sq-sage, #82b479) !important;
    border-color: var(--sq-sage, #82b479) !important;
  }

  .mob-cta .r-cta-filled .wp-block-button__link:not(.has-text-color) {
    color: var(--sq-ink, #17160f) !important;
  }

  .mob-cta .r-cta-filled .wp-block-button__link:hover,
  .mob-cta .r-cta-filled .wp-block-button__link:active,
  .mob-cta .r-cta-filled .wp-block-button__link:focus-visible {
    background-color: #96c48d !important;
    border-color: #96c48d !important;
    color: var(--sq-ink, #17160f) !important;
  }

  .mob-cta .r-cta-outline .wp-block-button__link:not(.has-background) {
    background-color: transparent !important;
  }

  .mob-cta .r-cta-outline .wp-block-button__link:not(.has-text-color) {
    border-color: var(--sq-mute, #6b6860) !important;
    color: #fff !important;
  }

  .mob-cta .r-cta-outline .wp-block-button__link:hover,
  .mob-cta .r-cta-outline .wp-block-button__link:active,
  .mob-cta .r-cta-outline .wp-block-button__link:focus-visible {
    background-color: transparent !important;
    border-color: #fff !important;
    color: #fff !important;
  }
}

/* ------------------------------------------- unclassed composed-route CTA -- */
/* A composed route can emit a Core Button carrying NEITHER `.r-cta-filled` nor
 * `.r-cta-outline`. Nothing in this file owned those, so the vendored legacy
 * `style.css` won at (0,6,0):
 *
 *   .wp-block-button:not(.is-style-outline)
 *     .wp-block-button__link:not(:hover):not(:active):not(.has-text-color)
 *       -> color: var(--global--color-background)   [ #fff ]
 *
 * On the cream/white bands those labels rendered WHITE ON WHITE. Measured on
 * the shipping bundle at both 390px and 1440px: three buttons on
 * `page.hub.pavers` -- two "Review current project records" and one
 * "Call the project owner" -- computed `#ffffff` on `#ffffff`, contrast 1.00.
 * That is real published copy no visitor could read.
 *
 * SCOPE, and why `:not(.is-style-outline)` is in the selector. A census of
 * every `.wp-block-button__link` across all 54 shipping routes at both widths
 * found exactly one broken context: `.r-page` with an EMPTY button class,
 * 3 buttons. Every other composed button already has an owner --
 * `.r-cta-filled` / `.r-cta-outline` cover the `.fq-anchors` rail and both hero
 * pairs, and six `.is-style-outline--N` buttons on this same route were already
 * rendering `#3f3d34` at contrast 10.89.
 *
 * Those six are excluded deliberately. Legacy's white-label rule carves out
 * `:not(.is-style-outline)` itself, which is precisely WHY they never broke;
 * claiming them here would have repainted six healthy buttons from `#3f3d34` to
 * `#17160f` as a silent side effect. Measured before narrowing this selector,
 * so the carve-out is load-bearing and not defensive.
 *
 * COLOUR ONLY. The border these buttons already carry keeps its width; only its
 * colour is claimed, so this stays a colour fix and not a geometry change.
 * `.r-page` is the composed-route root, so no legacy route is touched. */

.r-page .wp-block-button:not(.r-cta-filled):not(.r-cta-outline):not(.is-style-outline) .wp-block-button__link:not(.has-text-color) {
  border-color: var(--sq-ink, #17160f) !important;
  color: var(--sq-ink, #17160f) !important;
}

.r-page .wp-block-button:not(.r-cta-filled):not(.r-cta-outline):not(.is-style-outline) .wp-block-button__link:not(.has-background) {
  background-color: transparent !important;
}

.r-page .wp-block-button:not(.r-cta-filled):not(.r-cta-outline):not(.is-style-outline) .wp-block-button__link:hover,
.r-page .wp-block-button:not(.r-cta-filled):not(.r-cta-outline):not(.is-style-outline) .wp-block-button__link:active,
.r-page .wp-block-button:not(.r-cta-filled):not(.r-cta-outline):not(.is-style-outline) .wp-block-button__link:focus-visible {
  background-color: var(--sq-sage, #82b479) !important;
  border-color: var(--sq-sage, #82b479) !important;
  color: var(--sq-ink, #17160f) !important;
}