/* Shared language selector: visible on desktop and alongside the mobile menu. */
.language-switcher {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f5f8ff;
}

.language-switcher a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 40px;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}

.language-switcher a[lang="ar"] { font-family: "Noto Sans Arabic", Tahoma, sans-serif; }
.language-switcher a[aria-current="page"] { background: var(--blue); color: white; }
.language-switcher a:hover { box-shadow: 0 0 0 1px var(--blue); }
.language-switcher a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.header-inner { gap: 18px; }
.nav-menu { gap: clamp(12px, 1.8vw, 32px); }
.header-cta { padding-inline: 20px; font-size: 16px; }

/* Direction is provided by dir=rtl; imagery and logos retain their orientation. */
html[lang="ar"] body { font-family: "Noto Sans Arabic", Tahoma, Arial, sans-serif; line-height: 1.9; }
html[lang="ar"] :is(h1, h2, h3, h4) { line-height: 1.55; letter-spacing: normal; }
html[lang="ar"] :is(p, li, label, button, input, select, textarea) { letter-spacing: normal; }
html[lang="ar"] :is(input, select, textarea) { font-family: inherit; }
html[lang="ar"] :is(input[type="email"], input[type="tel"], a[href^="tel:"], a[href^="mailto:"], a[href^="https://www.digitalyouthprint.ma"]) {
  direction: ltr;
  unicode-bidi: isolate;
}
html[lang="ar"] :is(input[type="email"], input[type="tel"]) { text-align: right; }
html[lang="ar"] .header-cta { font-size: 14px; }
html[lang="ar"] .language-switcher { direction: ltr; }
/* Keep the carousel and image viewer's established animation/control direction. */
html[lang="ar"] .portfolio-lightbox-content { direction: ltr; }

@media (max-width: 1200px) {
  .site-header .container { width: calc(100% - 44px); }
  .header-inner { height: 92px; gap: 12px; }
  .logo img { width: 58px; height: 58px; }
  .language-switcher { margin-inline-start: auto; }
  .header-cta { display: none; }
  .mobile-toggle { display: block; flex-shrink: 0; }
  .nav-menu {
    position: fixed; top: 92px; left: 22px; right: 22px;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 16px; border-radius: 20px; background: white;
    border: 1px solid #e9efff; box-shadow: 0 28px 80px rgba(5, 16, 98, .18);
    max-height: calc(100dvh - 110px); overflow-y: auto;
  }
  .nav-menu.show { display: flex; }
  .nav-menu > a, .dropdown-link { padding: 15px 14px; width: 100%; }
  .nav-menu > a.active::after, .dropdown-link.active::after { display: none; }
  .nav-dropdown { width: 100%; }
  .nav-dropdown-trigger { display: grid; grid-template-columns: 1fr 48px; min-height: 50px; }
  .dropdown-btn { width: 48px; height: 48px; }
  .dropdown-menu {
    position: static; width: 100%; transform: none; box-shadow: none;
    border: 0; padding: 0 0 8px; min-width: auto; display: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    background: #f7faff; border-radius: 14px; margin-top: 4px;
  }
  .nav-dropdown.open .dropdown-menu { display: block; transform: none; }
  .dropdown-menu a { padding: 12px 16px; }
}

@media (max-width: 420px) {
  .site-header .container { width: calc(100% - 28px); }
  .header-inner { gap: 8px; }
  .language-switcher a { padding-inline: 7px; min-width: 36px; }
}
