/**
 * Block Styles CSS
 * 
 * Custom styles for blocks (core WordPress and third-party, e.g. Kadence).
 *
 * @package PlaneteriaMedia
 * @since 1.0.0
 */

/* Whole-block link (core/column and core/group extended): the anchor replaces the
   wrapper element on the front end. `.is-planeteria-block-link` is the generic
   hook; `.is-planeteria-column-link` is still emitted on columns for backwards
   compatibility with site CSS written against the original class. */
a.is-planeteria-block-link,
a.wp-block-column.is-planeteria-column-link {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

a.is-planeteria-block-link:focus-visible,
a.wp-block-column.is-planeteria-column-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* The anchor takes over the wrapper's classes, so it inherits the block's own
   layout — but anchors are inline by default and would collapse a group's
   layout before those rules apply. */
a.wp-block-group.is-planeteria-block-link {
    display: block;
}

/* Disabled pagination edges remain visible and legible: they communicate
   "unavailable" rather than hiding a navigation control. */
.page-numbers.is-disabled {
    cursor: default;
    opacity: 0.5;
    user-select: none;
}

/* Kadence can re-render Query Loop cards over REST and reuse a generated
   wp-elements-* class from the page header. Keep result-title links bound to
   their surrounding title color rather than that unrelated generated class. */
.kb-query-item .wp-block-post-title.has-link-color a:where(:not(.wp-element-button)) {
    color: inherit;
}

/* ==========================================================================
   Column auto width (core/column extended)
   ==========================================================================
   Supports the optional `planeteriaColumnAutoWidth` attribute registered in
   inc/block-customizations.php and toggled by
   assets/js/editor-containers.js. Core gives every column an equal
   flex-basis; this lets one column size to its content while its siblings take
   the remaining space. The editor selector mirrors the front end. */
.wp-block-columns > .wp-block-column.planeteria-column-auto-width,
.editor-styles-wrapper .wp-block-columns > .wp-block-column.planeteria-column-auto-width {
    flex-basis: auto !important;
    flex-grow: 0 !important;
    width: auto !important;
}

/* This 781px threshold deliberately follows Core Columns stacking. */
@media (max-width: 781px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.planeteria-column-auto-width,
    .editor-styles-wrapper .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.planeteria-column-auto-width {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   Button Styles
   ========================================================================== */

/* Outline Button Style */
/* Kept even when the Outline style is unregistered (see inc/block-styles.php):
   content already saved with .is-style-outline still needs to render correctly. */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border: 2px solid currentColor;
    color: inherit;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: currentColor;
    color: var(--wp--preset--color--dark);
}

/* Arrow button style. The mask inherits the button text color. */
.wp-block-button.is-style-arrow .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--2);
}

.wp-block-button.is-style-arrow .wp-block-button__link::after {
    content: "";
    width: 14px;
    height: 14px;
    display: inline-block;
    flex: none;
    background: currentColor;
    -webkit-mask: url('../img/icon-arrow.svg') center / contain no-repeat;
    mask: url('../img/icon-arrow.svg') center / contain no-repeat;
}

/* Mirror the arrow for right-to-left languages. */
[dir="rtl"] .wp-block-button.is-style-arrow .wp-block-button__link::after {
    transform: scaleX(-1);
}

/* ==========================================================================
   Core Tabs: vertical layout
   ========================================================================== */

/* Use the core Tabs block's existing tab list and panels. The style variation
   deliberately changes layout only; block-level color, spacing, and typography
   settings continue to control its presentation. */
.wp-block-tabs.is-style-vertical-tabs {
    --planeteria-vertical-tabs-gap: var(--wp--preset--spacing--5, 2rem);

    display: flex;
    align-items: flex-start;
    gap: var(--planeteria-vertical-tabs-gap);
}

.wp-block-tabs.is-style-vertical-tabs > .wp-block-tab-list {
    flex: 0 1 16rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-inline-size: 10rem;
    padding-inline-end: var(--planeteria-vertical-tabs-gap);
    border-block-end: 0;
    border-inline-end: 1px solid currentColor;
}

/* Extend the selected-tab marker to the list divider without imposing a
   background or color. Both selectors support the front-end and editor state. */
.wp-block-tabs.is-style-vertical-tabs > .wp-block-tab-list > button {
    box-sizing: border-box;
    width: calc(100% + var(--planeteria-vertical-tabs-gap) + 1px);
    margin-inline-end: calc(0px - var(--planeteria-vertical-tabs-gap) - 1px);
    padding-inline-end: var(--planeteria-vertical-tabs-gap);
    border-block-end: 0;
    border-inline-end: 3px solid transparent;
    text-align: start;
}

.wp-block-tabs.is-style-vertical-tabs > .wp-block-tab-list > button[aria-selected="true"],
.wp-block-tabs.is-style-vertical-tabs > .wp-block-tab-list > button.is-active {
    border-inline-end-color: currentColor;
}

.wp-block-tabs.is-style-vertical-tabs > .wp-block-tab-panels {
    flex: 1 1 0;
    min-inline-size: 0;
}

/* Match the Columns block's mobile stacking threshold. Keeping the native
   horizontal tab treatment here prevents narrow tab labels or panels from
   becoming unusably small. */
@media (max-width: 781px) {
    .wp-block-tabs.is-style-vertical-tabs {
        display: block;
    }

    .wp-block-tabs.is-style-vertical-tabs > .wp-block-tab-list {
        flex-direction: row;
        flex-wrap: wrap;
        min-inline-size: 0;
        padding-inline-end: 0;
        border-inline-end: 0;
        border-block-end: 1px solid currentColor;
    }

    .wp-block-tabs.is-style-vertical-tabs > .wp-block-tab-list > button {
        width: auto;
        margin-inline-end: 0;
        padding-inline-end: 0;
        border-inline-end: 0;
        border-block-end: 3px solid transparent;
        text-align: center;
    }

    .wp-block-tabs.is-style-vertical-tabs > .wp-block-tab-list > button[aria-selected="true"],
    .wp-block-tabs.is-style-vertical-tabs > .wp-block-tab-list > button.is-active {
        border-block-end-color: currentColor;
    }
}

/* ==========================================================================
   Kadence Blocks
   ========================================================================== */

/* Kadence: underline title on card/item hover */
.wp-block-kadence-infobox:hover .kt-blocks-info-box-title,
.wp-block-kadence-query .kb-query-item:hover .wp-block-post-title {
    text-decoration: underline;
}

/* ==========================================================================
   Flexbox Button Layouts
   ========================================================================== */

/* Flexbox Button Layouts with Column Control */
.wp-block-buttons.is-style-flex-2-col,
.wp-block-buttons.is-style-flex-3-col,
.wp-block-buttons.is-style-flex-4-col {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--4);
    align-items: stretch;
    justify-content: center; /* Center buttons when there aren't enough to fill the row */
}

/* 2 Column Layout */
.wp-block-buttons.is-style-flex-2-col .wp-block-button {
    flex: 0 0 calc(50% - var(--wp--preset--spacing--2));
    margin: 0;
}

/* 3 Column Layout */
.wp-block-buttons.is-style-flex-3-col .wp-block-button {
    flex: 0 0 calc(33.333% - var(--wp--preset--spacing--3));
    margin: 0;
}

/* 4 Column Layout */
.wp-block-buttons.is-style-flex-4-col .wp-block-button {
    flex: 0 0 calc(25% - var(--wp--preset--spacing--3));
    margin: 0;
}

/* Button link styling for all flex layouts */
.wp-block-buttons.is-style-flex-2-col .wp-block-button__link,
.wp-block-buttons.is-style-flex-3-col .wp-block-button__link,
.wp-block-buttons.is-style-flex-4-col .wp-block-button__link {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    box-sizing: border-box;
}