/**
 * Voya — block and element styles
 *
 * Loaded on the front end AND registered as a block-editor stylesheet, so the
 * editor renders these blocks the way visitors will see them. Keep it to rules
 * that describe blocks themselves; site furniture belongs in style.css.
 *
 * Everything expressible in theme.json (colours, type, borders, padding) is
 * defined there instead. What lands here is what theme.json has no vocabulary
 * for: hover transforms, table sub-elements, and pseudo-element decoration.
 */

/* ==========================================================================
   Buttons

   Colours, type and borders come from theme.json styles.elements.button.
   The lift on hover cannot be expressed there — theme.json has no transform
   support — so it lives here.

   The underline reset is not belt and braces. theme.json's link styles are
   scoped to :where(a:not(.wp-element-button)), so they leave buttons alone —
   but the parent stylesheet also carries a bare "a:hover, a:focus
   { text-decoration: underline }", which has no such exclusion and so
   underlines every button link on hover. Every site on the boilerplate has
   this; worth fixing upstream rather than per site.
   ========================================================================== */

.wp-element-button,
.wp-block-button__link,
.wp-block-search__button,
.wp-block-file__button {
    display: inline-block;
    text-decoration: none;
    transition:
        background-color var(--voya-transition),
        border-color var(--voya-transition),
        color var(--voya-transition),
        transform var(--voya-transition);
}

/*
 * :focus as well as :focus-visible, because that is what the parent rule
 * being overridden uses — matching only :focus-visible would leave the
 * underline showing on a click-focused button.
 */
.wp-element-button:hover,
.wp-block-button__link:hover,
.wp-block-search__button:hover,
.wp-block-file__button:hover,
.wp-element-button:focus,
.wp-block-button__link:focus,
.wp-block-search__button:focus,
.wp-block-file__button:focus {
    text-decoration: none;
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.wp-block-search__button:hover,
.wp-block-file__button:hover,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
    transform: translateY(calc(-1 * var(--voya-button-lift, 2px)));
}

/*
 * Core's outline variation ships its own padding — .667em/1.333em against the
 * solid button's 0.5rem/1.25rem — which makes it 8px taller. Restated here so
 * the two variants stand the same height side by side; theme.json sets the
 * solid button's padding but cannot reach a block style variation's.
 */
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
    padding: 0.5rem 1.25rem;
}

/* The outline variant (used for "Our Story" over the homepage hero) keeps a
   transparent face until hover, then fills with the same green as the solid
   button so both share one hover identity. The rule is green at rest too,
   rather than currentColor, which took the button's white text colour over
   the hero. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
    background-color: transparent;
    border-color: var(--wp--preset--color--green);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus-visible {
    background-color: var(--wp--preset--color--green);
    border-color: var(--wp--preset--color--green);
    color: var(--wp--preset--color--white);
}

/* A rising button is decorative; honour a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {

    .wp-element-button,
    .wp-block-button__link,
    .wp-block-search__button,
    .wp-block-file__button {
        transition: background-color var(--voya-transition), border-color var(--voya-transition), color var(--voya-transition);
    }

    .wp-element-button:hover,
    .wp-block-button__link:hover,
    .wp-block-search__button:hover,
    .wp-block-file__button:hover,
    .wp-element-button:focus-visible,
    .wp-block-button__link:focus-visible {
        transform: none;
    }
}

/* ==========================================================================
   Tables

   Colours and cell styling are set in theme.json under
   styles.blocks["core/table"].css — the parent theme styles thead/tfoot from
   there with hardcoded colours and !important, so the child overrides that
   same key rather than starting a specificity war from this file.

   WARNING when editing that css string: give every rule a single selector.
   WordPress prefixes only the FIRST selector of a comma-separated list, so
   "& td, & th { border: none }" silently emits ":root :where(...){td,}" and
   applies the declaration to th alone — td keeps its border and nothing
   reports an error. One selector per rule, always.

   Only the overflow behaviour, which the parent does not address, lives here.
   ========================================================================== */

/* Wide tables must scroll inside their own box rather than pushing the page
   sideways on narrow screens. */
.wp-block-table {
    overflow-x: auto;
}

.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
}

/* ==========================================================================
   Quote
   Design: pale green field with a green rule down the leading edge.
   Colours, border and padding are set in theme.json; only the citation needs
   describing here.
   ========================================================================== */

.wp-block-quote cite,
.wp-block-quote .wp-block-quote__citation {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--small);
    font-style: normal;
    font-weight: 700;
}

/* ==========================================================================
   Pull quote
   Design: burgundy rules above and below, centred italic condensed type.
   theme.json sets the type, colour and borders; alignment and the default
   core background need clearing here.
   ========================================================================== */

.wp-block-pullquote {
    text-align: center;
    background: none;
    border-left: 0;
    border-right: 0;
}

.wp-block-pullquote blockquote {
    margin: 0;
    border: 0;
    padding: 0;
}

.wp-block-pullquote cite {
    display: block;
    margin-top: 0.75rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--small);
    font-style: normal;
    font-weight: 700;
    text-transform: none;
    color: var(--wp--preset--color--black);
}

/* ==========================================================================
   Carousel arrows

   The parent block hides its arrows at opacity 0 and reveals them on
   :hover / :focus-within. Two reasons that does not hold here: the design
   draws them permanently, and a touch screen never hovers — so on a phone
   the arrows would be unreachable, leaving only the dots.

   The design also draws them far larger and bare, with no disc behind them.
   Its chevron measures roughly 20 x 36; the parent's is about 5 x 10, because
   the path fills only half of its 24-unit viewBox and that viewBox is drawn
   at 20px. Rendering the same SVG at 72px gives an 18 x 36 chevron, which is
   the design's proportion.

   NOTE: those figures are measured off the rendered design, not read from
   it — the XD viewer would not let me select the arrow to read its box. They
   are close, not exact; --voya-carousel-arrow is here to be nudged.

   Scoped through the wrapper so this outranks the block's own stylesheet
   whichever order the two happen to load in.
   ========================================================================== */

.pb-carousel {
    --voya-carousel-arrow: 72px;
}

.pb-carousel .pb-carousel__arrow {
    opacity: 1;
    width: var(--voya-carousel-arrow);
    height: var(--voya-carousel-arrow);

    /* The design has no disc behind the chevron. */
    background: transparent;
}

.pb-carousel .pb-carousel__arrow svg {
    width: var(--voya-carousel-arrow);
    height: var(--voya-carousel-arrow);

    /* Scaled for the larger render: the parent's 2.5 is set against a 20px
       box and would come out seven pixels thick at this size. */
    stroke-width: 1.5;
}

/*
 * Removing the disc removes the parent's hover feedback with it, so the
 * chevron takes the site's hover green instead — the same colour buttons and
 * navigation resolve to.
 */
.pb-carousel .pb-carousel__arrow:hover,
.pb-carousel .pb-carousel__arrow:focus-visible {
    background: transparent;
    color: var(--wp--preset--color--green);
}

/* ==========================================================================
   Section rule — voya-rule

   The short, thick accent under a section heading. The design draws it 96
   long and 5 thick (Line 189: "border: 5px solid #901928"), flush with the
   left edge of the column rather than centred, which is the Separator
   block's default.

   Core gives a Separator its colour through the block's own has-background
   class, so none is set here — recolouring it in the editor keeps working.
   Height comes from this rule instead of a border, since core's border-based
   sizing is what the block style variations fight over.
   ========================================================================== */

.wp-block-separator.voya-rule {
    width: 96px;
    max-width: 96px;
    height: 5px;
    border: 0;

    /* Design: 21.5 above, 27.5 below. */
    margin-block: 1.25rem 1.75rem;

    /* Flush left, overriding the block's centred default. */
    margin-inline: 0 auto;
}