/**
 * Block content styles
 *
 * The only stylesheet loaded by both the front end and the block editor
 * canvas, so every rule here applies identically in each. Any rule that
 * styles block content belongs in this file.
 *
 * Rules that style the site chrome — header, footer, navigation, search
 * form — belong in style.css or main.css instead. The canvas never loads
 * those, and it has no chrome to style.
 *
 * Child themes: add assets/css/site-blocks.css and the parent registers it
 * for both targets automatically. Block rules placed in a child's style.css
 * reach the front end only, and the editor will not match.
 *
 * @package PB_Boilerplate
 */

/* ==========================================================================
   Text Columns

   Column count comes from core's Typography > Columns control
   (typography.textColumns). Core writes it as an inline column-count on the
   paragraph and offers no responsive behaviour of its own, so three columns
   set on a desktop stay three columns at 320px wide — unreadable, and a
   WCAG 1.4.10 reflow failure.

   The rules below narrow the count on smaller screens. Overriding an inline
   style is the one case !important is for; nothing else can reach it.

   Matched on the style attribute because that is how core emits the value.
   Both spacings are matched: the editor and the server serialise the
   declaration slightly differently. If a future release emits a class or a
   custom property instead, these selectors stop matching and columns stop
   collapsing on mobile — worth re-testing at each major WordPress upgrade.
   ========================================================================== */

/* Gap is ours to set: core has no control for it. */
p[style*="column-count"] {
    column-gap: 2rem;
}

/* Single column on mobile, whatever the count. */
@media (max-width: 782px) {
    p[style*="column-count"] {
        column-count: 1 !important;
    }
}

/* Reduce to two columns on tablet for 3 and above. */
@media (min-width: 783px) and (max-width: 1024px) {
    p[style*="column-count:3"],
    p[style*="column-count: 3"],
    p[style*="column-count:4"],
    p[style*="column-count: 4"],
    p[style*="column-count:5"],
    p[style*="column-count: 5"],
    p[style*="column-count:6"],
    p[style*="column-count: 6"] {
        column-count: 2 !important;
    }
}

/* ==========================================================================
   Columns block
   ========================================================================== */

/* Stretch children of vertically-stretched columns */
.wp-block-column.is-vertically-aligned-stretch > * {
    height: 100%;
}

/* ==========================================================================
   Buttons — outline variation

   Core's outline style restates the padding (.667em / 1.333em) with higher
   specificity than the padding theme.json sets, so an outline button ends up
   shorter than a filled one sitting next to it. Restate it from the same
   custom properties the filled button uses, so the two always match.
   ========================================================================== */

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background) {
    padding: var(--wp--custom--button--padding-y) var(--wp--custom--button--padding-x);
}

/* ==========================================================================
   Image Pixel Density
   Retina artwork is uploaded at 2x or 3x its intended display size; divide
   the rendered size to match. zoom (unlike transform: scale) reflows the
   surrounding layout, and needs no knowledge of the source dimensions.
   Set per image in the block's "Pixel Density" panel; class added by
   render_block_core/image in inc/block-extensions.php.
   ========================================================================== */

.pb-density-2x img {
    zoom: 0.5;
}

.pb-density-3x img {
    zoom: 0.3333;
}

/* ==========================================================================
   Button Hover Colours
   Per-button hover background and text colour, on for sites that declare
   add_theme_support( 'pb-button-hover-colours' ). The colours arrive as
   custom properties on the .wp-block-button wrapper, and the has-pb-hover-*
   classes say which of them were actually chosen; both set by
   render_block_core/button in inc/button-hover-colours.php. Keyboard focus
   gets the same colours as hover, so the change is not limited to mouse
   users. !important is needed to beat the preset .has-*-background-color
   and .has-*-color rules, which WordPress marks !important itself. The
   background shorthand also clears a gradient, which is a background-image.
   filter is reset for themes that darken coloured buttons on hover, which
   would otherwise tint the chosen colour.
   ========================================================================== */

.wp-block-button.has-pb-hover-background .wp-block-button__link:hover,
.wp-block-button.has-pb-hover-background .wp-block-button__link:focus-visible {
    background: var(--pb-hover-bg) !important;
    filter: none;
}

.wp-block-button.has-pb-hover-text .wp-block-button__link:hover,
.wp-block-button.has-pb-hover-text .wp-block-button__link:focus-visible {
    color: var(--pb-hover-text) !important;
}