/* =========================================================================
   Cyber50 — Global Responsive Layer
   This file only ADDS breakpoint rules. It does not override colors,
   fonts, spacing tokens, or animations from theme.css — it just makes
   sure every section reflows correctly on tablet and mobile viewports.
   Loaded AFTER theme.css so these rules can safely fine-tune breakpoints.
   ========================================================================= */

/* ---- Baseline safety net (works on every device) ---- */
html {
  -webkit-text-size-adjust: 100%;
}
body.c50 {
  overflow-x: hidden;
}
.c50 img,
.c50 video,
.c50 svg,
.c50 iframe,
.c50 embed,
.c50 object,
.c50 canvas {
  max-width: 100%;
  height: auto;
}
.c50 iframe {
  border: 0;
}
.c50 table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.c50 pre,
.c50 code {
  max-width: 100%;
  overflow-x: auto;
}

/* =========================================================================
   Home hero — interactive canvas globe (.home-banner / .globe-cover / .stage)
   This is a NEW section (added in style.css) built with hardcoded
   70vw/70vh + absolute positioning + scale(1.5) tuned for desktop only —
   there isn't a single breakpoint for it. On tablet/mobile that math
   pushes the globe off-screen or straight over the text.

   The canvas JS (in content-home.php) already reads
   canvas.getBoundingClientRect() and listens for window "resize", so it
   will redraw itself correctly as soon as we give it a sane, normal-flow
   box here — no JS changes needed.

   Desktop (≥1025px) is left completely untouched.
   ========================================================================= */
@media (max-width: 1024px) {
  .home-banner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
  }
  .banner-text-section {
    position: relative;
    z-index: 2;
    width: 100%;
  }
  .globe-cover {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 380px;
    transform: none;
    margin-top: 2.5rem;
    border-radius: 20px;
  }
  .stage {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: 100%;
    border-radius: 20px;
  }
  .hint {
    font-size: 11px;
    bottom: 14px;
    white-space: normal;
    text-align: center;
    max-width: calc(100% - 32px);
  }
}
@media (max-width: 768px) {
  .globe-cover {
    height: 320px;
    margin-top: 2rem;
  }
}
@media (max-width: 560px) {
  .globe-cover {
    height: 260px;
    margin-top: 1.5rem;
  }
  .hint {
    font-size: 10px;
    padding: 6px 10px;
  }
}
@media (max-width: 400px) {
  .globe-cover {
    height: 220px;
  }
}


   This variant (.c50-quote-card--photo) had no layout rules at all in the
   theme, on any screen size, so the photo and text just stacked in DOM
   order with no sizing. Adding a proper side-by-side desktop layout that
   collapses to a centered stack on tablet/mobile.
   ========================================================================= */
.c50-quote-card--photo {
  display: flex;
  align-items: center;
  gap: 2.75rem;
}
.c50-quote-card__photo-panel {
  flex: 0 0 220px;
}
.c50-quote-card__photo-panel img {
  display: block;
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid rgba(14, 21, 18, 0.12);
}
.c50-quote-card__body {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 900px) {
  .c50-quote-card--photo {
    flex-direction: column;
    text-align: center;
    gap: 1.75rem;
  }
  .c50-quote-card__photo-panel {
    flex: none;
  }
  .c50-quote-card__photo-panel img {
    width: 160px;
    height: 160px;
    margin: 0 auto;
  }
  .c50-quote-card__who {
    justify-content: center;
  }
}

/* =========================================================================
   Page hero header — shared by About / Services / Products / Team /
   Contact / 404 / Single Product pages. theme.css only tuned this for
   phones (≤560px); tablet was still using the full desktop padding,
   leaving too much empty space above the title. Adding the missing
   tablet step here so every page's header scales smoothly.
   ========================================================================= */
@media (max-width: 1024px) {
  .c50-page-hero {
    padding-top: 140px;
    padding-bottom: 60px;
  }
  .c50-page-hero--image {
    padding-top: 170px;
    padding-bottom: 90px;
  }
  .c50-product-hero {
    padding-top: 130px;
    padding-bottom: 60px;
  }
}
@media (max-width: 768px) {
  .c50-page-hero {
    padding-top: 110px;
    padding-bottom: 45px;
  }
  .c50-page-hero--image {
    padding-top: 130px;
    padding-bottom: 60px;
  }
  .c50-product-hero {
    padding-top: 110px;
    padding-bottom: 45px;
  }
  .c50-breadcrumb {
    font-size: 11.5px;
  }
}
/* Phones need more top clearance than the 768px tablet step above —
   the fixed header takes up relatively more height on narrow screens,
   so this later, more specific rule restores enough padding to stop
   the heading being clipped behind the header. */
@media (max-width: 560px) {
  .c50-page-hero {
    padding-top: 150px;
    padding-bottom: 40px;
  }
  .c50-page-hero--image {
    padding-top: 160px;
    padding-bottom: 60px;
  }
  .c50-product-hero {
    padding-top: 150px;
    padding-bottom: 40px;
  }
}

@media (max-width: 1200px) {
  .c50-container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .c50-mega {
    width: 720px;
  }
  .c50-mega--services {
    width: 560px;
  }
}

/* =========================================================================
   Tablet (≤1024px) — iPad portrait/landscape zone
   ========================================================================= */
@media (max-width: 1024px) {
  .c50-hero__inner {
    padding-top: 150px;
    padding-bottom: 90px;
  }
  .c50-hero__intro {
    margin-bottom: 3.5rem;
  }
  .c50-panel__media--fixed {
    height: 340px;
  }
  .c50-delivery__frame > img {
    height: 400px;
  }
  .c50-slider__slide .c50-panel__media--fixed {
    height: 380px;
  }
  .c50-product-hero__panel .c50-panel__media--fixed {
    height: 360px;
  }
  .c50-team-cta {
    padding: 3rem 2rem;
  }
  .c50-award-card,
  .c50-value-card,
  .c50-industry-card,
  .c50-product-card {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* =========================================================================
   Mobile nav open/close bug fix
   The nav drawer (.c50-nav) is position:fixed with z-index:119. Because
   z-index only competes within the shared stacking context, that positive
   value can render the drawer ABOVE the burger/close button whenever the
   header's real height drifts even a few pixels from the hardcoded
   top:64px offset — which is exactly what made the "X" unclickable on
   tablet/mobile. Pinning the burger + header tools to a higher z-index
   guarantees they always stay on top and stay clickable to open/close.
   ========================================================================= */
@media (max-width: 900px) {
  .c50-header__tools {
    position: relative;
    z-index: 200;
  }
  .c50-burger {
    position: relative;
    z-index: 200;
  }
  .c50-nav {
    z-index: 119;
  }
}

/* =========================================================================
   Tablet / large phone (≤900px) — nav already collapses to burger here
   via theme.css; these rules tune the sections around it.
   ========================================================================= */
@media (max-width: 900px) {
  .c50-hero {
    min-height: auto;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
  }
  .c50-hero__inner {
    padding-top: 120px;
    padding-bottom: 70px;
  }
  .c50-hero__actions {
    gap: 0.75rem;
    flex-direction: column;
    align-items: stretch;
  }
  .c50-hero__actions .c50-btn {
    width: 100%;
    justify-content: center;
  }
  .c50-panel__media--fixed {
    height: 300px;
  }
  .c50-delivery__frame > img {
    height: 320px;
  }
  .c50-slider__slide .c50-panel__media--fixed {
    height: 320px;
  }
  .c50-product-hero__panel .c50-panel__media--fixed {
    height: 300px;
  }
  .c50-quote-card__quote {
    font-size: 18px;
  }
  .c50-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* =========================================================================
   Mobile (≤768px)
   ========================================================================= */
@media (max-width: 768px) {
  .c50-header__inner {
    min-height: 60px;
  }
  .c50-header__logo .custom-logo,
  .c50-header__logo img {
    height: 1.9rem;
  }
  .c50-header__sitename {
    font-size: 1rem;
  }
  .c50-hero__title {
    font-size: clamp(30px, 8vw, 44px);
  }
  .c50-hero__sub {
    font-size: 1rem;
  }
  .c50-hero__actions .c50-btn {
    width: 100%;
    justify-content: center;
  }
  .c50-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .c50-cta-band {
    padding: 40px 1.25rem;
  }
  .c50-cta-band--row {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1.25rem;
  }
  [dir="rtl"] .c50-cta-band--row {
    text-align: center;
  }
  .c50-panel__media--fixed {
    height: 240px;
  }
  .c50-delivery__frame > img {
    height: 260px;
  }
  .c50-slider__slide .c50-panel__media--fixed {
    height: 260px;
  }
  .c50-product-hero__panel .c50-panel__media--fixed {
    height: 250px;
  }
  .c50-quote-card {
    padding: 2rem 1.25rem;
  }
  .c50-contact__form-wrap {
    padding: 1.75rem 1.25rem;
  }
  .c50-team-cta__title {
    text-align: center !important;
    font-size: clamp(26px, 8vw, 40px);
  }
  .c50-service-row {
    padding: 1.75rem 1.25rem;
  }
  .c50-newsletter {
    flex-direction: column;
  }
  .c50-newsletter .c50-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================================
   Small phones (≤560px) — theme.css already breaks several grids here;
   these rules fill in the remaining pieces.
   ========================================================================= */
@media (max-width: 560px) {
  .c50-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .c50-hero__inner {
    padding-top: 100px;
    padding-bottom: 50px;
  }
  .c50-hero__stat {
    padding: 16px 1rem;
  }
  .c50-hero__stat-value {
    font-size: 22px;
  }
  .c50-panel__media--fixed {
    height: 200px;
  }
  .c50-delivery__frame > img {
    height: 220px;
  }
  .c50-slider__slide .c50-panel__media--fixed {
    height: 220px;
  }
  .c50-product-hero__panel .c50-panel__media--fixed {
    height: 210px;
  }
  .c50-team-cta__orb {
    height: 160px;
    width: 160px;
  }
  .c50-team-cta__orb > i {
    font-size: 64px;
  }
  .c50-footer {
    padding: 80px 0.75rem 50px;
  }
  .c50-form__submit,
  .c50-cf7 .wpcf7-submit {
    padding: 0.875rem;
    font-size: 14px;
  }
}

/* =========================================================================
   Extra-small phones (≤400px)
   ========================================================================= */
@media (max-width: 400px) {
  .c50-hero__title {
    font-size: clamp(26px, 9vw, 34px);
  }
  .c50-h1 {
    font-size: clamp(28px, 9vw, 38px);
  }
  .c50-h2 {
    font-size: clamp(24px, 8vw, 32px);
  }
  .c50-btn {
    padding: 11px 1.1rem;
    font-size: 0.8125rem;
  }
  .c50-panel__addr {
    min-width: 60%;
    font-size: 10px;
  }
  .c50-copilot {
    right: 1rem;
    bottom: 1rem;
  }
  [dir="rtl"] .c50-copilot {
    left: 1rem;
    right: auto;
  }
  .c50-copilot__panel {
    width: calc(100vw - 32px);
    height: 70vh;
  }
}

/* =========================================================================
   Landscape phones (short height) — avoid the hero eating the whole screen
   ========================================================================= */
@media (max-height: 480px) and (orientation: landscape) {
  .c50-hero {
    min-height: auto;
  }
  .c50-hero__inner {
    padding-top: 90px;
    padding-bottom: 40px;
  }
}

/* =========================================================================
   Fix pack — subscribe button, button centering, mobile grid overflow
   ========================================================================= */

/* 1. Newsletter "Subscribe" button — white pill so it doesn't blend into
   the blue footer background. */
.c50-btn--newsletter {
  background-color: #fff !important;
  color: #2d4ee0 !important;
  border-color: #fff;
}
.c50-btn--newsletter:hover {
  background-color: #eef1ff !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.35);
}

/* 6. Center button text/icon in both LTR and RTL (lang switcher, nav CTA,
   all pill buttons) — some buttons only had align-items set, not
   justify-content, so label text drifted off-center. */
.c50-btn,
.c50-lang-btn,
.c50-header__cta,
.c50-theme-btn {
  justify-content: center;
  text-align: center;
}

/* 7. Product / card grids used a hard minmax(340px/300px/280px/210px,1fr)
   with no mobile-safe fallback, so on narrow screens the grid track was
   wider than the viewport and forced horizontal scroll — hiding content
   off-screen. Cap the minimum at 100% of the available width below 640px. */
@media (max-width: 640px) {
  .c50-grid--auto210,
  .c50-grid--auto280,
  .c50-grid--auto300,
  .c50-grid--auto340 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* =========================================================================
   CEO/quote card photo — square-ish rounded rectangle on the left with
   name + role as a caption underneath it (not next to the quote), and
   tighter, correctly-centered spacing on tablet/mobile.
   ========================================================================= */
.c50-quote-card--photo {
  grid-template-columns: minmax(200px, 260px) 1fr !important;
  align-items: start !important;
}
.c50-quote-card__photo-panel {
  width: 100% !important;
  max-width: 260px !important;
  margin: 0 !important;
  justify-self: start !important;
}
[dir="rtl"] .c50-quote-card__photo-panel {
  justify-self: end !important;
}
.c50-quote-card__photo-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 260px !important;
  max-height: none !important;
  aspect-ratio: 4 / 5 !important;
  border-radius: 18px !important;
  object-fit: cover !important;
  object-position: top center !important;
}
.c50-quote-card__photo-caption {
  margin-top: 14px !important;
  text-align: left !important;
}
[dir="rtl"] .c50-quote-card__photo-caption {
  text-align: right !important;
}

@media (max-width: 900px) {
  .c50-quote-card--photo {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    text-align: center !important;
  }
  .c50-quote-card__photo-panel {
    max-width: 200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
  }
  .c50-quote-card__photo-img {
    max-width: 200px !important;
  }
  .c50-quote-card__photo-caption,
  [dir="rtl"] .c50-quote-card__photo-caption {
    text-align: center !important;
  }
  .c50-quote-card--photo .c50-quote-card__body {
    text-align: left;
  }
  [dir="rtl"] .c50-quote-card--photo .c50-quote-card__body {
    text-align: right;
  }
}
@media (max-width: 560px) {
  .c50-quote-card--photo {
    padding: 1.75rem 1.25rem !important;
    gap: 16px !important;
  }
  .c50-quote-card__photo-panel,
  .c50-quote-card__photo-img {
    max-width: 160px !important;
  }
}

/* =========================================================================
   Newsletter input — Arabic placeholder/typed text should be right-aligned
   inside the field to match RTL reading direction.
   ========================================================================= */
[dir="rtl"] .c50-newsletter input[type="email"] {
  text-align: right !important;
  direction: rtl !important;
}

/* =========================================================================
   About page hero — dedicated dark navy treatment, rebuilt so it's fully
   readable at every breakpoint (previous version broke on phones and
   fell back to unreadable white-on-light-grey text).
   ========================================================================= */
.c50-about-hero {
  background: #050b18;
  min-height: 420px;
}
.c50-about-hero .c50-page-hero__bg {
  opacity: 0.55;
  object-fit: cover;
  object-position: center;
}
.c50-about-hero__shade {
  background: linear-gradient(
    115deg,
    rgba(5, 11, 24, 0.96) 0%,
    rgba(5, 11, 24, 0.86) 40%,
    rgba(5, 11, 24, 0.55) 100%
  ) !important;
}
.c50-about-hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 20% 30%,
    rgba(45, 78, 224, 0.35),
    transparent 55%
  );
  animation: c50GlowPulse 6s ease-in-out infinite;
}
@keyframes c50GlowPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.c50-about-hero__kicker {
  color: #9db3ff !important;
}
.c50-about-hero__title {
  color: #fdfdfb !important;
  position: relative;
}
.c50-about-hero__text {
  color: #cfd6e8 !important;
  position: relative;
}

@media (max-width: 900px) {
  .c50-about-hero {
    min-height: 380px;
  }
}
@media (max-width: 560px) {
  .c50-about-hero {
    min-height: 340px;
  }
  .c50-about-hero .c50-page-hero__bg {
    opacity: 0.4;
  }
}