/*
 * bootstrap_subtheme – Scolaro-like header overlay + hero sizing
 *
 * Notes:
 * - Admin paths: use English in docs; this file contains only styles.
 */

:root {
  /* JS sets this dynamically */
  --site-header-height: 96px;
}

/*
 * 防止页面出现横向滚动条（常见原因：Bootstrap 的 .row 负 margin
 * 放在全宽/无 padding 的容器里，或某些绝对定位元素超出视口）。
 *
 * 说明：
 * - overflow-x: clip 在现代浏览器更“干净”；不支持时回退到 hidden。
 */
html,
body {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* 额外保险：让整页 wrapper 也不会撑出横向滚动 */
#page-wrapper {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  #page-wrapper {
    overflow-x: hidden;
  }
}

/* ---------- Header: fixed + state machine (is-top / is-scrolled) ---------- */

.site-header.js-site-header {
  position: fixed;
  top: var(--drupal-displace-offset-top, 0px);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1030;
  transition: background-color 200ms ease, box-shadow 200ms ease, backdrop-filter 200ms ease;
}

/* Default: white (for non-hero pages OR when scrolled) */
.site-header.js-site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.12);
  backdrop-filter: saturate(150%) blur(6px);
}

/* Hero-top overlay: transparent */
.site-header.js-site-header.site-header--overlay.is-top {
  background-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* Hover (or menu open) while at top: show white background */
.site-header.js-site-header.site-header--overlay.is-top:hover,
.site-header.js-site-header.site-header--overlay.is-top.is-hover,
.site-header.js-site-header.site-header--overlay.is-top:focus-within,
.site-header.js-site-header.site-header--overlay.is-top.is-menu-open {
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.12);
  backdrop-filter: saturate(150%) blur(6px);
}

/* Main navbar background
 * - Frontpage: always white
 * - Other pages: transparent only when hero-top (is-top), otherwise white
 */
.site-header #navbar-main,
.site-header #navbar-main.navbar {
  --bs-bg-opacity: 1 !important;
  background-color: #fff !important;
}

.site-header.site-header--overlay.is-top:not(.is-frontpage) #navbar-main,
.site-header.site-header--overlay.is-top:not(.is-frontpage) #navbar-main.navbar {
  --bs-bg-opacity: 0 !important;
  background-color: transparent !important;
  /* Remove any inherited borders/shadows so the overlay looks truly seamless. */
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Extra specificity to override older theme rules that target body:not(.node-type-landing-page)... */
body.node--type-landing-page .site-header.site-header--overlay.is-top #navbar-main,
body.page-node-type-landing-page .site-header.site-header--overlay.is-top #navbar-main,
body.node-type-landing-page .site-header.site-header--overlay.is-top #navbar-main {
  --bs-bg-opacity: 0 !important;
  background-color: transparent !important;
}

/* Hover (while at top) or menu open: show white bar */
.site-header.site-header--overlay.is-top:hover #navbar-main,
.site-header.site-header--overlay.is-top.is-hover #navbar-main,
.site-header.site-header--overlay.is-top:focus-within #navbar-main,
.site-header.site-header--overlay.is-top.is-menu-open #navbar-main {
  --bs-bg-opacity: 1 !important;
  background-color: #fff !important;
}

/* Top bar (newsletter)
   - Default (solid header): white background + dark text
   - Overlay at page top: transparent background + light text (hero shows through)
*/
#navbar-top,
#navbar-top.navbar {
  background-color: #000 !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  min-height: 0 !important;
  line-height: 1.2;
  font-size: 0.85rem;
  border-bottom: none !important;
}

/* Only one top region, centered */
#navbar-top .container {
  display: flex;
  align-items: center;
  justify-content: center;
}
#navbar-top .region,
#navbar-top .region-top-header {
  width: 100%;
  text-align: center;
}
#navbar-top p {
  margin: 0;
}

/* Some blocks output plain text without wrapping it in .navbar-text or <p>.
 * Force the whole newsletter bar (and all descendants) to use white text on black.
 */
#navbar-top,
#navbar-top * {
  color: rgba(255, 255, 255, 0.92) !important;
}

#navbar-top .navbar-text,
#navbar-top .nav-link,
#navbar-top a {
  color: rgba(255, 255, 255, 0.92) !important;
}
#navbar-top a:hover {
  color: #fff !important;
}

/* Overlay state (non-frontpage + hero + at the very top) */
.site-header.site-header--overlay.is-top:not(.is-frontpage) #navbar-top {
  background-color: #000 !important;
  border-bottom: none !important;
}


/* Main navbar spacing: slightly tighter (helps reduce total header height) */
#navbar-main.navbar {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

/* Default (white background) link colors */
.site-header #navbar-main .navbar-brand,
.site-header #navbar-main .navbar-nav .nav-link,
.site-header #navbar-main .navbar-nav .nav-link:focus {
  color: #000 !important;
}
.site-header #navbar-main .navbar-nav .nav-link:hover {
  color: #000 !important;
}

/* Transparent-top link colors */
.site-header.site-header--overlay.is-top #navbar-main .navbar-brand,
.site-header.site-header--overlay.is-top #navbar-main .navbar-nav .nav-link,
.site-header.site-header--overlay.is-top #navbar-main .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.94) !important;
}
.site-header.site-header--overlay.is-top #navbar-main .navbar-nav .nav-link:hover {
  color: #fff !important;
}

/* When hovering at top (white bg), revert link colors to dark */
.site-header.site-header--overlay.is-top:hover #navbar-main .navbar-brand,
.site-header.site-header--overlay.is-top.is-hover #navbar-main .navbar-brand,
.site-header.site-header--overlay.is-top:focus-within #navbar-main .navbar-brand,
.site-header.site-header--overlay.is-top:hover #navbar-main .navbar-nav .nav-link,
.site-header.site-header--overlay.is-top.is-hover #navbar-main .navbar-nav .nav-link,
.site-header.site-header--overlay.is-top:focus-within #navbar-main .navbar-nav .nav-link,
.site-header.site-header--overlay.is-top:hover #navbar-main .navbar-nav .nav-link:focus {
  /* focus on links */
  color: #000 !important;
}
.site-header.site-header--overlay.is-top:hover #navbar-main .navbar-nav .nav-link:hover,
.site-header.site-header--overlay.is-top.is-hover #navbar-main .navbar-nav .nav-link:hover,
.site-header.site-header--overlay.is-top:focus-within #navbar-main .navbar-nav .nav-link:hover {
  color: #000 !important;
}

/* Toggler: keep contrast (best-effort across BS variants) */
.site-header.site-header--overlay.is-top .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.55) !important;
}
.site-header.site-header--overlay.is-top .navbar-toggler-icon {
  filter: none;
}
.site-header.site-header--overlay.is-top:hover .navbar-toggler,
.site-header.site-header--overlay.is-top.is-hover .navbar-toggler,
.site-header.site-header--overlay.is-top:focus-within .navbar-toggler,
.site-header.is-scrolled .navbar-toggler {
  border-color: rgba(0, 0, 0, 0.25) !important;
}
.site-header.site-header--overlay.is-top:hover .navbar-toggler-icon,
.site-header.site-header--overlay.is-top.is-hover .navbar-toggler-icon,
.site-header.site-header--overlay.is-top:focus-within .navbar-toggler-icon,
.site-header.is-scrolled .navbar-toggler-icon {
  filter: invert(1);
}

/* -------- Navbar layout: logo centered, menus split left/right -------- */

@media (min-width: 992px) {
  #navbar-main .site-header__nav-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  #navbar-main .site-header__nav-left,
  #navbar-main .site-header__nav-right {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
  }

  #navbar-main .site-header__nav-left {
    justify-content: flex-start;
  }

  #navbar-main .site-header__nav-right {
    justify-content: flex-end;
    gap: 0.5rem;
  }

  #navbar-main .site-header__brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  #navbar-main .site-header__brand .navbar-brand {
    margin: 0 !important;
  }

  #navbar-main .site-header__nav-left .navbar-nav,
  #navbar-main .site-header__nav-right .navbar-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
  }

  #navbar-main .site-header__nav-right .navbar-nav {
    justify-content: flex-end;
  }
}

@media (max-width: 991.98px) {
  #navbar-main .site-header__nav-mobile .navbar-nav {
    margin-top: 0.5rem;
  }

  #navbar-main .site-header__nav-left,
  #navbar-main .site-header__nav-right {
    width: 100%;
  }
}


/* ---------- Layout offset ---------- */

/* Always push content below the fixed header.
   Hero pages visually slide their hero wrapper under the header using negative margin. */
#main-wrapper,
#main,
.layout-main-wrapper {
  padding-top: var(--site-header-height, 96px);
}

/* Sticky footer: short pages still fill the viewport and footer sits at the bottom. */
.dialog-off-canvas-main-canvas {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#main-wrapper,
.layout-main-wrapper {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

/* ---------- lp-hero: near full screen ---------- */


/* Ensure lp-hero can sit under the fixed header (overlay style)
 *
 * IMPORTANT: Some pages (e.g. /lp/about-us) may not get the `has-hero` class
 * early enough due to caching/BigPipe timing. As a safe fallback, also target
 * Landing Page node body classes.
 */
body.has-hero .lp-page__hero,
body.page-node-type-landing-page .lp-page__hero,
body.node--type-landing-page .lp-page__hero,
body.node-type-landing-page .lp-page__hero {
  margin-top: calc(-1 * var(--site-header-height, 96px));
  /* Ensure the wrapper can fill a viewport on hero-only pages.
   * This helps prevent the footer from appearing in the first screen.
   *
   * NOTE:
   * We intentionally pull the hero wrapper up by the header height so the
   * header overlays the hero image.
   * When an element is shifted up by N px, its bottom edge also shifts up by N px.
   * To keep the hero visible area filling the whole viewport, the wrapper must be
   * taller by that same header height.
   */
  min-height: calc(100vh + var(--site-header-height, 96px));
  min-height: calc(100svh + var(--site-header-height, 96px));
  min-height: calc(100dvh + var(--site-header-height, 96px));
  display: flex;
  flex-direction: column;
  /* IMPORTANT:
   * Do NOT set a negative margin-bottom on the hero wrapper.
   * It will pull the next sibling upward, causing the footer to overlap the hero
   * on pages that only contain a hero (e.g. /lp/about-us).
   */
}

/* Let the field wrappers stretch so the hero paragraph can reach its min-height. */
body.has-hero .lp-page__hero > .field,
body.page-node-type-landing-page .lp-page__hero > .field,
body.node--type-landing-page .lp-page__hero > .field,
body.node-type-landing-page .lp-page__hero > .field {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

body.has-hero .lp-page__hero > .field > .field__item,
body.page-node-type-landing-page .lp-page__hero > .field > .field__item,
body.node--type-landing-page .lp-page__hero > .field > .field__item,
body.node-type-landing-page .lp-page__hero > .field > .field__item {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Keep hero content readable: push internal content below header while background sits behind it. */
body.has-hero .lp-hero,
body.page-node-type-landing-page .lp-hero,
body.node--type-landing-page .lp-hero,
body.node-type-landing-page .lp-hero {
  /*
   * IMPORTANT:
   * landing-page.css defines a generic `.lp-hero { padding: clamp(...) 0; }`.
   * On some pages this can override our header-aware spacing.
   * Force the fullscreen hero rules in this block.
   */
  padding-top: var(--site-header-height, 96px) !important;
  padding-bottom: 0 !important;

  /* The wrapper (`.lp-page__hero`) already compensates for the negative margin-top.
   * Make the hero paragraph stretch to fill the wrapper.
   */
  flex: 1 1 auto;
  height: 100%;
  min-height: 0 !important;
}

body.has-hero .lp-hero,
body.page-node-type-landing-page .lp-hero,
body.node--type-landing-page .lp-hero,
body.node-type-landing-page .lp-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Background wrapper covers hero */
body.has-hero .lp-hero__bg,
body.has-hero .lp-hero__bg picture,
body.has-hero .lp-hero__bg img,
body.page-node-type-landing-page .lp-hero__bg,
body.page-node-type-landing-page .lp-hero__bg picture,
body.page-node-type-landing-page .lp-hero__bg img,
body.node--type-landing-page .lp-hero__bg,
body.node--type-landing-page .lp-hero__bg picture,
body.node--type-landing-page .lp-hero__bg img,
body.node-type-landing-page .lp-hero__bg,
body.node-type-landing-page .lp-hero__bg picture,
body.node-type-landing-page .lp-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body.has-hero .lp-hero__bg img,
body.page-node-type-landing-page .lp-hero__bg img,
body.node--type-landing-page .lp-hero__bg img,
body.node-type-landing-page .lp-hero__bg img {
  object-fit: cover;
  object-position: center;
}

/* Fix unexpected margins on Drupal's image field wrappers that can create
 * small gaps at the right/bottom edge of full-bleed hero images.
 */
body.has-hero .lp-hero__bg .field,
body.has-hero .lp-hero__bg .field__item,
body.page-node-type-landing-page .lp-hero__bg .field,
body.page-node-type-landing-page .lp-hero__bg .field__item,
body.node--type-landing-page .lp-hero__bg .field,
body.node--type-landing-page .lp-hero__bg .field__item,
body.node-type-landing-page .lp-hero__bg .field,
body.node-type-landing-page .lp-hero__bg .field__item,
body.has-hero .lp-hero__bg .field--type-image,
body.has-hero .lp-hero__bg .field--name-field-media-image,
body.page-node-type-landing-page .lp-hero__bg .field--type-image,
body.page-node-type-landing-page .lp-hero__bg .field--name-field-media-image,
body.node--type-landing-page .lp-hero__bg .field--type-image,
body.node--type-landing-page .lp-hero__bg .field--name-field-media-image,
body.node-type-landing-page .lp-hero__bg .field--type-image,
body.node-type-landing-page .lp-hero__bg .field--name-field-media-image {
  margin: 0 !important;
  padding: 0 !important;
}

body.has-hero .lp-hero__bg picture,
body.has-hero .lp-hero__bg img,
body.page-node-type-landing-page .lp-hero__bg picture,
body.page-node-type-landing-page .lp-hero__bg img,
body.node--type-landing-page .lp-hero__bg picture,
body.node--type-landing-page .lp-hero__bg img,
body.node-type-landing-page .lp-hero__bg picture,
body.node-type-landing-page .lp-hero__bg img {
  display: block;
}

/* Text/content wrapper: keep some breathing room under header */
body.has-hero .lp-hero__inner,
body.page-node-type-landing-page .lp-hero__inner,
body.node--type-landing-page .lp-hero__inner,
body.node-type-landing-page .lp-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--site-header-height, 96px) * 0.35);
  padding-bottom: 3rem;
}

/* Optional overlay shade */
body.has-hero .lp-hero__overlay,
body.page-node-type-landing-page .lp-hero__overlay,
body.node--type-landing-page .lp-hero__overlay,
body.node-type-landing-page .lp-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}



/* --- v7: 强化文字颜色切换（兼容不同菜单标记：.navbar-nav/.nav/.menu） --- */
.site-header #navbar-main a,
.site-header #navbar-main .nav-link,
.site-header #navbar-main .menu a,
.site-header #navbar-main .navbar-brand,
.site-header #navbar-main .site-name {
  color: #000 !important;
}

/* 顶部覆盖在大图上（透明底 + 白字） */
.site-header.site-header--overlay.is-top:not(.is-frontpage) #navbar-main a,
.site-header.site-header--overlay.is-top:not(.is-frontpage) #navbar-main .nav-link,
.site-header.site-header--overlay.is-top:not(.is-frontpage) #navbar-main .menu a,
.site-header.site-header--overlay.is-top:not(.is-frontpage) #navbar-main .navbar-brand,
.site-header.site-header--overlay.is-top:not(.is-frontpage) #navbar-main .site-name {
  color: #fff !important;
}

/* 覆盖态：鼠标悬浮时变白底黑字（模仿 scolaro） */
.site-header.site-header--overlay.is-top:not(.is-frontpage) #navbar-main:hover a,
.site-header.site-header--overlay.is-top:not(.is-frontpage).is-hover #navbar-main a,
.site-header.site-header--overlay.is-top:not(.is-frontpage):focus-within #navbar-main a,
.site-header.site-header--overlay.is-top:not(.is-frontpage) #navbar-main:hover .nav-link,
.site-header.site-header--overlay.is-top:not(.is-frontpage).is-hover #navbar-main .nav-link,
.site-header.site-header--overlay.is-top:not(.is-frontpage):focus-within #navbar-main .nav-link,
.site-header.site-header--overlay.is-top:not(.is-frontpage) #navbar-main:hover .menu a,
.site-header.site-header--overlay.is-top:not(.is-frontpage).is-hover #navbar-main .menu a,
.site-header.site-header--overlay.is-top:not(.is-frontpage):focus-within #navbar-main .menu a,
.site-header.site-header--overlay.is-top:not(.is-frontpage) #navbar-main:hover .navbar-brand,
.site-header.site-header--overlay.is-top:not(.is-frontpage).is-hover #navbar-main .navbar-brand,
.site-header.site-header--overlay.is-top:not(.is-frontpage):focus-within #navbar-main .navbar-brand,
.site-header.site-header--overlay.is-top:not(.is-frontpage) #navbar-main:hover .site-name,
.site-header.site-header--overlay.is-top:not(.is-frontpage).is-hover #navbar-main .site-name,
.site-header.site-header--overlay.is-top:not(.is-frontpage):focus-within #navbar-main .site-name {
  color: #000 !important;
}