/**
 * TAS responsive layer for Framer static export.
 * Framer breakpoints (from index.html / _files/script_main):
 *   Desktop  ≥ 1200px  (72rtr7)
 *   Tablet   810–1199px (lons9a)
 *   Mobile   ≤ 809px    (1kfel1r)
 *
 * The _files folder is Framer runtime (JS bundles), not separate mobile HTML.
 * This file supplies layout fixes the SSR export does not apply reliably.
 */

/* =============================================================================
   TABLET + MOBILE  (max-width: 1199.98px)
   ============================================================================= */
@media (max-width: 1199.98px) {
  html {
    overflow-x: hidden;
  }

  body {
    overflow-x: hidden;
    width: 100%;
  }

  /* Framer locks root to 810px / 390px — use full viewport instead */
  #main,
  #main [data-framer-root],
  #main .framer-IgxwD.framer-72rtr7,
  #main .framer-IgxwD.framer-lons9a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden;
  }

  #main [data-framer-root] {
    padding-top: 100px !important;
  }

  #main [data-framer-root] > * {
    max-width: 100%;
  }

  #main .framer-text,
  #main [data-framer-component-type="RichTextContainer"],
  #main h1,
  #main h2,
  #main h3,
  #main h4,
  #main p {
    max-width: 100% !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  #main section,
  #main [data-framer-name$="section"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #main section[data-framer-name="Hero section"] [data-framer-name="Top content"],
  #main [data-framer-name="About section"],
  #main [data-framer-name="Services section"] {
    transform: none !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hero — desktop SSR uses 98vh + 140px padding; collapse on tablet/phone */
  #main #hero,
  #main header[data-framer-name="Hero section"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    place-content: flex-start !important;
    align-items: center !important;
    gap: 32px !important;
    padding-top: 24px !important;
    padding-bottom: 48px !important;
    overflow: visible !important;
  }

  #main #hero .framer-c0nyhc-container {
    width: min(508px, calc(100% - 60px)) !important;
    max-width: 508px !important;
    height: auto !important;
    flex: none !important;
    transform: none !important;
    margin: 0 auto !important;
  }

  #main #hero .framer-c0nyhc-container video {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    aspect-ratio: 508 / 149;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  #main #hero .framer-1a6ekxj,
  #main #hero [data-framer-name="Top content"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  #main img,
  #main video {
    max-width: 100%;
    height: auto;
  }

  /* Scroll-reveal must not hide content on smaller screens */
  #main .tas-scroll-reveal,
  #main .tas-scroll-reveal.tas-revealed {
    opacity: 1 !important;
    transform: none !important;
  }

  #faqs .framer-fespo7-container,
  #industries .ssr-variant,
  #pricing .framer-1mf2g5r-container,
  #pricing .ssr-variant,
  #team .ssr-variant,
  #contact .ssr-variant,
  #footer,
  #footer .ssr-variant {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* FAQ desktop duplicate — handled in tas-mobile-content.css */

  /* Pricing compare matrix — shown via tas-pricing-compare-mobile.js on tablet/phone */

  /* ----- Site header (match timedautomation.com.au mobile nav) ----- */
  #main header.framer-189i5va {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 2000 !important;
    transform: none !important;
    padding: 0 !important;
    box-sizing: border-box;
    background: rgb(0, 0, 0) !important;
    backdrop-filter: none;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  #main header.framer-189i5va .ssr-variant.hidden-lons9a.hidden-1kfel1r {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
  }

  #main header .framer-53xhzu-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    align-self: stretch !important;
    opacity: 1 !important;
  }

  #main header nav.framer-p99Gy,
  #main header nav[data-framer-name="Desktop"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    place-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 20px !important;
    box-sizing: border-box;
    gap: 0 !important;
  }

  /* Top bar: logo left, menu right — grid is more reliable than flex here */
  #main header .tas-mobile-nav-bar {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    column-gap: 12px !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
  }

  #main header .tas-mobile-nav-bar > [data-framer-name="Website Logo"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: static !important;
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-self: start !important;
  }

  #main header .tas-mobile-nav-bar > .tas-menu-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  #main header [data-framer-name="Website Logo"] {
    position: static !important;
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    padding-right: 0 !important;
    align-items: center !important;
  }

  #main header .tas-mobile-nav-bar [data-framer-name="Website Logo"] .framer-b5omxr,
  #main header [data-framer-name="Website Logo"] .framer-b5omxr {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  /* Match Framer / privacy-policy logo proportions (36×75) */
  #main header [data-framer-name="Website Logo"] .framer-1yb4qiq {
    width: 36px !important;
    height: 75px !important;
    flex: 0 0 36px !important;
  }

  #main header [data-framer-name="Website Logo"] .framer-1yb4qiq img {
    object-fit: cover !important;
    object-position: center center !important;
  }

  #main header [data-framer-name="Website Logo"] h4 {
    white-space: nowrap !important;
    font-size: 28px !important;
  }

  #main header [data-framer-name="Links"] {
    display: none !important;
    width: 100% !important;
    margin-top: 0 !important;
    border-radius: 12px !important;
  }

  #main header.tas-nav-open [data-framer-name="Links"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-top: 16px !important;
    padding: 16px !important;
    box-sizing: border-box;
  }

  #main header [data-framer-name="Button & Hamburger"] {
    display: none !important;
  }

  /* ----- Industries ----- */
  #industries [data-framer-name="Sub Container"],
  #industries .framer-hqt01y {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* ----- Pricing cards ----- */
  #pricing .framer-1mf2g5r-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  #pricing [data-framer-name="Desktop 01"],
  #pricing [data-framer-name="Desktop-Yearly"],
  #pricing [data-framer-name="Desktop1 "] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ----- Contact ----- */
  #contact input,
  #contact select,
  #contact textarea,
  #contact button {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* ----- Footer ----- */
  #footer {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    padding-bottom: 32px !important;
  }

  #footer .framer-17j9icd-container,
  #footer footer {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hamburger — right side of .tas-mobile-nav-bar */
  #main header .tas-menu-toggle {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: 28px;
    height: 28px;
    padding: 4px 2px;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    position: static !important;
    flex: 0 0 28px !important;
    margin: 0 !important;
    z-index: 1 !important;
  }

  #main header .tas-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 0;
    transition: transform 0.2s ease;
  }

  #main header .tas-menu-toggle span:nth-child(3) {
    display: none;
  }

  #main header.tas-nav-open .tas-menu-toggle span:nth-child(1) {
    transform: translateY(4.5px) rotate(45deg);
  }

  #main header.tas-nav-open .tas-menu-toggle span:nth-child(2) {
    transform: translateY(-4.5px) rotate(-45deg);
  }
}

/* =============================================================================
   TABLET ONLY  (810px – 1199.98px)
   ============================================================================= */
@media (min-width: 810px) and (max-width: 1199.98px) {
  #main section,
  #main [data-framer-name$="section"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  #main header nav.framer-p99Gy,
  #main header nav[data-framer-name="Desktop"] {
    padding: 12px 30px !important;
  }
}

/* =============================================================================
   MOBILE ONLY  (max-width: 809.98px)
   ============================================================================= */
@media (max-width: 809.98px) {
  #main [data-framer-root] {
    padding-top: 88px !important;
  }

  #main #hero,
  #main header[data-framer-name="Hero section"] {
    padding-top: 0 !important;
    padding-bottom: 32px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    gap: 24px !important;
  }

  #main #hero .framer-c0nyhc-container {
    width: min(272px, calc(100% - 60px)) !important;
    max-width: 272px !important;
    height: 130px !important;
  }

  #main #hero .framer-c0nyhc-container video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }

  #main header nav.framer-p99Gy,
  #main header nav[data-framer-name="Desktop"] {
    padding: 12px 16px !important;
  }

  #main section,
  #main [data-framer-name$="section"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #main header [data-framer-name="Website Logo"] h4 {
    font-size: 28px !important;
  }

  #main header [data-framer-name="Button & Hamburger"] a {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  #industries [data-framer-name="Sub Container"],
  #industries .framer-hqt01y {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #faqs .framer-kQHm9,
  #faqs div[data-framer-name="Question"] {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Desktop: full horizontal nav (Framer JS may not hydrate locally) */
@media (min-width: 1200px) {
  #main header.framer-189i5va {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    padding: 16px 0 0 !important;
    background: transparent !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #main header .framer-53xhzu-container {
    width: 100% !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
    opacity: 0.8 !important;
  }

  #main header nav.framer-p99Gy,
  #main header nav[data-framer-name="Desktop"] {
    display: flex !important;
    flex-flow: row wrap !important;
    flex-direction: row !important;
    place-content: center space-between !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 1156px !important;
    margin: 0 auto !important;
    padding: 6px 0 !important;
    position: static !important;
  }

  #main header [data-framer-name="Website Logo"] {
    display: flex !important;
    position: static !important;
    flex: 0 0 20% !important;
    width: 20% !important;
    padding-right: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  #main header [data-framer-name="Website Logo"] .framer-b5omxr {
    display: flex !important;
    flex-flow: row nowrap !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }

  #main header [data-framer-name="Website Logo"] .framer-1yb4qiq {
    width: 36px !important;
    height: 75px !important;
    flex: 0 0 36px !important;
  }

  #main header [data-framer-name="Website Logo"] h4 {
    font-size: 28px !important;
  }

  #main header .framer-h25219,
  #main header [data-framer-name="Links"] {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: fit-content !important;
    max-width: fit-content !important;
    margin-top: 0 !important;
    padding: 6px 6px !important;
    border-radius: 12px !important;
    gap: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: center !important;
  }

  #main header [data-framer-name="Links"] [class*="-container"] {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }

  #main header [data-framer-name="Links"] a.framer-do7dS {
    padding: 8px 10px !important;
    min-height: 0 !important;
    line-height: 1.3 !important;
  }

  #main header [data-framer-name="Links"] .framer-text,
  #main header [data-framer-name="Links"] p {
    line-height: 1.3 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  #main header.tas-nav-open [data-framer-name="Links"] {
    flex-direction: row !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  #main header [data-framer-name="Button & Hamburger"] {
    display: flex !important;
    flex: 0 0 20% !important;
    width: 20% !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  #main header .tas-menu-toggle {
    display: none !important;
  }
}