/* ============================================
   ERGONOMICS ENGINEERED - MOBILE & TABLET STYLES
   Affects screens 1040px and below
   ============================================ */

@media (max-width: 1040px) {

  /* ----- BODY/HTML BACKGROUND FALLBACK ----- */
  body, html {
    background-color: #0a1628;
  }

  /* ----- MOBILE MENU BAR - BLACK WITH WHITE HAMBURGER ----- */
  .grax_tm_mobile_menu .topbar_inner {
    background-color: #0a1628 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  .my_trigger .hamburger-inner,
  .my_trigger .hamburger-inner::before,
  .my_trigger .hamburger-inner::after {
    background-color: #fff !important;
  }

  /* Mobile menu logo - make it bigger */
  .grax_tm_mobile_menu .logo img {
    max-width: 130px !important;
  }

  /* Mobile dropdown menu */
  .grax_tm_mobile_menu .dropdown {
    background-color: #0a1628 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  .grax_tm_mobile_menu .dropdown .dropdown_inner ul li a {
    color: #fff !important;
  }

  .grax_tm_mobile_menu .dropdown .dropdown_inner ul li a:hover,
  .grax_tm_mobile_menu .dropdown .dropdown_inner ul li a:active,
  .grax_tm_mobile_menu .dropdown .dropdown_inner ul li.current a {
    color: #00d4ff !important;
  }

  /* ----- FORCE FULL WIDTH ON ALL CONTAINERS ----- */
  .grax_tm_all_wrap,
  .grax_tm_hero,
  .grax_tm_hero > * {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* But keep some padding on text content */
  .grax_tm_hero .details {
    padding-left: 20px !important;
    padding-right: 20px !important;
    top: calc(8% - 15px) !important;
    transform: translateY(0) !important;
  }

  /* Hide taglines on mobile */
  .grax_tm_hero .details .tagline {
    display: none !important;
  }

  /* ----- HERO SECTION ----- */

  /* Allow line breaks in brand prefix */
  .grax_tm_hero .details .brand_prefix {
    white-space: normal !important;
    display: block !important;
    text-align: left !important;
  }

  .grax_tm_hero {
    min-height: 100vh;
    overflow: hidden;
  }

  .grax_tm_hero .ripple {
    background-image: url('../img/slider/2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Ensure background covers fully */
  .grax_tm_hero .background,
  .grax_tm_hero .image {
    width: 100%;
    background-size: cover;
    background-position: center center;
  }

  /* ----- ERGOSPHERE SECTION (01) ----- */
  /* Mobile structure: Image → Text → Button → Carousel */

  #ergosphere .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  #ergosphere .about_inner {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Use display:contents to flatten .right so we can reorder its children */
  #ergosphere .about_inner.reverse .right {
    display: contents;
  }

  /* Order: 1=image, 2=text, 3=button */
  #ergosphere .about_inner.reverse .right .image {
    order: 1 !important;
    width: 75% !important;
    margin: 0 auto !important;
    max-height: 280px;
  }

  #ergosphere .about_inner.reverse .left {
    order: 2 !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #ergosphere .about_inner.reverse .right .grax_tm_button {
    order: 3 !important;
    width: 100%;
    text-align: center;
    margin-top: 0 !important;
    margin-bottom: 40px;
  }

  /* Remove bottom padding from text container */
  #ergosphere .about_inner.reverse .left .text {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Reduce section gaps on mobile */
  #ergosphere .grax_tm_about {
    margin-bottom: 0 !important;
    padding-bottom: 65px !important;
  }

  /* Remove carousel bottom margins on mobile */
  #ergosphere .ergosphere_gallery {
    margin-bottom: 0 !important;
  }

  /* ----- ERGOBYTES SECTION (02) ----- */
  /* Mobile structure: Image → Text → Button → Carousel */

  #ergobytes .ergobytes_top {
    flex-direction: column !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
  }

  /* Order: 1=image, 2=text (which contains button) */
  #ergobytes .ergobytes_top .ergobytes_logo {
    order: 1 !important;
    width: 60% !important;
    max-width: 250px;
    margin: 0 auto 20px auto !important;
  }

  #ergobytes .ergobytes_top .ergobytes_text {
    order: 2 !important;
  }

  /* Reduce space after description */
  #ergobytes .ergobytes_description {
    margin-bottom: 0 !important;
  }

  /* Center the YouTube button and match spacing to sections 01/03 */
  #ergobytes .ergobytes_cta {
    text-align: center;
    margin-top: 60px !important;
    margin-bottom: 40px !important;
  }

  /* Episodes carousel - mobile size adjustments */
  #ergobytes .episode_card {
    width: 200px;
  }

  #ergobytes .episode_image {
    height: 113px;
  }

  #ergobytes .ergobytes_episodes {
    margin-bottom: 0 !important;
  }

  /* Match section spacing to other sections */
  #ergobytes .grax_tm_news {
    padding-bottom: 65px !important;
  }

  /* ----- ERGOCONNECT SECTION (03) ----- */
  /* Mobile structure: Image → Text → Button */

  #ergoconnect .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  #ergoconnect .about_inner {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Use display:contents to flatten .right so we can reorder its children */
  #ergoconnect .about_inner .right {
    display: contents;
  }

  /* Order: 1=image, 2=text, 3=button */
  #ergoconnect .about_inner .right .image {
    order: 1 !important;
    width: 75% !important;
    margin: 0 auto !important;
    max-height: 280px;
  }

  #ergoconnect .about_inner .left {
    order: 2 !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #ergoconnect .about_inner .right .grax_tm_button {
    order: 3 !important;
    width: 100%;
    text-align: center;
    margin-top: 0 !important;
    margin-bottom: 40px;
  }

  /* Remove bottom padding from text container */
  #ergoconnect .about_inner .left .text {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Match section 02 header and footer spacing */
  #ergoconnect .grax_tm_about {
    margin-bottom: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 65px !important;
  }

  /* ----- JOURNEY SECTION (04) ----- */

  /* Add header space above the image and footer space below */
  #journey .grax_tm_journey {
    padding-top: 75px !important;
    padding-bottom: 65px !important;
  }

  #journey .journey_top {
    margin-top: 20px !important;
    padding-top: 0 !important;
  }

  #journey .journey_portrait {
    margin-top: 0 !important;
    width: 75% !important;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ----- CONTACT SECTION ----- */

  #contact.grax_tm_contact {
    padding-top: 20px !important;
    padding-bottom: 75px !important;
    margin-bottom: 0 !important;
  }

  /* Center the title */
  #contact .grax_tm_title_holder {
    text-align: center;
  }

  #contact .contact_inner {
    padding-top: 30px !important;
  }

  /* Hide text labels, show only icons */
  #contact .info_list ul {
    display: flex !important;
    justify-content: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #contact .info_list ul li {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
  }

  #contact .info_list .list_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0 !important;
  }

  /* Hide the text */
  #contact .info_list .list_inner p {
    display: none !important;
  }

  /* Circle container on the anchor */
  #contact .info_list .list_inner > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
  }

  #contact .info_list .list_inner > a:hover {
    border-color: #00d4ff;
  }

  /* Style the icon inside */
  #contact .info_list .list_inner img.svg {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    border: none !important;
    border-radius: 0 !important;
    filter: brightness(0) invert(1);
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hide Location, show YouTube on mobile */
  #contact .info_list ul li.location-item {
    display: none !important;
  }

  #contact .info_list ul li.youtube-item {
    display: block !important;
  }

  /* ----- FOOTER/COPYRIGHT ----- */

  /* Force footer elements visible - fixes WOW.js not triggering on mobile */
  .grax_tm_copyright .wow {
    visibility: visible !important;
    animation: none !important;
  }

  .grax_tm_copyright {
    padding: 40px 0 30px 0 !important;
    margin-bottom: 0 !important;
  }

  /* Exclude footer from general section rules */
  .grax_tm_section > .grax_tm_copyright {
    padding-top: 40px !important;
    margin-bottom: 0 !important;
  }

  /* Hide social icons in footer (now in contact section) */
  .grax_tm_copyright .social {
    display: none !important;
  }

  /* Logo size and center */
  .ee_footer .ee_footer_logos {
    text-align: center;
    width: 100%;
  }

  .ee_footer .ee_footer_logos img {
    max-width: 450px !important;
    width: 75% !important;
    height: auto !important;
    max-height: none !important;
  }

  /* ----- GENERAL FIXES ----- */

  /* Reduce section spacing by half */
  .grax_tm_about,
  .grax_tm_section > div {
    padding-top: 75px !important;
    margin-bottom: 75px !important;
  }

  /* Fix all overflow elements */

  /* Modal - hide or constrain */
  .grax_tm_modalbox_news,
  .grax_tm_modalbox_news .box_inner,
  .grax_tm_modalbox_news .description_wrap {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Animated galleries - keep overflow hidden */
  .ergosphere_gallery,
  .awards_gallery {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .gallery_scroll,
  .awards_scroll {
    max-width: none !important;
    width: max-content !important;
  }

  /* Contact section */
  .grax_tm_contact,
  .grax_tm_contact .container,
  .contact_inner,
  .contact_simple,
  .contact_info {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Global container fix.
     NOTE: the old `overflow: hidden` here was a band-aid hiding horizontal
     overflow. The real culprits (the long email button .cta_email and the
     non-shrinking .sectors_grid items) are now fixed at the source, so the
     mask is gone — keeps sticky/scroll-anchoring behaviour intact. */
  .container {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Main wrapper — no overflow-x:hidden mask (see note above) */
  .grax_tm_all_wrap {
    max-width: 100% !important;
  }

}

@media (max-width: 768px) {

  /* ----- MOBILE-ONLY HERO BACKGROUND ----- */
  .grax_tm_hero .ripple {
    background-image: url('../img/slider/2_MOBILE.webp');
    background-position: top center;
  }

  /* ----- FOOTER LINKS ROW ----- */
  .ee_footer_links {
    font-size: 13px;
    gap: 4px 9px;
  }
  /* Keep the dividers: without them the wrapped links run together and
     are hard to read. Dimmed so they separate, not shout. Matches the
     ErgoSphere site's footer on mobile. */
  .ee_footer_links .ee_footer_divider {
    display: inline;
    color: rgba(255, 255, 255, 0.22);
  }

}

@media (max-width: 480px) {

  /* ----- SMALL MOBILE TWEAKS ----- */

  /* Scale down the main title */
  .grax_tm_hero .brand_name,
  .grax_tm_hero .name {
    font-size: 2.5rem !important;
    word-break: keep-all;
    white-space: normal;
  }

}

@media (max-width: 360px) {

  /* ----- EXTRA SMALL MOBILE ----- */

  .grax_tm_hero .brand_name,
  .grax_tm_hero .name {
    font-size: 2rem !important;
  }

}

/* ----- FOOTER LOGOS: match the ErgoSphere site -----
   Both logos stay on one centred row at every width, the way ergosphere.com.au
   does it, rather than stacking below 768px. The breakpoints, the gap and the
   two logo heights are the same values as ergosphere-mobile.css, so the two
   footers read identically. Selectors are qualified with .ee_footer to outrank
   the desktop sizing in ee-custom.css without needing !important. */
@media (max-width: 1040px) {
  .ee_footer .ee_footer_logos { gap: 60px; margin-bottom: 25px; }
  .ee_footer .ee_footer_logos .ee_logo_home { max-height: 50px; }
  .ee_footer .ee_footer_logos .ee_footer_ergosphere img { max-height: 80px; }
}
@media (max-width: 768px) {
  .ee_footer .ee_footer_logos { gap: 40px; margin-bottom: 20px; }
  .ee_footer .ee_footer_logos .ee_logo_home { max-height: 35px; }
  .ee_footer .ee_footer_logos .ee_footer_ergosphere img { max-height: 55px; }
}
@media (max-width: 480px) {
  .ee_footer .ee_footer_logos { gap: 25px; }
  .ee_footer .ee_footer_logos .ee_logo_home { max-height: 28px; }
  .ee_footer .ee_footer_logos .ee_footer_ergosphere img { max-height: 44px; }
}