/*
Theme Name:   BrainHeartHealth Divi
Template:     Divi
Version:      1.0.0
Description:  Divi child theme for BrainHeartHealth — guide page styles and overrides.
*/

/* ── Brand variables ── */
:root {
  --bhh-blue:   #1D49A7;
  --bhh-red:    #A72630;
  --bhh-text:   #2d3748;
  --bhh-muted:  #718096;
  --bhh-light:  #f7f9fc;
  --bhh-border: #e8ecf0;
}

/* ── Global base font size ── */
body { font-size: 16px !important; }

/* ── Global typography: Work Sans everywhere ── */
body, body *, input, button, select, textarea,
.et_pb_text, .et_pb_blurb_description, .et_pb_module, .et-waypoint,
h1, h2, h3, h4, h5, h6,
.et_pb_title_container h1, .et_pb_title_container h2,
.entry-title, .page-title, .et_pb_slide_title,
.et_pb_blurb_title, .et_pb_module_header,
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3,
.et_pb_text h4, .et_pb_text h5, .et_pb_text h6,
#main-header, #main-header a,
.et_pb_menu, .et_pb_menu a,
nav, nav a {
  font-family: 'Work Sans', system-ui, -apple-system, sans-serif !important;
}

/* ══════════════════════════════════════════════
   NAV — Logo size + site name beside logo
   ══════════════════════════════════════════════ */
/* Constrain the logo image Divi renders at full source size */
#main-header #logo {
  height: 56px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
}
/* Prevent logo <a> from shrinking in flex container */
#main-header .logo_container > a {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}
/* Header height */
#main-header { height: 72px !important; }
.et_menu_container { height: 72px !important; }

/* Stretch header container edge-to-edge with padding */
#main-header .container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 72px !important;
  box-sizing: border-box !important;
}
/* Fix nav position — override Divi's JS-injected padding-left */
.et_menu_container {
  display: flex !important;
  align-items: center !important;
}
#et-top-navigation {
  padding-left: 0 !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
/* Wordmark text beside logo */
#main-header .logo_container {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
#main-header .logo_container > a::after {
  content: 'Brain Heart Health';
  font-family: 'Work Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--bhh-blue) !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  margin-left: 10px !important;
}

/* ══════════════════════════════════════════════
   NAV — Stronger hover on all nav links
   ══════════════════════════════════════════════ */
#top-menu > li > a,
#et-top-navigation ul.nav > li > a {
  border-bottom: 3px solid transparent !important;
  transition: color .15s, border-color .15s, background .15s !important;
  padding-bottom: 3px !important;
}
#top-menu > li > a:hover,
#et-top-navigation ul.nav > li > a:hover {
  color: var(--bhh-blue) !important;
  border-bottom-color: var(--bhh-blue) !important;
  background: rgba(29,73,167,.04) !important;
}
#top-menu > li.current-menu-item > a,
#top-menu > li.current_page_item > a,
#top-menu > li.current-menu-ancestor > a {
  color: var(--bhh-blue) !important;
  border-bottom-color: var(--bhh-blue) !important;
}

/* ══════════════════════════════════════════════
   NAV — Mobile hamburger label "Menu"
   ══════════════════════════════════════════════ */
.mobile_menu_bar::before {
  font-family: 'Work Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--bhh-blue) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
  content: 'Menu ▾' !important;
}
@media (min-width: 981px) {
  .mobile_menu_bar { display: none !important; }
}

/* ── Mobile: hide Divi sub-menu expansion (SMG guide nav handles section links) ── */
@media (max-width: 980px) {
  #main-header .et_mobile_menu li ul,
  #main-header .et_mobile_menu .menu-item-has-children > ul {
    display: none !important;
  }

  /* Flush logo left, hamburger right */
  #main-header .container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 20px !important;
  }
  #main-header .logo_container {
    margin-left: 0 !important;
    flex: 1 !important;
  }
  #et-top-navigation {
    margin-left: auto !important;
    flex: none !important;
  }
}

/* ── Footer: override Divi's et_pb_bg_layout_light inside footer ── */
.et-l--footer .et_pb_bg_layout_light,
.et-l--footer .et_pb_bg_layout_light p,
.et-l--footer .et_pb_bg_layout_light span,
.et-l--footer .et_pb_bg_layout_light h1,
.et-l--footer .et_pb_bg_layout_light h2,
.et-l--footer .et_pb_bg_layout_light h3,
.et-l--footer .et_pb_bg_layout_light h4,
.et-l--footer .et_pb_bg_layout_light div {
  color: rgba(255,255,255,0.85) !important;
}
.et-l--footer .et_pb_bg_layout_light h3 { color: #fff !important; }
.et-l--footer .et_pb_bg_layout_light a { color: rgba(255,255,255,0.7) !important; }
.et-l--footer .et_pb_bg_layout_light a:hover { color: #fff !important; }

/* ── Main header: always sticky on all screen sizes ── */
#main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}
#page-container { padding-top: 72px !important; }



/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES  — BrainHeartHealth
   mobile-global-reset-bhh
   ══════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL MOBILE RESET ─────────────────────────────── */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; }

  /* All images scale down, never overflow */
  img, video, iframe { max-width: 100% !important; height: auto !important; }

  /* Divi header logo: cap size */
  #logo { max-height: 50px !important; width: auto !important; }
  .logo_container { max-width: 60% !important; overflow: visible !important; }

  /* Inline flex containers in Divi text modules: wrap */
  .et_pb_text_inner > [style*="display:flex"],
  .et_pb_text_inner > [style*="display: flex"],
  .et_pb_column_inner > [style*="display:flex"],
  .et_pb_column > [style*="display:flex"] {
    flex-wrap: wrap !important;
  }

  /* Inline grid containers: single column */
  .et_pb_text_inner > [style*="grid-template-columns"],
  .et_pb_column > [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Divi columns: ensure they stack (force full-width) */
  .et_pb_column { width: 100% !important; }

  /* Tables: scrollable */
  table { display: block; overflow-x: auto; max-width: 100%; }
}

/* ── 2. HOME PAGE ────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hero intro image: only prevent overflow — do NOT override Divi's width sizing */
  img { max-width: 100% !important; }

  /* Guide cards grid on home: single column */
  .bhh-guide-grid {
    grid-template-columns: 1fr !important;
  }

  /* Hero text stacking */
  .bhh-hero-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Card number badges */
  .bhh-card-num { font-size: 14px !important; }

  /* Stat numbers: scale down */
  .bhh-stat-num { font-size: clamp(32px, 10vw, 48px) !important; }
}

/* ── 3. CONTACT PAGE ─────────────────────────────────────── */
@media (max-width: 768px) {
  /* Contact detail rows (icon + text) — keep as row, just reduce size */
  .contact-detail {
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .contact-detail svg,
  .contact-detail img { flex-shrink: 0 !important; width: 20px !important; }

  /* QR code section: stack QR + info */
  .contact-qr { flex-direction: column !important; align-items: center !important; }
  .contact-qr img { max-width: 140px !important; margin: 0 auto 12px !important; }

  /* Contact hero label */
  .contact-hero .contact-label { font-size: 14px !important; }

  /* Research team grid */
  .research-team-grid, [class*="team-grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 4. FOR PATIENTS PAGE (ID 437) ──────────────────────── */
@media (max-width: 768px) {
  body.page-id-437 {

    /* Icon + text card rows: stack on narrow */
    .et_pb_text_inner [style*="display:flex"][style*="gap"],
    .et_pb_text_inner div[style*="align-items"] {
      flex-wrap: wrap !important;
    }

    /* Section icon + heading: keep row but make icon smaller */
    div[style*="flex-shrink:0"][style*="font-size:36px"] {
      font-size: 26px !important;
    }

    /* Self-assessment scale sliders: keep as-is (intentional) */
    /* Range input: full width on mobile */
    input[type="range"] { width: 100% !important; }

    /* Score result boxes */
    div[style*="display:flex"][style*="flex-wrap"] {
      gap: 8px !important;
    }

    /* Category score pills: wrap */
    div[style*="display:flex"][style*="border-radius"] {
      flex-wrap: wrap !important;
    }
  }
}

/* ── 5. FOR CAREGIVERS PAGE ─────────────────────────────── */
@media (max-width: 768px) {

  /* Conversation starter 2-col grid → 1 col */
  .fc-starters-grid,
  [class*="fc-starter"],
  [class*="conversation"] {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  /* Any inline 2-col grids on caregivers page */
  body.page-template .et_pb_text_inner [style*="grid-template-columns: 1fr 1fr"],
  body.page-template .et_pb_text_inner [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Info card with icon + text */
  .caregiver-card,
  [class*="care-card"] {
    flex-direction: column !important;
  }

  /* Signs/symptoms list items */
  .caregiver-symptoms li,
  .et_pb_text_inner li { font-size: 16px !important; line-height: 1.6 !important; }
}

/* ── 6. CONNECT TO SERVICES (CTS) PAGE ─────────────────── */
@media (max-width: 768px) {

  /* Service cards: ensure single column layout */
  .cts-service-card,
  [class*="service-card"] { width: 100% !important; max-width: 100% !important; }

  /* Image + text section rows: stack */
  .cts-section-row,
  [class*="cts-row"] { flex-direction: column !important; }

  /* PHP-generated service list items */
  .cts-service-item { flex-direction: column !important; align-items: flex-start !important; }
  .cts-php-label { font-size: 14px !important; }

  /* Section icons: cap size */
  .cts-section-icon img { max-height: 120px !important; width: auto !important; }
}

/* ── 7. UNIVERSAL: Divi section/row/column mobile stacking ─ */
@media (max-width: 480px) {

  /* Ensure small phones never have content wider than screen */
  .et_pb_section, .et_pb_row, .et_pb_column { max-width: 100% !important; }

  /* Reduce excessive padding on mobile */
  .et_pb_section { padding-top: 30px !important; padding-bottom: 30px !important; }
  .et_pb_row { padding-left: 16px !important; padding-right: 16px !important; }

  /* Font size minimums */
  p, li, span, div { font-size: max(inherit, 14px); }
}

/* ── IMAGE SIZE REDUCTION: Mobile (replaces bad width:auto rules) ─ */
@media (max-width: 768px) {

  /* Safe global: prevent overflow, maintain aspect ratio — NO width override */
  img, video { max-width: 100% !important; height: auto !important; }

  /* ── Partner / sponsor logos: significantly smaller on mobile ── */
  img[src*="logo-brain-heart"],
  img[src*="logo-bruyere"],
  img[src*="logo-ccaer"],
  img[src*="logo-great-river"],
  img[src*="logo-archipel"],
  img[src*="bhh-pat-logo"],
  img[src*="uohi-logo"],
  img[src*="ontario-caregiver"],
  img[src*="caregiver.on.ca"] {
    max-height: 44px !important;
    max-width: 120px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* ── Divi logo module (#logo in header): constrain ── */
  #logo { max-height: 44px !important; width: auto !important; }

  /* ── For-patients & For-caregivers: content illustrations ── */
  body.page-id-437 .et_pb_image img,
  body.page-id-1108 .et_pb_image img,
  body.page-id-1109 .et_pb_image img {
    max-width: 65% !important;
    max-height: 220px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* ── Connect-to-services section icons: restrain ── */
  img[src*="smg-cts"] {
    max-width: 55% !important;
    max-height: 200px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* ── Home page: section illustration ── */
  img[src*="bhh-intro"] {
    max-width: 70% !important;
    max-height: 200px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

/* ── Home page: center guide buttons on mobile ── */
@media (max-width: 768px) {
  body.home .et_pb_button_0_wrapper,
  body.home .et_pb_button_1_wrapper {
    text-align: center !important;
  }
}

/* ── Home page section cards: icon beside title (right-aligned) ── */
.bhh-card-icon { display: none; }  /* hide block-level icon div */

.bhh-card h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bhh-card h3::after { font-size: 1.3em; line-height: 1; flex-shrink: 0; }

.bhh-card:has([href*="introduction"]) h3::after  { content: "\1F4D6"; }
.bhh-card:has([href*="nutrition"])    h3::after  { content: "\1F957"; }
.bhh-card:has([href*="exercise"])     h3::after  { content: "\1F3C3"; }
.bhh-card:has([href*="mental-health"]) h3::after { content: "\1F9E0"; }
.bhh-card:has([href*="social-support"]) h3::after { content: "\1F91D"; }
.bhh-card:has([href*="daily-wellness"]) h3::after { content: "\2B50"; }

/* ── Header logo (red+blue brain-heart): constrain on mobile ── */
@media (max-width: 768px) {
  #logo, .logo img,
  img[src*="half-heart-half-brain"],
  img[src*="brain-heart-health-logo"] {
    max-height: 36px !important;
    width: auto !important;
  }
  #et-top-navigation .logo_container { line-height: 1 !important; }
}