/* ============================================================
   layout-fix.css — compiled from app/styles/hsg/layout-fix.scss
   Keep in sync with that file when making changes.
   ============================================================ */

/* In server (view) mode the Placeholder wrapper is not needed for layout.
   display:contents dissolves it so it doesn't affect flex/grid contexts. */
.view-mode .placeholder-header,
.view-mode .placeholder-main,
.view-mode .placeholder-footer {
  display: contents;
}

/* ── hsg-inner-layout fixes ─────────────────────────────── */

.hsg-inner-layout .menu__drawer.menu__drawer--open {
  position: fixed;
}

/* Fix button and paragraph fonts inheriting from Bootstrap variables */
.hsg-inner-layout .btn,
.hsg-inner-layout main p,
.hsg-inner-layout footer p {
  font-family: var(--bs-body-font-family);
  font-weight: var(--bs-body-font-weight);
}

.hsg-inner-layout [class*="ClientHsgInnerOneLayout_"] footer,
.hsg-inner-layout [class*="ClientHsgInnerOneLayout_"] footer .wysiwyg-content p,
.hsg-inner-layout [class*="ClientHsgInnerOneLayout_"] footer .wysiwyg-content a {
  color: var(--bs-body-color);
}

.hsg-inner-layout [class*="ClientHsgInnerOneLayout_"] main [class*="ConfigWidgetButton_"] p {
  font-weight: 600;
}

.hsg-inner-layout .board-members p,
.hsg-inner-layout footer p,
.hsg-inner-layout footer a {
  color: #fff;
}

.hsg-inner-layout [class*="ClientHsgInnerOneLayout_"] footer [class*="ConfigWidgetButton_"] p {
  color: var(--visor-primary-color)!important;
  font-weight: 600;
}

.hsg-inner-layout [class*="ClientHsgInnerOneLayout_"] footer [class*="ConfigWidgetButton_"] {
  color: var(--bs-body-color);
}

/* Fix footer container width */
.hsg-inner-layout footer .container {
  max-width: 931px !important;
}

/* Dissolve the CustomWysiwygRenderer wrapper div in footer sections */
.hsg-inner-layout footer .footer__bottom > div,
.hsg-inner-layout footer .footer__link > div {
  display: contents;
}

/* Remove <p> wrapper from footer link section */
.hsg-inner-layout footer .footer__link p {
  display: contents;
}

/* Force white text in image-left (type-2) sections */
.hsg-inner-layout .inline-content--type-2 .inline-content__left * {
  color: #fff !important;
}

@media (max-width: 1199.9px) {
  .hsg-inner-layout footer .container .footer__bottom {
    text-align: left;
  }

  .hsg-inner-layout footer .container .m-text-center {
    text-align: center;
  }

  .hsg-inner-layout .header .menu__drawer ul {
    max-width: 300px;
  }
}

/* ── body.fixed (menu open / scroll-lock) fixes ─────────── */

body.fixed main {
  margin-top: 0 !important;
}

body.fixed .hsg-inner-layout {
  margin-top: var(--scroll-y, 0);
}

body.fixed .inline-content {
  grid-template-columns: 2fr 2fr !important;
}

@media (max-width: 1199.9px) {
  body.fixed .inline-content {
    grid-template-columns: 1fr !important;
  }
}

.text-white p {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-white-rgb),var(--bs-text-opacity)) !important;
}

/* ── .fade-up — works on any HTML element, no React component needed ──── */
/* CSS hides .fade-up from first paint (CSS loads before JS),
   so there is no flash-of-visible-content. JS adds .is-visible to reveal. */

.fade-up:not(.is-visible) {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 0.7s ease, transform 0.7s ease;
}