/**
 * RivoFrame - Custom Styles
 *
 * Additional styles that complement theme.json settings.
 * Keep this file minimal — prefer using theme.json for styling.
 */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Improve image rendering */
img {
    max-width: 100%;
    height: auto;
}

/* Mobile: reduce button padding (theme.json uses 1.5rem left/right on desktop) */
@media (max-width: 781px) {
    .wp-block-button .wp-block-button__link,
    .wp-block-button__link {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }
    /* Archive cover block: reduce min-height on mobile */
    .wp-block-cover.alignwide {
        min-height: 150px !important;
    }
}

/* Archive template: cover block border radius */
body.archive .wp-block-cover.alignwide {
    border-radius: 10px;
    overflow: hidden;
}

/* Page-header band: centre the breadcrumb, title and description together.
 *
 * Set on the band rather than per block, so the eyebrow and the title cannot
 * drift onto different axes - which is exactly what happened when they were
 * aligned independently. The children are already max-width capped with auto
 * margins by the constrained layout, so only the inline alignment is needed. */
.rivoframe-page-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Seam between the template parts.
 *
 * styles.spacing.blockGap (1.2rem) is compiled by core into
 *   :where(.wp-site-blocks) > * { margin-block-start: 1.2rem }
 * whose only children are the header, main and footer parts. That put a
 * 19.2px white strip between the header's bottom border and the page-header
 * band, and another above the footer bar - both of which are meant to sit
 * flush against the surfaces above them.
 *
 * The root gap itself must stay (see context/issues.md: dropping it to 0 is
 * what previously ran pagination and form controls together), so it is
 * cancelled only at this level. The core rule is wrapped in :where(), giving
 * it zero specificity, so a plain class selector wins without !important. */
.wp-site-blocks > * {
    margin-block-start: 0;
}

/* Header search toggle.
 *
 * core/search in buttonPosition:"button-only" mode renders a real <button>,
 * which picks up theme.json's elements.button skin - a solid primary block in
 * the middle of the header bar. In the header it should read as an icon, not
 * a call to action, so the skin is stripped back to the bare glyph. Scoped to
 * the header template part so search blocks in page content keep their skin. */
header .wp-block-search__button,
.wp-block-template-part .wp-block-search__button {
    background-color: transparent;
    color: var(--wp--preset--color--foreground);
    border: 0;
    padding: 0.25rem;
    min-width: 0;
    /* The button is a flex box that stretches to the height of the search
       field beside it — 44px, even while that field is collapsed to zero
       width. Core leaves `align-items` at its initial value, so the 24px glyph
       sits at the top of that box and reads ~6px above the navigation it
       lines up with. */
    align-items: center;
    justify-content: center;
}

header .wp-block-search__button:hover,
header .wp-block-search__button:focus,
.wp-block-template-part .wp-block-search__button:hover,
.wp-block-template-part .wp-block-search__button:focus {
    background-color: transparent;
    color: var(--wp--preset--color--primary);
}

header .wp-block-search__button svg,
.wp-block-template-part .wp-block-search__button svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

/* Page header band.
 *
 * Every template that shows a title band uses `.rivoframe-page-header`, and
 * the geometry used to be written into each template's block attributes —
 * which is how the product archives drifted to a 250px band while `page`,
 * `index`, `home`, `search` and `archive` stayed at 133px. The templates now
 * carry the class, the background and the hairline only; the height lives
 * here, once.
 *
 * Only the vertical padding is set: core's `:where(.wp-block-group
 * .has-background)` rule supplies the horizontal inset, and it has zero
 * specificity, so a class selector overrides exactly the sides it names.
 * The flex column is what centres a short title inside the 150px, which
 * `min-height` alone would leave sitting at the top. */
.rivoframe-page-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 150px;
    padding-top: var(--wp--preset--spacing--40);
    padding-bottom: var(--wp--preset--spacing--40);
}

/* Branding: a compact emblem-and-wordmark lockup. The logo block has an
 * inline width set by the block, so its dimensions are constrained here too
 * for saved header variations. An empty logo block is removed entirely, which
 * means a site without a logo does not retain an unexplained blank space. */
.rivoframe-branding {
    gap: 0.75rem;
    min-width: 0;
}

.rivoframe-branding .wp-block-site-logo {
    flex: 0 0 48px;
    width: 48px !important;
    margin: 0;
    line-height: 0;
}

.rivoframe-branding .wp-block-site-logo:not(:has(img)) {
    display: none;
}

.rivoframe-branding .wp-block-site-logo a {
    display: block;
    line-height: 0;
}

.rivoframe-branding .wp-block-site-logo img {
    display: block;
    width: 100%;
    max-width: 100%;
    /* The cap keeps a tall logo from setting the header's height. */
    max-height: 48px;
    height: auto;
    object-fit: contain;
}

.rivoframe-branding .wp-block-site-title {
    margin: 0;
    line-height: 1.15;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    padding: 1rem 2rem;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--background);
    z-index: 100000;
    text-decoration: none;
    font-weight: 600;
}


/* Native form controls
   theme.json cannot reach `appearance` or supply the chevron, so the select
   re-skin lives here. Unscoped on purpose: the catalog-sorting block renders
   outside any `.woocommerce` ancestor, so a scoped rule would miss it. */
select {
    appearance: none;
    -webkit-appearance: none;
    height: 40px;
    padding: 0 25px 0 15px;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--wp--custom--border--radius);
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%233a4f66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    font-family: inherit;
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.5;
    color: var(--wp--preset--color--foreground-light);
    cursor: pointer;
}

select:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

/* Button height and motion — neither `min-height` nor `transition` is a
   theme.json property, so they cannot live alongside the rest of the
   button spec in styles.elements.button.

   `box-sizing` belongs with them: theme.json pads the button 5px top and
   bottom, and without a border box that padding is *added* to the 40px, so
   every button that core does not already box (WooCommerce's `.wc-forward`
   notice action and the legacy product-grid card button, to name the two that
   surfaced) renders 50px tall next to a 40px one. `.wp-element-button` is the
   class theme.json's button skin is emitted against, so matching on it covers
   every button that takes the skin. */
.wp-block-button__link,
.wp-element-button {
    box-sizing: border-box;
}

.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    transition: var(--wp--custom--transition);
}

a {
    transition: var(--wp--custom--transition);
}