/*
 * R426 - groene helpdesk-achtergrond voor de brede kop van hulp.html.
 * De sitebrede paginaszoeker en de blauwe taakbalk blijven ongewijzigd.
 */

#container.site-shell-r420 #main.help-page .help-hero {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 42px);
  min-height: 220px;
  padding: clamp(24px, 4vw, 42px);
  margin: 0 0 20px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--site-page-accent-dark, #3F5F2E) 62%, #fff);
  border-radius: 10px;
  background:
    radial-gradient(circle at 84% 14%, rgba(255, 255, 255, .24), transparent 27%),
    radial-gradient(circle at 58% 118%, rgba(255, 255, 255, .10), transparent 34%),
    linear-gradient(
      135deg,
      var(--site-page-accent-dark, #3F5F2E) 0%,
      var(--site-page-accent, #557A3E) 58%,
      #7EA265 100%
    );
  color: #fff;
  box-shadow: 0 10px 26px rgba(50, 77, 37, .22);
}

#container.site-shell-r420 #main.help-page .help-hero::after {
  display: block;
  content: "";
  position: absolute;
  right: 32%;
  bottom: -58px;
  z-index: 0;
  width: 190px;
  height: 190px;
  border: 28px solid rgba(255, 255, 255, .055);
  border-radius: 50%;
  pointer-events: none;
}

#container.site-shell-r420 #main.help-page .help-hero-heading,
#container.site-shell-r420 #main.help-page .help-page-search {
  position: relative;
  z-index: 2;
}

#container.site-shell-r420 #main.help-page .help-hero-heading {
  flex: 1 1 auto;
}

#container.site-shell-r420 #main.help-page .help-eyebrow {
  display: inline-block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, .80);
  font-size: calc(var(--base-font-size, 16px) - 2px);
  letter-spacing: .06em;
}

#container.site-shell-r420 #main.help-page .help-hero h1 {
  color: #fff;
  font-size: clamp(28px, 3vw, 36px);
  text-shadow: 0 1px 1px rgba(24, 43, 17, .18);
}

#container.site-shell-r420 #main.help-page .help-hero p {
  color: rgba(255, 255, 255, .90);
}

#container.site-shell-r420 #main.help-page .help-hero-mark {
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
  color: #fff;
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .055);
  backdrop-filter: blur(4px);
  font-size: 42px;
}

#container.site-shell-r420 #main.help-page .help-hero-mark::before {
  color: #fff;
}

#container.site-shell-r420 #main.help-page .help-button,
#container.site-shell-r420 #main.help-page .help-button-primary,
#container.site-shell-r420 #main.help-page .help-button-secondary {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .10);
  color: #fff;
  box-shadow: none;
}

#container.site-shell-r420 #main.help-page .help-button-primary {
  border-color: #fff;
  background: #fff;
  color: var(--site-page-accent-dark, #3F5F2E);
}

#container.site-shell-r420 #main.help-page .help-button:hover,
#container.site-shell-r420 #main.help-page .help-button:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, .20);
  color: #fff;
}

#container.site-shell-r420 #main.help-page .help-button-primary:hover,
#container.site-shell-r420 #main.help-page .help-button-primary:focus-visible {
  background: var(--site-page-accent-soft, #F0F5EC);
  color: var(--site-page-accent-dark, #3F5F2E);
}

#container.site-shell-r420 #main.help-page .help-page-search > label,
#container.site-shell-r420 #main.help-page .help-page-search-status {
  color: rgba(255, 255, 255, .92);
}

#container.site-shell-r420 #main.help-page .help-page-search-field input {
  border-color: rgba(255, 255, 255, .72);
  background: #fff;
  box-shadow: 0 4px 14px rgba(36, 58, 27, .14);
}

#container.site-shell-r420 #main.help-page .help-page-search-field input:focus {
  border-color: #fff;
  outline-color: rgba(255, 255, 255, .30);
}

#container.site-shell-r420 #main.help-page .help-page-search-results {
  border-color: var(--site-page-accent-border, #C6D5BB);
  background: #fff;
  color: var(--color-text, #242424);
  box-shadow: 0 16px 36px rgba(27, 46, 20, .28);
}

@media (max-width: 900px) {
  #container.site-shell-r420 #main.help-page .help-hero {
    align-items: stretch;
    flex-direction: column;
    min-height: 0;
  }

  #container.site-shell-r420 #main.help-page .help-hero::after {
    right: -28px;
    bottom: -82px;
  }
}

@media (max-width: 560px) {
  #container.site-shell-r420 #main.help-page .help-hero {
    padding: 20px;
    border-radius: 8px;
  }

  #container.site-shell-r420 #main.help-page .help-hero-mark {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    font-size: 34px;
  }

  #container.site-shell-r420 #main.help-page .help-hero-actions {
    gap: 8px;
  }
}