/*
 Theme Name:   TBM Child Theme
 Theme URI:    https://travelballmovie.com/
 Description:  Child theme for Divi to keep custom CSS/JS and overrides safe across updates.
 Author:       Mpower Web Solutions
 Author URI:   https://mpowerwebsolutions.co
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  tbm-child
*/

/* ========== TBM Global Overrides ========== */

/* Divi Jumping Header Fix */
/* #page-container { padding-top: 59px !important; } */
/* #main-header { top: 0px !important; } */

/* Primary menu links — force white everywhere */
html body #main-header #et-top-navigation #top-menu-nav > ul > li > a,
html body .et-fixed-header #top-menu-nav > ul > li > a,
html body #top-menu-nav > ul > li > a:link,
html body #top-menu-nav > ul > li > a:visited {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important; /* Chrome/Safari */
}

/* Hover / current page */
#main-header #top-menu-nav > ul > li > a:hover,
#main-header #top-menu-nav > ul > li.current-menu-item > a,
#main-header #top-menu-nav > ul > li.current_page_item > a,
.et-fixed-header #top-menu-nav > ul > li > a:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Dropdowns (if you use them) */
#main-header .nav li ul { background: #000000; }
#main-header .nav li ul a { color: #ffffff !important; }

/* Safety: undo any accidental effects that can make text disappear */
#main-header,
#et-top-navigation,
#top-menu-nav,
#top-menu-nav a {
  text-shadow: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* ==============================
   TBM Icons Row — Flex Wrapping
   ============================== */

/* Base row setup */
#tbm-icons {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center; /* center horizontally */
  gap: 20px 0; /* vertical spacing between rows */
}

/* Reset Divi column defaults inside this row */
#tbm-icons > .et_pb_column {
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Desktop & Tablet (≥768px): 3-up */
@media (min-width: 768px) {
  #tbm-icons > .et_pb_column {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    width: 33.333% !important;
  }
}

/* Phone (≤767px): 2-up */
@media (max-width: 767px) {
  #tbm-icons > .et_pb_column {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    text-align: center;
  }
}

/* Tiny phones (≤360px): 1-up */
@media (max-width: 360px) {
  #tbm-icons > .et_pb_column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ==============================
   TBM Icons Row — Color Controls
   ============================== */

/* --- Concept Trailer --- */
#tbm-icons .col-trailer .et-pb-icon,
#tbm-icons .col-trailer svg {
  color: #e53935 !important; /* Red */
}

/* --- Sizzle Reel --- */
#tbm-icons .col-sizzle .et-pb-icon,
#tbm-icons .col-sizzle svg {
  color: #e53935 !important; /* Red */
}

/* --- Pitch Deck (force override) --- */
#tbm-icons .col-pitch .et_pb_module .et-pb-icon,
#tbm-icons .col-pitch .et_pb_module .tbm-tile svg,
#tbm-icons .col-pitch .et_pb_icon_wrap .et-pb-icon {
  color: #ffffff !important;
  fill: #ffffff !important; /* covers SVG paths */
}

/* --- AI Previs Test --- */
#tbm-icons .col-ai .et-pb-icon,
#tbm-icons .col-ai svg {
  color: #ffffff !important;
}

/* --- Contact (Dark Blue) --- */
#tbm-icons .col-contact .et_pb_module .et-pb-icon,
#tbm-icons .col-contact .et_pb_module .tbm-tile svg,
#tbm-icons .col-contact .et_pb_icon_wrap .et-pb-icon {
  color: #193363 !important;
  fill: #193363 !important;
}

/* --- TBM Merch (Dark Blue) --- */
#tbm-icons .col-coverage .et_pb_module .et-pb-icon,
#tbm-icons .col-coverage .et_pb_module .tbm-tile svg,
#tbm-icons .col-coverage .et_pb_icon_wrap .et-pb-icon {
  color: #193363 !important;
  fill: #193363 !important;
}

/* --- Optional Hover Enhancement --- */
#tbm-icons .et-pb-icon:hover,
#tbm-icons svg:hover {
  transform: scale(1.1);
  transition: all 0.3s ease;
}

/* ==============================
   TBM ICONS — MOBILE ENHANCEMENT
   ============================== */
@media (max-width: 767px) {
  /* Make icons bigger */
  #tbm-icons .et-pb-icon,
  #tbm-icons svg {
    font-size: 90px !important;
    width: 90px !important;
    height: 90px !important;
  }

  /* Add some breathing room between rows */
  #tbm-icons {
    gap: 30px 0 !important;
  }

  /* Ensure columns still 2-up layout */
  #tbm-icons > .et_pb_column {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    text-align: center;
  }

  /* Center labels better under icons */
  #tbm-icons .et_pb_blurb_description,
  #tbm-icons .et_pb_blurb_content p {
    font-size: 14px !important;
    margin-top: 6px !important;
  }
}

/* ==============================
   TBM ICONS — AI Previs Image Scaling (≤767px)
   ============================== */
@media (max-width: 767px) {
  #tbm-icons .col-ai img {
    width: 90px !important;      /* match other icons */
    height: auto !important;
    max-width: none !important;  /* override Divi's auto constraint */
    display: inline-block !important;
    margin: 0 auto !important;
  }
}

/* TBM Header / Hero gap fix */
#main-header{ top:0!important; border-bottom:0!important; box-shadow:none!important; background:#000; }
.et_fixed_nav #page-container{ padding-top:66px!important; }
#et-main-area,
#et-main-area .et_pb_section:first-of-type,
#et-main-area .et_pb_section:first-of-type .et_pb_row:first-child{ margin-top:0!important; padding-top:0!important; }

/* 1) Kill any divider line from header variants */
#main-header,
#top-header,
.et-fixed-header,
#main-header.et-fixed-header {
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: #000 !important; /* ensure solid */
}

/* 2) Stop margin-collapsing seam + ensure black parent bg */
#et-main-area {
  background: #000 !important;
  padding-top: 1px;  /* prevents collapse with first section */
}
#et-main-area .et_pb_section:first-of-type {
  margin-top: 0 !important; /* remove any top margin on first section */
  padding-top: 0 !important;
}

/* Kill any header divider, pseudo, or shadow */
#main-header,
#main-header:before,
#main-header:after,
.et-fixed-header,
.et-fixed-header:before,
.et-fixed-header:after {
  border: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
}
#main-header:before,
#main-header:after,
.et-fixed-header:before,
.et-fixed-header:after {
  content: none !important;
  display: none !important;
}

/* Ensure the area below is black and can't show a collapsed margin line */
#et-main-area { background: #000 !important; padding-top: 1px; }
#et-main-area .et_pb_section:first-of-type,
#et-main-area .et_pb_section:first-of-type .et_pb_row:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* Just in case any hr sneaks in at the top */
#et-main-area hr { height: 0 !important; border: 0 !important; }

/* =========================
   TBM — Header/hero seam fix
   ========================= */
#main-header,
.et-fixed-header {
  background:#000 !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Make the area below header solid black and prevent margin-collapsing seams */
html, body, #et-main-area { background:#000 !important; }
#et-main-area { padding-top:1px; }
#et-main-area .et_pb_section:first-of-type,
#et-main-area .et_pb_section:first-of-type .et_pb_row:first-child {
  margin-top:0 !important;
  padding-top:0 !important;
  border-top:0 !important;
}

/* One source of truth for content offset (CSS variable + !important) 
:root {
  --tbm-header-offset: 60px; 
}
*/

.et_fixed_nav #page-container {
  padding-top: var(--tbm-header-offset) !important;
}

/* =========================================================
   Divi Footer Alignment Fix (Centered + Single Line Desktop)
   ========================================================= */

/* --- Footer Navigation --- */
#et-footer-nav,
#et-footer-nav .container {
  background-color: #000000 !important;
  text-align: center !important;
  justify-content: center !important;
}

/* Footer Menu List */
#et-footer-nav ul {
  display: inline-flex !important; /* keeps all menu items in one line */
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 10px; /* adjust spacing between links */
}

/* Footer Menu Items */
#et-footer-nav li {
  float: none !important;
  display: inline-block !important;
}

/* --- Footer Info (Copyright Text) --- */
#footer-info,
#footer-bottom .container {
  color: #666 !important;
  font-size: 8px !important;
  text-align: center !important;
  float: none !important;
  margin: 0 auto !important;
  display: block !important;
  padding-bottom: 10px !important;
}

/* --- Optional: Tweak spacing for large desktops --- */
@media (min-width: 1440px) {
  #et-footer-nav ul {
    gap: 15px; /* slightly more breathing room on wide screens */
  }
}

/* Optional: Make footer links + text more readable on large screens */
@media (min-width: 1440px) {
  #et-footer-nav a, #footer-info {
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
  }
}