/* SkyEge: ticker movement, hero overflow and menu affordance.
   Scoped to the WPVibe draft via the PHP enqueue condition. */
.sgv-ticker .sgv-ticker-content {display:flex!important;align-items:center;gap:12px;white-space:nowrap;overflow:hidden;direction:rtl;max-width:100%;min-width:0}
.sgv-ticker .sgv-ticker-content>strong {flex:0 0 auto;position:relative;z-index:1;white-space:nowrap}
.sgv-ticker-viewport {position:relative;min-width:0;flex:1 1 auto;overflow:hidden;direction:rtl;isolation:isolate}
.sgv-ticker-belt {display:flex;align-items:center;direction:rtl;width:max-content;min-width:100%;animation:sgv-ticker-scroll var(--sgv-ticker-duration, 40s) linear infinite;will-change:transform}
.sgv-ticker-group {display:flex!important;align-items:center;flex:none;gap:24px;white-space:nowrap;padding-left:24px}
.sgv-ticker .sgv-ticker-group>a {display:inline-flex!important;align-items:center!important;flex:0 0 auto;white-space:nowrap;text-decoration:none;color:#344966;font-size:.73rem}
.sgv-ticker .sgv-ticker-group>a:after {content:'•';color:#16aabe;padding-inline-start:22px;padding-inline-end:0}
.sgv-ticker .sgv-ticker-group>a:focus-visible {outline:2px solid #00acdc;outline-offset:3px}
.sgv-ticker-viewport:hover .sgv-ticker-belt,.sgv-ticker-viewport:focus-within .sgv-ticker-belt {animation-play-state:paused}
@keyframes sgv-ticker-scroll {to {transform:translateX(var(--sgv-ticker-distance, 500px))}}
@media(prefers-reduced-motion:reduce) {.sgv-ticker-belt{animation:none;will-change:auto}.sgv-ticker-viewport{overflow-x:auto}}

/* The screenshot's overlap: the old grid had fixed 180–245px height while the
   laptop graphic was 120% wide, covering the title column and clipping the text. */
.sgv-ref-hero {height:auto!important;min-height:0!important}
.sgv-ref-hero-inner {display:grid!important;grid-template-columns:minmax(150px,174px) minmax(0,43%) minmax(0,1fr)!important;min-height:263px!important;height:auto!important;gap:15px!important;padding:19px 22px!important;align-items:center!important;overflow:visible!important}
.sgv-ref-hero-copy {grid-column:3!important;grid-row:1!important;min-width:0;max-width:100%;width:100%;overflow:visible!important;z-index:2!important;align-self:center!important}
.sgv-ref-hero-copy h1 {font-size:clamp(1.25rem,1.78vw,1.85rem)!important;line-height:1.48!important;margin:0 0 9px!important;white-space:normal!important;overflow-wrap:normal;word-break:normal;text-wrap:wrap}
.sgv-ref-hero-copy p {font-size:clamp(.77rem,.95vw,.9rem)!important;line-height:1.7!important;margin:0 0 13px!important;overflow-wrap:break-word}
.sgv-ref-hero-actions {gap:7px!important;min-width:0}
.sgv-ref-hero-actions a {white-space:normal!important;font-size:.75rem!important;min-height:35px;line-height:1.35!important}
.sgv-ref-devices {grid-column:2!important;grid-row:1!important;width:100%;min-width:0;max-width:100%;align-self:stretch;min-height:225px;display:flex!important;align-items:center;justify-content:center;overflow:visible!important;z-index:1}
.sgv-ref-devices img {display:block!important;max-width:100%!important;width:100%!important;height:auto!important;max-height:230px!important;object-fit:contain;object-position:center;transform:none!important;margin:0!important;filter:drop-shadow(0 9px 14px rgba(0,11,29,.4))}
.sgv-ref-features {grid-column:1!important;grid-row:1!important;min-width:0;width:100%;align-self:center}
.sgv-ref-features a {font-size:.73rem!important;min-height:43px!important;max-width:100%}

/* The menu exists in the HTML but was display:none on desktop. Make the actual
   <details> interactive control visible at every width without replacing nav. */
.sgv-header .sgv-mobile-nav {display:block!important;position:relative!important;flex:0 0 auto!important}
.sgv-header .sgv-mobile-nav>summary {display:flex!important;align-items:center;justify-content:center;gap:4px;height:34px!important;min-width:38px;width:auto!important;padding:0 10px;white-space:nowrap;background:#edf5fd!important;color:#154875!important;border:1px solid #d6e7f7!important;border-radius:7px!important;font-weight:900;cursor:pointer}
.sgv-header .sgv-mobile-nav>summary::after {content:'القائمة';font-size:.68rem;font-family:inherit;font-weight:900}
.sgv-header .sgv-mobile-nav[open]>summary {background:#0e6ab4!important;color:#fff!important}
.sgv-header .sgv-mobile-nav .sgv-mobile-panel {display:grid!important;position:absolute!important;left:0!important;right:auto!important;top:calc(100% + 10px)!important;z-index:1000!important;width:min(325px,calc(100vw - 24px))!important;max-height:min(78vh,680px)!important;overflow-y:auto!important;padding:12px!important;grid-template-columns:minmax(0,1fr);background:#fff!important;box-shadow:0 22px 60px rgba(9,30,60,.22)!important;border:1px solid #d7e6f4!important}
.sgv-header .sgv-mobile-nav:not([open]) .sgv-mobile-panel {display:none!important}
.sgv-header .sgv-mobile-panel a {display:block;padding:9px 11px;color:#183c60!important;border-radius:6px;text-decoration:none;font-size:.83rem;line-height:1.4}
.sgv-header .sgv-mobile-panel a:hover,.sgv-header .sgv-mobile-panel a:focus-visible {background:#e8f4fd}
.sgv-header .sgv-mobile-panel form{margin-top:8px}
.sgv-header .sgv-header-actions {min-width:0!important;gap:5px!important}
.sgv-dark .sgv-header .sgv-mobile-nav .sgv-mobile-panel{background:#132942!important;border-color:#315273!important}
.sgv-dark .sgv-header .sgv-mobile-panel a{color:#f0f6ff!important}
.sgv-dark .sgv-header .sgv-mobile-panel a:hover{background:#20527d}

@media(max-width:1120px) {
 .sgv-ref-hero-inner {grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:13px!important;height:auto!important;min-height:0!important}
 .sgv-ref-hero-copy {grid-column:2!important;grid-row:1!important}
 .sgv-ref-devices {grid-column:1!important;grid-row:1!important;min-height:190px}
 .sgv-ref-features {grid-column:1/-1!important;grid-row:2!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
 .sgv-ref-features a {min-height:54px!important}
}
@media(max-width:1079px) {
 .sgv-header .sgv-mobile-nav .sgv-mobile-panel {position:fixed!important;right:12px!important;left:auto!important;top:56px!important;width:min(330px,calc(100vw - 24px))!important}
}
@media(max-width:730px) {
 .sgv-ref-hero-inner {grid-template-columns:minmax(0,1fr)!important;gap:12px!important;min-height:0!important;padding:20px 15px!important}
 .sgv-ref-hero-copy {grid-column:1!important;grid-row:1!important}
 .sgv-ref-hero-copy h1 {font-size:clamp(1.25rem,5.2vw,1.7rem)!important;line-height:1.55!important}
 .sgv-ref-devices {grid-column:1!important;grid-row:2!important;min-height:145px!important;max-height:none!important;overflow:visible!important}
 .sgv-ref-devices img {width:min(100%,480px)!important;max-height:240px!important}
 .sgv-ref-features {grid-column:1!important;grid-row:3!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
 .sgv-ref-features a {min-height:52px!important;font-size:.7rem!important}
 .sgv-ticker .sgv-ticker-group>a {font-size:.7rem}
 .sgv-header .sgv-mobile-nav>summary::after {font-size:.62rem}
}
@media(max-width:390px) {
 .sgv-header .sgv-mobile-nav>summary{min-width:34px;padding-inline:7px}
 .sgv-header .sgv-mobile-nav>summary::after{content:''}
 .sgv-ref-hero-actions a{font-size:.7rem!important;padding:8px!important}
}