/* Theme styles for core/button variations. Loaded on frontend and in the editor iframe. */

/* Core's Täyttö/Ääriviiva get the same shape and typography as the arrow styles,
   minus the arrow, so every button in the theme sizes identically.
   :not() covers the default button, which carries no is-style-* class at all. */
.wp-block-button:not([class*="is-style-arrow"]):not(.is-style-outline)
  .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-arrow-primary .wp-block-button__link,
.wp-block-button.is-style-arrow-outlined .wp-block-button__link,
.wp-block-button.is-style-arrow-inverted .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4em;
  width: auto !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap;
  position: relative;
  border-radius: 9999px !important;
  box-shadow: none !important;
  padding: 0.7em 1.55em !important;
  height: auto !important;
  background-image: none !important;
}

.wp-block-button:not([class*="is-style-arrow"]):not(.is-style-outline)
  .wp-block-button__link,
.wp-block-button.is-style-arrow-primary .wp-block-button__link {
  border: none !important;
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-arrow-outlined .wp-block-button__link,
.wp-block-button.is-style-arrow-inverted .wp-block-button__link {
  border-width: 1px !important;
  border-style: solid !important;
}

.wp-block-button.is-style-arrow-primary .wp-block-button__link::after,
.wp-block-button.is-style-arrow-outlined .wp-block-button__link::after,
.wp-block-button.is-style-arrow-inverted .wp-block-button__link::after,
.wp-block-button.is-style-arrow-link .wp-block-button__link::after {
  content: "\f178";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  flex: 0 0 auto;
}

.wp-block-button.is-style-arrow-primary .wp-block-button__link::after,
.wp-block-button.is-style-arrow-outlined .wp-block-button__link::after {
  color: currentColor;
}

/* Editor: RichText fills the link and swallows the text/arrow gap. Shrink it so ::after
   sits beside the label, and so the link stops overflowing its block wrapper (which made
   neighbouring buttons overlap instead of showing the flex gap). */
.editor-styles-wrapper
  .wp-block-button:not([class*="is-style-arrow"])
  .wp-block-button__link
  .rich-text,
.editor-styles-wrapper
  .wp-block-button.is-style-arrow-primary
  .wp-block-button__link
  .rich-text,
.editor-styles-wrapper
  .wp-block-button.is-style-arrow-outlined
  .wp-block-button__link
  .rich-text,
.editor-styles-wrapper
  .wp-block-button.is-style-arrow-inverted
  .wp-block-button__link
  .rich-text,
.editor-styles-wrapper
  .wp-block-button.is-style-arrow-link
  .wp-block-button__link
  .rich-text,
.editor-styles-wrapper
  .wp-block-button:not([class*="is-style-arrow"])
  .wp-block-button__link
  [data-rich-text-placeholder],
.editor-styles-wrapper
  .wp-block-button.is-style-arrow-primary
  .wp-block-button__link
  [data-rich-text-placeholder],
.editor-styles-wrapper
  .wp-block-button.is-style-arrow-outlined
  .wp-block-button__link
  [data-rich-text-placeholder],
.editor-styles-wrapper
  .wp-block-button.is-style-arrow-inverted
  .wp-block-button__link
  [data-rich-text-placeholder],
.editor-styles-wrapper
  .wp-block-button.is-style-arrow-link
  .wp-block-button__link
  [data-rich-text-placeholder] {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

/* Defaults apply only when the editor has not set a colour. Palette / custom
   colours land as .has-background / .has-text-color (and inline styles). */
.wp-block-button:not([class*="is-style-arrow"]):not(.is-style-outline):not(
    .has-background
  )
  .wp-block-button__link:not(.has-background) {
  background-color: #d65b88;
}

.wp-block-button:not([class*="is-style-arrow"]):not(.is-style-outline):not(
    .has-text-color
  )
  .wp-block-button__link:not(.has-text-color) {
  color: #fff;
}

.wp-block-button.is-style-outline:not(.has-background)
  .wp-block-button__link:not(.has-background),
.wp-block-button.is-style-arrow-outlined:not(.has-background)
  .wp-block-button__link:not(.has-background) {
  background-color: transparent;
}

.wp-block-button.is-style-outline:not(.has-text-color)
  .wp-block-button__link:not(.has-text-color),
.wp-block-button.is-style-arrow-outlined:not(.has-text-color)
  .wp-block-button__link:not(.has-text-color) {
  color: #d65b88;
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-arrow-outlined .wp-block-button__link {
  border-color: currentColor;
}

.wp-block-button.is-style-arrow-primary:not(.has-background)
  .wp-block-button__link:not(.has-background) {
  background-color: #d65b88;
}

.wp-block-button.is-style-arrow-primary:not(.has-text-color)
  .wp-block-button__link:not(.has-text-color) {
  color: #fff;
}

/* Named / custom colours are often set on the wrapper; paint the link from it.
   Nuolilinkki and Harmaa tausta keep their own locked colours. */
.wp-block-button.has-background:not(.is-style-arrow-link):not(
    .is-style-arrow-inverted
  )
  .wp-block-button__link:not(.has-background) {
  background-color: inherit;
}

.wp-block-button.has-text-color:not(.is-style-arrow-link):not(
    .is-style-arrow-inverted
  )
  .wp-block-button__link:not(.has-text-color) {
  color: inherit;
}

/* Light outline for dark/photo backgrounds. Matches the Bulma
   .button.is-link.is-outlined.is-inverted.is-rounded of the legacy ACF blocks. */
.wp-block-button.is-style-arrow-inverted .wp-block-button__link {
  background-color: rgb(0 0 0 / 0.2) !important;
  border-color: #fff !important;
  box-shadow: 1px 3px 8px rgb(0 0 0 / 0.2) !important;
  color: #fff !important;
  padding: 0.7em 1.55em !important;
}

.wp-block-button.is-style-arrow-inverted .wp-block-button__link::after {
  color: #6abaf2;
}

.wp-block-button.is-style-arrow-link .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4em;
  width: auto !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap;
  position: relative;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #15336b;
}

.wp-block-button.is-style-arrow-link .wp-block-button__link::after {
  color: #6abaf2;
}

/* Hover motion + color shifts: frontend only (editor iframe body has these classes). */
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-primary
  .wp-block-button__link,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-outlined
  .wp-block-button__link {
  transition:
    gap 200ms ease,
    padding 200ms ease,
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    filter 200ms ease;
}

body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-outlined
  .wp-block-button__link {
  filter: brightness(1);
}

body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-primary
  .wp-block-button__link::after,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-outlined
  .wp-block-button__link::after {
  transition: color 200ms ease;
}

body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-primary
  .wp-block-button__link:hover,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-outlined
  .wp-block-button__link:hover,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-primary
  .wp-block-button__link:focus,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-outlined
  .wp-block-button__link:focus {
  gap: calc(0.4em + 16px);
}

body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-primary
  .wp-block-button__link:hover,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-outlined
  .wp-block-button__link:hover,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-primary
  .wp-block-button__link:focus,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-outlined
  .wp-block-button__link:focus {
  padding-left: calc(1.55em - 8px) !important;
  padding-right: calc(1.55em - 8px) !important;
}

/* Nuolilinkki: text stays put; only the arrow slides. */
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-link
  .wp-block-button__link {
  transition: color 200ms ease;
}

body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-link
  .wp-block-button__link::after {
  transition:
    transform 200ms ease,
    color 200ms ease;
}

body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-link
  .wp-block-button__link:hover,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-link
  .wp-block-button__link:focus {
  color: #1d428a;
  background: transparent !important;
}

body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-link
  .wp-block-button__link:hover::after,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-link
  .wp-block-button__link:focus::after {
  color: #1d428a;
  transform: translateX(8px);
}

/* Täyttö / Täyttö nuolella: fade a dark overlay behind the label.
   A gradient background-image cannot interpolate, so it used to snap. */
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button:not([class*="is-style-arrow"]):not(.is-style-outline)
  .wp-block-button__link,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-primary
  .wp-block-button__link {
  z-index: 0;
}

body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button:not([class*="is-style-arrow"]):not(.is-style-outline)
  .wp-block-button__link::before,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-primary
  .wp-block-button__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgb(0 0 0 / 0.07);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button:not([class*="is-style-arrow"]):not(.is-style-outline)
  .wp-block-button__link:hover::before,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button:not([class*="is-style-arrow"]):not(.is-style-outline)
  .wp-block-button__link:focus::before,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-primary
  .wp-block-button__link:hover::before,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-primary
  .wp-block-button__link:focus::before {
  opacity: 1;
}

/* Ääriviiva / Ääriviiva nuolella: darken text + border (and arrow via currentColor). */
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-outline
  .wp-block-button__link:hover,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-outline
  .wp-block-button__link:focus,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-outlined
  .wp-block-button__link:hover,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-outlined
  .wp-block-button__link:focus {
  border-color: currentColor;
  filter: brightness(0.82);
}

/* Täyttö / Ääriviiva: colour + overlay transitions (no arrow motion). */
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button:not([class*="is-style-arrow"])
  .wp-block-button__link {
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    filter 200ms ease;
}

body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-outline
  .wp-block-button__link {
  filter: brightness(1);
}

body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-inverted
  .wp-block-button__link::after {
  transition:
    transform 200ms ease,
    color 200ms ease;
}

body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-inverted
  .wp-block-button__link:hover::after,
body:not(.editor-styles-wrapper):not(.block-editor-iframe__body)
  .wp-block-button.is-style-arrow-inverted
  .wp-block-button__link:focus::after {
  color: #fff;
  transform: translateX(8px);
}