/*
 * Phone and tablet improvements on top of the ported theme. NOT on live.
 *
 * Linked from src/app/layout.tsx with media="(max-width: 1024px)", after the
 * page's own stylesheets, so nothing here reaches a desktop width (1025px
 * and up stays exactly as ported). 1024px is Elementor's tablet breakpoint on
 * this site: the mobile header and the stacked layouts start there.
 *
 * Each block says what was wrong. Selectors match the theme's specificity, or
 * use !important where Elementor's per-element rules already do.
 */

/* ---- Tablet and phone (up to 1024px) ---------------------------------- */

/* Mobile menu: the theme's custom.css paints each sliding submenu panel with
   footer_bg.png from magicmedia.wpenginepowered.com, a host that is gone, so
   the panels were plain white. Same image, from this site's media. */
ul.menu .menu-item > .elementskit-submenu-indicator + .sub-menu {
  background-image: url(/wp-content/uploads/2024/03/footer_bg.png);
}

/* Portfolio pages (/our-work/…): the theme's global `.row {height: 80px}`
   held the five stacked filters in an 80px box, so four of them spilled over
   the artwork grid below. */
.custom-art-filter .row {
  height: auto;
}

/* Portfolio items (artwork, mobile artwork, video, cinematic, VFX): the
   theme's single.php starts at the top of the page, under the fixed 60px
   mobile header, which hid the title. Also no side margin at all. */
.single-artwork main.site-main,
.single-mobile-artwork main.site-main,
.single-video main.site-main,
.single-cinematic main.site-main,
.single-vfx main.site-main,
.single-portfolio main.site-main {
  padding-top: 60px;
}
.single-artwork .entry-header,
.single-mobile-artwork .entry-header,
.single-video .entry-header,
.single-cinematic .entry-header,
.single-vfx .entry-header,
.single-portfolio .entry-header,
.single-artwork .entry-content,
.single-mobile-artwork .entry-content,
.single-video .entry-content,
.single-cinematic .entry-content,
.single-vfx .entry-content,
.single-portfolio .entry-content {
  padding-left: 16px;
  padding-right: 16px;
}

/* Mobile menu: the arrow beside About Us, Services, Our Work and Resources
   is an ElementsKit icon, but a theme rule sets Rubik on it, so it drew as
   an empty box. */
.mobile_menu_header .elementskit-submenu-indicator::before {
  font-family: elementskit !important;
}

/* News, case study and category listings: the card text was 8px (category
   and date) to 12px (title, summary). */
.news-article-card .news-card-data .category-date p,
.news-article-card .news-card-data .category-date a {
  font-size: 11px !important;
  line-height: 1.4 !important;
}

/* Listing pagination: 24px numbers are too small to tap. */
.wp-pagenavi a,
.wp-pagenavi span.current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* Legal pages: tables pasted into the text were wider than a phone. */
.elementor-widget-text-editor table {
  width: 100% !important;
  max-width: 100%;
  table-layout: fixed;
}
.elementor-widget-text-editor td,
.elementor-widget-text-editor th {
  overflow-wrap: anywhere;
}

/* Footer social icons: 35px boxes, so a larger invisible hit area around
   each (same look, same spacing). */
.elementor-element-153f7afa a {
  position: relative;
}
.elementor-element-153f7afa a::after {
  content: "";
  position: absolute;
  inset: -5px;
}

/* ---- Phones (up to 767px) --------------------------------------------- */
@media (max-width: 767px) {
  /* Listing cards: the text sat in a 170px column beside the picture, the
     title wrapping to five lines in 12px. The picture stays on the right
     (several are drawn with a blank left side for this layout), but the
     text gets 60% of the card and readable sizes, and the card grows with
     it. */
  .news-article-card {
    height: auto !important;
    min-height: 196px;
    background-size: cover !important;
    background-position: right center !important;
  }
  .news-article-card .bg-color-div {
    width: 74% !important;
    height: 100% !important;
    background-size: 100% 100% !important;
  }
  .news-article-card .news-card-data {
    width: 60% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 196px;
  }
  .news-article-card .news-card-data h2,
  .news-article-card .news-card-data h2 a {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  .news-article-card .news-card-data .short-desc {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  /* Portfolio filters: two to a row rather than five stacked full width. */
  .custom-art-filter .filter_option_gird {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    column-gap: 12px;
    margin-bottom: 32px !important;
  }
  .custom-art-filter .filter_option_content {
    width: auto !important;
    min-width: 0;
  }
  /* the theme gives each dropdown a 187px minimum, wider than half a phone */
  .custom-art-filter .filter-style-wrapper,
  .custom-art-filter .filter-style-wrapper .dropdown {
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Home, "Our services": the five service tabs sat in a 198px box that
     scrolled inside the page, so only "Development" showed and nothing said
     there was more. Now a row of cards to swipe, the next one peeking in. */
  .services_home_tabs .eael-tabs-nav {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .services_home_tabs .eael-tabs-nav::-webkit-scrollbar {
    display: none;
  }
  .services_home_tabs .eael-tabs-nav > ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    height: auto !important;
    margin-top: 40px !important;
  }
  .services_home_tabs .eael-tabs-nav > ul > li {
    flex: 0 0 82% !important;
    width: 82% !important;
    scroll-snap-align: start;
    padding: 22px 20px 26px 15px !important;
  }

  /* Text fields under 16px make iOS Safari zoom the page on focus. */
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ---- Tap targets (below 1024px) ----------------------------------------
   Links and icons smaller than 44px, found by measuring every page type at
   390px. Where the picture should not change, an invisible ::before/::after
   takes the taps around the element (it draws nothing and moves nothing). */
@media (max-width: 1023px) {
  /* Menu button: 40px wide. */
  #menu_toggle {
    position: relative;
  }
  #menu_toggle::after {
    content: "";
    position: absolute;
    inset: 0 -2px;
  }
  /* Home, artwork slider: 27x24 arrows (their ::after is the icon). */
  .swiper-button-prev::before,
  .swiper-button-next::before {
    content: "";
    position: absolute;
    inset: -10px -9px;
  }

  /* Header logo: 85x18. */
  .mobile_header .site_logo a {
    position: relative;
  }
  .mobile_header .site_logo a::after {
    content: "";
    position: absolute;
    inset: -13px -4px;
  }

  /* Mobile menu: 24px links in 48px rows; the whole row takes the tap now. */
  .mobile_menu_header #menu-main-menu > li > a {
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: -12px;
    margin-bottom: -12px;
  }
  /* Its social icons: 24x18, 48px apart. */
  .mobile_socil_links ul li a {
    position: relative;
  }
  .mobile_socil_links ul li a::after {
    content: "";
    position: absolute;
    inset: -13px -10px;
  }

  /* Home hero slider: 24px arrows 14px apart (their ::after is the icon),
     the slide counter and the 19px "See More" (its ::before is drawn). */
  .bdt-prime-slider .bdt-navigation-arrows a.bdt-icon::before {
    content: "";
    position: absolute;
    inset: -10px -7px;
  }
  .bdt-prime-slider .bdt-ps-counternav li a {
    position: relative;
  }
  .bdt-prime-slider .bdt-ps-counternav li a::after {
    content: "";
    position: absolute;
    inset: -11px;
  }
  .bdt-prime-slider .bdt-crelly-btn a.bdt-slide-btn::after {
    content: "";
    position: absolute;
    inset: -13px 0;
  }
  /* Home, "See our projects": a 15px-high text button. */
  .elementor-element-754416c a.elementor-button {
    position: relative;
  }
  .elementor-element-754416c a.elementor-button::after {
    content: "";
    position: absolute;
    inset: -15px 0;
  }

  /* Footer menu: "Careers" is 21px high where its neighbours are 45px
     (an invisible tap area, so the spacing stays as it is). */
  #menu-footer-menu > li > a {
    position: relative;
  }
  #menu-footer-menu > li > a::after {
    content: "";
    position: absolute;
    inset: -12px 0;
  }

  /* Listing cards: the 15px category link sat 11px above the title, and
     "Read more" is 12px high. 18px between category and title leaves room
     for a 44px tap area that does not reach the title. */
  .news-article-card .news-card-data .category-date {
    margin-bottom: 18px !important;
  }
  .news-card-data .category-date p.news-cat a,
  .news-article-card .news-card-data > a {
    position: relative;
  }
  .news-card-data .category-date p.news-cat a::after {
    content: "";
    position: absolute;
    inset: -15px 0 -14px;
  }
  .news-article-card .news-card-data > a::after {
    content: "";
    position: absolute;
    inset: -16px 0;
  }

  /* Listing page numbers: the earlier 44px minimum lost to a more specific
     theme rule (24px wide). Wrap onto a second row when they do not fit. */
  .pagination .wp-pagenavi {
    flex-wrap: wrap;
    justify-content: center;
  }
  .pagination .wp-pagenavi a,
  .pagination .wp-pagenavi span.current,
  .pagination .wp-pagenavi span.extend {
    min-width: 44px !important;
    min-height: 44px;
  }

  /* Portfolio and careers filters: 34px drop-downs, and "See More" is a 16px line of text. */
  .filter_option_content button.filter_btn {
    min-height: 44px;
  }
  button.view-more-button {
    position: relative;
  }
  button.view-more-button::after {
    content: "";
    position: absolute;
    inset: -14px -10px;
  }

  /* Job pages: "Back to careers", 12px high. */
  .single-career_listing .elementor-icon-list-items li a {
    position: relative;
  }
  .single-career_listing .elementor-icon-list-items li a::before {
    content: "";
    position: absolute;
    inset: -16px 0;
  }
}

/* ---- The job application popup (below 1024px) --------------------------
   Elementor popup 3813 (and any other Elementor popup) sat 30px down the
   screen at full screen height, so its bottom 30px (the end of the form)
   could not be scrolled into view, and the close button was 20x20. Now it
   fills the screen exactly (dvh: the visible height, toolbars included),
   scrolls inside itself without handing the scroll to the page, and the
   close button is a 44px circle that stays put over the form. */
@media (max-width: 1023px) {
  .elementor-popup-modal .dialog-widget-content {
    top: 0 !important;
    bottom: auto !important;
    margin: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
  }
  .elementor-popup-modal .dialog-message {
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .elementor-popup-modal .dialog-close-button {
    top: 8px !important;
    right: 8px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  }
  .elementor-popup-modal .dialog-close-button svg {
    width: 20px;
    height: 20px;
  }
  /* No page scroll behind it: Elementor's body {overflow: hidden} is not
     enough on iOS Safari, which scrolls the root element. */
  html:has(body.dialog-prevent-scroll) {
    overflow: hidden !important;
  }
  body.dialog-prevent-scroll {
    overscroll-behavior: none;
  }
}