/*
 * Phone and tablet layer. Not from WordPress: live's theme leaves these
 * problems on small screens, and Tim asked for the mobile site to meet
 * current standards (2026-10-15). Every rule sits behind a max-width query,
 * so desktop (1025px and up) renders exactly as live.
 *
 * Loaded after the theme's stylesheets (precedence "mm-mobile" in
 * src/app/[[...slug]]/page.tsx). Rules that must beat the theme's own
 * !important or per-element styles say !important themselves.
 */

/* ---------------------------------------------------------------------
 * Header and menu. Below 981px the child theme lays the header over the
 * page (absolute, transparent), made for the dark hero that most pages
 * open with. The menu button is a 21px glyph in the hero's white.
 * ------------------------------------------------------------------- */
@media (max-width: 980px) {
  /* The menu button: a 44px target that stays on screen while scrolling,
     readable on dark heroes and white pages alike. */
  .fusion-mobile-menu-icons {
    position: static !important;
  }
  /* The theme gives the header a (no-op) transform, which would pin the
     button and the menu to the header instead of the screen. */
  .fusion-header {
    transform: none !important;
  }
  .fusion-mobile-menu-icons a.awb-icon-bars {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 50%;
    background: rgba(28, 28, 28, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff !important;
    font-size: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  }
  .fusion-mobile-menu-icons a.awb-icon-bars:before {
    color: #fff !important;
  }
  /* The open menu: a panel under the button, wherever the page is
     scrolled to, scrolling on its own when it is taller than the screen. */
  .fusion-mobile-nav-holder {
    position: fixed !important;
    top: 66px;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    z-index: 100000;
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  }
  .fusion-mobile-nav-holder > ul {
    width: auto !important;
    border: 0 !important;
  }
  .fusion-mobile-nav-holder li a {
    min-height: 46px;
    display: flex !important;
    align-items: center;
  }
  .fusion-mobile-nav-holder .fusion-open-submenu {
    min-width: 46px;
    min-height: 46px;
  }

  /* Pages that do not open with a dark picture (posts, FAQ, archives,
     legal pages): a white header in the flow of the page, so the logo no
     longer sits on the first heading. */
  body:not(:has(.fusion-builder-row-1[style*="background-image"])) .fusion-header-wrapper,
  body.page-id-42248 .fusion-header-wrapper {
    position: relative !important;
  }
  body:not(:has(.fusion-builder-row-1[style*="background-image"])) .fusion-header,
  body.page-id-42248 .fusion-header {
    background-color: #fff !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  }
  body:not(:has(.fusion-builder-row-1[style*="background-image"])) #main {
    padding-top: 32px !important;
  }
}

/* ---------------------------------------------------------------------
 * Footer: three menus of links 14px apart; tap targets of 36px and more.
 * ------------------------------------------------------------------- */
@media (max-width: 980px) {
  .fusion-footer .fusion-menu-element-wrapper.direction-column .fusion-menu > li > a {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 36px;
    font-size: 15px !important;
  }
  .fusion-footer .fusion-menu-element-wrapper.direction-column .fusion-menu > li > a .menu-text {
    font-size: 15px !important;
  }
  .fusion-footer .fusion-text ul li a,
  .fusion-footer .list-inline-item a {
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 15px;
  }
  .fusion-footer .list-inline-item {
    margin-right: 14px !important;
  }
  .fusion-footer .fusion-social-links .fusion-social-network-icon,
  .fusion-footer .social-icons a,
  .fusion-footer a[class*="fusion-social"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------
 * Small controls: slider dots and bullets keep their look but get a 44px
 * area to tap; the consent box of every form is readable and tappable.
 * ------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .owl-dots .owl-dot,
  .n2-ss-control-bullet .n2-bullet {
    position: relative;
  }
  .owl-dots .owl-dot:after,
  .n2-ss-control-bullet .n2-bullet:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  /* Sidebar lists (best services, categories): the whole grey row is the
     link, not just its 20px line of text. "Read More" under list items. */
  .widget ul.service-list li,
  .widget_categories li {
    position: relative;
  }
  .widget ul.service-list li a:after,
  .widget_categories li a:after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .fusion-meta-info .fusion-read-more {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .gform_wrapper .gfield--type-consent .gfield_consent_label,
  .gform_wrapper .ginput_container_consent label {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
  .gform_wrapper .ginput_container_consent input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    vertical-align: middle;
    margin-right: 6px !important;
  }
}

/* ---------------------------------------------------------------------
 * Content.
 * ------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Long addresses in job ads and posts (live clips them at the edge). */
  .post-content a,
  .fusion-text a,
  .post-content li,
  .fusion-text li {
    overflow-wrap: anywhere;
  }
}

@media (min-width: 600px) and (max-width: 1024px) {
  /* The homepage's first slide has no side padding of its own, so on
     tablets its row's negative gutters push the headline off the left
     edge. */
  .home .fusion-fullwidth.fusion-builder-row-1 > .fusion-builder-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

@media (min-width: 600px) and (max-width: 980px) {
  /* Blog page and archives built with a sidebar column (search, best
     services, categories): live keeps the two side by side down to
     800px and below, which squeezes the post grid into 100px columns.
     Content first, the sidebar under it. */
  #main .fusion-builder-row:has(> .fusion-layout-column .searchform) > .fusion-layout-column {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
}

@media (max-width: 767px) {
  /* The blog page's newest post: a picture with its title laid over it.
     At this width the title is taller than the picture and runs off its
     top edge (white text on white). Title under the picture instead. */
  .blog .item .overlay {
    position: relative !important;
    padding: 18px 20px 22px !important;
    background: #1e1e1e !important;
  }
  .blog .item .overlay .inner {
    position: static !important;
  }
  .blog .item .overlay h3 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin: 0 0 8px !important;
  }
  .blog .item .overlay h3 a {
    font-size: inherit !important;
  }
  .blog .item .cover img {
    display: block;
    width: 100%;
  }

  /* Portfolio pages: the facts table (genre, platform…) does not wrap,
     so its values ran past the edge into a sideways-scrolling box. */
  .single-avada_portfolio .table-2 table {
    width: 100% !important;
  }
  .single-avada_portfolio .table-2 td {
    white-space: normal !important;
  }
}

/* ---------------------------------------------------------------------
 * Related posts under a blog post (an Avada carousel). The theme hangs its
 * two 30px arrows halfway down the cards, over the titles; on a phone the
 * cards are narrow and the arrows covered the words. Below 1024px they sit
 * in a row under the cards instead, as 44px buttons. Swiping still works.
 * ------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .related-posts .fusion-carousel-nav {
    display: flex !important;
    justify-content: center;
    gap: 16px;
    padding-top: 16px;
  }
  .related-posts .fusion-carousel-nav .fusion-nav-prev,
  .related-posts .fusion-carousel-nav .fusion-nav-next {
    position: static !important; /* Avada's script also sets left / margin-left inline */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 1;
  }
  .related-posts .fusion-carousel-nav .fusion-nav-prev::before,
  .related-posts .fusion-carousel-nav .fusion-nav-next::before {
    line-height: 44px;
  }
}