/* core/button, Default/Gold/Outline styles (inc/button-block-styles.php),
   ported from the prototype's .cta-button / .cta-button-type-gold /
   .cta-button-type-outline (html/assets/css/components/buttons.css).
   Styled through the block's own top-level wp-block-button class plus
   wp-block-button__link, core's own stable class for the real <a> inside
   it — never any other internal structure.

   Default is this registry's own is_default style (inc/button-block-styles.php),
   so it carries no is-style-* class at all: this base selector is the
   button's actual rendered look whenever no style, or Default specifically,
   is chosen. Gold and Outline layer their own color/background/border on
   top via the extra is-style-gold/is-style-cta-outline class, the same
   base-plus-modifier pattern the prototype itself uses.

   The base selector needs a specificity bump beyond the plain two classes
   this started with — a real GeneratePress leak, found by measuring, not
   the GP audit done earlier for other core blocks (button didn't exist as
   a styled block yet then). GeneratePress's own dynamically generated
   button CSS sets this same background/color on the front end via
   "a.wp-block-button__link:not(.has-background)" (specificity 0,2,1), and
   — found separately, after Elisa caught the editor canvas still showing
   GP's gray — on a DIFFERENT selector inside the editor specifically,
   ".wp-block-button__link:not(.has-background)" (0,2,0, no "a").
   Adding the "a" tag to this theme's own selector only fixed the front
   end: Gutenberg renders the button's link as a <div> inside the editor
   canvas (RichText needs a plain editable element there, not a real
   clickable <a>) and only swaps it for a real <a> in the saved/front-end
   markup, confirmed directly by checking tagName inside the editor
   canvas's own iframe — so an "a"-qualified selector can never match
   there at all. Fixed instead with a specificity bump that doesn't assume
   either tag: repeating the wrapper class (.wp-block-button.wp-block-button),
   a well-known, deliberate CSS technique for raising specificity without
   depending on markup. That gives this rule (0,3,0), beating both of
   GeneratePress's variants (0,2,1 and 0,2,0) in both contexts. Gold and
   Outline were never affected either way, since their own extra
   is-style-* class already put them at (0,3,0) by construction. */

.wp-block-button.wp-block-button .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    color: rgba(var(--white), 1);
    text-decoration: none;
    background-color: rgba(var(--terra-green), 1);
    border: 0;
    border-radius: var(--radius-button);
    box-shadow: none;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.wp-block-button.wp-block-button .wp-block-button__link:hover,
.wp-block-button.wp-block-button .wp-block-button__link:focus,
.wp-block-button.wp-block-button .wp-block-button__link:active,
.wp-block-button.wp-block-button .wp-block-button__link:visited {
    color: rgba(var(--white), 1);
    text-decoration: none;
    background-color: rgba(var(--terra-green), 1);
    border: 0;
    box-shadow: none;
}

.wp-block-button.wp-block-button .wp-block-button__link:hover,
.wp-block-button.wp-block-button .wp-block-button__link:focus {
    filter: brightness(1.2);
}

.wp-block-button.is-style-gold .wp-block-button__link,
.wp-block-button.is-style-gold .wp-block-button__link:hover,
.wp-block-button.is-style-gold .wp-block-button__link:focus,
.wp-block-button.is-style-gold .wp-block-button__link:active,
.wp-block-button.is-style-gold .wp-block-button__link:visited {
    background-color: rgba(var(--gold), 1);
}

/* "cta-outline" (inc/button-block-styles.php), not "outline" — the plain
   "outline" name collided with core's own built-in style name and caused a
   real bug (see that file's own comment), so this theme's Outline style
   registers under a different internal slug. The label still reads
   "Outline" in the Styles panel either way. */
.wp-block-button.is-style-cta-outline .wp-block-button__link,
.wp-block-button.is-style-cta-outline .wp-block-button__link:hover,
.wp-block-button.is-style-cta-outline .wp-block-button__link:focus,
.wp-block-button.is-style-cta-outline .wp-block-button__link:active,
.wp-block-button.is-style-cta-outline .wp-block-button__link:visited {
    color: rgba(var(--terra-green), 1);
    background-color: rgba(var(--cream), 1);
    border: 1px solid rgba(var(--terra-green), 0.3);
}

.wp-block-button.is-style-cta-outline .wp-block-button__link:hover,
.wp-block-button.is-style-cta-outline .wp-block-button__link:focus {
    filter: none;
    background-color: rgba(var(--white), 1);
}

/* md. Needs the same specificity bump as the base rule above: once the
   base rule's own specificity went up (first to 0,2,1 with an "a" tag,
   then to 0,3,0 with the repeated-class fix once the "a" tag turned out
   not to match inside the editor canvas at all), a plain two-class
   override here (0,2,0) could no longer out-rank it regardless of media
   query or source order, and this 18px bump silently stopped applying —
   caught both times by re-measuring at 390 after each specificity change,
   not assumed fixed. */
@media (max-width: 767.98px) {
    .wp-block-button.wp-block-button .wp-block-button__link {
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-button.wp-block-button .wp-block-button__link {
        transition: none;
    }
}

/* core/button, "Text Link" style: a plain text
   link, not a button, for tt360/newsletter-story's own optional "Read more"
   link and anywhere else a plain inline text link is needed instead of one
   of the solid cta-button treatments. Ported from the prototype's
   .read-more (html/assets/css/layout/newsletter-issue-detail.css). Styled
   through the block's own top-level wp-block-button class plus the
   registered is-style-text-link class, and wp-block-button__link, core's
   own stable class for the real <a> inside it (confirmed on a real
   rendered page) — never any other internal structure. */

.wp-block-button.is-style-text-link .wp-block-button__link {
    display: inline-block;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    /* The base button rule above sets line-height: normal (for the solid
       button's own vertical centering) and this link never overrode it,
       so it was computing to the browser's own ~1.2 default (about 17px)
       instead of the body's inherited 1.5 (21px) the prototype's plain
       <a> actually gets. Set explicitly so this text link's height matches
       the prototype regardless of what the base rule does. */
    line-height: 1.5;
    color: rgba(var(--terra-green), 1);
    background: none;
    border: 0;
    border-radius: 0;
    text-decoration: none;
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover,
.wp-block-button.is-style-text-link .wp-block-button__link:focus {
    color: rgba(var(--terra-green), 1);
    background: none;
    text-decoration: underline;
}