/* Banner-top pages — transparent header at top (like class schedule), cream body #FFFEF4 */

:root {
  --lmyc-page-cream: #fffef4;
}

/* All non-homepage pages — cream body + theme sections (mobile + desktop) */
body:not(.lmyc-home-page),
body:not(.lmyc-home-page).gradient,
body:not(.lmyc-home-page) #main-content,
body:not(.lmyc-home-page) :where(
  .color-scheme-1,
  .color-scheme-2,
  .color-scheme-4,
  .color-scheme-5,
  .color-scheme-d67a9f1f-02b2-4bef-9e37-5d5e7b055f75,
  .color-scheme-8354c606-fc56-4d54-b1ee-58332268cccc,
  .color-scheme-2d4ab598-3509-4efe-8efc-86eb2875aaee,
  .color-scheme-7d114e59-2b5e-4d4a-af07-145ca87e4b99,
  .color-scheme-c772bcb2-1b54-4688-b48e-a0e98c9276a6,
  .color-scheme-f8cc04ed-bbe2-43ec-92e1-5978c29b1ccd,
  .menu-drawer,
  .menu-drawer__submenu,
  .mega-menu__content,
  .shopify-section.section,
  .page-section,
  .lmyc-teacher-training-main,
  .lmyc-tt-page,
  .lmyc-tt-page__bg,
  .lmyc-collab-hub,
  .lmyc-collab-hub__bg
):not(.footer):not(footer):not(.color-scheme-3) {
  --color-background: 255, 254, 244 !important;
  --gradient-background: var(--lmyc-page-cream) !important;
  background-color: var(--lmyc-page-cream) !important;
  background: var(--lmyc-page-cream) !important;
}

/* ── Banner sits under fixed header ── */
html:has(body .page-banner-section) {
  --header-height: 7rem;
}

body:has(.page-banner-section):not(.lmyc-smile-page) #site-header {
  z-index: 250 !important;
}

body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section {
  z-index: 0;
}

body:has(.page-banner-section):not(.lmyc-smile-page) #main-content {
  padding-top: 0;
}

body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section {
  position: relative;
  margin-top: calc(-1 * var(--header-height, 9rem));
  padding-top: var(--header-height, 9rem);
}

body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-text {
  position: absolute;
  z-index: 2;
}

body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-wrapper {
  position: relative;
}

body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section .page-banner-block--center {
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section .before-custom-img {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  line-height: 0;
  pointer-events: none;
  overflow: visible;
}

body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section .before-custom-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* Reliable banner aspect ratio (Collaborations mobile uses 50%, desktop 25%) */
body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section .page-banner-wrapper .media.ratio {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
}

body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section .page-banner-wrapper .media.ratio::before {
  display: block;
  content: "";
  width: 100%;
  height: 0;
  padding-bottom: var(--ratio-percent, 50%);
}

body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section .page-banner-wrapper .media.ratio > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center center !important;
}

@media screen and (max-width: 991px) {
  body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section {
    overflow: visible;
  }

  /* Mobile + tablet: keep the cream wave visible (matches Collaborations header) */
  body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section .before-custom-img {
    height: clamp(2.85rem, 10vw, 4.5rem);
  }

  body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section .before-custom-img img {
    width: 100%;
    height: 100%;
    min-height: clamp(2.85rem, 10vw, 4.5rem);
    object-fit: fill;
  }
}

@media screen and (max-width: 1499px) {
  html:has(body .page-banner-section) {
    --header-height: 6rem;
  }

  body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section {
    margin-top: calc(-1 * var(--header-height, 6rem));
    padding-top: var(--header-height, 6rem);
  }
}

@media screen and (max-width: 991px) {
  body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section .page-banner-text {
    top: auto;
    transform: none;
    max-width: 85%;
  }

  body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section .page-banner-text.page-banner-block--center {
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
  }
}

@media screen and (max-width: 991px) {
  body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section .page-banner-text.page-banner-block--center {
    top: 62%;
    transform: translate(-50%, -50%) !important;
  }

  /* Mobile/tablet banner — taller 50% crop like Collaborations */
  body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section .desktop-image-banner {
    display: none !important;
  }

  body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section .mobile-image-banner {
    display: block !important;
  }
}

@media screen and (min-width: 992px) {
  body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section .desktop-image-banner {
    display: block !important;
  }

  body:has(.page-banner-section):not(.lmyc-smile-page) .page-banner-section .mobile-image-banner {
    display: none !important;
  }
}

/* ── Transparent header over banner at top (desktop only) ── */
@media screen and (min-width: 1500px) {
  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top #site-header,
  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top #site-header .header-wrapper,
  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top #site-header sticky-header,
  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top #site-header .header,
  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top #site-header .header-attachment,
  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top .shopify-section-header-sticky .header-attachment:not(.attachment-none) {
    background: transparent !important;
    background-color: transparent !important;
  }

  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top #site-header .header-wrapper.gradient,
  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top #site-header sticky-header.gradient,
  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top #site-header .header-attachment.gradient {
    background: none !important;
  }

  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top sticky-header.header-wrapper.header-wrapper--border-bottom {
    border-bottom: 0.1rem solid rgba(255, 255, 255, 1) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  }

  /* White menu chrome at top (over photo banner) */
  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top .header--middle-center .header__menu-item,
  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top .header--middle-center .header__menu-item span,
  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top .header--middle-center summary.header__menu-item,
  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top .header--middle-center .header__menu-item .icon,
  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top .header--middle-center .header__menu-item .icon-caret,
  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top #site-header .header__inline-menu .header__menu-item,
  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top #site-header .header__inline-menu .header__menu-item span,
  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top #site-header sticky-header.header-attachment .header__menu-item,
  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top #site-header sticky-header.header-attachment .header__menu-item span {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  }

  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top .header--middle-center header-drawer .icon-hamburger path {
    stroke: #000000 !important;
  }

  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top .header--middle-center header-drawer .menu-drawer-container > .header__icon--menu {
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-right-color: rgba(255, 255, 255, 1) !important;
  }

  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top #site-header .lmyc-header-bar-logo-link {
    background-color: transparent !important;
    border-right-color: rgba(255, 255, 255, 1) !important;
  }

  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top .lmyc-header-bar-since {
    color: #D96BA2 !important;
  }

  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top .header--middle-center .header-button,
  body:has(.page-banner-section):not(.lmyc-smile-page).header-at-top .header--middle-center .header-button span {
    color: #ffffff !important;
  }
}

/* ── Scrolled: solid cream header ── */
body:has(.page-banner-section):not(.lmyc-smile-page):not(.header-at-top) #site-header,
body:has(.page-banner-section):not(.lmyc-smile-page):not(.header-at-top) #site-header .header-wrapper,
body:has(.page-banner-section):not(.lmyc-smile-page):not(.header-at-top) #site-header sticky-header,
body:has(.page-banner-section):not(.lmyc-smile-page):not(.header-at-top) #site-header .header-attachment,
body:has(.page-banner-section):not(.lmyc-smile-page):not(.header-at-top) #site-header .header {
  background-color: var(--lmyc-page-cream) !important;
  background: var(--lmyc-page-cream) !important;
}

body:has(.page-banner-section):not(.lmyc-smile-page):not(.header-at-top) #site-header .header-wrapper.gradient,
body:has(.page-banner-section):not(.lmyc-smile-page):not(.header-at-top) #site-header sticky-header.gradient,
body:has(.page-banner-section):not(.lmyc-smile-page):not(.header-at-top) #site-header .header-attachment.gradient {
  background: var(--lmyc-page-cream) !important;
}

body:has(.page-banner-section):not(.lmyc-smile-page):not(.header-at-top) sticky-header.header-wrapper.header-wrapper--border-bottom {
  border-bottom-color: rgba(0, 0, 0, 1) !important;
  box-shadow: none !important;
}

/* ── Mobile header grid — match class schedule (center logo, no lang column) ── */
@media screen and (max-width: 1499px) {
  body:has(.page-banner-section):not(.lmyc-smile-page) #site-header .lmyc-header-row {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "start center end" !important;
  }

  body:has(.page-banner-section):not(.lmyc-smile-page):not(:has(#hero)) #site-header .lmyc-header-row .header__heading,
  body:has(.page-banner-section):not(.lmyc-smile-page):not(:has(#hero)) #site-header .lmyc-header-row .header__heading-link,
  body:has(.page-banner-section):not(.lmyc-smile-page):not(:has(#hero)) #site-header .lmyc-header-row .lmyc-header-bar-logo-link {
    grid-area: center !important;
    justify-self: center !important;
    align-self: center !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
}

@media screen and (min-width: 1500px) {
  body:has(.page-banner-section):not(.lmyc-smile-page) #site-header .lmyc-header-row {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "drawer nav end" !important;
  }
}