/* =============================================================
   lp-global.css — Life Positive: Typography + Responsive Fix
   Drop this file in: public/assets/css/lp-global.css
   Then add ONE <link> tag in each page (see instructions below)
   ============================================================= */

/* ---------------------------------------------------------------
   1. GOOGLE FONTS IMPORT
   Heading  : Zilla Slab  (h1–h3)
   Subheading: Nunito     (h4–h6)
   Body/Para : Lato       (p, li, span, labels)
   --------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;600;700&family=Nunito:wght@400;500;600;700&family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap');

/* ---------------------------------------------------------------
   2. CSS VARIABLES — single source of truth
   --------------------------------------------------------------- */
:root {
  --font-heading    : 'Zilla Slab', Georgia, serif;
  --font-subheading : 'Nunito', sans-serif;
  --font-body       : 'Lato', sans-serif;

  /* Desktop sizes */
  --fs-h1  : 2.6rem;   /* 41.6px */
  --fs-h2  : 2.1rem;   /* 33.6px */
  --fs-h3  : 1.75rem;  /* 28px   */
  --fs-h4  : 1.4rem;   /* 22.4px */
  --fs-h5  : 1.15rem;  /* 18.4px */
  --fs-h6  : 1rem;     /* 16px   */
  --fs-p   : 1rem;     /* 16px   */
  --fs-sm  : 0.9rem;   /* 14.4px */

  --lh-heading : 1.25;
  --lh-body    : 1.75;

  --color-text    : #333333;
  --color-muted   : #666666;
  --color-primary : #007bff;
}

/* ---------------------------------------------------------------
   3. GLOBAL RESET — override all per-page inline font rules
   --------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;  /* prevent horizontal scroll sitewide */
}

body {
  font-family : var(--font-body) !important;
  font-size   : var(--fs-p);
  line-height : var(--lh-body);
  color       : var(--color-text);
  overflow-x  : hidden;
}

/* ---------------------------------------------------------------
   4. HEADING TYPOGRAPHY
   h1–h3  → Zilla Slab  (strong editorial feel)
   h4–h6  → Nunito      (friendly, readable subheadings)
   --------------------------------------------------------------- */
h1, .h1 {
  font-family : var(--font-heading) !important;
  font-size   : var(--fs-h1) !important;
  font-weight : 700 !important;
  line-height : var(--lh-heading) !important;
  color       : var(--color-text);
}

h2, .h2 {
  font-family : var(--font-heading) !important;
  font-size   : var(--fs-h2) !important;
  font-weight : 700 !important;
  line-height : var(--lh-heading) !important;
  color       : var(--color-text);
}

h3, .h3 {
  font-family : var(--font-heading) !important;
  font-size   : var(--fs-h3) !important;
  font-weight : 600 !important;
  line-height : var(--lh-heading) !important;
  color       : var(--color-text);
}

h4, .h4 {
  font-family : var(--font-subheading) !important;
  font-size   : var(--fs-h4) !important;
  font-weight : 700 !important;
  line-height : 1.35 !important;
  color       : var(--color-text);
}

h5, .h5 {
  font-family : var(--font-subheading) !important;
  font-size   : var(--fs-h5) !important;
  font-weight : 600 !important;
  line-height : 1.4 !important;
  color       : var(--color-text);
}

h6, .h6 {
  font-family : var(--font-subheading) !important;
  font-size   : var(--fs-h6) !important;
  font-weight : 600 !important;
  line-height : 1.4 !important;
  color       : var(--color-text);
}

/* ---------------------------------------------------------------
   5. BODY TEXT TYPOGRAPHY
   --------------------------------------------------------------- */
p, li, td, th, label, span, blockquote {
  font-family : var(--font-body) !important;
  font-size   : var(--fs-p);
  line-height : var(--lh-body);
  color       : var(--color-muted);
}

/* Keep anchor colour consistent */
a {
  font-family : var(--font-body) !important;
}

/* ---------------------------------------------------------------
   6. LIFE POSITIVE SECTION TITLES  (.section-title, .section-trending etc.)
   --------------------------------------------------------------- */
.section-title,
.section-trending,
.section-recent,
.section-read,
.healers-title,
.tarot-section-title {
  font-family   : var(--font-heading) !important;
  font-size     : 2rem !important;
  font-weight   : 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color         : #161B2A !important;
  position      : relative !important;
  display       : inline-block !important;
  margin-bottom : 30px !important;
}

.section-title .stories,
.section-trending .stories,
.section-recent .stories,
.section-read .stories,
.healers-title .stories,
.tarot-section-title .stories {
  font-family : var(--font-heading) !important;
  font-size   : 2rem !important;
  font-weight : 700 !important;
  color       : var(--color-primary) !important;
}

/* Blog-detail page specific headings */
.blog-title {
  font-family : var(--font-heading) !important;
  font-weight : 700 !important;
  line-height : 1.25 !important;
}

.blog-content h2,
.blog-content h3,
.blog-content h4 {
  font-family : var(--font-heading) !important;
}

/* Who-we-are / about page */
.section-title-wwa {
  font-family : var(--font-heading) !important;
  font-size   : var(--fs-h2) !important;
  font-weight : 600 !important;
}

/* Card titles in healer/therapist pages */
.card-title,
.section-title-wrap h4,
.custom-block-info h5 {
  font-family : var(--font-subheading) !important;
  font-weight : 700 !important;
}

/* ---------------------------------------------------------------
   7. RESPONSIVE IMAGES — all pages
   --------------------------------------------------------------- */
img {
  max-width : 100%;
  height    : auto;
}

/* Carousel images — prevent overflow */
.carousel-item img,
.card-img,
.card-img-top,
.custom-block-image,
.owl-carousel img {
  width      : 100%;
  max-width  : 100%;
  object-fit : cover;
}

/* ---------------------------------------------------------------
   8. HORIZONTAL OVERFLOW FIX — homepage carousel + trending
   --------------------------------------------------------------- */
.container,
.container-fluid {
  max-width  : 100%;
  overflow-x : hidden;
}

/* Trending stories carousel — sidebar overflows on mobile */
#myCarousel {
  position   : relative;
  overflow-x : hidden;
}

#myCarousel .list-group {
  position   : static !important;  /* remove absolute on mobile */
  width      : 100% !important;
  max-height : none;
  overflow-y : visible;
}

/* Fix: on desktop restore sidebar positioning */
@media (min-width: 768px) {
  #myCarousel {
    padding-right : 33.33%;
  }
  #myCarousel .list-group {
    position   : absolute !important;
    top        : 0 !important;
    right      : 0 !important;
    width      : 33.33% !important;
    max-height : 100%;
    overflow-y : auto;
  }
}

/* News box container — never exceed viewport */
.news-box-container,
.news-box-row,
.news-box-col {
  max-width : 100%;
}

/* Healers slider — no horizontal overflow */
.healers-slider-container {
  overflow-x : hidden;
}

/* ---------------------------------------------------------------
   9. NAVBAR / HAMBURGER MENU — weblayout mobile fix
   --------------------------------------------------------------- */
.elementskit-menu-container {
  max-width : 100vw;
}

/* Prevent nav items from wrapping awkwardly on small screens */
@media (max-width: 1024px) {
  .elementskit-navbar-nav {
    flex-direction : column;
    width          : 100%;
  }

  .elementskit-navbar-nav .nav-item,
  .elementskit-navbar-nav li {
    width : 100%;
  }

  /* Hamburger button always visible on mobile */
  .elementskit-menu-hamburger {
    display      : flex !important;
    align-items  : center;
    justify-content: center;
    width        : 44px;
    height       : 44px;
    min-width    : 44px; /* touch-friendly */
    cursor       : pointer;
  }
}

/* ---------------------------------------------------------------
   10. healer_detail.blade.php — Missing viewport + Bootstrap conflict
       (viewport is added via command — see Step 3 instructions)
       Fix Bootstrap 4/5 class conflicts
   --------------------------------------------------------------- */
/* Bootstrap 5 spacing utilities fallback for Bootstrap 4 pages */
.ms-auto { margin-left: auto !important; }
.me-4    { margin-right: 1.5rem !important; }
.me-1    { margin-right: 0.25rem !important; }
.mb-0    { margin-bottom: 0 !important; }
.mt-3    { margin-top: 1rem !important; }
.g-0     { gap: 0 !important; }
.gy-4    { row-gap: 1.5rem !important; }

/* ---------------------------------------------------------------
   11. THERAPISTS PAGE — hero search form mobile fix
   --------------------------------------------------------------- */
@media (max-width: 576px) {
  .search-form .row {
    flex-direction : column;
  }

  .search-form .col-12,
  .search-form .col-md-5,
  .search-form .col-md-2 {
    width      : 100% !important;
    max-width  : 100% !important;
    flex       : 0 0 100% !important;
  }

  .search-form button[type="submit"] {
    width     : 100% !important;
    margin-top: 8px;
    height    : 48px !important;
  }

  .hero-section .text-center {
    padding : 0 10px;
  }
}

/* Owl carousel image height on mobile */
@media (max-width: 768px) {
  .owl-carousel .item img,
  .custom-block-image {
    height     : 220px !important;
    object-fit : cover;
  }
}

/* ---------------------------------------------------------------
   12. BLOG-DETAIL PAGE — header padding + layout fixes
   --------------------------------------------------------------- */
.blog-header {
  padding : 50px 0 35px !important;
}

@media (max-width: 768px) {
  .blog-header {
    padding : 30px 15px 25px !important;
  }

  .blog-title {
    font-size   : 1.8rem !important;
    line-height : 1.3 !important;
  }

  /* Sidebar stacks below content on mobile */
  .col-lg-4.sticky-top {
    position : relative !important;
    top      : auto !important;
  }
}

/* ---------------------------------------------------------------
   13. WHO-WE-ARE PAGE — mission/vision grid + stats mobile fix
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  .mission-vision {
    grid-template-columns : 1fr !important;
  }

  .stats-section {
    grid-template-columns : repeat(2, 1fr) !important;
  }

  .header {
    padding        : 35px 15px !important;
    border-radius  : 10px !important;
  }

  .header h1 {
    font-size : 2rem !important;
  }

  .section {
    padding : 20px 15px !important;
  }
}

@media (max-width: 400px) {
  .stats-section {
    grid-template-columns : 1fr !important;
  }
}

/* ---------------------------------------------------------------
   14. MOBILE FONT SIZES  (≤ 768px)
   All headings and body text scale DOWN for mobile
   --------------------------------------------------------------- */
@media (max-width: 768px) {

  :root {
    --fs-h1 : 1.9rem;   /* 30.4px */
    --fs-h2 : 1.6rem;   /* 25.6px */
    --fs-h3 : 1.35rem;  /* 21.6px */
    --fs-h4 : 1.15rem;  /* 18.4px */
    --fs-h5 : 1rem;     /* 16px   */
    --fs-h6 : 0.9rem;   /* 14.4px */
    --fs-p  : 0.95rem;  /* 15.2px */
  }

  h1, .h1 { font-size: var(--fs-h1) !important; }
  h2, .h2 { font-size: var(--fs-h2) !important; }
  h3, .h3 { font-size: var(--fs-h3) !important; }
  h4, .h4 { font-size: var(--fs-h4) !important; }
  h5, .h5 { font-size: var(--fs-h5) !important; }
  h6, .h6 { font-size: var(--fs-h6) !important; }
  p, li, td, th, label, span { font-size: var(--fs-p) !important; }

  .section-title,
  .section-trending,
  .section-recent,
  .section-read,
  .healers-title,
  .tarot-section-title {
    font-size: 1.5rem !important;
  }

  .section-title .stories,
  .section-trending .stories,
  .section-recent .stories,
  .section-read .stories,
  .healers-title .stories,
  .tarot-section-title .stories {
    font-size: 1.5rem !important;
  }
}

/* ---------------------------------------------------------------
   15. EXTRA SMALL  (≤ 480px)
   --------------------------------------------------------------- */
@media (max-width: 480px) {

  :root {
    --fs-h1 : 1.6rem;   /* 25.6px */
    --fs-h2 : 1.4rem;   /* 22.4px */
    --fs-h3 : 1.2rem;   /* 19.2px */
    --fs-h4 : 1.05rem;  /* 16.8px */
    --fs-h5 : 0.95rem;  /* 15.2px */
    --fs-h6 : 0.875rem; /* 14px   */
    --fs-p  : 0.9rem;   /* 14.4px */
  }

  h1, .h1 { font-size: var(--fs-h1) !important; }
  h2, .h2 { font-size: var(--fs-h2) !important; }
  h3, .h3 { font-size: var(--fs-h3) !important; }
  h4, .h4 { font-size: var(--fs-h4) !important; }
  h5, .h5 { font-size: var(--fs-h5) !important; }
  h6, .h6 { font-size: var(--fs-h6) !important; }
  p, li, td, th, label, span { font-size: var(--fs-p) !important; }

  .section-title,
  .section-trending,
  .section-recent,
  .section-read,
  .healers-title,
  .tarot-section-title {
    font-size: 1.25rem !important;
  }

  .section-title .stories,
  .section-trending .stories,
  .section-recent .stories,
  .section-read .stories,
  .healers-title .stories,
  .tarot-section-title .stories {
    font-size: 1.25rem !important;
  }
}

/* ---------------------------------------------------------------
   16. GENERAL LAYOUT SPACING — mobile padding/margin cleanup
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  .container {
    padding-left  : 15px !important;
    padding-right : 15px !important;
  }

  .row {
    margin-left  : -8px !important;
    margin-right : -8px !important;
  }

  [class*="col-"] {
    padding-left  : 8px !important;
    padding-right : 8px !important;
  }

  /* Featured news boxes — proportional heights */
  #featured-news {
    height: 260px !important;
  }

  .news-box-container { height: 260px !important; }
  .news-box-row       { height: 127px !important; }

  .ratio_right-cover-2,
  .tarot-box-wrapper,
  .healer-box-wrapper {
    height: 127px !important;
  }

  /* Trending carousel — full width on mobile */
  #myCarousel .carousel-item img {
    height     : 220px !important;
    object-fit : cover;
  }

  #myCarousel .list-group-item img {
    width  : 60px !important;
    height : 50px !important;
  }

  /* Blog sidebar */
  .blog-sidebar {
    max-height : 300px;
  }

  /* Community hub cards */
  #featured .carousel-item img {
    height : 250px !important;
  }

  .right-card img {
    height : 160px !important;
  }

  /* Desktop preview hidden, mobile slider shown */
  #desktop-preview .image-container img {
    height : 220px !important;
  }

  /* Tarot section */
  .tarot-container {
    height : 280px !important;
  }

  /* Healer cards */
  .healer-slide {
    min-width : 200px !important;
    max-width : 200px !important;
  }

  .healer-card {
    height : 340px !important;
  }

  .healer-card img {
    height : 210px !important;
  }
}
/* ---------------------------------------------------------------
   FIX: Elementor boxed container gap — overrides external CDN
   The Elementor CDN sets max-width:1140px causing left/right gaps
   --------------------------------------------------------------- */

/* Make header sections truly full width */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 100% !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
}

.elementor-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Full width wrapper */
.ekit-template-content-markup,
.ekit-template-content-header {
  width: 100% !important;
  max-width: 100% !important;
}

/* Main content container — full width with inner padding */
#main-container.main-container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Bootstrap .container inside main — readable max-width */
#main-container .container {
  max-width: 1280px !important;
  width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body, html {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Mobile — tighter inner padding */
@media (max-width: 768px) {
  .elementor-section.elementor-section-boxed > .elementor-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  #main-container .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* ---------------------------------------------------------------
   FIX: Nav menu full width - section f6215c3
   --------------------------------------------------------------- */

.elementor-element-f6215c3,
.elementor-element-f6215c3 > .elementor-container,
.elementor-element-f6215c3 .elementor-widget-wrap {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.elementor-element-d2846b7,
.elementor-element-d2846b7 > .elementor-widget-wrap {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

nav.ekit-wid-con.ekit_menu_responsive_tablet {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 30px !important;
}

#ekit-megamenu-main-menu {
  width: 100% !important;
  flex: 1 !important;
}

ul#menu-main-menu.elementskit-navbar-nav {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  padding: 0 !important;
  margin: 0 !important;
}

ul#menu-main-menu.elementskit-navbar-nav > li {
  flex: 1 !important;
  text-align: center !important;
}

@media (max-width: 1024px) {
  nav.ekit-wid-con.ekit_menu_responsive_tablet {
    padding: 0 15px !important;
  }
  ul#menu-main-menu.elementskit-navbar-nav {
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  ul#menu-main-menu.elementskit-navbar-nav > li {
    flex: none !important;
    text-align: left !important;
    width: 100% !important;
  }
}