/* ================================================================
   WOA Action Button v2.0
   Colours are set via CSS custom properties on the element itself
   (--woa-btn-fg / --woa-btn-bg etc.) by render.php, so no inline
   <style> tag is needed per instance.
================================================================ */


/* ----------------------------------------------------------------
   Base
---------------------------------------------------------------- */
.woa-action-button {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    border:          none;
    border-radius:   50%;
    cursor:          pointer;
    flex-shrink:     0;
    padding:         0;
    line-height:     1;
    text-decoration: none;
    /* CSS custom property colours — set inline by render.php */
    color:      var(--woa-btn-fg,       #694973);
    background: var(--woa-btn-bg,       transparent);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease,
                outline 0.2s ease, box-shadow 0.2s ease, text-decoration 0.1s ease;
}

.woa-action-button:hover {
    color:      var(--woa-btn-fg-hover, #F6F6ED);
    background: var(--woa-btn-bg-hover, #694973);
}

.woa-action-button svg {
    pointer-events: none;
    display:        block;
}


/* ----------------------------------------------------------------
   Icon mode — fixed square size (set via --woa-btn-size)
---------------------------------------------------------------- */
.woa-action-button--icon {
    width:  var(--woa-btn-size, 36px);
    height: var(--woa-btn-size, 36px);
}


/* ----------------------------------------------------------------
   Text mode — auto-size, font-weight from --woa-btn-font-weight
---------------------------------------------------------------- */
.woa-action-button--text {
    width:         auto;
    height:        auto;
    border-radius: 0;
    padding:       0 4px;
    background:    transparent;
    font-family:   inherit;
    font-weight:   var(--woa-btn-font-weight, 500);
}

/* Underline hover for text mode — matches WP Navigation Menu underline.
   thickness + offset sourced from style.css global `a` rule. */
.woa-action-button--text.woa-action-button--hover-underline:hover {
    border-bottom:            none;
    text-decoration:          underline;
    text-decoration-thickness: 1px;
    text-underline-offset:    0.1em;
}


/* ----------------------------------------------------------------
   Position Variants
---------------------------------------------------------------- */
.woa-action-button--corner {
    position: absolute;
    top:      10px;
    right:    10px;
    z-index:  10;
}

.woa-action-button--fixed {
    position: fixed;
    z-index:  99999;
}

.woa-action-button--inline {
    position: relative;
}


/* ----------------------------------------------------------------
   Hover Animation Variants
---------------------------------------------------------------- */
.woa-action-button--rotate:hover { transform: rotate(90deg); }
.woa-action-button--scale:hover  { transform: scale(1.15);   }
.woa-action-button--fade:hover   { opacity: 0.7;             }
.woa-action-button--none:hover   { transform: none;          }


/* ----------------------------------------------------------------
   Hover Style Variants
   (icon mode: border-bottom ring / text mode: text-decoration)
---------------------------------------------------------------- */
.woa-action-button--hover-circle:hover {
    outline:        2px solid currentColor;
    outline-offset: 2px;
    border-radius:  50%;
}

.woa-action-button--hover-square:hover {
    outline:        2px solid currentColor;
    outline-offset: 2px;
    border-radius:  0;
}

.woa-action-button--hover-underline:hover {
    outline:        none;
    border-bottom:  2px solid currentColor;
    border-radius:  0;
}

.woa-action-button--hover-none:hover {
    outline: none;
}


/* ----------------------------------------------------------------
   Focus Style Variants (accessibility)
---------------------------------------------------------------- */
.woa-action-button--focus-square:focus {
    outline:        2px solid currentColor !important;
    outline-offset: 2px !important;
    border-radius:  0 !important;
}

.woa-action-button--focus-circle:focus {
    outline:        2px solid currentColor !important;
    outline-offset: 2px !important;
    border-radius:  50% !important;
}

.woa-action-button--focus-none:focus {
    outline:    none !important;
    box-shadow: none !important;
}


/* ----------------------------------------------------------------
   Click Style Variants (:active state)
---------------------------------------------------------------- */
.woa-action-button--click-circle:active {
    outline:        2px solid currentColor !important;
    outline-offset: 2px !important;
    border-radius:  50% !important;
}

.woa-action-button--click-square:active {
    outline:        2px solid currentColor !important;
    outline-offset: 2px !important;
    border-radius:  0 !important;
}

.woa-action-button--click-underline:active {
    outline:       none !important;
    border-bottom: 2px solid currentColor !important;
    border-radius: 0 !important;
}

.woa-action-button--click-none:active {
    outline:    none !important;
    box-shadow: none !important;
}


/* ----------------------------------------------------------------
   Fill Style Variants
   NOTE: no !important here — hover/focus rules must be able to
   override background and border on these variants.
   The base .woa-action-button already sets border:none and
   background:transparent, so these just reinforce the default.
---------------------------------------------------------------- */
.woa-action-button--fill-fill {
    border: none;
}

.woa-action-button--fill-none {
    background: transparent;
    border:     none;
}


/* ----------------------------------------------------------------
   Reduced Motion
---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .woa-action-button,
    .woa-action-button:hover {
        transition: none !important;
        transform:  none !important;
    }
}