/**
 * SeeMe Natural - Custom Bug Fixes
 * Fixes reported in the Google Doc:
 * - Yellow box consistent sizing
 * - Mobile responsiveness (logo, banner, boxes, images)
 * - Image aspect ratios (ingredients, awards, privacy policy)
 */

/* ==========================================================================
   Bug #2: Yellow boxes - consistent sizing across browsers (desktop)
   Use a fixed height so all 4 boxes match, regardless of description length.
   ========================================================================== */

.custom-icon-box-01 {
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

.gel-icon-box {
  height: 100%;
}


/* ==========================================================================
   Bug #3e & #3f: Image aspect ratios
   Ingredient images and award images should NOT be forced to square.
   Restore original horizontal (landscape) aspect ratio.
   ========================================================================== */

/* Ingredient/material section images - restore landscape ratio */
.elementor-widget-image .elementor-image,
.elementor-image-box-img,
.ube-image-box,
.ube-image {
  height: auto !important;
  aspect-ratio: auto !important;
}

.elementor-widget-image .elementor-image img,
.elementor-image-box-img img,
.ube-image-box img,
.ube-image img {
  aspect-ratio: auto !important;
  object-fit: contain !important;
  width: 100% !important;
  height: auto !important;
}

/* Ensure Elementor image widgets respect original aspect ratio */
.elementor-image img {
  aspect-ratio: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ==========================================================================
   Bug #4: Privacy policy page - banner/page-title image should be horizontal
   ========================================================================== */

.g5core-page-title-default .page-title-bg,
.g5core-page-title-default .elementor-image img,
.g5core-page-title-bg {
  aspect-ratio: auto;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Mobile Responsiveness Fixes (max-width: 767px)
   ========================================================================== */

@media (max-width: 767px) {

  /* Bug #3a: Mobile logo - needs to be bigger */
  .site-branding .custom-logo-link img {
    max-height: calc(var(--g5-header-mobile-height) - 10px);
  }

  .g5core-mobile-header .g5core-site-branding img,
  .g5core-mobile-header .site-branding .custom-logo-link img {
    max-height: 100px;
  }

  /* Bug #3b: Banner text + button too large on mobile & overlapping fix */
  .gel-banner-content {
    left: 15px !important;
    right: 15px !important;
    width: auto !important; /* Compute from left/right */
    max-width: 100vw !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    /* Anchor to bottom instead of vertical centering to prevent overlap */
    bottom: 40px !important;
    top: auto !important;
    transform: none !important;
  }

  /* Ensure deep elements from Elementor don't override font sizes */
  .gel-banner-title,
  .gel-banner-title * {
    font-size: 20px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  .gel-banner-description,
  .gel-banner-description * {
    font-size: 14px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }

  .gel-banner .btn {
    font-size: 13px !important;
    padding: 8px 16px !important;
    margin-top: 15px !important;
  }

  /* Increase padding to ensure banner accommodates text */
  .gel-banner-bg {
    min-height: 380px !important;
  }

  /* Banner slider dots - restyle as clean CSS circles, fix overlap */
  .gel-banner .slick-dots {
    position: absolute;
    bottom: 10px !important;
    z-index: 10 !important;
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    gap: 8px;
    margin: 0;
    padding: 0;
    z-index: 3;
    list-style: none;
  }

  .gel-banner .slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
  }

  .gel-banner .slick-dots li span:before {
    content: '' !important;
    font-size: 0 !important;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s;
  }

  .gel-banner .slick-dots li.slick-active span:before {
    background: #fff;
    width: 10px;
    height: 10px;
  }

  /* Bug #3c: Yellow boxes - equal size, 2 per row on mobile */
  .elementor-widget-wrap > .elementor-widget:has(.gel-icon-box),
  .elementor-widget-wrap > .elementor-widget:has(.custom-icon-box-01) {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .custom-icon-box-01 {
    padding: 15px;
    min-height: 140px;
  }

  .custom-icon-box-01 .title,
  .gel-icon-box .title {
    font-size: 14px;
  }

  .custom-icon-box-01 .description,
  .gel-icon-box .description {
    font-size: 13px;
    margin-top: 8px;
  }

  .gel-icon-box-size-lg object,
  .gel-icon-box-size-md object {
    width: 35px;
  }

  /* Bug #3d: Extraction boxes - 2 per row, smaller text and size */
  .custom-ube-image-box-01 {
    font-size: 14px;
  }

  .custom-ube-image-box-01 .ube-ib-title {
    font-size: 22px;
    margin-bottom: 15px;
  }

  .custom-ube-image-box-01 .ube-ib-desc {
    font-size: 14px;
  }

  .custom-ube-image-box-01 .ube-icon-box-wrapper {
    --ube-ib-spacing: 20px;
  }

  .elementor-widget-wrap > .elementor-widget:has(.ube-image-box),
  .elementor-widget-wrap > .elementor-widget:has(.custom-ube-image-box-01) {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* Bug #3e: Ingredient images - restore horizontal aspect ratio on mobile */
  .elementor-widget-image .elementor-image,
  .elementor-image-box-img,
  .ube-image-box,
  .ube-image {
    height: auto !important;
    aspect-ratio: auto !important;
  }
  
  .elementor-widget-image .elementor-image img,
  .elementor-image-box-img img,
  .ube-image-box img,
  .ube-image img {
    aspect-ratio: auto !important;
    height: auto !important;
    object-fit: contain !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   Smaller mobile screens (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {

  /* Bug #3b: Further reduce banner text on very small screens */
  .gel-banner-content {
    left: 10px !important;
    right: 10px !important;
    padding: 10px !important;
    bottom: 35px !important;
  }

  .gel-banner-title,
  .gel-banner-title * {
    font-size: 18px !important;
  }

  .gel-banner-description,
  .gel-banner-description * {
    font-size: 13px !important;
  }

  /* Override the forced square aspect ratio on banners for small screens
     (the theme sets padding-bottom: 100% !important on .gel-banner-bg at <=480px) */
  .gel-banner-bg {
    padding-bottom: 90% !important; /* Increase height from 75% to give text more breathing room */
    background-position: center !important;
  }

  /* Smaller dots on very small screens */
  .gel-banner .slick-dots {
    bottom: 8px;
    gap: 6px;
  }

  .gel-banner .slick-dots li span:before {
    width: 6px;
    height: 6px;
  }

  .gel-banner .slick-dots li.slick-active span:before {
    width: 8px;
    height: 8px;
  }

  /* Bug #3c: Yellow boxes - slightly smaller on very small screens */
  .custom-icon-box-01 {
    padding: 12px;
    min-height: 120px;
  }

  .custom-icon-box-01 .title,
  .gel-icon-box .title {
    font-size: 12px;
  }

  .custom-icon-box-01 .description,
  .gel-icon-box .description {
    font-size: 11px;
  }
}

/* ==========================================================================
   Footer logo - remove white background/border, blend with footer
   ========================================================================== */

.g5core-site-footer .vc_single_image-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.g5core-site-footer .vc_single_image-wrapper.vc_box_border_grey {
  border: none !important;
}

.g5core-site-footer .vc_single_image-img {
  background: transparent !important;
  mix-blend-mode: multiply;
}

/* ==========================================================================
   Fallback for browsers that don't support :has() selector
   Using Elementor column classes as an alternative
   ========================================================================== */

@media (max-width: 767px) {
  .elementor-col-25,
  .elementor-col-33 {
    width: 50% !important;
  }

  /* Ensure Elementor inner sections lay out 2-per-row on mobile */
  .elementor-inner-section .elementor-row {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Footer SMCM Logo — high-res image, constrained display size (Retina)
   ========================================================================== */

.g5core-site-footer .vc_single_image-wrapper img,
.site-footer .vc_single_image-wrapper img {
  width: 100px !important;
  height: 100px !important;
  max-width: 100px !important;
  object-fit: contain;
}

/* ==========================================================================
   Revolution Slider 7 (Hero Banner) - Mobile Fallback Fixes
   Forces text to wrap and stack nicely instead of overflowing
   ========================================================================== */

@media (max-width: 767px) {
  /* Prevent horizontal scrolling and give more height */
  body #SR7_5_1, 
  body #SR7_5_1 sr7-adjuster, 
  body #SR7_5_1 sr7-content,
  body #SR7_5_1 sr7-slide {
      min-height: 480px !important;
      height: auto !important;
      overflow: hidden !important;
  }

  /* Force stack via Flexbox to kill JS absolute positioning problems */
  body #SR7_5_1 sr7-slide {
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: center !important;
      padding: 30px 15px 50px 15px !important;
      box-sizing: border-box !important;
  }

  /* Target exact content wrappers to place them in the Flexbox flow. 
     This avoids breaking the Slider's Canvas or Background elements! */
  body #SR7_5_1 #SR7_5_1-9-0, body #SR7_5_1 #SR7_5_1-9-1, body #SR7_5_1 #SR7_5_1-9-2, body #SR7_5_1 #SR7_5_1-9-5,
  body #SR7_5_1 #SR7_5_1-51-1, body #SR7_5_1 #SR7_5_1-51-2, body #SR7_5_1 #SR7_5_1-51-5,
  body #SR7_5_1 #SR7_5_1-52-1, body #SR7_5_1 #SR7_5_1-52-2, body #SR7_5_1 #SR7_5_1-52-5 {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      transform: none !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      margin: 5px 0 !important;
      text-align: center !important;
      opacity: 1 !important; 
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: center !important;
      z-index: 2 !important;
  }

  /* Text wrap on all inner elements of exact content */
  body #SR7_5_1 #SR7_5_1-9-0 *, body #SR7_5_1 #SR7_5_1-9-1 *, body #SR7_5_1 #SR7_5_1-9-2 *, body #SR7_5_1 #SR7_5_1-9-5 *,
  body #SR7_5_1 #SR7_5_1-51-1 *, body #SR7_5_1 #SR7_5_1-51-2 *, body #SR7_5_1 #SR7_5_1-51-5 *,
  body #SR7_5_1 #SR7_5_1-52-1 *, body #SR7_5_1 #SR7_5_1-52-2 *, body #SR7_5_1 #SR7_5_1-52-5 * {
      white-space: normal !important;
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
      transform: none !important;
  }

  /* --- Specific Adjustments & CSS Order --- */
  
  /* Subtitles (Layer 0) */
  body #SR7_5_1 #SR7_5_1-9-0 {
      order: 1 !important;
  }
  body #SR7_5_1 #SR7_5_1-9-0, body #SR7_5_1 #SR7_5_1-9-0 * {
      font-size: 13px !important;
      line-height: 1.4 !important;
      font-weight: 600 !important;
      color: #000 !important;
      margin-bottom: 5px !important;
  }

  /* Titles (Layer 1) */
  body #SR7_5_1 [id$="-1"] {
      order: 2 !important;
  }
  body #SR7_5_1 [id$="-1"], body #SR7_5_1 [id$="-1"] * {
      font-size: 24px !important;
      line-height: 1.3 !important;
      font-weight: 700 !important;
      color: #000 !important;
  }

  /* Descriptions (Layer 2) */
  body #SR7_5_1 [id$="-2"] {
      order: 3 !important;
  }
  body #SR7_5_1 [id$="-2"], body #SR7_5_1 [id$="-2"] * {
      font-size: 14px !important;
      line-height: 1.4 !important;
      font-weight: 500 !important;
  }

  /* Buttons (Layer 5) */
  body #SR7_5_1 [id$="-5"] {
      order: 4 !important;
      width: max-content !important;
      height: auto !important;
      min-width: 0 !important;
      min-height: 0 !important;
      margin-top: 15px !important;
      display: inline-block !important;
  }
  
  body #SR7_5_1 [id$="-5"] * {
      font-size: 14px !important;
      padding: 10px 24px !important;
      line-height: 1.5 !important;
      height: auto !important;
      max-height: max-content !important;
      display: block !important;
  }

  /* Push dots up */
  body #SR7_5_1 sr7-bullets {
      bottom: 20px !important;
      z-index: 10 !important;
  }
}

@media (max-width: 480px) {
  body #SR7_5_1 [id$="-1"], body #SR7_5_1 [id$="-1"] * {
      font-size: 20px !important;
  }
  body #SR7_5_1 [id$="-2"], body #SR7_5_1 [id$="-2"] * {
      font-size: 13px !important;
  }
}