/*
Theme Name: Souss Massa National Park
Description: RTL Stylesheet for Arabic language support (/ar/)
*/

html[lang^="ar"],
body.rtl,
html[lang^="ar"] body,
html[lang^="ar"] #main,
html[lang^="ar"] main {
  direction: rtl;
  text-align: right;
  font-family: 'Cairo', 'Readex Pro', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
  overflow-x: hidden !important;
  max-width: 100vw;
  width: 100%;
  box-sizing: border-box;
}

html[lang^="ar"] *,
body.rtl * {
  box-sizing: border-box;
}

/* Typography Overrides */
html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3,
html[lang^="ar"] h4,
html[lang^="ar"] h5,
html[lang^="ar"] h6,
html[lang^="ar"] .eyebrow,
html[lang^="ar"] .logo-title-text,
html[lang^="ar"] .btn,
html[lang^="ar"] .nav-link {
  font-family: 'Cairo', 'Readex Pro', 'Tajawal', sans-serif;
  letter-spacing: 0 !important;
}

/* Overlapping Flying Bird in RTL */
html[lang^="ar"] .overlapping-bird-wrap {
  overflow: visible;
  max-width: 100%;
}

html[lang^="ar"] .flying-bird-overlap {
  right: auto;
  left: clamp(16px, 6vw, 100px);
  transform: scaleX(-1);
  animation: birdFlyFromLeftOverlap 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards, birdFloatRTL 4.5s ease-in-out infinite 1.8s;
}

@keyframes birdFlyFromLeftOverlap {
  0% {
    transform: translate3d(-120px, -20px, 0) scaleX(-1) scale(0.7) rotate(8deg);
    opacity: 0;
  }
  65% {
    transform: translate3d(10px, 6px, 0) scaleX(-1) scale(1.03) rotate(-2deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scaleX(-1) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes birdFloatRTL {
  0%, 100% {
    transform: translate3d(0, 0, 0) scaleX(-1) rotate(0deg);
  }
  50% {
    transform: translate3d(8px, -14px, 0) scaleX(-1) rotate(3deg);
  }
}

@media (max-width: 768px) {
  html[lang^="ar"] .flying-bird-overlap {
    top: -70px;
    right: auto;
    left: 12px;
    width: 160px;
  }
}

/* Navigation & Header in RTL */
html[lang^="ar"] .site-header .nav-row {
  justify-content: space-between;
}

html[lang^="ar"] .primary-navigation ul {
  gap: 34px;
  justify-content: center;
}

html[lang^="ar"] .logo-container {
  margin-right: 0;
  margin-left: 0;
  max-width: calc(100vw - 80px);
}

html[lang^="ar"] .logo-link {
  max-width: 100%;
  word-break: break-word;
}

@media (max-width: 900px) {
  html[lang^="ar"] .primary-navigation {
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    text-align: right;
    box-sizing: border-box;
  }
  html[lang^="ar"] .primary-navigation ul {
    text-align: right;
    align-items: flex-start;
  }
}

/* RTL Language Switcher Dropdown */
html[lang^="ar"] .souss-lang-dropdown {
  margin-right: 0;
  margin-left: 12px;
}

html[lang^="ar"] .souss-lang-menu,
html[lang^="ar"] .nav-actions-mobile .souss-lang-menu {
  right: 0 !important;
  left: auto !important;
  max-width: calc(100vw - 32px);
}

html[lang^="ar"] .souss-lang-item .lang-name {
  text-align: right;
}

/* Directional Icon Rotations (Arrow icons point to the left in RTL) */
html[lang^="ar"] .cat-view-all-btn .material-symbols-outlined,
html[lang^="ar"] .sp-card-readmore .material-symbols-outlined,
html[lang^="ar"] .blog-card-readmore .material-symbols-outlined,
html[lang^="ar"] .read-link .material-symbols-outlined,
html[lang^="ar"] .view-all .material-symbols-outlined,
html[lang^="ar"] a.view-all .material-symbols-outlined,
html[lang^="ar"] .btn-secondary .material-symbols-outlined,
html[lang^="ar"] .btn-primary .material-symbols-outlined,
html[lang^="ar"] .btn-outline .material-symbols-outlined {
  transform: scaleX(-1);
  display: inline-block;
}

/* Hero Section RTL */
html[lang^="ar"] .hero-inner {
  text-align: right;
  margin-right: 0;
  margin-left: auto;
}

html[lang^="ar"] .hero-actions {
  justify-content: flex-start;
  gap: 16px;
}

@media (max-width: 480px) {
  html[lang^="ar"] .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  html[lang^="ar"] .hero-actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* Waymarker Stats Grid in RTL */
html[lang^="ar"] .waymarker-grid {
  direction: rtl;
}

html[lang^="ar"] .waymarker .stat {
  border-left: none;
  border-right: 1px solid rgba(245,241,230,0.18);
  padding: 0 24px;
}

html[lang^="ar"] .waymarker .stat:first-child {
  border-right: none;
  padding-right: 0;
}

@media (max-width: 800px) {
  html[lang^="ar"] .waymarker .stat:nth-child(2n+1) {
    border-right: none;
    padding-right: 0;
  }
}

@media (max-width: 480px) {
  html[lang^="ar"] .waymarker .stat {
    border-right: none;
    padding: 12px 0;
  }
}

/* Intro & Info Card in RTL */
html[lang^="ar"] .info-list dd {
  text-align: left;
}

/* Species & Blog Grid Cards */
html[lang^="ar"] .species-grid-head {
  justify-content: space-between;
}

html[lang^="ar"] .species-card .body,
html[lang^="ar"] .blog-card .body {
  text-align: right;
}

html[lang^="ar"] .blog-card-meta {
  justify-content: flex-start;
}

/* Conservation Section in RTL */
html[lang^="ar"] .conservation-grid {
  direction: rtl;
}

html[lang^="ar"] .milestone {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  text-align: right;
}

html[lang^="ar"] .milestone .num {
  flex-shrink: 0;
  min-width: 48px;
}

@media (max-width: 480px) {
  html[lang^="ar"] .milestone {
    gap: 14px;
  }
}

/* FAQ Accordion in RTL */
html[lang^="ar"] .faq-item summary {
  text-align: right;
  padding: 20px 24px 20px 48px;
}

html[lang^="ar"] .faq-item summary::after {
  right: auto;
  left: 20px;
}

html[lang^="ar"] .faq-a {
  text-align: right;
  padding: 0 24px 24px 24px;
}

/* Newsletter in RTL */
html[lang^="ar"] .newsletter-content {
  text-align: center;
}

html[lang^="ar"] .newsletter-form {
  direction: rtl;
}

/* Footer Section in RTL */
html[lang^="ar"] .footer-grid {
  text-align: right;
}

html[lang^="ar"] .footer-social-icons {
  justify-content: flex-start;
}

html[lang^="ar"] .footer-bottom {
  justify-content: space-between;
}

/* Form Inputs in RTL */
html[lang^="ar"] input,
html[lang^="ar"] textarea,
html[lang^="ar"] select {
  text-align: right;
  direction: rtl;
}

/* Contact Page RTL */
html[lang^="ar"] .contact-grid {
  direction: rtl;
}

html[lang^="ar"] .contact-info-card,
html[lang^="ar"] .contact-form-card {
  text-align: right;
}

/* About Page RTL */
html[lang^="ar"] .about-mission-grid,
html[lang^="ar"] .ecosystems-grid,
html[lang^="ar"] .ibis-feature,
html[lang^="ar"] .wildlife-grid,
html[lang^="ar"] .timeline {
  direction: rtl;
  text-align: right;
  border-left: none;
  border-right: 2px solid var(--clay-soft);
  padding-left: 0;
  padding-right: 32px;
}

html[lang^="ar"] .timeline-item {
  text-align: right;
}

html[lang^="ar"] .timeline-item::before {
  left: auto;
  right: -39px;
}

html[lang^="ar"] .skip-link:focus {
  left: auto !important;
  right: 16px !important;
}