/**
 * Page Designer — Button Block — frontend + canvas styles
 * v2.1.0 (PAGE_DESIGNER_VERSION 2.9.132 — Phase 3 adds .pd-blk-btn-
 *         disabled and .pd-blk-btn-loading base states. Per-instance
 *         state overrides (hover/active/focus/disabled/loading) are
 *         injected at runtime via `<style id="pd-blk-btn-rules">` —
 *         see button.js + frontend_page.php.)
 *
 * v2.0.0 (PAGE_DESIGNER_VERSION 2.9.130 — Phase 1 leaf-block refactor.
 *         Collapsed wrapper/anchor/label cascade into a single .pd-blk-btn
 *         ruleset on the <a> root. .pd-blk-btn-wrap and .pd-blk-btn-label
 *         no longer exist in the new DOM. Alignment is now handled by
 *         auto-margins on the flex anchor itself; full-width via the
 *         data-pd-btn-full attribute. The font-size:0 wrapper hack is
 *         gone — there is no wrapper to leak inherited font-size.)
 *
 * Dedicated SkyForj Button block stylesheet. Every selector is
 * namespaced `.pd-blk-btn*` — no overlap with any other block,
 * tool, or panel. Variants, sizes, alignment, and full-width are all
 * driven by CSS classes + CSS custom properties that the Button
 * Settings Panel (pd_button_panel.js) writes to the anchor.
 *
 * The panel NEVER writes border / border-radius / background / box-
 * shadow / padding / margin / font-* to this block — those are owned
 * by the Design panel + Typography panel. Link Hover Color is a
 * temporary exception pending Design-panel hover-state support.
 */

/* ── The anchor (the visible button — also the block root) ──────── *
 * Colors (bg / text / border / hover) are sourced from Theme > Buttons
 * via CSS custom properties emitted by pd_global_styles.js onto :root.
 * Using var(--...) with fallback makes this stylesheet a pure consumer
 * of the Theme — no cascade fight regardless of stylesheet load order.
 * The fallbacks activate only when Theme hasn't emitted yet (e.g. a
 * cold canvas frame before the Theme panel runs applyTheme()). */
.pd-blk-btn {
    position: relative;
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    margin: 12px 0;
    background: var(--pd-btn-bg, #89b4fa);
    /* v2.9.167 — Buttons own their typography via Theme > Buttons;
       chained fallback so the var resolves cleanly even before Theme
       has emitted (e.g. cold canvas load): pd-btn-color → legacy
       pd-label-color → hardcoded baseline. */
    color: var(--pd-btn-color, var(--pd-label-color, #ffffff)); /* v3.7.17 — Theme > Buttons text colour (matches the comment above), not admin token */
    border: 2px solid var(--pd-btn-bg, #89b4fa);
    /* v3.7.117 — radius is now a Theme > Buttons global default
       (--pd-btn-radius), overridable per-button via the Design panel
       (inline style beats this var). Fallback 6px applies only on a
       cold canvas before Theme emits. */
    border-radius: var(--pd-btn-radius, 6px);
    /* v2.9.167 — same chained-fallback pattern for font-family. */
    font-family: var(--pd-btn-font, var(--pd-label-font, inherit));
    /* v3.7.07 — font-size is now a Theme > Buttons global default
       (--pd-btn-size), with per-button override via the Typography panel.
       Fallback 15px applies only on a cold canvas before Theme emits. */
    font-size: var(--pd-btn-size, 15px);
    font-weight: 600;
    /* v3.7.124 — Theme > Buttons text-transform (UPPERCASE) global default;
       per-button overrides still win. Fallback none on a cold canvas. */
    text-transform: var(--pd-btn-transform, none);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease,
                color 0.15s ease,
                border-color 0.15s ease,
                box-shadow 0.15s ease,
                transform 0.15s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
}
.pd-blk-btn:hover {
    background: var(--pd-btn-hover-bg, #74c7ec);
    border-color: var(--pd-btn-hover-bg, #74c7ec);
    color: var(--pd-btn-hover-color, var(--pd-btn-color, #ffffff)); /* v3.7.17 — Theme > Buttons Hover Text, not admin token */
}

/* ── Alignment (v2.9.164) ─────────────────────────────────────────
   Bumped specificity (class + class + attr = 0,0,3,0) so auto
   margins always beat any third-party rule that previously tied at
   0,0,2,0. Also re-asserts `display: flex; width: fit-content` so
   auto margins have a block-level fit-content context — auto
   margins resolve to 0 on inline-block elements, which is exactly
   the failure mode we were seeing on the published page. */
.pd-blk-btn.pd-blk-btn-align-left[data-pd-block="button"],
.pd-blk-btn.pd-blk-btn-align-center[data-pd-block="button"],
.pd-blk-btn.pd-blk-btn-align-right[data-pd-block="button"] {
    display: flex;
    width: fit-content;
}
.pd-blk-btn.pd-blk-btn-align-left[data-pd-block="button"]   { margin-right: auto; margin-left: 0;    }
.pd-blk-btn.pd-blk-btn-align-center[data-pd-block="button"] { margin-left: auto;  margin-right: auto;}
.pd-blk-btn.pd-blk-btn-align-right[data-pd-block="button"]  { margin-left: auto;  margin-right: 0;   }

/* ── Full width ─────────────────────────────────────────────────────
   v2.9.166 — Bumped to specificity (0,0,3,0) so it ties with the
   alignment rules above (which also set `width`) and wins on source
   order (full-width is declared after alignment in this file). Earlier
   spec (0,0,2,0) lost to alignment's `width: fit-content`, so checking
   the box did nothing visually. */
.pd-blk-btn[data-pd-block="button"][data-pd-btn-full="1"] {
    width: 100%;
}

/* ── Sizes (v2.9.164) ──────────────────────────────────────────────
   Spread Small / Medium / Large further apart so the visual jump is
   clear at a glance instead of one-pixel-different. Also bumped
   specificity with [data-pd-block="button"] for the same cascade
   reason as alignment — Theme + canvas helpers used to tie.
   v3.7.07 — font-size removed from the size presets. Button font-size
   is now a global default (Theme > Buttons > Font Size → --pd-btn-size)
   overridable per-button via the Typography panel.
   v3.7.117 — border-radius likewise removed from the presets; now a
   global default (Theme > Buttons > Roundness → --pd-btn-radius),
   overridable per-button via Interactive States > Radius. The presets
   govern padding only, so the global default reaches un-individually-
   edited buttons instead of being shadowed by md. */
.pd-blk-btn.pd-blk-btn-size-sm[data-pd-block="button"] {
    padding: 6px 14px;
}
.pd-blk-btn.pd-blk-btn-size-md[data-pd-block="button"] {
    padding: 12px 26px;
}
.pd-blk-btn.pd-blk-btn-size-lg[data-pd-block="button"] {
    padding: 18px 38px;
}
/* Custom size — keeps medium vertical/horizontal padding; the explicit
   width is set inline by the Settings panel (Layout > Size > Custom). */
.pd-blk-btn.pd-blk-btn-size-custom[data-pd-block="button"] {
    padding: 12px 26px;
}

/* ── Focus ring (accessibility) ─────────────────────────────────── */
.pd-blk-btn:focus-visible {
    outline: 2px solid var(--pd-link-color, #89b4fa); /* v3.7.23 — focus ring follows Global Links */
    outline-offset: 2px;
}

/* ── Disabled state ─────────────────────────────────────────────── *
 * Applied by the Settings panel's "Disabled" toggle. Also adds
 * aria-disabled="true". Per-instance visual overrides live in the
 * injected per-UID rule (see button.js btnFlushRules + frontend_page.php).
 * These base rules set a sensible default appearance + prevent the
 * click navigation even though <a> doesn't support native :disabled. */
.pd-blk-btn.pd-blk-btn-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Loading state ──────────────────────────────────────────────── *
 * Applied by the Settings panel's "Loading" toggle. Also adds
 * aria-busy="true". The spinner itself is not injected here — users
 * can add a spinner icon via Typography > Icon if desired, or style
 * the Loading state tab to visually indicate loading. */
.pd-blk-btn.pd-blk-btn-loading {
    opacity: 0.75;
    cursor: progress;
    pointer-events: none;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .pd-blk-btn[data-pd-btn-full="1"],
    .pd-blk-btn.pd-blk-btn-size-lg {
        font-size: 15px;
    }
}