/* site-specific overrides — loaded after all theme CSS */

/* ------------------------------------------------------------------ *
 * Hero background videos — restore BeTheme's dot-grid overlay
 * ------------------------------------------------------------------ *
 * BeTheme darkens video heroes with a fine dot grid (videomask.png) drawn by
 * `.section_video .mask`, which makes the white hero text readable. Two fixes:
 *
 *   1) A playing <video> is composited on its own GPU layer and paints over the
 *      mask even though the mask has a higher z-index. Promoting the mask to its
 *      own layer (translateZ) keeps the grid rendered on top of the video.
 *
 *   2) videomask.png tiles at a 2px dot pitch — so fine it's nearly invisible
 *      over busy footage. The baked poster grid (what the image heroes show)
 *      renders at ~4px on screen, so scale the tile 2x to match it.
 *
 * Only the overlay layer is touched — the video's size and position are left
 * exactly as the theme sets them.
 */
.section.has-video .section_video .mask {
  background-size: 20px 20px; /* 2x BeTheme's 10px tile → ~4px dot pitch, matches the poster grid */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Home hero only: nudge the background video up so the top of the building and
 * its antenna stay in frame. The video is absolutely positioned (top:0) and
 * cropped by the section; shifting it up reveals more of the upper composition.
 * Scoped to .home so the other video heroes are unaffected. */
.home .section.has-video .section_video video {
  top: -142px;
}

/* ------------------------------------------------------------------ *
 * Mobile hero videos — re-enable autoplay (no JS)
 * ------------------------------------------------------------------ *
 * BeTheme hides background videos on every device ≤1024px (layout.css:
 * `@media (max-device-width:1024px){ .section_video{display:none!important} }`),
 * an old default from when mobile browsers blocked video autoplay — leaving
 * only the static poster. Our <video> is native HTML5 with `autoplay muted
 * loop playsinline`, which modern mobile Chrome/Safari DO autoplay, so simply
 * un-hide it. No JS involved (playback is the browser's native muted-inline
 * autoplay).
 *
 * The source video has a black bar baked along its BOTTOM (a trick to resize it
 * without a custom encode). Desktop hides that bar by covering the hero with the
 * video — BeTheme's `.section_video video{min-width:100%;min-height:100%}` scales
 * it to fill, and the section's `overflow:hidden` clips whatever spills past the
 * box. Because the video is anchored at top:0, the spill (and the bar) is clipped
 * off the BOTTOM. We replicate exactly that on mobile: just un-hide the video and
 * keep BeTheme's cover sizing (do NOT use object-fit — that center-crops the whole
 * frame, leaving a sliver of the bar). We only reset the desktop-only -142px home
 * nudge to 0, since on the shorter mobile hero it would pull the bar up into view. */
@media only screen and (max-device-width: 1024px) {
  .section.has-video .section_video { display: block !important; }
  .home .section.has-video .section_video video { top: 0; }
}

/* ------------------------------------------------------------------ *
 * Base body text size — bump toward the browser default
 * ------------------------------------------------------------------ *
 * BeTheme's generated typography sets the body copy at 14px (desktop) / 13px
 * (smaller screens), which reads small. Nudge it to 16px — the normal browser
 * default — with a proportional line-height. Set on <body>, so all copy that
 * inherits its size scales up; component-specific sizes (menu, headings,
 * buttons) keep their own values. Loaded after the theme CSS, so it wins. */
body {
  font-size: 16px;
  line-height: 28px;
}

/* ------------------------------------------------------------------ *
 * Contact form feedback
 * ------------------------------------------------------------------ *
 * On submit the form JS adds .sent-ok / .sent-error to #contact-form. Instead of
 * a green/red border on the response message, tint the whole form with a soft,
 * semi-transparent color, and give the form padding so the tint isn't flush
 * against the fields. */
#contact-form {
  padding: 24px;
  border-radius: 4px;
  transition: background-color 0.25s ease;
}
#contact-form.sent-ok {
  background-color: rgba(70, 180, 80, 0.12); /* soft green */
}
#contact-form.sent-error {
  background-color: rgba(220, 60, 60, 0.10); /* soft red */
}
/* The response message now sits inside the tinted form as plain text — drop the
 * Contact-Form-7 default border/box around it. */
#contact-form .wpcf7-response-output {
  border: 0;
  margin: 6px 0 0;
  padding: 0;
}

/* ------------------------------------------------------------------ *
 * Mobile navigation — pure CSS (checkbox hack), no JavaScript
 * ------------------------------------------------------------------ *
 * BeTheme's mobile menu used the `mobile-side-slide` body class, whose JS
 * (scripts.js → sideSlide) detaches nav#menu into a #Side_slide panel — a
 * panel the static export never included, so the hamburger opened nothing.
 * We removed that body class and drive the menu entirely from CSS instead:
 * a hidden checkbox (#mobile-menu-cb) toggled by the <label> hamburger, with
 * :checked revealing the in-place menu. No JS, so it can't break on export.
 *
 * The hamburger is a <label class="mobile-menu-toggle"> (deliberately NOT
 * .responsive-menu-toggle, so BeTheme's leftover JS handlers never bind to
 * it). It floats top-left over the header (absolute inside the sticky
 * #Header_wrapper, so it rides along while scrolling) and opens an animated
 * dropdown panel below the header: items cascade in, sub-menus expand after
 * their parents, gold underlines fade in on hover like the desktop menu. */

/* The checkbox only holds the open/closed state — it is never shown. display:none
 * still lets the <label> toggle it and still matches :checked, so the CSS toggle
 * works. High specificity + !important so BeTheme's #Top_bar input rules (which
 * are more specific than a bare class) can't reveal it. */
#Top_bar input.mobile-menu-checkbox { display: none !important; }

/* Hamburger button — hidden on desktop; a fixed blue floating button on mobile
 * (styled inside the media query below). */
#Top_bar label.mobile-menu-toggle { display: none; }

@media only screen and (max-width: 767px) {
  /* The Action bar (slogan / phone / e-mail / social) is desktop + tablet only.
   * Hide it on mobile, where the hamburger stands in for the whole header — this
   * also keeps the fixed hamburger from overlapping it. */
  #Action_bar { display: none !important; }

  /* Mobile header: logo centered on its own row (like the full page), with the
   * menu bar under it reading "[hamburger] [current page name]". The full-size
   * logo asset is scaled down here, so retina phones stay sharp. */
  #Top_bar .logo {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    margin: 6px auto !important;
  }
  /* Hard-size the logo: BeTheme's .scale-with-grid is width-driven
   * (width:100% + height:auto), so max-height alone loses. */
  #Top_bar .logo img {
    height: 46px !important;
    width: auto !important;
    max-width: none !important;
  }
  #Top_bar { height: auto !important; }
  #Top_bar .menu_wrapper { float: none !important; width: 100% !important; }

  /* The hamburger: icon-only, floating top-left over the header. The logo is
   * centered, so the left edge is free; absolute inside the sticky header
   * means it floats with the page. The icon swaps to an X while open. */
  #Top_bar label.mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 9px;
    left: 10px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    z-index: 10000;
  }
  #Top_bar label.mobile-menu-toggle i { font-size: 22px; line-height: 1; }
  /* BeTheme draws its own pseudo content on the toggle — suppress it. */
  #Top_bar label.mobile-menu-toggle::before,
  #Top_bar label.mobile-menu-toggle::after { display: none; content: none; }
  #Top_bar label.mobile-menu-toggle .icon-cancel-fine { display: none; }
  #Top_bar .mobile-menu-checkbox:checked ~ label.mobile-menu-toggle .icon-menu-fine { display: none; }
  #Top_bar .mobile-menu-checkbox:checked ~ label.mobile-menu-toggle .icon-cancel-fine { display: block; }

  /* Type scale: first-level items lead, sub-menu items sit clearly beneath them. */
  #Top_bar nav#menu > ul > li > a span {
    font-size: 17px !important;
    font-weight: 600 !important;
  }
  #Top_bar nav#menu ul.sub-menu li a span {
    font-size: 14px !important;
    font-weight: 400 !important;
    opacity: .92;
  }
  /* Centered menu, like the desktop site's centered nav. */
  #Top_bar nav#menu li { text-align: center; }
  #Top_bar nav#menu li a { text-align: center; padding-left: 0; padding-right: 0; float: none; }

  /* Same feel as the desktop menu: faint dark lines between the links, and the
   * thick gold bar near the bottom of each item that FADES in on hover and
   * stays lit on the current page (li.mm-current is set by the header script
   * that also names the menu bar). */
  #Top_bar nav#menu > ul > li { border-bottom: 1px solid rgba(0, 0, 0, .10); }
  #Top_bar nav#menu ul.sub-menu li { border-top: 1px solid rgba(0, 0, 0, .06); }
  /* The gold bar is an inset box-shadow, not a ::after — pseudo-elements
   * refuse to paint inside this flyout (same story as the neutralized
   * transform), and box-shadow color transitions give the same fade-in. */
  #Top_bar nav#menu li a span {
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
    box-shadow: inset 0 -4px 0 0 rgba(252, 206, 90, 0);
    transition: box-shadow .25s ease;
  }
  #Top_bar nav#menu li a:hover span { box-shadow: inset 0 -4px 0 0 #fcce5a; }
  #Top_bar nav#menu li.mm-current > a span { box-shadow: inset 0 -4px 0 0 #fcce5a; }

  /* The panel drops BELOW the sticky header (logo always visible above it) and
   * ANIMATES open: the panel slides down, then top-level items cascade in one
   * after another, then sub-menus expand under their parents. Closed state is
   * kept in the layout (not display:none) so every property can transition;
   * visibility flips after the close animation so nothing is tabbable while
   * hidden. */
  #Top_bar { position: relative; }
  #Top_bar nav#menu {
    display: block !important;
    position: absolute !important; /* beat BeTheme's #Top_bar #menu{position:static!important} */
    top: 100%;
    left: 0;
    right: 0;
    width: 100% !important;
    margin: 0;
    padding: 6px 0 10px;
    background: #0079c5;          /* match the logo header background */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    z-index: 9998;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .32s ease, opacity .25s ease, visibility 0s linear .32s;
  }
  #Top_bar .mobile-menu-checkbox:checked ~ nav#menu {
    max-height: calc(100vh - 120px);
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
    transition: max-height .4s ease, opacity .25s ease;
  }
  /* white menu text on the blue flyout */
  #Top_bar nav#menu a,
  #Top_bar nav#menu a span { color: #fff !important; }

  /* Item cascade: top-level entries slip down into place one after another. */
  #Top_bar nav#menu > ul > li {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease;
  }
  #Top_bar .mobile-menu-checkbox:checked ~ nav#menu > ul > li {
    opacity: 1;
    transform: none;
  }
  #Top_bar .mobile-menu-checkbox:checked ~ nav#menu > ul > li:nth-child(1) { transition-delay: .05s; }
  #Top_bar .mobile-menu-checkbox:checked ~ nav#menu > ul > li:nth-child(2) { transition-delay: .10s; }
  #Top_bar .mobile-menu-checkbox:checked ~ nav#menu > ul > li:nth-child(3) { transition-delay: .15s; }
  #Top_bar .mobile-menu-checkbox:checked ~ nav#menu > ul > li:nth-child(4) { transition-delay: .20s; }
  #Top_bar .mobile-menu-checkbox:checked ~ nav#menu > ul > li:nth-child(5) { transition-delay: .25s; }
  #Top_bar .mobile-menu-checkbox:checked ~ nav#menu > ul > li:nth-child(6) { transition-delay: .30s; }
  #Top_bar .mobile-menu-checkbox:checked ~ nav#menu > ul > li:nth-child(7) { transition-delay: .35s; }

  /* Sub-menus expand AFTER the cascade lands — height and opacity animate
   * together, delayed past the item cascade (.35s) and the panel slide so the
   * expansion reads as its own movement instead of popping with the panel.
   * The JS-injected .menu-toggle arrows are hidden since sub-menus always
   * open. */
  #Top_bar nav#menu ul.sub-menu {
    display: block;
    position: static;
    width: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .3s ease, opacity .25s ease;
  }
  #Top_bar .mobile-menu-checkbox:checked ~ nav#menu ul.sub-menu {
    max-height: 400px;
    opacity: 1;
    transition: max-height .5s ease .45s, opacity .4s ease .5s;
  }
  #Top_bar nav#menu .menu-toggle { display: none !important; }

  /* Case Studies doesn't need its sub-menu on mobile — the case-studies page
   * itself carries those anchors. (Sub-menus in general still work and
   * animate; this hides just this one item's.) */
  #Top_bar nav#menu li#menu-item-368 ul.sub-menu { display: none !important; }
}

/* BeTheme's mfn_header() JS sets an inline pixel width on .top_bar_left computed
 * from ".top_bar_right" — an element our header doesn't even have. When that
 * computation misfires on load (tablet portrait, fonts/images still pending),
 * the menu container gets a too-narrow inline width and renders left-aligned
 * instead of full width until a resize recomputes it. There is no right-hand
 * header column on this site, so the container is always safe at 100%. */
#Top_bar .top_bar_left { width: 100% !important; }

/* Floating (sticky) header: BeTheme floats .menu_wrapper left and shrink-wraps it,
 * so the menu hugs the logo (left-aligned) on desktop, and on tablet wraps onto a
 * second row that hangs below the 60px bar — outside its blue background.
 * Fix: un-float the wrapper so it fills the space beside the logo and centers the
 * menu; let the bar grow when the menu wraps so the blue always covers it. */
#Top_bar.is-sticky { height: auto !important; min-height: 60px; }
#Top_bar.is-sticky .menu_wrapper {
  float: none !important;
  width: auto !important;
  text-align: center;
}
#Top_bar.is-sticky .menu_wrapper #menu { text-align: left; } /* keep item text/dropdowns normal */
/* ... and center the logo on its own row above the menu (matches the stacked header). */
#Top_bar.is-sticky .logo {
  float: none !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* ------------------------------------------------------------------ *
 * Home "pricing" cards (Mobile / Desktop / Servers / Network) — tablet
 * ------------------------------------------------------------------ *
 * The card tagline reuses BeTheme's pricing .price span, hardcoded at
 * 45px — far too large for a quarter-width tablet column ("Complete
 * Endpoint Device & Application Support" overflows the card). At tablet
 * widths, size the tagline down and let the cards go 2x2 so the text
 * has room to breathe. */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .column_pricing_item { width: 48% !important; }
  .pricing-box .plan-header .price > span { font-size: 26px; line-height: 32px; }
}

/* Desktop: always show the horizontal menu. BeTheme's JS calls $('#menu').hide()
 * at mobile widths, leaving an inline display:none that would otherwise persist
 * when the viewport is widened back to desktop (menu disappears). This overrides
 * that leftover inline style. */
@media only screen and (min-width: 768px) {
  #Top_bar nav#menu { display: block !important; }
}

/* Portrait phones (tall screens): float the WHOLE header so the logo stays with
 * you too — not just the hamburger. position:sticky keeps it in normal flow, so
 * there's no content jump and no spacer needed (#Wrapper is overflow:visible, so
 * sticky isn't clipped). The fixed hamburger + fixed flyout still sit on top.
 *
 * Landscape is intentionally NOT floated: short screens can't spare the vertical
 * space, so the header stays attached at the top and scrolls away while only the
 * fixed hamburger floats — exactly the two-mode behavior requested. */
/* All mobile orientations: the compact header (centered logo + menu bar) is
 * short enough to float everywhere, keeping the menu bar always reachable. */
@media only screen and (max-width: 767px) {
  /* BeTheme's #Wrapper{overflow:hidden} (base.css) silently disables sticky —
   * a sticky element can't stick inside an overflow-hidden ancestor. Keep the
   * horizontal clipping it provided (stray decorations must not cause sideways
   * scroll) with overflow-x:clip, which clips WITHOUT creating a scroll
   * container, so the sticky header works. The visible fallback line covers
   * browsers without clip support — sticky beats clipping if we must choose. */
  #Wrapper { overflow: visible !important; }
  #Wrapper { overflow-x: clip !important; }
  /* Same story one level up: BeTheme's html,body{overflow-x:hidden}
   * (responsive.css) makes <body> a scroll container that never scrolls (the
   * window scrolls instead), so sticky silently never engages. clip keeps the
   * sideways-scroll guard without creating a scroll container. */
  html, body { overflow: visible !important; }
  html, body { overflow-x: clip !important; }
  #Header_wrapper {
    position: sticky;
    top: 0;
    z-index: 999;
  }
}
