/* ============================================================
   Techno public site — conversion layer over the design tokens.

   The design export styles elements inline; this file carries only
   what inline styles cannot express:
     1. hover / focus states (extracted from the export's
        style-hover / style-focus attributes — values unchanged)
     2. responsive collapses (approved derivations; the export
        is 1280px-only)
     3. RTL: Arabic typeface + logical-property helpers
   ============================================================ */

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); font-family: var(--font-sans); color: var(--text-body); }
a { color: var(--green-600); }
a:hover { color: var(--green-700); }
[x-cloak] { display: none !important; }

/* WhatsApp launcher: Alpine's x-show toggles the inline `display` property
   only (removing it entirely when shown) — the flex layout has to live in
   a class, not the inline style, or it falls back to the browser's block
   default every time the panel re-opens. */
.wa-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-bottom: 12px; }

/* Arabic: swap the token itself so every inline `font-family:var(--font-sans)` (header, footer,
   WhatsApp launcher, portal) and the --font-* shorthand tokens pick up Cairo, not just <body>. */
html[dir="rtl"] { --font-sans: var(--font-arabic); }
html[dir="rtl"] body { font-family: var(--font-arabic); }
html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea { font-family: inherit; }

/* ── Hover states (verbatim from the export) ─────────────────── */
.hov-green:hover { background: var(--green-600) !important; }
.hov-navy:hover { background: var(--navy-800) !important; }
.hov-white-border:hover { border-color: var(--white) !important; }
.hov-white-bg:hover { background: rgba(255, 255, 255, 0.08) !important; }
.hov-white-bg-10:hover { background: rgba(255, 255, 255, 0.1) !important; }
.hov-link:hover { color: var(--green-600) !important; }
.hov-link-700:hover { color: var(--green-700) !important; }
.hov-underline:hover { border-color: var(--green-600) !important; }
.hov-card:hover { border-color: var(--green-500) !important; box-shadow: var(--shadow-md); }
.hov-lift:hover { box-shadow: var(--shadow-xl); }
.hov-item:hover { background: var(--grey-50) !important; }
.hov-light:hover { color: var(--white) !important; }
.hov-outline:hover { border-color: var(--green-500) !important; }
.hov-outline-text:hover { border-color: var(--green-500) !important; color: var(--green-700) !important; }

/* ── Focus states (verbatim from the export) ─────────────────── */
.foc-green:focus { border-color: var(--green-500) !important; outline: none; }
.foc-green-light:focus { border-color: var(--green-400) !important; outline: none; }

/* ── Responsive derivations (approved) ───────────────────────── */
/* The export is a fixed 1280px canvas. Collapses below follow the
   grid structure: 4 → 2 → 1, splits stack, section padding eases. */

@media (max-width: 1023px) {
  .r-cols-4, .r-cols-5 { grid-template-columns: repeat(2, 1fr) !important; }
  .r-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .r-split { grid-template-columns: 1fr !important; }
  .r-split { gap: 40px !important; }
  .r-footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .r-nav-desktop { display: none !important; }
  .r-nav-mobile { display: flex !important; }
  .r-timeline { padding-inline-start: 92px !important; }
  .r-timeline-rail { inset-inline-start: 64px !important; }
  .r-timeline-year { inset-inline-start: -92px !important; width: 56px !important; font-size: 20px !important; }
  .r-timeline-dot { inset-inline-start: -34px !important; }
}

@media (max-width: 639px) {
  .r-cols-4, .r-cols-5, .r-cols-3, .r-cols-2 { grid-template-columns: 1fr !important; }
  .r-sec { padding-block: 64px !important; padding-inline: 20px !important; }
  .r-pad { padding-inline: 20px !important; }
  .r-hero { padding-block: 64px 48px !important; padding-inline: 20px !important; }
  .r-card-pad { padding: 28px !important; }
  .r-stack { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
  .r-footer-grid { grid-template-columns: 1fr !important; }
  .r-span-2 { grid-column: span 1 !important; }
  .r-hide-sm { display: none !important; }
}

/* Mobile navigation panel (new — no mobile nav exists in the export;
   derived from the design system: navy field, white type, capsule CTA). */
.mobile-panel { position: fixed; inset: 0; z-index: 90; background: var(--navy-700); color: var(--white); overflow-y: auto; }
.mobile-panel a { text-decoration: none; }
.mobile-panel .m-link { display: block; padding: 16px 24px; font-size: 17px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.mobile-panel .m-sub { display: block; padding: 10px 24px 10px 40px; font-size: 15px; color: var(--navy-100); }
.mobile-panel .m-sub:hover { color: var(--white); }

/* Reduced motion: freeze the hero video and skip counter animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-media { display: none !important; }
}

/* Hero background: the poster <img> sits underneath as the fallback; the video / embed
   layers on top of it. Embeds are sized to "cover" the hero like object-fit would. */
.hero-media-wrap { container-type: size; overflow: hidden; }
.hero-embed {
  position: absolute; top: 50%; left: 50%; border: 0; pointer-events: none;
  width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%);
}

/* Multi-paragraph rich bodies rendered with |linebreaks */
.rich p { margin: 18px 0 0; }
.rich p:first-child { margin-top: 0; }

/* Accessibility: skip link + visible keyboard focus */
.skip-link { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--navy-700); color: var(--white); padding: 12px 20px; font-weight: 700;
  border-radius: 0 0 var(--radius-md) 0; text-decoration: none; }
.skip-link:focus { inset-inline-start: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px;
}

/* Bidi: phone numbers always read left-to-right, even in RTL context */
a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; }

/* Mobile: key/value table rows stack, values start-aligned and wrapping */
@media (max-width: 639px) {
  .r-kv { flex-direction: column !important; gap: 4px !important; }
  .r-kv > span:last-child { text-align: start !important; white-space: normal !important; }
}

/* reCAPTCHA v3: the floating badge is hidden (it collides with the WhatsApp launcher); Google's
   required attribution text is shown beside every protected form instead. */
.grecaptcha-badge { visibility: hidden; }

/* Footer certification marquee: two identical sets scroll left by exactly one set's width, so the
   loop is seamless. Pauses on hover; static and wrapped for reduced-motion users. */
.cert-marquee { flex: 1; min-width: 0; overflow: hidden; container-type: inline-size;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
.cert-track { display: flex; width: max-content; animation: cert-scroll 45s linear infinite; }
.cert-set { display: flex; align-items: center; justify-content: space-around; flex: 0 0 auto; min-width: 100cqw; }
.cert-set img { height: 72px; width: auto; display: block; }
.cert-marquee:hover .cert-track { animation-play-state: paused; }
@keyframes cert-scroll { to { transform: translateX(-50%); } }
html[dir="rtl"] .cert-track { animation-name: cert-scroll-rtl; }
@keyframes cert-scroll-rtl { to { transform: translateX(50%); } }
@media (max-width: 639px) { .cert-wrap { flex-direction: column; align-items: flex-start !important; gap: 12px !important; } .cert-marquee { width: 100%; flex: none; } .cert-set img { height: 60px; } .cert-marquee { mask-image: none; -webkit-mask-image: none; } }
@media (prefers-reduced-motion: reduce) {
  .cert-track { animation: none; width: auto; flex-wrap: wrap; }
  .cert-set[aria-hidden="true"] { display: none; }
  .cert-marquee { overflow: visible; }
}

/* Company landing cards: creative background-photo treatment (approved addition).
   Image zooms slightly on hover; hov-lift already handles the card's own lift/shadow. */
.company-card-img { transition: transform 450ms ease; }
.company-card:hover .company-card-img { transform: scale(1.06); }