/* Marketing Shift concepten: gedeelde stylesheet (webroot /assets/ms-shared.css).
 * Bevat alleen wat niet in Tailwind-utilities kan: het eigen font Lemon Milk en
 * de Osmo button-046 uit https://guides.marketingshift.nl/guide/osmo-buttons
 * (CSS letterlijk, alleen de kleurvariabelen op de projectkleuren gezet).
 */
@font-face {
  font-family: 'Lemon Milk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/LEMONMILK-Bold.woff2') format('woff2'),
       url('/assets/fonts/LEMONMILK-Bold.woff') format('woff');
}

:root {
  --button-046-color: #0D0401;
  --button-046-color-background: #FF6229;
  --button-046-hover-color: #FFFFFF;
  --button-046-hover-color-background: #0D0401;
  --button-046-color-focus: #0D0401;
  --button-046-padding: 1.0625em 1.75em;
  --button-046-border-radius: 2.5em;
  --button-046-focus-inset: -0.25em;
  --button-046-hover-scale: 1.065 1.095;
  --button-046-click-scale: 0.955, 0.925;
  --button-046-ease-click: cubic-bezier(0.4, 0, 0.2, 1);
  --button-046-ease-hover: cubic-bezier(0.34, 2.27, 0.64, 1);
  --button-046-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Variant voor donkere secties: zet class "button-046--op-donker" erbij. */
.button-046--op-donker {
  --button-046-color: #0D0401;
  --button-046-color-background: #FF6229;
  --button-046-hover-color: #0D0401;
  --button-046-hover-color-background: #FFFFFF;
  --button-046-color-focus: #FFFFFF;
}

.button-046 {
  color: var(--button-046-color);
  -webkit-user-select: none;
  user-select: none;
  background-color: #0000;
  outline-style: none;
  padding: 0;
  line-height: 1;
  text-decoration: none;
  display: inline-grid;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s ease-out;
  box-shadow: none;
}

.button-046::after {
  content: '';
  display: block;
  position: absolute;
  inset: var(--button-046-focus-inset);
  border-radius: var(--button-046-border-radius);
  transition: box-shadow 0.3s var(--button-046-ease-focus), scale 0.4s var(--button-046-ease-hover);
  pointer-events: none;
  z-index: 1;
}

.button-046:is(:hover, :focus-visible),
[data-hover]:is(:hover, :focus-visible) .button-046 {
  color: var(--button-046-hover-color);
}

.button-046:is(:focus-visible)::after {
  box-shadow: 0 0 0 0.125em var(--button-046-color-focus);
  scale: var(--button-046-hover-scale);
  transition: box-shadow 0.3s var(--button-046-ease-focus), scale 0.425s 0.05s var(--button-046-ease-hover);
}

.button-046__bg {
  background-color: var(--button-046-color-background);
  border-radius: var(--button-046-border-radius);
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  padding: 0;
  box-shadow: 0 8px 24px rgba(13, 4, 1, .14);
  transition: background-color 0.25s ease-out, scale 0.4s var(--button-046-ease-hover), transform 0.15s var(--button-046-ease-click);
}

.button-046:active .button-046__bg {
  transform: scale(var(--button-046-click-scale));
}

.button-046:is(:focus-visible) .button-046__bg {
  background-color: var(--button-046-hover-color-background) !important;
}

.button-046__bg-circle {
  z-index: 1;
  border-radius: var(--button-046-border-radius);
  grid-area: 1 / 1;
  place-self: center;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  position: relative;
  overflow: clip;
  transition: background-color 0.25s ease-out, scale 0.4s var(--button-046-ease-hover), transform 0.15s var(--button-046-ease-click);
}

.button-046:active .button-046__bg-circle {
  transform: scale(var(--button-046-click-scale));
}

.button-046__circle-wrap {
  transform-origin: 0 0;
  will-change: transform;
  position: absolute;
  inset: 0%;
  transform: scale(0);
}

.button-046__circle {
  aspect-ratio: 1;
  background-color: var(--button-046-hover-color-background);
  border-radius: 50%;
  width: 200%;
  display: block;
  position: absolute;
  inset: 0% auto auto 0%;
  transform: translate(-50%, -50%);
}

.button-046__inner {
  grid-column-gap: .5em;
  grid-row-gap: .125em;
  width: 100%;
  height: 100%;
  padding: var(--button-046-padding);
  z-index: 2;
  grid-area: 1 / 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.button-046__icon {
  flex: none;
  width: 1em;
  height: 1em;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button-046:is(:hover, :focus-visible) .button-046__bg,
  [data-hover]:is(:hover, :focus-visible) .button-046 .button-046__bg {
    scale: var(--button-046-hover-scale);
    transition: background-color 0.25s 0.05s ease-out, scale 0.425s 0.05s var(--button-046-ease-hover), transform 0.15s var(--button-046-ease-click);
    background-color: var(--button-046-color-background);
  }

  .button-046:is(:hover, :focus-visible) .button-046__bg-circle,
  [data-hover]:is(:hover, :focus-visible) .button-046 .button-046__bg-circle {
    scale: var(--button-046-hover-scale);
    transition: background-color 0.25s 0.05s ease-out, scale 0.425s 0.05s var(--button-046-ease-hover), transform 0.15s var(--button-046-ease-click);
  }
}

/* Reduced motion en touch: geen cirkelanimatie, wel duidelijke kleurwissel. */
@media (prefers-reduced-motion: reduce), (hover: none) {
  .button-046:is(:hover, :focus-visible) .button-046__bg {
    background-color: var(--button-046-hover-color-background);
  }
}

/* WordPress-core zet :where(figure){margin:0 0 1em} ongelaagd; daardoor wint die van de
 * Tailwind-utilities (cascade layers). revert-layer laat de gelaagde waarde (utility of
 * preflight) weer gelden. LEDGER R104/R106. */
figure {
  margin: revert-layer;
}