/* Custom nav additions: mega menu featured cards, AI tags, sub-headings, 5-col layout */
.clb-mega-4col.sub-menu-wide > li{width:20% !important;}

.clb-mega-featured-card{
  background:#24262B;
  border-radius:var(--clb-border-radius-large,16px);
  padding:1.5rem;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  box-sizing:border-box;
}
.clb-mega-card-title{
  color:#fff;
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:600;
  font-size:1.1rem;
  line-height:1.3;
}
.clb-mega-card-text{
  color:#c7c9ce;
  font-size:0.85rem;
  line-height:1.5;
  margin:0;
}
.clb-mega-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem;
  margin-top:0.25rem;
}
.clb-mega-tag{
  display:inline-block;
  background:#32353C;
  color:#e5e5e5;
  font-size:0.72rem;
  line-height:1;
  padding:0.4rem 0.6rem;
  border-radius:999px;
  white-space:nowrap;
}
.clb-mega-card-btn{
  margin-top:auto;
  display:inline-block;
  background:#e5652f;
  color:#fff !important;
  text-align:center;
  font-size:0.85rem;
  font-weight:600;
  padding:0.65rem 1rem;
  border-radius:999px;
  text-decoration:none;
  transition:opacity .2s ease;
}
.clb-mega-card-btn:hover{opacity:0.85;}
.clb-mega-card-btn:hover,.clb-mega-card-btn:focus,.clb-mega-card-btn:active,.clb-mega-card-btn:visited{
  color:#fff !important;
  background:#e5652f !important;
}

.sub-sub-menu li.clb-mega-subheading{
  margin-top:0.6rem;
  padding-top:0.6rem;
  border-top:1px solid rgba(0,0,0,0.08);
}
.sub-sub-menu li.clb-mega-subheading > span{
  font-weight:700;
  opacity:1;
  font-size:var(--clb-font-size-extra-small, 13px);
  text-transform:uppercase;
  letter-spacing:0.04em;
}

@media (max-width: 1080px){
  .clb-mega-4col.sub-menu-wide > li{width:100% !important;}
}

/* Hedy Digital logo sizing */
.logo img.svg-logo,
.logo-sticky img.svg-logo,
.logo-dynamic img.svg-logo{
  height:26px;
  min-height:26px;
  max-height:26px;
  width:auto;
  display:block;
  transition:all var(--clb-transition-function,ease) var(--clb-transition-duration,0.2s);
}
.logo-dynamic img.svg-logo{
  min-height:26px;
  max-height:26px;
  max-height:unset;
}
.footer-logo{
  height:34px;
  width:auto;
  display:block;
  margin-bottom:0.75rem;
}

/* Inline SVG replacements for broken bootstrap-icon-font glyphs */
.icon-svg-replace{
  display:block;
  flex-shrink:0;
}
.icon-group .icon-svg-replace{
  color:inherit;
}

/* Mega-menu hover-intent buffer: keeps dropdown open while cursor crosses
   the gap between the nav link and the panel, via JS-managed delayed close */
.header:not(.-mobile) .menu > li.force-open-submenu > ul,
.header:not(.-mobile) .menu > li.force-open-submenu > ul > *{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}
.header:not(.-mobile) .menu > li.force-open-submenu .sub-menu-wide ul{
  opacity:1 !important;
  visibility:visible !important;
}
.header:not(.-mobile) .menu > li.force-open-submenu > a .menu-chevron{
  transform:rotate3d(1,0,0,180deg);
}

/* Keep top-level nav item labels on a single line (e.g. "Software Solutions", "AI Solutions") */
#menu-primary > li.nav-item > a.menu-link{
  white-space:nowrap;
}
#menu-primary > li.nav-item > a.menu-link > span{
  white-space:nowrap;
}
#menu-primary{
  flex-wrap:nowrap;
}

/* Keep the logo the same small size in the sticky/scrolled header state.
   The theme's own ".header.-sticky .branding img" rule (min-height:38px)
   has higher specificity than our earlier logo-sizing rule, so it was
   winning once the header became sticky, making the logo visibly grow
   on scroll. */
.header.-sticky .branding img.svg-logo{
  height:26px;
  min-height:26px;
  max-height:26px;
  width:auto;
}

/* Footer tagline ("Software, AI, and digital solutions built to last.") is
   marked up as a raw <h3>, so it was inheriting the theme's default H3
   size (a large, responsive heading size meant for page content, not a
   small footer blurb). At that size it made the "Software, AI..." column
   much taller than the other footer columns, which -- because the footer
   widgets sit in a row that stretches to match its tallest item -- left
   visible empty space at the bottom of the shorter columns next to it. */
#block-16 h3{
  font-size:1.05rem;
  line-height:1.4;
  font-weight:600;
}

/* On narrow mobile widths, the header logo, hamburger icon, and the
   "Book an Appointment" button don't leave enough combined room -- the
   button never shrinks, so the logo gets squeezed/compressed instead,
   making it look cut off or overlapping the button. Shrink the button on
   small screens so the logo can render at its natural size. */
@media (max-width: 480px){
  .header .button-group .button.btn-optional{
    font-size:0.8rem;
    padding:0 0.85rem;
    min-height:2.25rem;
  }
}
@media (max-width: 390px){
  .header .button-group .button.btn-optional{
    font-size:0.72rem;
    padding:0 0.65rem;
  }
}
@media (max-width: 340px){
  .header .button-group .button.btn-optional{
    font-size:0.65rem;
    padding:0 0.5rem;
  }
}

/* The "Industries we serve" logo row uses the theme's flex layout with a
   fixed column width that's too narrow for longer labels like "Retail &
   E-commerce" and "Logistics & Warehousing" -- they wrap to two lines
   while the shorter labels stay on one, making the row look uneven and
   leaving extra vertical space below it. Prevent wrapping and let each
   item size to fit its own label instead of a fixed column width. */
.elementor-element-5d049b8 .ohio-widget.logo,
.elementor-element-806d09d .ohio-widget.logo{
  white-space:nowrap;
}
.elementor-element-5d049b8,
.elementor-element-806d09d{
  flex-wrap:wrap;
  row-gap:1.5rem;
  column-gap:2rem;
}
.elementor-element-13db335,
.elementor-element-4244c08,
.elementor-element-5cadce9,
.elementor-element-9dd2dbc,
.elementor-element-3ca6806,
.elementor-element-11ad5d9,
.elementor-element-894c4d8,
.elementor-element-ff322d1{
  width:auto !important;
  flex:0 0 auto !important;
}
@media (max-width: 767px){
  .elementor-element-5d049b8,
  .elementor-element-806d09d{
    width:100% !important;
  }
}



/* Responsive hardening for the static export. */
html,
body{max-width:100%;overflow-x:clip;}
img,
video,
iframe{max-width:100%;}

/* Keep the five-column mega menu inside the usable desktop viewport. */
@media (min-width:1025px){
  .header:not(.-mobile) .menu > li > .sub-menu-wide{
    width:min(86vw, 1560px) !important;
    max-width:calc(100vw - 3rem) !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    box-sizing:border-box;
  }
  .header:not(.-mobile) .menu > li.force-open-submenu > .sub-menu-wide{transform:translateX(-50%) !important;}
  .clb-mega-4col.sub-menu-wide > li{min-width:0;}
  .clb-mega-4col .sub-sub-menu,
  .clb-mega-4col .sub-menu-link{min-width:0 !important;max-width:100% !important;}
}

/* Use extra room on large displays while preserving readable text widths. */
@media (min-width:1800px){
  :root{--clb-container-width:1560px;--clb-container-post-width:1180px;}
}
@media (min-width:2400px){
  :root{--clb-container-width:1760px;--clb-container-post-width:1240px;}
}

/* Better keyboard focus and motion preferences across every page. */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:3px solid #e5652f;outline-offset:3px;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto !important;animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
}

/* Hidden desktop dropdowns must not enlarge the document canvas. */
@media (min-width:1025px){
  .header:not(.-mobile) .menu > li > .sub-menu-wide{display:none !important;}
  .header:not(.-mobile) .menu > li:hover > .sub-menu-wide,
  .header:not(.-mobile) .menu > li.force-open-submenu > .sub-menu-wide{display:flex !important;}
}

/* Compact desktop navigation for 1025-1200px viewports.
   The logo remains the Home link, so the duplicate Home menu item is hidden
   to give the complete navigation enough room without collisions. */
@media (min-width:1081px) and (max-width:1280px){
  .header:not(.-mobile) .nav{padding-left:28px;box-sizing:border-box;}
  .header:not(.-mobile) #menu-primary > li:first-child{display:none;}
  .header:not(.-mobile) #menu-primary > li.nav-item > a.menu-link{padding-left:8px;padding-right:8px;}
  .header:not(.-mobile) .button-group .button.btn-optional{font-size:.86rem;padding-left:1rem;padding-right:1rem;}
}

/* Compact desktop mega menu: keep it fully inside the viewport and remove
   the promotional column where horizontal space is limited. */
@media (min-width:1081px) and (max-width:1280px){
  .header:not(.-mobile) .menu > li > .clb-mega-4col.sub-menu-wide{
    position:fixed !important;
    top:var(--clb-header-height,96px) !important;
    left:24px !important;
    right:24px !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100vh - var(--clb-header-height,96px) - 16px);
    overflow-x:hidden;
    overflow-y:auto;
    transform:none !important;
    border-radius:0 0 24px 24px;
  }
  .header:not(.-mobile) .menu > li.force-open-submenu > .clb-mega-4col.sub-menu-wide{
    transform:none !important;
  }
  .clb-mega-4col.sub-menu-wide > li.wide-menu-parent-meta{
    display:none !important;
  }
  .clb-mega-4col.sub-menu-wide > li:not(.wide-menu-parent-meta){
    width:25% !important;
  }
}

/* Site-wide responsive hardening for exported Elementor layouts. */
:where(.e-con,.e-con-inner,.vc_row,.row,[class*="-grid"]) > *{
  min-width:0;
}
:where(h1,h2,h3,h4,h5,h6,p,a,li){
  overflow-wrap:break-word;
}
:where(pre,code){
  max-width:100%;
}
pre{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
:where(input,select,textarea,button){
  max-width:100%;
}

/* Homepage blog section: replace the legacy float/masonry sizing with a
   predictable grid that remains inset and balanced at every breakpoint. */
.elementor-element-c9fd0e9 > .e-con-inner{
  width:min(var(--clb-container-width,1344px),calc(100% - 48px)) !important;
  max-width:calc(100% - 48px) !important;
  margin-inline:auto !important;
}
.elementor-element-c9fd0e9 .elementor-element-a0ccc83{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.elementor-element-c9fd0e9 .elementor-element-889a685 .blog-posts{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:2rem;
  row-gap:0;
  margin-inline:0 !important;
}
.elementor-element-c9fd0e9 .elementor-element-889a685 .grid-item{
  width:auto !important;
  max-width:none !important;
  float:none !important;
  padding-inline:0 !important;
}
.elementor-element-c9fd0e9 .card-details{
  gap:1rem;
}
.elementor-element-c9fd0e9 .card-details-item.-left{
  min-width:0;
}
.elementor-element-c9fd0e9 .read-more{
  white-space:nowrap;
}
@media (max-width:1180px){
  .elementor-element-c9fd0e9 .elementor-element-889a685 .blog-posts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:767px){
  .elementor-element-c9fd0e9 > .e-con-inner{
    width:calc(100% - 32px) !important;
    max-width:calc(100% - 32px) !important;
  }
  .elementor-element-c9fd0e9 .elementor-element-a0ccc83{
    align-items:flex-start;
  }
  .elementor-element-c9fd0e9 .elementor-element-889a685 .blog-posts{
    grid-template-columns:1fr;
  }
  .elementor-element-c9fd0e9 .card-details{
    align-items:flex-start;
  }
}
@media (max-width:480px){
  .elementor-element-c9fd0e9 .elementor-element-a0ccc83{
    flex-direction:column;
  }
  .elementor-element-c9fd0e9 .elementor-element-96b11cf,
  .elementor-element-c9fd0e9 .elementor-element-96b11cf .button{
    width:100%;
  }
  .elementor-element-c9fd0e9 .elementor-element-96b11cf .button{
    justify-content:center;
  }
  .elementor-element-c9fd0e9 .card-details{
    flex-direction:column;
  }
}

/* Reliable hamburger-menu social icons (no external icon-font dependency). */
.hamburger-nav-details .social-networks{
  display:flex;
  align-items:center;
  gap:0.75rem;
}
.hamburger-nav-details .social-networks .network{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  border-radius:50%;
}
.hamburger-nav-details .social-networks .icon-svg-replace{
  width:18px;
  height:18px;
}