/* Project Ma'man bilingual typography and responsive layout polish */
:root {
  --maman-font-en: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --maman-font-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

*, *::before, *::after { box-sizing: border-box; }

/* English: one consistent family for text, headings, buttons, forms and navigation. */
html[dir="ltr"] body,
html[dir="ltr"] #dc-root :where(*),
html[dir="ltr"] input,
html[dir="ltr"] textarea,
html[dir="ltr"] select,
html[dir="ltr"] button {
  font-family: var(--maman-font-en) !important;
}

/* Arabic: IBM Plex Sans Arabic throughout the Arabic interface. */
html[dir="rtl"] body,
html[dir="rtl"] #dc-root :where(*),
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button {
  font-family: var(--maman-font-ar) !important;
}

/* Preserve Manrope for deliberately English/LTR fragments in the Arabic UI. */
html[dir="rtl"] #dc-root [dir="ltr"],
html[dir="rtl"] #dc-root [dir="ltr"] :where(*) {
  font-family: var(--maman-font-en) !important;
}

/* Keep headings readable with the new font metrics. */
html[dir="ltr"] :where(h1, h2, h3, h4, h5, h6, [data-hero-line]) {
  letter-spacing: -0.025em !important;
  line-height: 1.22 !important;
}

html[dir="rtl"] :where(h1, h2, h3, h4, h5, h6, [data-hero-line]) {
  letter-spacing: 0 !important;
  line-height: 1.48 !important;
}

.maman-wordmark {
  font-family: var(--maman-font-en) !important;
  letter-spacing: -0.035em !important;
  line-height: 1.12 !important;
}

/* Text safety: prevent long labels, links, and translations from colliding. */
#dc-root :where(section, article, header, footer, nav, form, div, p, h1, h2, h3, h4, h5, h6, a, button, label, span, li) {
  min-inline-size: 0;
}

#dc-root :where(p, h1, h2, h3, h4, h5, h6, a, button, label, li) {
  overflow-wrap: anywhere;
  word-break: normal;
}

#dc-root :where(h1, h2, h3, h4, h5, h6, p) {
  max-inline-size: 100%;
}

#dc-root :where(button, a) {
  line-height: 1.4;
}

#dc-root :where(input, textarea, select, button) {
  max-inline-size: 100%;
}

img, video, canvas, svg { max-inline-size: 100%; }

/* Current-page navigation cue. */
nav a[aria-current="page"] {
  background: #F2EEFA !important;
  color: #3F365E !important;
}

/* More intentional keyboard focus and safer interaction states. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(62, 102, 176, 0.5) !important;
  outline-offset: 3px !important;
}

button, a { -webkit-tap-highlight-color: transparent; }

/* Avoid excessively long editorial lines without constraining cards. */
html[dir="ltr"] #dc-root p { max-width: 72ch; }
html[dir="rtl"] #dc-root p { max-width: 68ch; }

/* Responsive protection for navigation, forms, cards, and long translations. */
@media (max-width: 900px) {
  #dc-root nav a,
  #dc-root nav button {
    white-space: normal !important;
  }

  #dc-root form > div {
    min-inline-size: 0;
  }
}

@media (max-width: 640px) {
  /* Inline prototype grids use 280–320px minimum columns; collapse them safely on narrow phones. */
  #dc-root [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #dc-root [style*="grid-template-columns"] > *,
  #dc-root footer [style*="min-width"] {
    min-width: 0 !important;
  }

  #dc-root footer {
    padding-inline: 20px !important;
  }

  /* Keep the full bilingual header usable on 320px-wide screens. */
  #dc-root [data-screen-label="Nav"] .maman-wordmark {
    display: none !important;
  }

  #dc-root [data-screen-label="Nav"] > div {
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  #dc-root [data-screen-label="Nav"] > div > :last-child {
    gap: 5px !important;
  }

  #dc-root [data-screen-label="Nav"] > div > :last-child > div button {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  #dc-root [data-screen-label="Nav"] > div > :last-child > button {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    padding: 0 !important;
    justify-content: center !important;
    font-size: 0 !important;
  }

  #dc-root [data-screen-label="Nav"] > div > :last-child > button span {
    font-size: 12px !important;
  }

  #dc-root form > div[style*="display: flex"] {
    max-width: 100%;
  }

  html[dir="ltr"] :where(h1, h2, h3, h4, h5, h6, [data-hero-line]) {
    letter-spacing: -0.015em !important;
  }

  #dc-root :where(button, a) {
    max-width: 100%;
  }

  #dc-root :where(input, textarea, select) {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================
   Project Ma'man motion and decorative system
   Calm, tactile, basalt-inspired, and bilingual-safe.
   ========================================================== */
:root {
  --maman-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --maman-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --maman-shadow-rest: 0 14px 38px rgba(40, 29, 62, 0.07);
  --maman-shadow-hover: 0 24px 62px rgba(40, 29, 62, 0.14);
}

/* Very light tactile grain keeps large flat areas from looking synthetic. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}



/* Basalt-inspired abstract pieces placed in selected hero and CTA sections. */
.maman-decorated-section { isolation: isolate; }
.maman-basalt-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.maman-basalt-stone {
  position: absolute;
  display: block;
  border: 1px solid rgba(120, 110, 150, 0.14);
  background: linear-gradient(145deg, rgba(120, 110, 150, 0.10), rgba(34, 28, 54, 0.025));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  clip-path: polygon(24% 2%, 78% 8%, 100% 44%, 86% 88%, 38% 100%, 4% 72%, 0 28%);
  animation: mamanBasaltDrift 18s var(--maman-ease-soft) infinite alternate;
}
.maman-basalt-stone:nth-child(1) { width: 160px; height: 142px; inset-inline-start: -42px; top: 18%; transform: rotate(-14deg); }
.maman-basalt-stone:nth-child(2) { width: 92px; height: 86px; inset-inline-end: 7%; top: 12%; transform: rotate(18deg); animation-delay: -6s; animation-duration: 22s; }
.maman-basalt-stone:nth-child(3) { width: 132px; height: 118px; inset-inline-end: -35px; bottom: 10%; transform: rotate(-8deg); animation-delay: -11s; animation-duration: 24s; }
.maman-basalt-stone:nth-child(4) { width: 54px; height: 50px; inset-inline-start: 15%; bottom: 14%; transform: rotate(12deg); animation-delay: -3s; animation-duration: 16s; }
.maman-dark-section .maman-basalt-stone {
  border-color: rgba(231, 221, 250, 0.11);
  background: linear-gradient(145deg, rgba(231, 221, 250, 0.08), rgba(255,255,255,0.015));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035);
}
@keyframes mamanBasaltDrift {
  0% { translate: 0 0; rotate: -2deg; }
  100% { translate: 0 -15px; rotate: 3deg; }
}

/* Refined title ornament: a short line plus a small basalt diamond. */
.maman-section-title {
  position: relative;
  padding-block-end: 18px;
}
.maman-section-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-block-start: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #786E96 0 72%, #E8B33C 72% 100%);
  transform-origin: left center;
  animation: mamanLineBreathe 5.5s ease-in-out infinite;
}
html[dir="rtl"] .maman-section-title::after { transform-origin: right center; }
.maman-title-centered::after { margin-inline: auto; }
.maman-title-on-dark::after { background: linear-gradient(90deg, #E7DDFA 0 72%, #E8B33C 72% 100%); }
@keyframes mamanLineBreathe {
  0%, 100% { scale: 0.82 1; opacity: 0.76; }
  50% { scale: 1 1; opacity: 1; }
}

/* Section-to-section detail inspired by cut basalt masonry. */
.maman-section-divider::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset-block-start: 0;
  inset-inline-start: 50%;
  width: min(150px, 36vw);
  height: 12px;
  translate: -50% -50%;
  opacity: 0.42;
  background:
    linear-gradient(135deg, transparent 36%, #786E96 37% 48%, transparent 49%) 0 0 / 24px 12px repeat-x,
    linear-gradient(45deg, transparent 36%, #E8B33C 37% 48%, transparent 49%) 12px 0 / 24px 12px repeat-x;
  pointer-events: none;
}

/* Premium surfaces: depth without dramatic 3D movement. */
.maman-card {
  transition:
    transform 420ms var(--maman-ease-out),
    box-shadow 420ms var(--maman-ease-out),
    border-color 300ms ease,
    background-color 300ms ease;
  will-change: transform;
}
.maman-card::before { pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .maman-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--maman-shadow-hover) !important;
    border-color: rgba(120, 110, 150, 0.28) !important;
  }
  .maman-card:has(a:hover, button:hover) { transform: translateY(-7px); }
}

/* Buttons and prominent links feel responsive, but remain calm. */
.maman-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 220ms var(--maman-ease-out),
    box-shadow 300ms ease,
    background-color 240ms ease,
    color 240ms ease !important;
}
.maman-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.26) 48%, transparent 76%);
  transform: translateX(-125%);
  transition: transform 700ms var(--maman-ease-out);
}
html[dir="rtl"] .maman-cta::before { transform: translateX(125%); }
@media (hover: hover) and (pointer: fine) {
  .maman-cta:hover { transform: translateY(-3px); }
  .maman-cta:hover::before { transform: translateX(125%); }
  html[dir="rtl"] .maman-cta:hover::before { transform: translateX(-125%); }
}
.maman-cta:active { transform: translateY(0) scale(0.985); }

/* Images gain depth inside cards and editorial frames. */
.maman-media-frame { overflow: hidden; }
.maman-media-frame > img,
img.maman-media {
  transition: transform 850ms var(--maman-ease-out), filter 600ms ease;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .maman-media-frame:hover > img,
  img.maman-media:hover {
    transform: scale(1.035);
    filter: saturate(1.035) contrast(1.015);
  }
}

/* FAQ polish; the existing grid-row animation remains the layout engine. */
.maman-faq-item {
  transition: border-color 300ms ease, box-shadow 350ms var(--maman-ease-out), transform 350ms var(--maman-ease-out);
}
.maman-faq-item button > span:last-child { transition: transform 350ms var(--maman-ease-out), background-color 250ms ease !important; }
@media (hover: hover) and (pointer: fine) {
  .maman-faq-item:hover {
    border-color: rgba(120,110,150,0.28) !important;
    box-shadow: 0 18px 48px rgba(60,45,30,0.09) !important;
    transform: translateY(-2px);
  }
  .maman-faq-item:hover button > span:last-child { transform: rotate(90deg); }
}

/* Navigation feels more deliberate while remaining readable over every section. */
#dc-root [data-screen-label="Nav"] > div {
  box-shadow: 0 10px 38px rgba(40, 29, 62, 0.10) !important;
}
#dc-root [data-screen-label="Nav"] a {
  position: relative;
}
#dc-root [data-screen-label="Nav"] a::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  inset-block-end: 4px;
  height: 2px;
  border-radius: 999px;
  background: #786E96;
  transform: scaleX(0);
  transition: transform 260ms var(--maman-ease-out);
}
#dc-root [data-screen-label="Nav"] a:hover::after,
#dc-root [data-screen-label="Nav"] a[aria-current="page"]::after { transform: scaleX(1); }

/* Links in editorial content get a directional underline rather than a hard jump. */
.maman-text-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 320ms var(--maman-ease-out), color 220ms ease;
}
html[dir="rtl"] .maman-text-link { background-position: 0 100%; }
.maman-text-link:hover { background-size: 100% 1px; }

/* Mobile keeps decoration sparse and preserves layout. */
@media (max-width: 700px) {
  body::before { opacity: 0.025; }
  .maman-basalt-stone:nth-child(1) { width: 104px; height: 92px; opacity: 0.7; }
  .maman-basalt-stone:nth-child(2) { width: 62px; height: 58px; }
  .maman-basalt-stone:nth-child(3),
  .maman-basalt-stone:nth-child(4) { display: none; }
  .maman-section-title { padding-block-end: 12px; }
  .maman-section-title::after { width: 58px; margin-block-start: 12px; }
  .maman-section-divider::before { opacity: 0.3; }
}

/* Complete reduced-motion mode: content remains visible and usable. */
@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
  .maman-basalt-stone,
  .maman-section-title::after { animation: none !important; }
  .maman-card,
  .maman-card:hover,
  .maman-cta,
  .maman-cta:hover,
  .maman-media-frame > img,
  img.maman-media,
  .maman-faq-item,
  .maman-faq-item:hover {
    transform: none !important;
    transition-duration: 0.01ms !important;
  }
  .maman-cta::before { display: none; }
}