/* ==========================================================================
   World Of Orient — the one site-wide button (from "Button 056").
   The fill grows with a soft bounce, a hover fill slides up from the bottom and
   the label rolls up to a copy in the hover color. Brand: gold, 7px radius.

   Markup (wof_button() / wof_button_text() in inc/acf/block-helpers.php):
     .wof-btn > .wof-btn__text > .wof-btn__word[style="--word:n"] …
   Colors are tokens on the button (--wof-btn-*); variants only swap tokens.
   Plugin buttons (WooCommerce, LearnPress, Educavo .readon) get the same fill
   through ::before; assets/js/wof-buttons.js splits their words when their
   content is plain text. Loaded last on the front end and in the editor.
   ========================================================================== */

/* Tokens ------------------------------------------------------------------- */
.wof-btn,
.readon, .rs-btn,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce .single_add_to_cart_button, .woocommerce #respond input#submit,
.woocommerce-page a.button, .woocommerce-page button.button,
a.add_to_cart_button,
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
form[name="learn-press-login"] button[type="submit"], form[name="learn-press-register"] button[type="submit"]{
  --wof-btn-bg:#C9A964; --wof-btn-color:#101010; --wof-btn-border:#C9A964;
  --wof-btn-hover-bg:#101010; --wof-btn-hover-color:#fff; --wof-btn-hover-border:var(--wof-btn-hover-bg);
  --wof-btn-radius:7px;
  --wof-btn-hover-scale:1.065 1.095; --wof-btn-click-scale:.955, .925;
  --wof-btn-ease-click:cubic-bezier(.4,0,.2,1);
  --wof-btn-ease-hover:cubic-bezier(.34,1.44,.64,1);
  --wof-btn-ease-out:cubic-bezier(.23,1,.32,1);
}

/* Variants (tokens only) */
.wof-btn--outline{--wof-btn-bg:transparent;--wof-btn-color:#101010;--wof-btn-border:#C9A964;--wof-btn-hover-bg:#C9A964;--wof-btn-hover-color:#101010}
.wof-btn--ghost{--wof-btn-bg:transparent;--wof-btn-color:#fff;--wof-btn-border:rgba(255,255,255,.55);--wof-btn-hover-bg:#fff;--wof-btn-hover-color:#101010}
/* Primary on dark / photo grounds: a white hover fill still reads there. */
:is(.wof-block--bg-dark,.wof-block--bg-image,.wof-cover,.wof-hero) .wof-btn:not(.wof-btn--outline):not(.wof-btn--ghost){--wof-btn-hover-bg:#fff;--wof-btn-hover-color:#101010}
/* Wide buttons scale less so they stay inside their column. */
.wof-btn--block,
.wpcf7-submit.wof-btn{--wof-btn-hover-scale:1.02 1.06}

/* Theme button ------------------------------------------------------------- */
.wof-btn{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;margin:0;border:0;border-radius:var(--wof-btn-radius);background:transparent;box-shadow:none;
  font-family:"Nunito",Arial,sans-serif;font-weight:700;font-size:15px;letter-spacing:.2px;line-height:1;
  text-decoration:none;text-transform:none;white-space:nowrap;color:var(--wof-btn-color);cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:color .3s var(--wof-btn-ease-out)}
.wof-btn:visited{color:var(--wof-btn-color)}
.wof-btn--hero,
.wof-btn--ghost{padding:14px 26px}
.wof-btn--block{display:flex;width:100%}
.wof-btn:disabled,
.wof-btn[aria-disabled="true"]{opacity:.6;cursor:default}
/* CF7 submit (<button class="wpcf7-submit wof-btn">): beat Educavo's .submit-btn .wpcf7-submit. */
.wpcf7 .wpcf7-submit.wof-btn{padding:13px 24px;border:0;border-radius:var(--wof-btn-radius);background:transparent;
  font-family:"Nunito",Arial,sans-serif;font-weight:700;font-size:15px;line-height:1;letter-spacing:.2px;text-transform:none;color:var(--wof-btn-color)}
.wpcf7 .wpcf7-submit.wof-btn:is(:hover,:focus-visible){color:var(--wof-btn-hover-color)}

/* Plugin buttons: same shape, colors come from the ::before fill. */
.readon, .rs-btn,
.woocommerce a.button, .woocommerce button.button,
.woocommerce .single_add_to_cart_button,
.woocommerce-page a.button, .woocommerce-page button.button,
a.add_to_cart_button,
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
form[name="learn-press-login"] button[type="submit"], form[name="learn-press-register"] button[type="submit"]{
  position:relative !important;isolation:isolate;overflow:visible !important;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:"Nunito",Arial,sans-serif !important;font-weight:700 !important;font-size:15px !important;
  letter-spacing:.2px;line-height:1.3 !important;text-transform:none !important;text-decoration:none;
  padding:13px 24px !important;border:0 !important;border-radius:var(--wof-btn-radius) !important;
  background:transparent !important;color:var(--wof-btn-color) !important;box-shadow:none !important;cursor:pointer;
  transition:color .3s var(--wof-btn-ease-out) !important}
/* <input> buttons have no ::before — plain color change. */
.woocommerce input.button, .woocommerce #respond input#submit, input.readon{
  font-family:"Nunito",Arial,sans-serif !important;font-weight:700 !important;font-size:15px !important;line-height:1 !important;
  padding:14px 24px !important;border:1.5px solid var(--wof-btn-border) !important;border-radius:var(--wof-btn-radius) !important;
  background:var(--wof-btn-bg) !important;color:var(--wof-btn-color) !important;text-transform:none !important;box-shadow:none !important;
  transition:background-color .3s ease,border-color .3s ease,color .3s ease !important}
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover, input.readon:hover{
  background:var(--wof-btn-hover-bg) !important;border-color:var(--wof-btn-hover-border) !important;color:var(--wof-btn-hover-color) !important}

/* Fill ----------------------------------------------------------------------- */
:is(.wof-btn, .readon, .rs-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce .single_add_to_cart_button,
  .woocommerce-page a.button, .woocommerce-page button.button, a.add_to_cart_button,
  .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
  form[name="learn-press-login"] button[type="submit"], form[name="learn-press-register"] button[type="submit"])::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  /* top half transparent, bottom half = hover fill; sliding the image up reveals it */
  /* !important: Educavo's customizer CSS paints .woocommerce button.button::before */
  background:linear-gradient(to bottom,transparent 50%,var(--wof-btn-hover-bg) 50%) 0 0 / 100% 200% no-repeat,var(--wof-btn-bg) !important;
  box-shadow:inset 0 0 0 1.5px var(--wof-btn-border) !important;
  transition:scale .4s var(--wof-btn-ease-hover),transform .15s var(--wof-btn-ease-click),
    background-position .45s var(--wof-btn-ease-out),box-shadow .45s var(--wof-btn-ease-out)}

/* Label: words roll inside a clipped line (line-height 1.3 keeps descenders in). */
.wof-btn__text{display:block;line-height:1.3;clip-path:inset(0 -8px)}
.wof-btn__word{display:inline-block}

/* Hover without motion (touch, reduced motion): fill + text color switch. */
:is(.wof-btn, .readon, .rs-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce .single_add_to_cart_button,
  .woocommerce-page a.button, .woocommerce-page button.button, a.add_to_cart_button,
  .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
  form[name="learn-press-login"] button[type="submit"], form[name="learn-press-register"] button[type="submit"]):is(:hover,:focus-visible)::before{
  background-position:0 100% !important;box-shadow:inset 0 0 0 1.5px var(--wof-btn-hover-border) !important}
.wof-btn:is(:hover,:focus-visible){color:var(--wof-btn-hover-color)}
:is(.readon, .rs-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce .single_add_to_cart_button,
  .woocommerce-page a.button, .woocommerce-page button.button, a.add_to_cart_button,
  .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
  form[name="learn-press-login"] button[type="submit"], form[name="learn-press-register"] button[type="submit"]):is(:hover,:focus-visible){
  color:var(--wof-btn-hover-color) !important}

.wof-btn:active::before,
:is(.readon, .rs-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce .single_add_to_cart_button,
  .woocommerce-page a.button, .woocommerce-page button.button, a.add_to_cart_button):active::before{transform:scale(var(--wof-btn-click-scale))}

.wof-btn:focus-visible{outline:2px solid #C9A964;outline-offset:3px}

/* Motion: bounce + slide + word roll (fine pointers, motion allowed). */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  :is(.wof-btn, .readon, .rs-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce .single_add_to_cart_button,
    .woocommerce-page a.button, .woocommerce-page button.button, a.add_to_cart_button,
    .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
    form[name="learn-press-login"] button[type="submit"], form[name="learn-press-register"] button[type="submit"]):is(:hover,:focus-visible)::before{
    scale:var(--wof-btn-hover-scale);
    transition:scale .425s .05s var(--wof-btn-ease-hover),transform .15s var(--wof-btn-ease-click),
      background-position .45s .05s var(--wof-btn-ease-out),box-shadow .45s .05s var(--wof-btn-ease-out)}

  .wof-btn__word{text-shadow:0 1.3em var(--wof-btn-hover-color);transition:translate .45s calc((var(--word,1) - 1) * .042s) var(--wof-btn-ease-out)}
  :hover > .wof-btn__text > .wof-btn__word,
  :focus-visible > .wof-btn__text > .wof-btn__word{translate:0 -1.3em 0;transition:translate .45s calc((var(--word,1) - 1) * .042s + .05s) var(--wof-btn-ease-out)}

  /* Split buttons keep the base color: the rolled-in copy carries the hover color. */
  .wof-btn:has(> .wof-btn__text):is(:hover,:focus-visible),
  .wpcf7 .wpcf7-submit.wof-btn:is(:hover,:focus-visible){color:var(--wof-btn-color)}
  :is(.readon, .rs-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce .single_add_to_cart_button,
    .woocommerce-page a.button, .woocommerce-page button.button, a.add_to_cart_button,
    form[name="learn-press-login"] button[type="submit"], form[name="learn-press-register"] button[type="submit"]):has(> .wof-btn__text):is(:hover,:focus-visible){
    color:var(--wof-btn-color) !important}
}