/**
 * Learning on Demand theme styles
 * Child theme of bchousing
 */

 :root{
  --content-max: 1200px;
  --gutter: 24px;
  /* how wide the left text panel should be (as a fraction of the content track) */
  --hero-left-frac: 0.34;        /* 40% text / 60% image; tweak to match comp */
  --hero-min-h: 620px;
}

/* remove the site container constraints only for the hero wrapper */
.header-section.content-holder{ padding:0 !important; max-width:none !important; }

/* ONE grid for the hero, with a named split INSIDE the content track */
.landing-hero{
  display:grid;
  grid-template-columns:
    [full-start]   minmax(var(--gutter), 1fr)
    [content-start]
      minmax(0, calc(var(--content-max) * var(--hero-left-frac))) [split]
      minmax(0, calc(var(--content-max) * (1 - var(--hero-left-frac))))
    [content-end]
    minmax(var(--gutter), 1fr)
    [full-end];
  grid-template-rows: minmax(var(--hero-min-h), auto);
  align-items: stretch;
  background:#286164;
  color:#fff;
  position:relative;
  overflow:hidden;
}

/* LEFT (text) — stays inside the content track up to the split */
.landing-hero__content{
  grid-column: content-start / split;
  grid-row: 1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 80px 0;   /* side gutters come from the grid lines */
  z-index:2;
  max-width: 368px;
}
.landing-hero__title{ font-weight:300; line-height:1.12; margin:0 0 29px; }
.landing-hero__body{ font-size:18px; line-height:1.5; }

/* RIGHT (image) — from the split all the way to the viewport right */
.landing-hero__image-wrapper{
  grid-column: split / full-end;
  grid-row: 1;
  position:relative;
  min-height: var(--hero-min-h);
  overflow:hidden;

  @media (max-width: 475px) {
    min-height: auto;
  }
}
.landing-hero__image-wrapper .hero-image img,
.landing-hero__image-wrapper .hero-image picture > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.landing-hero--with-image {
  min-height: 617px;
}


/* =========================================
   Variant: No Image
   ========================================= */
.landing-hero--no-image {
  flex-direction: column;
  background-color: #286164;
  min-height: 340px;
  grid-template-rows: auto;
}

.landing-hero--no-image .landing-hero__background {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Inherit same overlay SVG logic */
.landing-hero--no-image .landing-hero__shape {
  width: 100%;
}

.landing-hero--no-image .landing-hero__shape.landing-hero__shape--default {
  width: 65%;
  left: auto;
  right: 0;
}

/* Content overlays shapes */
.landing-hero--no-image .landing-hero__content {
  position: relative;
  z-index: 2;
  padding: 0px;
  text-align: left;
  max-width: 488px;
  width: 488px;

  @media (max-width: 475px) {
    max-width: unset;
    width: 90%;
  }
}
/* Decorative overlay shapes */
.landing-hero__shape {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  pointer-events: none;
}
/* responsive: stop bleeding to the right and stack */
@media (max-width:1140px){
  .landing-hero{
    display: flex;
    flex-direction: column;
  }
  .landing-hero__image-wrapper{
    height:auto !important;
    min-height: auto;
    order:-1;
  }
  .landing-hero__content{
    padding:48px 0;
    max-width: 90%;
    margin: auto;
  }
  .landing-hero--no-image .landing-hero__content {
    max-width: 90%;
    margin-left: 5%;
  }
}
/* responsive: stop bleeding to the right and stack */



header[role=banner] {
  background: #FFFFFF;
}
.header-top-menu a.login {
  display: flex;
  gap: 10px;
  align-items: center;
}
.header-top-menu > .block-content .bchp-link {
  font-size: 16px;
  font-weight: 400;
}
.header-top-menu > .block-content .menu .block-content ul li {
  margin-left: 0px !important;
}
.header-top-menu a.login::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("../images/login-user.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.header-top-menu>.block-content .learning-on-demand {
  color: #fff;
  padding: 10px 20px;
  margin-top: -10px;
  margin-bottom: -10px;
  border-left: 1px solid #999;
  border-right: 1px solid #999;
  background: #006265;
}
.branding-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.branding-bar > .branding-bar__right > a.back-pill {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 18px;
  border: 2px solid #2C7B77;
  border-radius: 999px;
  color: #2C7B77;
  text-decoration: none;
  font-weight: 500;
  line-height: 1;
  background: #fff;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.back-pill__label {
  @media (max-width: 510px) {
    display: none;
  }
}
.breadcrumbs-holder {
  margin-bottom: auto;
}
a.menu-link {
  margin-right: 20px;
}

.layout-container.light .main-content-container {
  background: #F4F4F5;
}
.layout-container.white .main-content-container {
  background: #FFFFFF;
}
.layout-content {
  max-width: 100% !important;
}

.main-section.content-holder {
  max-width: 1200px;
  margin: auto;
  padding: 100px 0;
  @media (max-width: 1300px) {
    max-width: 90% !important;
  }
}

main[role=main] .layout-content-full-width section {
  margin-top: auto;
}
.header-top-menu {
  padding: 8px 0;
}
.header-left {
  display: flex;
  gap: 20px;
}
.header-top-menu > .block-content .menu .block-content ul li a {
  font-size: 16px;
  font-weight: 400;
}
/* Header styles matching the design */
.layout-container.light .pre-footer {
  background: #F6F7Fa;
}
.layout-container.white .pre-footer {
  background: #FFFFFF;
}
.pre-footer .content-holder{
  padding-bottom: 200px;
  background-image: url('../images/footer-bg.png');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  margin: auto;
  max-width: 1200px;
  @media (max-width: 1300px) {
    max-width: 90% !important;
  }
}
footer[role=contentinfo] .content-holder .footer-text {
  border-bottom: none;
}
footer[role=contentinfo] .content-holder a {
  font-size: 1.6rem;
}

.footer-text {
  flex: 60%;
}

#block-learningondemand-footer .block-content {
  display: flex;
  justify-content: center;
}


.header-top-menu > .block-content .bchp-login-link {
  font-weight: 400;
  color: #ffffff;
  text-decoration: none;
  padding: 10px 20px;
  margin-top: -10px;
  margin-bottom: -10px;
}




/* Node title styling */
h1 span.node-title {
  line-height: 1.12;
}

/* =========================================
   Utility Classes
   ========================================= */

/* Hide external link icons */
.external-link::after {
  display: none !important;
}

/* =========================================
   Accordion Component
   ========================================= */

.ui-accordion-container details.accordion-item summary {
  background: #FFFFFF !important;
  margin-bottom: 0;
}

/* =========================================
   Mobile Menu
   ========================================= */

/* Hide hamburger icon when mobile menu is open */
.header-top-menu #mobile-menu.mobile-menu-hidden {
  display: none !important;
}

/* Style login link in mobile menu to match desktop */
#mobile-menu-content a.login {
  display: flex !important;
  gap: 10px;
  align-items: center;
}

#mobile-menu-content a.login::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("../images/login-user.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}