/* ===================================
   She Reclaimed Life - Custom Styles
   =================================== */

/* Import Open Sans font */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");

/* Set Open Sans as body font (except for alt-font cursive elements) */
body,
p,
li,
div:not(.alt-font),
span:not(.alt-font),
a {
  font-family: "Open Sans", sans-serif !important;
}

/* Ensure alt-font (cursive) is preserved */
.alt-font {
  font-family: var(--alt-font) !important;
}

/* Prevent word hyphenation but allow wrapping */
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
div,
span,
a {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Dark overlay for testimonial section (index.html) */
#testimonial-section::before,
#whychoose::before,
#founderspricing::before,
.darkenphoto::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}
#currentoffers::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 0;
}

/* Dark overlay for hero section (services.html) */
.swiper-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.sw-caption {
  position: relative;
  z-index: 2;
}

/* Fix text wrapping in offering cards */
.offering-card-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.offering-card-content p,
.offering-card-content .flex-grow-1 {
  min-width: 0;
  width: 100%;
}

.offering-card-content .flex-grow-1 p {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

section.small {
  padding-top: 50px;
}

/* Content spacing after header (for templated pages) */
#content.header-spacing {
  margin-top: 120px !important;
}

/* Reduce header spacing on mobile since header is smaller */
@media (max-width: 991px) {
  #content.header-spacing {
    margin-top: 70px !important;
  }
}

/* Ensure consistent font sizes in .small sections (small is for padding only) */
section.small p:not(.lead),
section.small li {
  font-size: 16px !important;
}

/* Smaller text in subfooter */
.subfooter,
.subfooter * {
  font-size: 14px !important;
}

/* Consistent paragraph text size - 18px throughout site */
p {
  font-size: 16px;
}

/* Override .lead class to match standard paragraphs */
.lead {
  font-size: 18px !important;
  font-weight: normal !important;
}

/* Standardize all button styling */
.btn-main,
.btn-light-trans,
.btn-custom {
  font-family: "Open Sans", sans-serif !important;
  font-size: 16px !important;
  padding: 12px 30px !important;
  font-weight: 600 !important;
}

/* Active menu item styling */
#mainmenu li a.menu-item.active {
  position: relative;
  padding-bottom: 5px;
  color: #f17812 !important;
}

#mainmenu li a.menu-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #f17812;
  border-radius: 2px;
}

/* Ensure active menu item is visible on transparent header (home page) */
header.transparent #mainmenu li a.menu-item.active {
  color: #f17812 !important;
}

/* Remove underline from active items in dropdown/submenu */
#mainmenu li ul li a.menu-item.active::after {
  display: none !important;
}

/* Submenu hover - white text instead of orange */
#mainmenu li ul li a.menu-item:hover {
  color: #ffffff !important;
  background-color: #f17812;
}

/* Indicate submenu items that have nested submenus */
#mainmenu li ul li:has(ul) > a.menu-item::after {
  content: " \203A";
  font-size: 18px;
  font-weight: bold;
  margin-left: 5px;
  opacity: 0.7;
}

img.small-header {
  padding: 10px 0;
}

.footer-small {
  padding-top: 0px;
  margin-top: 0px;
  background-color: #fff !important;
}

.footer-small .subfooter {
  margin-top: 0px;
}

/* Blog share buttons styling */
.blog-share-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.blog-share-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #f5f5f5;
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
}

.blog-share-buttons a:hover {
  background-color: var(--color-2, #f17812);
  color: #fff !important;
  transform: translateY(-2px);
}

.blog-share-buttons a:hover i {
  color: #fff !important;
}

.blog-share-buttons a i {
  font-size: 18px;
}

/* Mobile share button - only shows on supported devices */
.mobile-share-btn {
  display: none;
}

@media (max-width: 768px) {
  .mobile-share-btn {
    display: inline-flex;
  }
}

/* Tertiary color button - light teal background with black text */
.btn-main.btn-tertiary {
  background-color: var(--tertiary-color, #d3f5f6) !important;
  border-color: var(--tertiary-color, #d3f5f6) !important;
  color: #000 !important;
}

.btn-main.btn-tertiary:hover {
  background-color: var(--secondary-color, #4cc3c7) !important;
  border-color: var(--secondary-color, #4cc3c7) !important;
  color: #000 !important;
}

/* Mobile hero image - position left so face isn't cut off */
@media (max-width: 991px) {
  .swiper-inner {
    background-position: left center !important;
  }
}

@media (max-width: 767px) {
  .swiper-inner.bgcustom {
    background-position-x: 30% !important;
  }
}

/* Topbar text - dark by default on all pages */
.topbar-info-text {
  color: var(--title-font-color) !important;
  transition: color 0.3s ease;
}

/* White topbar text ONLY on home page (transparent header) before scroll */
header.transparent .topbar-info-text {
  color: #ffffff !important;
}

/* Dark text after scrolling on home page */
header.transparent.smaller .topbar-info-text {
  color: var(--title-font-color) !important;
}

/* =============================================
   Mobile Header Fixes
   ============================================= */
@media (max-width: 991px) {
  /* Reduce header height on mobile - remove extra padding */
  header.header-mobile {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    z-index: 19999 !important;
  }

  /* Remove topbar padding on mobile to reduce height */
  header.header-mobile #topbar {
    display: none !important;
  }

  /* Compact logo area */
  header.header-mobile #logo {
    padding: 10px 0 !important;
  }

  header.header-mobile #logo img {
    max-height: 50px !important;
  }

  /* Fix de-flex spacing on mobile */
  header.header-mobile .de-flex {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  /* Ensure menu button is clickable - increase z-index and touch target */
  header.header-mobile #menu-btn {
    z-index: 10000 !important;
    position: relative !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation !important;
    color: #222 !important;
  }

  /* Ensure the menu side area doesn't block clicks */
  header.header-mobile .menu_side_area {
    z-index: 9999 !important;
    position: relative !important;
  }

  /* When menu is open, use white background with dark text */
  header.header-mobile.menu-open,
  header.header-light.header-mobile.menu-open,
  header.transparent.header-mobile.menu-open {
    background: #ffffff !important;
  }

  header.header-mobile.menu-open #menu-btn,
  header.header-light.header-mobile.menu-open #menu-btn,
  header.transparent.header-mobile.menu-open #menu-btn {
    color: #222222 !important;
  }

  header.header-mobile.menu-open #mainmenu li a.menu-item,
  header.header-light.header-mobile.menu-open #mainmenu li a.menu-item,
  header.transparent.header-mobile.menu-open #mainmenu li a.menu-item {
    color: var(--title-font-color) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
  }

  header.header-mobile.menu-open #mainmenu li a.menu-item.active,
  header.header-light.header-mobile.menu-open #mainmenu li a.menu-item.active,
  header.transparent.header-mobile.menu-open #mainmenu li a.menu-item.active {
    color: #f17812 !important;
  }

  /* Keep logo normal (no invert) on white background */
  header.header-mobile.menu-open .logo-mobile,
  header.header-light.header-mobile.menu-open .logo-mobile,
  header.transparent.header-mobile.menu-open .logo-mobile {
    filter: none !important;
  }

  /* Fix submenu display on mobile - white background */
  header.header-mobile.menu-open #mainmenu li ul,
  header.header-light.header-mobile.menu-open #mainmenu li ul,
  header.transparent.header-mobile.menu-open #mainmenu li ul {
    background: transparent !important;
  }

  header.header-mobile.menu-open #mainmenu li ul li a.menu-item,
  header.header-light.header-mobile.menu-open #mainmenu li ul li a.menu-item,
  header.transparent.header-mobile.menu-open #mainmenu li ul li a.menu-item {
    color: #555555 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
  }

  /* Fix border colors on mobile menu items */
  header.header-mobile.menu-open #mainmenu li,
  header.header-light.header-mobile.menu-open #mainmenu li,
  header.transparent.header-mobile.menu-open #mainmenu li {
    border-color: rgba(0, 0, 0, 0.1) !important;
  }

  /* ---- All headers on mobile use white background ---- */

  /* Transparent header (home page) - use white on mobile like other pages */
  header.transparent,
  header.transparent.header-mobile {
    background: #ffffff !important;
  }

  header.transparent #menu-btn,
  header.transparent.header-mobile #menu-btn {
    color: #222222 !important;
  }

  header.transparent #mainmenu li a.menu-item,
  header.transparent.header-mobile #mainmenu li a.menu-item {
    color: var(--title-font-color) !important;
  }

  header.transparent #mainmenu li a.menu-item.active,
  header.transparent.header-mobile #mainmenu li a.menu-item.active {
    color: #f17812 !important;
  }

  /* Keep logo normal on white background */
  header.transparent .logo-mobile,
  header.transparent.header-mobile .logo-mobile {
    filter: none !important;
  }

  /* Header-light on mobile - ensure proper contrast */
  header.header-light {
    background: #ffffff !important;
  }

  header.header-light #menu-btn {
    color: #222222 !important;
  }
}

/* Blog card text wrapping fix */
.blog-card-link {
  min-width: 0;
}

.blog-card-link .p-4 {
  min-width: 0;
}

.blog-card-link h4,
.blog-card-link p {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* =============================================
   Group Coaching - Hide Week Circles on Mobile
   ============================================= */
@media (max-width: 767px) {
  .curriculum-week-circle {
    display: none !important;
  }

  /* Adjust content when circle is hidden */
  .curriculum-week-circle + .flex-grow-1 {
    width: 100%;
  }
}

/* =============================================
   Mobile Menu - Show All Submenu Items
   ============================================= */
@media (max-width: 991px) {
  /* Force show all submenu items when mobile menu is open */
  header.header-mobile.menu-open #mainmenu li ul,
  header.header-light.header-mobile.menu-open #mainmenu li ul,
  header.transparent.header-mobile.menu-open #mainmenu li ul {
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    padding-left: 15px !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* Show nested submenus (like Workshops > DV Organizations) */
  header.header-mobile.menu-open #mainmenu li ul li ul,
  header.header-light.header-mobile.menu-open #mainmenu li ul li ul,
  header.transparent.header-mobile.menu-open #mainmenu li ul li ul {
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding-left: 15px !important;
  }

  /* Style submenu items */
  header.header-mobile.menu-open #mainmenu li ul li,
  header.header-light.header-mobile.menu-open #mainmenu li ul li,
  header.transparent.header-mobile.menu-open #mainmenu li ul li {
    border: none !important;
  }

  header.header-mobile.menu-open #mainmenu li ul li a.menu-item,
  header.header-light.header-mobile.menu-open #mainmenu li ul li a.menu-item,
  header.transparent.header-mobile.menu-open #mainmenu li ul li a.menu-item {
    padding: 8px 0 !important;
    font-size: 14px !important;
    border-bottom: solid 1px rgba(0, 0, 0, 0.05) !important;
  }

  /* Nested submenu styling */
  header.header-mobile.menu-open #mainmenu li ul li ul li a.menu-item,
  header.header-light.header-mobile.menu-open #mainmenu li ul li ul li a.menu-item,
  header.transparent.header-mobile.menu-open #mainmenu li ul li ul li a.menu-item {
    font-size: 13px !important;
    color: #666666 !important;
  }

  /* Hide the expand/collapse arrows since we're showing all items */
  header.header-mobile.menu-open #mainmenu li > span,
  header.header-mobile.menu-open #mainmenu li ul li > span {
    display: none !important;
  }
}

/* =============================================
   Font Color Fixes - Replace Blue with Dark Gray
   ============================================= */

/* Override id-color (primary blue) to use dark gray instead */
.id-color,
h1.id-color,
h2.id-color,
h3.id-color,
h4.id-color,
h5.id-color,
h6.id-color {
  color: rgb(32, 32, 32) !important;
}

/* =============================================
   Employee Wellness Workshops - Card Borders
   ============================================= */
.employee-wellness-card {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}