/*
 * Laatjehuren Header Button Polish v1
 * Scope: alleen header/fixed-header CTA-knoppen.
 * Doel: elegantere knoppen met betere hover/focus zonder layout of functies te wijzigen.
 */

:root {
  --ljh-header-blue: #0f4c81;
  --ljh-header-blue-2: #0b6ea8;
  --ljh-header-orange: #f28c28;
  --ljh-header-orange-2: #ffb347;
  --ljh-header-dark: #102033;
  --ljh-header-white: #ffffff;
}

body.ljh-header-button-polish-v1 .site-header a[href*="plaats-opdracht"],
body.ljh-header-button-polish-v1 .site-header a[href*="bied-dienst-aan"],
body.ljh-header-button-polish-v1 .site-header a[href*="gratis-aanmelden"],
body.ljh-header-button-polish-v1 .site-header a[href*="eerste-100-gratis"],
body.ljh-header-button-polish-v1 .site-header .ast-custom-button,
body.ljh-header-button-polish-v1 .site-header .ast-button,
body.ljh-header-button-polish-v1 .site-header .wp-block-button__link,
body.ljh-header-button-polish-v1 .ast-site-header-cart .ast-addon-cart-wrap,
body.ljh-header-button-polish-v1 header.site-header a[href*="plaats-opdracht"],
body.ljh-header-button-polish-v1 header.site-header a[href*="bied-dienst-aan"] {
  position: relative;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 11px 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 76, 129, 0.16) !important;
  background: linear-gradient(135deg, var(--ljh-header-white) 0%, #f6fbff 100%) !important;
  color: var(--ljh-header-blue) !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em;
  line-height: 1.05 !important;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(15, 76, 129, 0.10) !important;
  transform: translateY(0);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease,
    filter 180ms ease;
  overflow: hidden;
}

body.ljh-header-button-polish-v1 .site-header a[href*="plaats-opdracht"]::before,
body.ljh-header-button-polish-v1 .site-header a[href*="bied-dienst-aan"]::before,
body.ljh-header-button-polish-v1 .site-header a[href*="gratis-aanmelden"]::before,
body.ljh-header-button-polish-v1 .site-header a[href*="eerste-100-gratis"]::before,
body.ljh-header-button-polish-v1 .site-header .ast-custom-button::before,
body.ljh-header-button-polish-v1 .site-header .ast-button::before,
body.ljh-header-button-polish-v1 .site-header .wp-block-button__link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.65), rgba(255,255,255,0) 55%);
  opacity: 0.75;
  pointer-events: none;
}

/* Primaire header-CTA: opdracht plaatsen */
body.ljh-header-button-polish-v1 .site-header a[href*="plaats-opdracht"],
body.ljh-header-button-polish-v1 header.site-header a[href*="plaats-opdracht"] {
  border-color: rgba(242, 140, 40, 0.34) !important;
  background: linear-gradient(135deg, var(--ljh-header-orange) 0%, var(--ljh-header-orange-2) 100%) !important;
  color: #231300 !important;
  box-shadow: 0 10px 26px rgba(242, 140, 40, 0.25) !important;
}

/* Secundaire header-CTA: dienst aanbieden / gratis aanmelden */
body.ljh-header-button-polish-v1 .site-header a[href*="bied-dienst-aan"],
body.ljh-header-button-polish-v1 .site-header a[href*="gratis-aanmelden"],
body.ljh-header-button-polish-v1 .site-header a[href*="eerste-100-gratis"],
body.ljh-header-button-polish-v1 header.site-header a[href*="bied-dienst-aan"] {
  border-color: rgba(15, 76, 129, 0.28) !important;
  background: linear-gradient(135deg, var(--ljh-header-blue) 0%, var(--ljh-header-blue-2) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 26px rgba(15, 76, 129, 0.22) !important;
}

body.ljh-header-button-polish-v1 .site-header a[href*="plaats-opdracht"]:hover,
body.ljh-header-button-polish-v1 .site-header a[href*="bied-dienst-aan"]:hover,
body.ljh-header-button-polish-v1 .site-header a[href*="gratis-aanmelden"]:hover,
body.ljh-header-button-polish-v1 .site-header a[href*="eerste-100-gratis"]:hover,
body.ljh-header-button-polish-v1 .site-header .ast-custom-button:hover,
body.ljh-header-button-polish-v1 .site-header .ast-button:hover,
body.ljh-header-button-polish-v1 .site-header .wp-block-button__link:hover,
body.ljh-header-button-polish-v1 .ast-site-header-cart .ast-addon-cart-wrap:hover {
  transform: translateY(-2px);
  filter: saturate(1.08) brightness(1.02);
  box-shadow: 0 14px 34px rgba(15, 76, 129, 0.18) !important;
}

body.ljh-header-button-polish-v1 .site-header a[href*="plaats-opdracht"]:hover {
  box-shadow: 0 16px 36px rgba(242, 140, 40, 0.32) !important;
}

body.ljh-header-button-polish-v1 .site-header a[href*="bied-dienst-aan"]:hover,
body.ljh-header-button-polish-v1 .site-header a[href*="gratis-aanmelden"]:hover,
body.ljh-header-button-polish-v1 .site-header a[href*="eerste-100-gratis"]:hover {
  box-shadow: 0 16px 36px rgba(15, 76, 129, 0.30) !important;
}

body.ljh-header-button-polish-v1 .site-header a[href*="plaats-opdracht"]:active,
body.ljh-header-button-polish-v1 .site-header a[href*="bied-dienst-aan"]:active,
body.ljh-header-button-polish-v1 .site-header a[href*="gratis-aanmelden"]:active,
body.ljh-header-button-polish-v1 .site-header a[href*="eerste-100-gratis"]:active,
body.ljh-header-button-polish-v1 .site-header .ast-custom-button:active,
body.ljh-header-button-polish-v1 .site-header .ast-button:active,
body.ljh-header-button-polish-v1 .site-header .wp-block-button__link:active {
  transform: translateY(0);
}

body.ljh-header-button-polish-v1 .site-header a[href*="plaats-opdracht"]:focus-visible,
body.ljh-header-button-polish-v1 .site-header a[href*="bied-dienst-aan"]:focus-visible,
body.ljh-header-button-polish-v1 .site-header a[href*="gratis-aanmelden"]:focus-visible,
body.ljh-header-button-polish-v1 .site-header a[href*="eerste-100-gratis"]:focus-visible,
body.ljh-header-button-polish-v1 .site-header .ast-custom-button:focus-visible,
body.ljh-header-button-polish-v1 .site-header .ast-button:focus-visible,
body.ljh-header-button-polish-v1 .site-header .wp-block-button__link:focus-visible {
  outline: 3px solid rgba(242, 140, 40, 0.36) !important;
  outline-offset: 3px;
}

/* Astra/header spacing: houd het rustig in de fixed header. */
body.ljh-header-button-polish-v1 .site-header .main-header-menu > .menu-item > a[href*="plaats-opdracht"],
body.ljh-header-button-polish-v1 .site-header .main-header-menu > .menu-item > a[href*="bied-dienst-aan"],
body.ljh-header-button-polish-v1 .site-header .main-header-menu > .menu-item > a[href*="gratis-aanmelden"],
body.ljh-header-button-polish-v1 .site-header .main-header-menu > .menu-item > a[href*="eerste-100-gratis"] {
  margin-left: 6px;
  margin-right: 0;
}

/* Mobile menu: full-width, netjes gecentreerd en niet te hoog. */
@media (max-width: 921px) {
  body.ljh-header-button-polish-v1 .site-header .main-header-menu a[href*="plaats-opdracht"],
  body.ljh-header-button-polish-v1 .site-header .main-header-menu a[href*="bied-dienst-aan"],
  body.ljh-header-button-polish-v1 .site-header .main-header-menu a[href*="gratis-aanmelden"],
  body.ljh-header-button-polish-v1 .site-header .main-header-menu a[href*="eerste-100-gratis"],
  body.ljh-header-button-polish-v1 .site-header .ast-custom-button,
  body.ljh-header-button-polish-v1 .site-header .ast-button,
  body.ljh-header-button-polish-v1 .site-header .wp-block-button__link {
    width: calc(100% - 22px) !important;
    max-width: 360px;
    margin: 8px auto !important;
    min-height: 44px;
    padding: 12px 16px !important;
    text-align: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ljh-header-button-polish-v1 .site-header a[href*="plaats-opdracht"],
  body.ljh-header-button-polish-v1 .site-header a[href*="bied-dienst-aan"],
  body.ljh-header-button-polish-v1 .site-header a[href*="gratis-aanmelden"],
  body.ljh-header-button-polish-v1 .site-header a[href*="eerste-100-gratis"],
  body.ljh-header-button-polish-v1 .site-header .ast-custom-button,
  body.ljh-header-button-polish-v1 .site-header .ast-button,
  body.ljh-header-button-polish-v1 .site-header .wp-block-button__link {
    transition: none;
  }
}