/*=====================================================================
  CYCLONE INDUSTRIES — Mobile Stylesheet
  Fixes and refinements that only apply on small screens. Load this
  file LAST, after plugins/style/skin/templete + all cyclone-*.css
  and any page-specific css, so it wins the cascade without needing
  !important.

  Breakpoints used (matches the tablet/phone split already used by
  the rest of the cyclone-*.css files, plus one extra tier for very
  small phones):
    ≤991px  tablet / where the template swaps to the off-canvas nav
    ≤767px  phone
    ≤575px  small phone
    ≤420px  very small phone (iPhone SE, etc.)
=====================================================================*/

/* ============================================================
   HEADER — logo, CTA button and search were sized for desktop
   and didn't fit next to each other in one row on a phone
   (100px-tall logo ≈ 300px wide + "Contact Us" button + search
   icon + hamburger overflowed the viewport). Drop the "Contact
   Us" CTA on mobile (still reachable via the top-bar phone
   number and the footer) and turn the hamburger + search into a
   matched pair of tap targets.
============================================================ */
@media (max-width: 991px) {
  .main-bar .extra-nav .extra-cell:first-child {
    display: none;
  }
  .header-transparent .cy-logo__img,
  .is-fixed .cy-logo__img {
    height: 48px;
  }
  .main-bar .container {
    flex-wrap: nowrap;
  }
  .main-bar .navbar-toggler,
  .main-bar .extra-nav {
    padding: 0;
    border-left: none;
  }
  .main-bar .extra-nav {
    margin: 0;
    display: flex;
    align-items: center;
    margin-left: auto;
  }
  /* Sits right after the extra-nav (search icon) in flex order — see
     cyclone-home.css / cyclone-pages.css — so give it a small gap
     instead of the 0 margin used when it sat on its own. */
  .main-bar .navbar-toggler {
    margin: 0 0 0 10px;
  }
  .main-bar .navbar-toggler,
  .main-bar .extra-nav .extra-cell,
  .main-bar .extra-nav .site-button-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .main-bar .extra-nav .site-button-link {
    font-size: 20px;
    line-height: 1;
  }
}

@media (max-width: 420px) {
  .header-transparent .cy-logo__img,
  .is-fixed .cy-logo__img {
    height: 40px;
  }
}

/* ============================================================
   MOBILE NAV PANEL — the off-canvas menu (".mo-left") slides in
   with a white background, but the template's link colour for
   a "header-transparent" header is white-on-white, so the menu
   items are invisible until tapped. Force readable, on-brand
   colours for the panel regardless of which vendor rule the
   theme resolves to.
============================================================ */
@media (max-width: 991px) {
  .site-header .header-nav .nav > li > a {
    color: var(--cy-fg, #1a2533) !important;
  }
  .site-header .header-nav .nav > li > a:hover,
  .site-header .header-nav .nav > li > a:focus,
  .site-header .header-nav .nav > li.active > a {
    color: var(--cy-primary, #1e78b4) !important;
  }
  .site-header .header-nav .nav > li {
    border-bottom: 1px solid var(--cy-border, #dde6ef);
  }
}

/* ============================================================
   TOP BAR — email + phone + full address + social icons in one
   flex row wraps messily on phones. Keep only the phone number
   (the one action a mobile visitor is most likely to want) and
   drop the rest; social links are repeated in the footer.
============================================================ */
@media (max-width: 767px) {
  .top-bar .row {
    justify-content: center;
  }
  .dlab-topbar-right {
    display: none;
  }
  .cy-topbar-info {
    justify-content: center;
    width: 100%;
  }
  .cy-topbar-info li {
    font-size: 14px;
  }
  .cy-topbar-info li:first-child,
  .cy-topbar-info li:last-child {
    display: none;
  }
}

/* ============================================================
   PAGE BANNER (breadcrumb hero) — used on 18 of the 20 pages.
   Its 220px top padding is sized for the desktop header; on
   mobile the header is much shorter, so it leaves a huge empty
   gap above the title. Tighten it per breakpoint.
============================================================ */
@media (max-width: 767px) {
  .cy-banner {
    padding: 150px 0 56px;
  }
}
@media (max-width: 420px) {
  .cy-banner {
    padding: 130px 0 44px;
  }
}

/* ============================================================
   HOME HERO — reduce further on very small phones and stop the
   feature strip's negative top-margin from riding up over the
   hero copy now that the hero itself is much shorter.
============================================================ */
@media (max-width: 575px) {
  .cy-strip {
    margin-top: -36px;
  }
}
@media (max-width: 420px) {
  .cy-hero--video {
    padding: 130px 0 90px;
  }
  .cy-strip {
    margin-top: -24px;
  }
  .cy-strip__item {
    padding: 24px 20px;
  }
}

/* ============================================================
   SECTION RHYTHM — desktop vertical padding (90–120px) carries
   straight through the existing breakpoints untouched, making
   every inner/home page much longer to scroll than it needs to
   be on a phone. Tighten consistently across all sections.
============================================================ */
@media (max-width: 767px) {
  .cy-about,
  .cy-why {
    padding: 70px 0;
  }
  .cy-services,
  .cy-stats,
  .cy-markets,
  .cy-related,
  .cy-cstrip,
  .kral-contact {
    padding: 60px 0;
  }
  .cy-brands {
    padding: 56px 0;
  }
  .cy-cta {
    padding: 0 0 70px;
  }
  .cy-cta__box {
    padding: 40px 26px;
  }
  .cy-layout {
    padding: 56px 0 70px;
  }
  .cy-contact {
    padding: 60px 0 70px;
  }
  .cy-about-intro {
    padding: 60px 0 30px;
  }
  .cy-mvv,
  .cy-values {
    padding: 44px 0;
  }
  .kral-intro {
    padding: 56px 0 40px;
  }
  .kral-products {
    padding: 10px 0 60px;
  }
}
@media (max-width: 420px) {
  .cy-about,
  .cy-why {
    padding: 54px 0;
  }
  .cy-services,
  .cy-stats,
  .cy-markets,
  .cy-related,
  .cy-cstrip,
  .kral-contact {
    padding: 46px 0;
  }
  .cy-brands {
    padding: 42px 0;
  }
  .cy-cta {
    padding: 0 0 54px;
  }
  .cy-layout {
    padding: 42px 0 54px;
  }
  .cy-contact {
    padding: 46px 0 54px;
  }
}

/* ============================================================
   TAP TARGETS — stack hero/CTA action buttons full-width on
   small phones instead of leaving narrow, hard-to-tap pills.
============================================================ */
@media (max-width: 480px) {
  .cy-hero__actions,
  .cy-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cy-hero__actions .cy-btn,
  .cy-cta__actions .cy-btn {
    justify-content: center;
    width: 100%;
  }
}