/**
 * MWL Group — site-polish.css
 *
 * Extracted from per-page inline <style> blocks (P1 refactor).
 * All properties use Tailwind-compatible logical equivalents.
 * Physical properties (left/right) avoided for RTL-readiness.
 */

/* ── Scroll reveal — fail-open progressive enhancement ───────────────────── */
/*
 * Elements are ALWAYS visible by default.
 * JS adds .mwl-reveal-in only when IntersectionObserver fires → animation plays.
 * No JS or IO failure = content stays visible (fail-open).
 * Matches original prod: section elements on home, .group cards on portfolio.
 */
@keyframes mwl-reveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mwl-reveal-in {
  animation: mwl-reveal 0.8s cubic-bezier(0.2, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .mwl-reveal-in { animation: none; }
}

/* ── Anchor highlight pulse ──────────────────────────────────────────────── */
@keyframes mwl-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15); }
  70%  { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); }
  100% { box-shadow: none; }
}
.mwl-anchor-highlight {
  animation: mwl-pulse 1.5s ease-out 1;
  scroll-margin-block-start: 80px;
}

/* ── Material Symbols icon font config ──────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ── Form input baseline (shared across brief pages) ─────────────────────── */
.form-input-minimal {
  display: block;
  width: 100%;
  border: none;
  border-block-end: 1px solid rgb(0 0 0 / 0.15);
  padding-block: 0.5rem;
  padding-inline: 0;
  background: transparent;
  outline: none;
  color: inherit;
  transition: border-color 0.2s;
}
.form-input-minimal:focus {
  border-block-end-color: currentColor;
}
.form-section {
  padding-block-end: 2rem;
  margin-block-end: 2rem;
  border-block-end: 1px solid rgb(0 0 0 / 0.08);
}
.required-asterisk { color: inherit; }

/* ── Step connector (brief sidebar) ─────────────────────────────────────── */
.step-line::before {
  content: '';
  position: absolute;
  inset-inline-start: 0.75rem;
  inset-block-start: 1.75rem;
  width: 1px;
  block-size: 100%;
  background: rgb(0 0 0 / 0.1);
}

/* ── Scroll snap (material strip if used) ───────────────────────────────── */
.scroll-snap-x {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.scroll-snap-x > * {
  scroll-snap-align: start;
}

/* ── Tab panel transition ────────────────────────────────────────────────── */
[role="tabpanel"] {
  transition: opacity 0.2s ease;
}
[role="tabpanel"].hidden {
  display: none;
}

/* ── Details/summary triangle suppression (FAQ) ──────────────────────────── */
details > summary::-webkit-details-marker { display: none; }
details > summary { list-style: none; }

/* ── Parallax helper (home hero) ─────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .parallax-bg {
    will-change: transform;
  }
}

/* ── Arabic RTL — scoped to html[dir=rtl] ───────────────────────────────── */
/*
 * Only active on ar/* pages. All layout already uses logical properties
 * (ms/me/ps/pe/border-s/border-e/inset-inline-*) so RTL mirrors automatically.
 * These rules handle the Arabic type stack only.
 */
html[dir="rtl"] body {
  font-family: 'Noto Naskh Arabic', 'Cairo', 'Geist', sans-serif;
}
html[dir="rtl"] .font-headline-md,
html[dir="rtl"] .font-headline-sm,
html[dir="rtl"] .font-display-lg {
  font-family: 'Cairo', 'Bodoni Moda', serif;
}

/* ── Language dropdown (shared, all locales) ─────────────────────────────── */
.lang-menu {
  min-width: 110px;
}
#lang-dropdown[aria-expanded="true"] > ul,
#lang-dropdown .lang-menu:not(.hidden) {
  display: block;
}