/*
 * 4DOTT mobile readability fixes (Gilmedia, 2026-11-04)
 * Small corrections only: type size and contrast, mobile menu states,
 * tighter section spacing, partner logos in a grid. Desktop is untouched
 * except the mobile-menu colours, which only exist on small screens.
 * Revert: remove the enqueue in functions.php (or delete this file).
 */

:root {
  --dott-text: #55545c;        /* was #9d9ca4: 2.6:1 on #f3f4f4, now ~6.9:1 */
  --dott-text-muted: #6b6a72;
  --dott-green-strong: #127a43; /* white text on it ~5.4:1 */
  --dott-green-bright: #5fe39a; /* for links on dark photos */
}

/* ---------- Mobile menu (overlay) ---------- */
.menu_mobile .menu_mobile_nav_area li > a {
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.menu_mobile .menu_mobile_nav_area li > a:hover,
.menu_mobile .menu_mobile_nav_area li > a:focus-visible,
.menu_mobile .menu_mobile_nav_area li > a:active,
.menu_mobile .menu_mobile_nav_area li.current-menu-item > a,
.menu_mobile .menu_mobile_nav_area li.current-menu-ancestor > a,
.menu_mobile .menu_mobile_nav_area li.current-menu-parent > a,
.menu_mobile .menu_mobile_nav_area li.current_page_item > a {
  background-color: var(--dott-green-strong) !important;
  color: #fff !important;
}
.menu_mobile .menu_mobile_nav_area li > a:hover .open_child_menu,
.menu_mobile .menu_mobile_nav_area li.current-menu-item > a .open_child_menu {
  color: #fff !important;
}
.menu_mobile .menu_mobile_nav_area li > a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}
/* sub-menu items: readable size, dark text, same states */
.menu_mobile .menu_mobile_nav_area .sub-menu li > a {
  font-size: 17px !important;
  color: #333 !important;
}
.menu_mobile .menu_mobile_nav_area .sub-menu li > a:hover,
.menu_mobile .menu_mobile_nav_area .sub-menu li.current-menu-item > a {
  background-color: var(--dott-green-strong) !important;
  color: #fff !important;
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  /* Body copy: 15px light grey -> 17px readable grey */
  body,
  .wpb_text_column p,
  .wpb_text_column li,
  .post_content p,
  .post_content li,
  .entry-content p,
  .entry-content li,
  .sc_services_item_content p,
  .sc_item_descr,
  .sc_item_descr p,
  .services_page_content p,
  .services_page_content li {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }
  body,
  .wpb_text_column,
  .wpb_text_column p,
  .wpb_text_column li,
  .post_content p,
  .entry-content p,
  .entry-content li,
  .sc_services_item_content p,
  .sc_item_descr,
  .services_page_content p,
  .services_page_content li {
    color: var(--dott-text);
  }
  /* keep white text white on the green and photo sections */
  .vc_row[class*="scheme_dark"] p,
  .scheme_dark p,
  .scheme_dark li,
  .footer_wrap p,
  .footer_wrap li {
    color: inherit;
  }

  /* Headings a touch larger so they lead the bigger body text */
  .sc_item_title.sc_item_title_tag,
  h2.sc_item_title { font-size: 28px !important; line-height: 1.2 !important; }
  .sc_services_item_title { font-size: 20px !important; }
  .sc_item_subtitle { font-size: 14px !important; letter-spacing: 0.12em; }

  /* Form fields: 16px+ stops iOS zooming in on focus */
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="search"], input[type="password"], textarea, select {
    font-size: 17px !important;
  }
  .wpcf7 input[type="submit"], .sc_button, .sc_item_button a {
    min-height: 48px;
  }

  /* Contact labels ("Toll Free:", hours) were very pale */
  .sc_icons_item_description,
  .sc_icons_item_description span {
    font-size: 17px !important;
    color: var(--dott-text-muted);
  }
  .sc_icons_item_description a { color: #1d1d22; }

  /* Footer links/text: comfortable tap size */
  .footer_wrap,
  .footer_wrap p,
  .footer_wrap li,
  .footer_wrap a { font-size: 16px !important; line-height: 1.6 !important; }
  .footer_wrap li { padding: 4px 0; }
  .contacts_wrap,
  .contacts_wrap span,
  .contacts_wrap a { font-size: 16px !important; line-height: 1.6 !important; }

  /* Breadcrumb current item: brighter green so it reads on photos */
  .breadcrumbs .breadcrumbs_item.current { color: var(--dott-green-bright) !important; }

  /* Vertical rhythm: 60px spacers -> 36px, keeps sections from feeling stretched */
  .vc_empty_space[style*="height: 60px"],
  .vc_empty_space[style*="height:60px"] { height: 36px !important; }
  .vc_empty_space[style*="height: 45px"],
  .vc_empty_space[style*="height: 48px"] { height: 28px !important; }

  /* Content width: the theme leaves 55px each side on phones (280px of a
   * 390px screen). 20px gutters instead (Sasha 2026-11-04: "too narrow"). */
  .content_wrap,
  .content_container {
    width: auto !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  /* Sticky header on phones (Sasha 2026-11-04). .page_wrap has overflow:hidden,
   * so position:sticky can't work; pin the mobile-only header row instead and
   * reserve its height. js/logo-marquee.js adds .dott-scrolled for the shadow. */
  .top_panel { padding-top: 103px; }
  .top_panel .sc_layouts_row.sc_layouts_hide_on_desktop {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 990;
    background: #fff;
    transition: box-shadow 200ms ease-out, padding 200ms ease-out;
  }
  body.dott-scrolled .top_panel .sc_layouts_row.sc_layouts_hide_on_desktop {
    box-shadow: 0 2px 12px rgba(20, 40, 30, 0.12);
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  body.admin-bar .top_panel .sc_layouts_row.sc_layouts_hide_on_desktop { top: 46px; }
  @media (max-width: 600px) {
    body.admin-bar .top_panel .sc_layouts_row.sc_layouts_hide_on_desktop { top: 0; }
  }

  /* Header: logo flush left, burger flush right, on the same 20px gutters as
   * the content (the header layout had its own 55px side margins). */
  .top_panel .sc_content.sc_content_width_1_1 {
    width: auto !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  .top_panel .vc_row.wpb_row.vc_inner { margin-left: 0 !important; margin-right: 0 !important; }
  .top_panel .vc_row.wpb_row.vc_inner > .wpb_column > .vc_column-inner {
    padding-left: 0 !important; padding-right: 0 !important; align-items: center;
  }
  .top_panel .vc_row.wpb_row.vc_inner > .vc_col-xs-5 > .vc_column-inner { justify-content: flex-end !important; }
  .top_panel .vc_row.wpb_row.vc_inner > .vc_col-xs-5 .wpb_wrapper {
    display: flex !important; justify-content: flex-end; align-items: center; width: 100%;
  }
  .top_panel .sc_layouts_menu_mobile_button { margin-right: -10px; padding: 10px; }

  /* "Welcome to 4DOTT Inc." framed box: less inner padding so it fills the width */
  .sc_title.sc_title_accent { padding: 10px !important; }
  .sc_title.sc_title_accent .title_wrap_in { padding: 24px 18px !important; }
  .sc_title.sc_title_accent .title_wrap { width: auto !important; }

  /* Contact page "Call Us / Hours / Location" framed box: same fix as the
   * homepage welcome box - thinner frame, less inner padding */
  .sc_icons.sc_icons_default[class*="sc_icons_size_"] { padding: 10px !important; }
  .sc_icons.sc_icons_default .sc_icons_wrap { padding: 26px 20px 18px !important; margin: 0 !important; }
  .sc_icons.sc_icons_default .sc_icons_wrap > .sc_icons_item,
  .sc_icons.sc_icons_default .sc_icons_item { width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; }

  /* About page "IT Services" list: the number span IS the icon circle (desktop
   * hides the digits with font-size 0). Mobile: 64px circle, icon centred,
   * title on one line beside it, like desktop. */
  .sc_services_list .sc_services_item {
    display: flex !important; align-items: center; gap: 18px;
    padding: 14px 0 !important; margin: 0 !important; min-height: 0 !important;
  }
  .sc_services_list .sc_services_item_number {
    position: static !important; flex: 0 0 64px;
    width: 64px !important; height: 64px !important; min-width: 64px;
    font-size: 0 !important; line-height: 0 !important; color: transparent !important;
    background-position: center center !important; background-size: 56% auto !important;
    border-radius: 50%; margin: 0 !important;
  }
  .sc_services_list .sc_services_item_info,
  .sc_services_list .sc_services_item_header {
    text-align: left !important;
    position: static !important; margin: 0 !important; padding: 0 !important;
    flex: 1 1 auto; min-width: 0; max-width: none !important; width: auto !important;
  }
  .sc_services_list .sc_services_item_title,
  .sc_services_list .sc_services_item_title a {
    font-size: 20px !important; line-height: 1.25 !important; margin: 0 !important;
    max-width: none !important; width: auto !important;
    word-spacing: normal !important; /* theme forces 600px = one word per line */
    text-align: left !important; justify-content: flex-start !important;
  }

  /* "What we can do for Your Business": icon + title only, 2 x 2 grid
   * (Sasha 2026-11-04: four stacked items with blurbs looked too long) */
  .sc_services_default:not(.sc_services_list) .sc_services_item_content,
  .sc_services_default:not(.sc_services_list) .sc_services_item_button { display: none !important; }
  .sc_services_default:not(.sc_services_list) .sc_services_columns_wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 28px 12px;
    margin: 0 !important;
  }
  .sc_services_default:not(.sc_services_list) .sc_services_columns_wrap > [class*="trx_addons_column-"] {
    width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important;
  }
  .sc_services_default:not(.sc_services_list) .sc_services_item { margin: 0 !important; text-align: center; }
  .sc_services_default:not(.sc_services_list) .sc_services_item_pictogram { display: inline-block; margin: 0 auto 10px; float: none !important; }
  .sc_services_default:not(.sc_services_list) .sc_services_item_info { padding: 0 !important; margin: 0 !important; }
  .sc_services_default:not(.sc_services_list) .sc_services_item_title { font-size: 19px !important; line-height: 1.25 !important; margin: 0 !important; }

  /* Partner logos: the stacked grid never became visible on phones (fade-in
   * animation) and the tiles were tiny. Replaced by a two-row marquee. */
  .dott-logo-row { display: none !important; }
  body .dott-marquee { display: block; }
}

/* ---------- Partner logo marquee (built by js/logo-marquee.js) ---------- */
.dott-marquee { display: none; margin: -36px -20px 32px; padding: 4px 0; }
.dott-marquee__row {
  overflow: hidden;
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.dott-marquee__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: dott-marquee 32s linear infinite;
  will-change: transform;
}
.dott-marquee__row--reverse .dott-marquee__track { animation-direction: reverse; animation-duration: 36s; }
.dott-marquee__item {
  flex: 0 0 auto;
  width: 150px;
  height: 97px;
  background: #fff;
  border: 1px solid #e6e8e8;
  display: flex; align-items: center; justify-content: center;
}
.dott-marquee__item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dott-marquee:active .dott-marquee__track,
.dott-marquee:hover .dott-marquee__track { animation-play-state: paused; }
@keyframes dott-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - 8px), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dott-marquee__track { animation: none; }
  .dott-marquee__row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- No layout jump while the hero slider boots ----------
 * Slider Revolution starts at 0px and then grows, pushing the page down.
 * Reserve its final size (measured: 6:5 on phones, 300/400/500px above). */
.slider_wrap.slider_alias_main { min-height: calc(100vw * 5 / 6); }
@media (min-width: 768px)  { .slider_wrap.slider_alias_main { min-height: 300px; } }
@media (min-width: 1024px) { .slider_wrap.slider_alias_main { min-height: 400px; } }
@media (min-width: 1280px) { .slider_wrap.slider_alias_main { min-height: 500px; } }

@media (prefers-reduced-motion: reduce) {
  .menu_mobile .menu_mobile_nav_area li > a { transition: none; }
}