/* kleo/pw-hero-banner — coloured hero band and age group logo. */

.pw-page-hero {
  background: var(--pw-accent);
  color: #fff;
  padding: 34px 0 30px;
  text-align: center;
}
.pw-page-hero .pw-eyebrow {
  color: rgba(255, 255, 255, 0.85);
  display: block;
}
.pw-page-hero h1 {
  color: #fff;
  font-size: var(--pw-font-size-xlarge);
  margin-top: 12px;
}
.pw-page-hero h1 em {
  font-style: italic;
  color: var(--pw-gold);
}
.pw-page-hero p {
  color: rgba(255, 255, 255, 0.92);
  max-width: 640px;
  margin: 16px auto 0;
  font-size: var(--pw-font-size-medium);
}

.pw-logo-banner {
  background: var(--pw-bg);
  text-align: center;
  padding: 30px 0 4px;
}
.pw-logo-banner .pw-standalone-logo {
  height: 96px;
  width: auto;
  margin: 0 auto;
  filter: drop-shadow(0 6px 12px rgba(40, 34, 63, 0.14));
}
@media (max-width: 600px) {
  .pw-logo-banner .pw-standalone-logo {
    height: 72px;
  }
}

/* Overrides the heading colour pw-shared.css has to force past Kleo's dynamic.css. */
.pw-page-hero h1 {
  color: #fff !important;
}
.pw-page-hero h1 em {
  color: var(--pw-gold) !important;
}