/* ===== MONDOSOL GLOBAL CSS — VIA LARGE-HEADER ===== */

/* ============================================================
   1. HEADER MOBILE FIX — force logo + CTA in ONE ROW
   ============================================================ */
@media (max-width: 767px) {
  header .wp-block-group > .wp-block-columns,
  header > div > .wp-block-columns,
  .site-header .wp-block-columns,
  .wp-site-blocks header .wp-block-columns,
  header .wp-block-columns.is-not-stacked-on-mobile {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
  }
  header .wp-block-group.alignfull { padding: 8px 12px !important; }
  header .wp-block-columns > .wp-block-column:first-child,
  header .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column:first-child {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 50% !important;
  }
  header .wp-block-columns > .wp-block-column:last-child,
  header .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column:last-child {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  header .wp-block-column {
    min-width: 0 !important;
    overflow: visible !important;
    width: auto !important;
  }
  header .wp-block-search,
  header .wp-block-woocommerce-payments-multi-currency-switcher {
    display: none !important;
  }
  header .wp-block-column:first-child img,
  header .wp-block-site-logo img {
    max-height: 40px !important;
    width: auto !important;
    height: auto !important;
  }
  header .wp-block-button__link {
    font-size: 0.72rem !important;
    padding: 6px 11px !important;
    white-space: nowrap !important;
  }
  header .wc-block-customer-account svg,
  header .woocommerce-customer-account svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ============================================================
   2. SHOP PAGE — hide WooCommerce default title + breadcrumb
   ============================================================ */
.woocommerce-breadcrumb { display: none !important; }
.woocommerce-products-header__title.page-title,
.woocommerce-products-header,
.woocommerce-page h1.page-title,
.woocommerce .woocommerce-products-header { display: none !important; }

@media (max-width: 767px) {
  .woocommerce-page .entry-content .wp-block-image img,
  body.woocommerce-page .wp-block-image img,
  .page-template-page-woocommerce .wp-block-image img {
    max-height: 280px !important;
    object-fit: cover !important;
    width: 100% !important;
  }
}

/* ============================================================
   3. PRODUCT GRID — single col mobile, 2-col tablet+
   ============================================================ */
@media (max-width: 599px) {
  .wc-block-grid__products,
  ul.products,
  .wp-block-woocommerce-product-collection ul,
  .wp-block-post-template {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
}
@media (min-width: 600px) {
  .wc-block-grid__products,
  ul.products,
  .wp-block-woocommerce-product-collection ul,
  .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
    display: grid !important;
  }
}

.wc-block-grid__product,
ul.products li.product,
.wp-block-post-template li {
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  overflow: hidden !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link,
.add_to_cart_button,
.single_add_to_cart_button,
a.button.add_to_cart,
button.add_to_cart_button {
  background-color: #c9a84c !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.add_to_cart_button:hover,
button.add_to_cart_button:hover {
  background-color: #b8880f !important;
}

/* ============================================================
   4. FOOTER — mobile stacking
   ============================================================ */
@media (max-width: 767px) {
  footer .wp-block-columns, .site-footer .wp-block-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  footer .wp-block-column, .site-footer .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
    min-width: 100% !important;
    padding: 16px 24px 8px !important;
    margin: 0 !important;
  }
}
@media screen and (max-width: 480px) {
  footer .wp-block-columns.course-footer-links-vertical-space { margin-bottom: 44px; }
  footer .wp-block-column, footer .wp-block-group.is-layout-flex {
    flex-direction: column;
    align-items: baseline;
    gap: 10px;
  }
}

/* ============================================================
   5. GET STARTED / HEADER BUTTON — force gold
   ============================================================ */
header .wp-block-button__link,
.mondo-header-cta .wp-block-button__link,
.wp-block-template-part header .wp-block-button__link {
  background-color: #c9a84c !important;
  color: #fff !important;
  border-color: #c9a84c !important;
}

/* ============================================================
   6. WOOCOMMERCE LOGIN + REGISTER SUBMIT — gold
   ============================================================ */
.woocommerce-form-login__submit,
.woocommerce-form-login .button,
#customer_login .button,
#customer_login input[type="submit"],
.woocommerce-form-register__submit,
.woocommerce-form-register .button,
.woocommerce button[name="login"] {
  background-color: #c9a84c !important;
  color: #fff !important;
  border: none !important;
}

/* ============================================================
   7. WOOCOMMERCE CART: RETURN TO SHOP — navy
   ============================================================ */
.wc-block-cart__return-to-shop a,
.wc-block-cart__return-to-shop button,
.wc-block-cart__return-to-shop .wc-block-components-button,
.woocommerce-cart .return-to-shop a,
.woocommerce-cart .return-to-shop .button {
  background-color: #1b2a4a !important;
  color: #fff !important;
  border-color: #1b2a4a !important;
}

/* ============================================================
   8. SENSEI LOCKED LESSON: SIGN IN button — navy
   ============================================================ */
.sensei-course-theme__locked-lesson-actions a,
.sensei-course-theme__locked-lesson-actions .woocommerce-Button,
.sensei-course-theme__locked-lesson-actions .button,
.sensei-upsell-course a.button,
.sensei-upsell-course .woocommerce-Button {
  background-color: #1b2a4a !important;
  color: #fff !important;
  border-color: #1b2a4a !important;
}

/* ============================================================
   9. SENSEI QUIZ BUTTONS — gold
   ============================================================ */
.sensei-course-theme .sensei-quiz__start-button,
.sensei-course-theme .sensei-quiz__complete-quiz-button,
.sensei-course-theme .sensei-quiz__restart-button,
.sensei-course-theme .sensei-quiz__submit-button,
.sensei-course-theme .sensei-course-progress__complete-lesson-button {
  background-color: #c9a84c !important;
  color: #fff !important;
  border-color: #c9a84c !important;
}

/* ============================================================
   10. ALL REMAINING WOOCOMMERCE BLUE BUTTONS — gold
   ============================================================ */
.woocommerce .woocommerce-Button:not(.outlined),
.woocommerce .button:not(.outlined),
.woocommerce a.button:not(.outlined),
.woocommerce button.button:not(.outlined),
.woocommerce input.button,
.wc-block-components-button.contained {
  background-color: #c9a84c !important;
  color: #fff !important;
}

/* ============================================================
   11. FEATURE LIST ITEMS — gold checkmark styling
   ============================================================ */
.is-style-checkmark-list li,
.course-features li {
  list-style: none !important;
  padding-left: 1.8em !important;
  position: relative !important;
  margin-bottom: 0.5em !important;
}
.is-style-checkmark-list li::before,
.course-features li::before {
  content: "\2713" !important;
  position: absolute !important;
  left: 0 !important;
  color: #c9a84c !important;
  font-weight: bold !important;
}

/* ============================================================
   12. FEATURE LIST ITEMS: bordered pill boxes — gold accent
   ============================================================ */
.wp-block-list.is-style-checkmark-list li {
  border: 1px solid #c9a84c !important;
  border-radius: 8px !important;
  padding: 0.6em 1em 0.6em 2.4em !important;
  margin-bottom: 0.5em !important;
  background: transparent !important;
  position: relative !important;
  list-style: none !important;
}
.wp-block-list.is-style-checkmark-list li::before {
  content: "\2713" !important;
  position: absolute !important;
  left: 0.8em !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #c9a84c !important;
  font-weight: bold !important;
}

/* ============================================================
   13. HERO-HEADER GAP — remove on course/Sensei pages
   ============================================================ */
.sensei-course-theme .entry-content > .wp-block-cover:first-child,
body.single-course .wp-block-cover:first-child,
body.single-sensei_course .wp-block-cover:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ============================================================
   14. COURSE HERO MOBILE — stack mascot + text vertically
   ============================================================ */
@media (max-width: 781px) {
  .wp-block-media-text {
    display: block !important;
  }
  .wp-block-media-text .wp-block-media-text__media,
  .wp-block-media-text .wp-block-media-text__content {
    width: 100% !important;
    float: none !important;
    display: block !important;
    grid-column: unset !important;
  }
  .wp-block-media-text .wp-block-media-text__media {
    margin-bottom: 1.5rem !important;
  }
  .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
    order: -1 !important;
  }
}

/* ============================================================
   15. COURSE LANDING PAGES — image cap, hero, media ratio, feature list
   ============================================================ */
/* 15a. Override any incorrect max-height cap on media-text images */
.wp-block-media-text .wp-block-media-text__media img {
  max-height: none !important;
  height: auto !important;
}
/* 15b. Hero fills to the fold on course pages */
body.single-course .mondo-course-hero,
body.single-course .wp-block-cover.alignfull {
  min-height: 100vh !important;
}
/* 15c. Desktop: image column wider than text (1.5fr vs 1fr) */
@media (min-width: 782px) {
  .wp-block-media-text { grid-template-columns: 1.5fr 1fr !important; }
  .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 1.5fr !important; }
}
/* 15d. Course pages: gold checkmarks on feature list items */
body.single-course .wp-block-list li {
  list-style: none !important;
  position: relative !important;
  padding-left: 1.8em !important;
}
body.single-course .wp-block-list li::before {
  content: "\2714" !important;
  position: absolute !important;
  left: 0 !important;
  top: .05em !important;
  color: #c9a84c !important;
  font-weight: 900 !important;
}
/* 15e. List bottom spacing — prevent last item overlapping next block */
body.single-course .wp-block-list { margin-bottom: 2rem !important; }

.mondo-header-cta .wp-block-button__link{font-family:'Jost',sans-serif!important;font-weight:800!important;letter-spacing:.02em!important;text-transform:none!important}
@keyframes mondo-header-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.mondo-header-cta .wp-block-button__link{animation:mondo-header-float 2.6s ease-in-out infinite}