/* Orbitek Hub - responsive hardening.
   Loaded LAST on every page (see orbitek_responsive_assets() in functions.php).
   To undo everything: remove that function/add_action, or delete this file. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,canvas,iframe{max-width:100%}
.hg>*,[class*="-hero-in"]>*{min-width:0} /* stops long no-wrap headings from stretching the hero grid */

/* 1) Header on laptops / resized windows: pill + CTA used to overlap.
      Pill and CTA now sit side by side as one centred group. */
@media(min-width:1081px){
.hd-nav .bar{display:flex;justify-content:center;align-items:center;gap:14px}
.hd-nav nav{flex:0 1 auto;min-width:0}
.hd-nav .hdr-cta{flex:none}
}
@media(min-width:1081px) and (max-width:1279px){
.hd-nav nav ul{gap:0}
.hd-nav nav a{padding:9px 9px;font-size:.78rem}
.hd-pitch{gap:8px;padding:4px 4px 4px 14px!important;font-size:.84rem}
}

/* 2) Mobile / tablet menu: scrollable, never hidden behind the bottom bar */
@media(max-width:1080px){
header nav{max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mbar{z-index:25}
body:has(nav.open) .mbar,body:has(nav.open) #fab-wa{display:none}
.hd-s{width:36px;height:36px}
}

/* 3) Phones */
@media(max-width:700px){
section{padding:60px 0}
#fab-wa{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.vd-float-a,.mt-float-ig{right:4px}
.mt-float-fb{left:4px}
}

/* 4) Small phones (320-380px) */
@media(max-width:380px){
.w{padding:0 16px}
h1.wish{font-size:clamp(1.75rem,8.6vw,2.3rem)}
h1.wish .ln{padding:.06em .1em}
.pill .tw,.pill .tw .ty{white-space:normal}
.mbar .btn{font-size:.9rem;white-space:nowrap;padding:12px 8px}
}

/* 5) Pop-ups: use the real visible height on mobile browsers */
dialog.rvw-dlg{max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px)}

/* 6) Easier tapping on touch screens */
@media(pointer:coarse){.ft a:not(.btn){display:inline-block;padding:6px 0}}
.ft a.btn{padding:13px 24px}

/* ===== 7) MOBILE-ONLY changes (phones, <=700px). Desktop/tablet untouched. ===== */
@media(max-width:700px){
/* a) Header: social icons (WhatsApp / Instagram / YouTube) hidden, only logo + Menu */
.hd-follow{display:none!important}

/* b) Bottom sticky "Connect with Our Team" bar removed */
.mbar{display:none!important}
body{padding-bottom:0!important}

/* c) Website-management hero background: show the laptop image sharp & full-colour
      as a banner on top (no dim overlay, no blur), text starts right below it. */
.wm .wm-hero{position:relative;background:#0a0a0c}
.wm .wm-hero .wm-portal{opacity:1!important;bottom:auto;height:60vw;min-height:210px;overflow:hidden}
.wm .wm-hero .wm-portal::after{background:linear-gradient(transparent 55%,#0a0a0c 100%)}
.wm .wm-hero .wm-photo{background-size:cover;background-position:72% center;
 -webkit-mask-image:none;mask-image:none}
.wm .wm-hero .wm-hero-in.w{padding-top:calc(max(60vw,210px) + 6px)}

/* d) Header scrolls away with the page (no sticky) */
header{position:relative!important;top:auto!important}

/* e) Menu button pushed to the right edge */
.hd-top-in{justify-content:space-between}
.hd-focus+.hd-right,.hd-right{margin-left:auto!important}

/* f) Explore Our Work: filter tabs bar scrolls with the page (no sticky) */
.wk-bar{position:relative!important;top:auto!important}
}

/* v2.1.1 Social Media page (mobile): floating icons sit BEHIND the text as a full hero background */
@media(max-width:700px){
.wm.sm .wm-hero .wm-portal{position:absolute;inset:0;height:auto;min-height:0;bottom:0;overflow:hidden;opacity:1!important;z-index:0}
.wm.sm .wm-hero .wm-portal svg{width:100%;height:100%;object-fit:cover}
.wm.sm .wm-hero .wm-portal::after{background:linear-gradient(#0a0a0c99 0%,#0a0a0c8c 45%,#0a0a0ccc 100%)}
.wm.sm .wm-hero .wm-hero-in.w{position:relative;z-index:1;padding-top:0}
}