/* BCMS Hero Topics Banner — microsite band (data-bc-brand) or optional editor color overrides */

/*
 * Inner: width 100% fills the row; Layout → Maximum width sets max-width on this node via inline <style>
 */
.module.module--bcms-topics-hero-banner > .module__inner {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.module.module--bcms-topics-hero-banner.module--block-left > .module__inner {
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
}

.module.module--bcms-topics-hero-banner.module--block-right > .module__inner {
  align-self: flex-end;
  margin-left: auto;
  margin-right: 0;
}

@media (max-width: 992px) {
  .module.module--bcms-topics-hero-banner.module--md-block-left > .module__inner {
    align-self: flex-start;
    margin-left: 0;
    margin-right: auto;
  }
  .module.module--bcms-topics-hero-banner.module--md-block-right > .module__inner {
    align-self: flex-end;
    margin-left: auto;
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .module.module--bcms-topics-hero-banner.module--sm-block-left > .module__inner {
    align-self: flex-start;
    margin-left: 0;
    margin-right: auto;
  }
  .module.module--bcms-topics-hero-banner.module--sm-block-right > .module__inner {
    align-self: flex-end;
    margin-left: auto;
    margin-right: 0;
  }
}

.bcms-hero-topics-banner {
  --htb-ink: #ffffff;
  --htb-ink-muted: rgba(255, 255, 255, 0.88);
  --htb-accent: rgba(255, 255, 255, 0.95);
  --htb-bg: #1b1d36;
  /* At least one quarter of the viewport height (hero band) */
  --htb-min-h: max(25vh, 280px);
  width: 100%;
  min-height: var(--htb-min-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
  background-color: var(--htb-bg);
  color: var(--htb-ink);
}

@supports (height: 1dvh) {
  .bcms-hero-topics-banner {
    --htb-min-h: max(25dvh, 280px);
  }
}

@media (max-width: 992px) {
  .bcms-hero-topics-banner {
    --htb-min-h: max(22vh, 240px);
  }
}

@media (max-width: 767px) {
  .bcms-hero-topics-banner {
    --htb-min-h: max(20vh, 200px);
    padding: 1.75rem 1rem;
  }
}

.bcms-hero-topics-banner,
.bcms-hero-topics-banner * {
  box-sizing: border-box;
}

.bcms-hero-topics-banner__inner {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  /*padding-left: clamp(0.5rem, 2vw, 1rem);*/
  padding-right: clamp(0.5rem, 2vw, 1rem);
}

.bcms-hero-topics-banner__overline {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--htb-accent);
}

.module.module--bcms-topics-hero-banner .bcms-hero-topics-banner__heading {
  margin: 0 0 1rem;
  font-family: var(--bc-font-family, Arial, Helvetica, sans-serif);
  font-size: var(--bc-hero-h1-font-size, clamp(1.75rem, 4vw, 2.5rem)) !important;
  font-weight: var(--bc-hero-h1-font-weight, 700) !important;
  line-height: var(--bc-hero-h1-line-height, 1.15) !important;
  color: var(--htb-ink) !important;
}

.bcms-hero-topics-banner__description {
  margin: 0;
  font-family: var(--bc-font-family, Arial, Helvetica, sans-serif);
  font-size: var(--bc-hero-lead-font-size, 1.0625rem);
  line-height: var(--bc-hero-lead-line-height, 1.6);
  color: var(--htb-ink-muted);
  max-width: 42rem;
}

.module.module--bcms-topics-hero-banner.module--text-center .bcms-hero-topics-banner__description,
.module.module--bcms-topics-hero-banner.module--md-text-center .bcms-hero-topics-banner__description,
.module.module--bcms-topics-hero-banner.module--sm-text-center .bcms-hero-topics-banner__description {
  margin-left: auto;
  margin-right: auto;
}

.bcms-hero-topics-banner__description p {
  margin: 0 0 0.75em;
  color: inherit;
}

.bcms-hero-topics-banner__description p:last-child {
  margin-bottom: 0;
}

.bcms-hero-topics-banner__description a,
.bcms-hero-topics-banner__description a:visited {
  color: inherit;
  text-decoration: underline;
}

.bcms-hero-topics-banner--custom-tone .bcms-hero-topics-banner__description a,
.bcms-hero-topics-banner--custom-tone .bcms-hero-topics-banner__description a:visited {
  color: inherit;
}

/* Editor override: Settings → Colors → Background (keeps custom text if set) */
.bcms-hero-topics-banner--custom-bg:not([style*="background-color"]) {
  background-color: #1b1d36;
}

/* ── Microsite typography + brand bands (module or body data-bc-brand) ── */
.bcms-hero-topics-banner[data-bc-brand="academy"],
body[data-bc-brand="academy"] .bcms-hero-topics-banner {
  --bc-font-family: Arial, Helvetica, sans-serif;
  --bc-hero-h1-font-size: 56px;
  --bc-hero-h1-line-height: 1.15;
  --bc-hero-h1-font-weight: 700;
  --bc-hero-lead-font-size: 18px;
  --bc-hero-lead-line-height: 30px;
}

.bcms-hero-topics-banner[data-bc-brand="automation"],
body[data-bc-brand="automation"] .bcms-hero-topics-banner {
  --bc-font-family: Arial, Helvetica, sans-serif;
  --bc-hero-h1-font-size: 64px;
  --bc-hero-h1-line-height: 70px;
  --bc-hero-h1-font-weight: 400;
  --bc-hero-lead-font-size: 18px;
  --bc-hero-lead-line-height: 1.6;
}

.bcms-hero-topics-banner[data-bc-brand="valueops"],
body[data-bc-brand="valueops"] .bcms-hero-topics-banner {
  --bc-font-family: Arial, Helvetica, sans-serif;
  --bc-hero-h1-font-size: 56px;
  --bc-hero-h1-line-height: 1.1;
  --bc-hero-h1-font-weight: 700;
  --bc-hero-lead-font-size: 18px;
  --bc-hero-lead-line-height: 1.6;
}

.bcms-hero-topics-banner[data-bc-brand="network_observability"],
body[data-bc-brand="network_observability"] .bcms-hero-topics-banner {
  --bc-font-family: Arial, Helvetica, sans-serif;
  --bc-hero-h1-font-size: 48px;
  --bc-hero-h1-line-height: 1.07;
  --bc-hero-h1-font-weight: 300;
  --bc-hero-lead-font-size: 16px;
  --bc-hero-lead-line-height: 1.4;
}

@media (max-width: 1024px) {
  .bcms-hero-topics-banner[data-bc-brand="academy"],
  body[data-bc-brand="academy"] .bcms-hero-topics-banner {
    --bc-hero-h1-font-size: 45px;
  }
  .bcms-hero-topics-banner[data-bc-brand="valueops"],
  body[data-bc-brand="valueops"] .bcms-hero-topics-banner,
  .bcms-hero-topics-banner[data-bc-brand="automation"],
  body[data-bc-brand="automation"] .bcms-hero-topics-banner {
    --bc-hero-h1-font-size: 60px;
    --bc-hero-h1-line-height: 66px;
  }
}

@media (max-width: 768px) {
  .bcms-hero-topics-banner[data-bc-brand="valueops"],
  body[data-bc-brand="valueops"] .bcms-hero-topics-banner,
  .bcms-hero-topics-banner[data-bc-brand="automation"],
  body[data-bc-brand="automation"] .bcms-hero-topics-banner {
    --bc-hero-h1-font-size: 34px;
    --bc-hero-h1-line-height: 40px;
    --bc-hero-h1-font-weight: 700;
  }
}

.bcms-hero-topics-banner[data-bc-brand="academy"]:not(.bcms-hero-topics-banner--custom-bg),
body[data-bc-brand="academy"] .bcms-hero-topics-banner:not(.bcms-hero-topics-banner--custom-bg) {
  --htb-bg: #cc0000;
}

.bcms-hero-topics-banner[data-bc-brand="automation"]:not(.bcms-hero-topics-banner--custom-bg),
body[data-bc-brand="automation"] .bcms-hero-topics-banner:not(.bcms-hero-topics-banner--custom-bg) {
  --htb-bg: #1f6d82;
}

.bcms-hero-topics-banner[data-bc-brand="valueops"]:not(.bcms-hero-topics-banner--custom-bg),
body[data-bc-brand="valueops"] .bcms-hero-topics-banner:not(.bcms-hero-topics-banner--custom-bg) {
  --htb-bg: #ea580c;
}

.bcms-hero-topics-banner[data-bc-brand="network_observability"]:not(.bcms-hero-topics-banner--custom-bg),
body[data-bc-brand="network_observability"] .bcms-hero-topics-banner:not(.bcms-hero-topics-banner--custom-bg), .module--bcms-topics-hero-banner {
  --htb-bg: #0f5b78;
}
.module--bcms-topics-hero-banner{
  background:#0f5b78;
}
/* Add top padding to the visible header section for screens below 1199px */
@media(max-width: 1199px){
  #main-content .module--bcms-topics-hero-banner{
  padding-top: 100px;
}
}
/* Brand band: white type (unless Settings → Colors → Text overrides via --custom-tone) */
.bcms-hero-topics-banner[data-bc-brand]:not(.bcms-hero-topics-banner--custom-tone),
body[data-bc-brand] .bcms-hero-topics-banner:not(.bcms-hero-topics-banner--custom-tone) {
  --htb-ink: #ffffff;
  --htb-ink-muted: rgba(255, 255, 255, 0.88);
  --htb-accent: rgba(255, 255, 255, 0.95);
}

.bcms-hero-topics-banner[data-bc-brand] .bcms-hero-topics-banner__heading,
body[data-bc-brand] .bcms-hero-topics-banner .bcms-hero-topics-banner__heading {
  font-family: var(--bc-font-family, Arial, Helvetica, sans-serif);
  font-size: var(--bc-hero-h1-font-size, clamp(1.75rem, 4vw, 2.5rem)) !important;
  font-weight: var(--bc-hero-h1-font-weight, 700) !important;
  line-height: var(--bc-hero-h1-line-height, 1.15) !important;
}

.bcms-hero-topics-banner[data-bc-brand] .bcms-hero-topics-banner__description,
body[data-bc-brand] .bcms-hero-topics-banner .bcms-hero-topics-banner__description {
  font-family: var(--bc-font-family, Arial, Helvetica, sans-serif);
  font-size: var(--bc-hero-lead-font-size, 1.0625rem);
  line-height: var(--bc-hero-lead-line-height, 1.6);
}

.bcms-hero-topics-banner[data-bc-brand] .bcms-hero-topics-banner__overline,
body[data-bc-brand] .bcms-hero-topics-banner .bcms-hero-topics-banner__overline {
  font-family: var(--bc-font-family, Arial, Helvetica, sans-serif);
}

/* BC Topics page chrome (header band + main background) — no separate theme CSS file needed */
body.bc-topics-page {
  --bc-topics-header-bg: #ffffff;
  --bc-topics-header-accent: #1b1d36;
  --bc-topics-page-bg: #f7f6f3;
}

body.bc-topics-page[data-bc-brand="academy"] {
  --bc-topics-header-accent: #cc0000;
  --bc-topics-page-bg: #f5f5f5;
}

body.bc-topics-page[data-bc-brand="automation"] {
  --bc-topics-header-accent: #1f6d82;
  --bc-topics-page-bg: #f0f6f7;
}

body.bc-topics-page[data-bc-brand="valueops"] {
  --bc-topics-header-accent: #f97316;
  --bc-topics-page-bg: #faf7f4;
}

body.bc-topics-page[data-bc-brand="network_observability"] {
  --bc-topics-header-accent: #0f5b78;
  --bc-topics-page-bg: #eff5f7;
}

body.bc-topics-page .header-container-wrapper.header-outer {
  background-color: var(--bc-topics-header-bg);
  border-bottom: 4px solid var(--bc-topics-header-accent);
}

body.bc-topics-page .content-wrapper {
  background-color: var(--bc-topics-page-bg);
}
@media(min-width: 1199px){
  .header-container-wrapper{
    background: #fff;
  }
}