/* =========================================================
   Minwel Base Styles
   Global reset-ish styling, typography, layout rhythm, RTL patches
   Shared by EN / AR / FR (One-page v1)
   ========================================================= */

/* ---------------------------------------------------------
   Document / scrolling
   --------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--mw-anchor-offset);
}

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--mw-font-sans);
  color: var(--mw-text);
  background:
    linear-gradient(180deg, rgba(15, 108, 108, 0.02), rgba(15, 108, 108, 0) 18rem),
    var(--mw-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  line-height: var(--mw-leading-normal);
  overflow-x: hidden;
}

main {
  position: relative;
  overflow-x: clip;
}

/* Keep Bootstrap containers aligned with Minwel max width */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: var(--mw-container-max);
}

/* ---------------------------------------------------------
   Typography
   --------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--mw-text);
  line-height: var(--mw-leading-snug);
  letter-spacing: -0.015em;
  margin-top: 0;
  margin-bottom: 0.65em;
}

h1,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  letter-spacing: var(--mw-letter-tight);
}

p {
  color: inherit;
  margin-top: 0;
  line-height: var(--mw-leading-normal);
}

.lead {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  line-height: 1.7;
}

small,
.small {
  font-size: var(--mw-text-sm);
}

.text-accent {
  color: var(--mw-primary);
}

.text-body-secondary {
  color: var(--mw-text-soft) !important;
}

/* Prevent overly wide paragraph lines in generic long-form blocks */
.prose,
.content-copy {
  max-width: 68ch;
}

/* ---------------------------------------------------------
   Links / focus / interactive defaults
   --------------------------------------------------------- */
a {
  color: var(--mw-link);
  text-decoration-color: rgba(15, 108, 108, 0.35);
  text-underline-offset: 0.14em;
  transition:
    color var(--mw-duration-fast) var(--mw-ease),
    text-decoration-color var(--mw-duration-fast) var(--mw-ease);
}

a:hover {
  color: var(--mw-link-hover);
  text-decoration-color: rgba(15, 108, 108, 0.6);
}

a:not([class]) {
  text-decoration-thickness: 0.08em;
}

button,
input,
select,
textarea {
  font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
.accordion-button:focus-visible,
.nav-link:focus-visible,
.btn:focus-visible {
  outline: 2px solid rgba(36, 211, 181, 0.9);
  outline-offset: 2px;
  box-shadow: var(--mw-focus-ring) !important;
  border-radius: 0.5rem;
}

/* ---------------------------------------------------------
   Media defaults
   --------------------------------------------------------- */
img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

img {
  display: block;
}

.object-fit-cover {
  object-fit: cover;
}

.object-fit-contain {
  object-fit: contain;
}

/* ---------------------------------------------------------
   Selection
   --------------------------------------------------------- */
::selection {
  background: var(--mw-selection-bg);
  color: var(--mw-selection-text);
}

/* ---------------------------------------------------------
   Skip link (accessibility)
   --------------------------------------------------------- */
.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: var(--mw-z-dropdown);
  background: var(--mw-color-graphite-900);
  color: #fff;
  padding: 0.65rem 0.85rem;
  border-radius: 0.75rem;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--mw-duration-fast) var(--mw-ease);
  box-shadow: var(--mw-shadow-md);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  color: #fff;
  text-decoration: none;
}

/* ---------------------------------------------------------
   Section rhythm / wrappers
   --------------------------------------------------------- */
.section-pad {
  padding-block: var(--mw-section-pad-y);
  position: relative;
}

.section-soft {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.76)),
    linear-gradient(180deg, rgba(15, 108, 108, 0.02), rgba(36, 211, 181, 0.02));
  border-block: 1px solid rgba(15, 108, 108, 0.05);
}

.hero-section {
  padding-top: clamp(2rem, 4vw, 3.25rem);
  background:
    var(--mw-hero-glow),
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.78));
}

.section-head {
  max-width: 780px;
  margin-bottom: clamp(1.2rem, 2vw, 1.6rem);
}

.section-head .h1 {
  font-size: clamp(1.55rem, 1.25rem + 1.6vw, 2.35rem);
  margin-bottom: 0.65rem;
}

.section-head > p:last-child {
  max-width: 68ch;
  margin-inline: auto;
}

/* ---------------------------------------------------------
   Small helper text styles
   --------------------------------------------------------- */
.kicker {
  color: var(--mw-primary);
  font-weight: 600;
  letter-spacing: var(--mw-letter-kicker);
  text-transform: uppercase;
  font-size: var(--mw-text-xs);
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--mw-primary);
  font-size: var(--mw-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eyebrow-dot {
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background: var(--mw-accent);
  box-shadow: 0 0 0 4px rgba(36, 211, 181, 0.12);
  flex: 0 0 auto;
}

/* ---------------------------------------------------------
   Sticky header shell behavior
   (component-specific visuals will live in components.css)
   --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--mw-z-sticky);
  background: rgba(251, 249, 244, 0.88);
  border-bottom: 1px solid rgba(15, 108, 108, 0.05);
  transition:
    background-color var(--mw-duration-base) var(--mw-ease),
    border-color var(--mw-duration-base) var(--mw-ease),
    box-shadow var(--mw-duration-base) var(--mw-ease),
    backdrop-filter var(--mw-duration-base) var(--mw-ease);
}

.site-header.is-scrolled {
  background: var(--mw-header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mw-header-border);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.045);
}

/* Anchor offset for sticky header */
section[id],
[id].scroll-anchor {
  scroll-margin-top: var(--mw-anchor-offset);
}

/* ---------------------------------------------------------
   Reveal animation base (enhanced by JS)
   --------------------------------------------------------- */
.reveal {
  opacity: 1;
  transform: none;
}

.js-enhanced .reveal[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--mw-duration-slow) var(--mw-ease),
    transform var(--mw-duration-slow) var(--mw-ease);
  will-change: opacity, transform;
}

.js-enhanced .reveal[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------
   Bootstrap polish overrides / alignment
   --------------------------------------------------------- */
:root {
  --bs-body-color: var(--mw-text);
  --bs-body-bg: var(--mw-bg);
  --bs-border-color: rgba(15, 108, 108, 0.10);
}

.rounded-4 {
  border-radius: 1.1rem !important;
}

.ratio.bg-body-tertiary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.95)) !important;
}

/* Improve readable defaults for muted placeholders */
.placeholder-outline {
  border: 1px dashed rgba(15, 108, 108, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.9));
}

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

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .js-enhanced .reveal[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------
   RTL support patches (shared Bootstrap LTR CSS)
   Targeted to classes used in this project.
   --------------------------------------------------------- */

[dir="rtl"] body,
body[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .text-start {
  text-align: right !important;
}

[dir="rtl"] .text-end {
  text-align: left !important;
}

[dir="rtl"] .skip-link {
  left: auto;
  right: 0.5rem;
}

/* Bootstrap margin utilities frequently used in the project */
[dir="rtl"] .ms-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}

@media (min-width: 992px) {
  [dir="rtl"] .ms-lg-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  [dir="rtl"] .ms-lg-3 {
    margin-left: 0 !important;
    margin-right: 1rem !important;
  }
}

[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: .25rem !important; }
[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: .5rem !important; }
[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }

[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: .25rem !important; }
[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .5rem !important; }
[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }

/* Dropdown alignment */
[dir="rtl"] .dropdown-menu-end {
  right: auto !important;
  left: 0 !important;
}

/* Flex direction adjustments only where needed */
[dir="rtl"] .navbar-brand,
[dir="rtl"] .footer-brand {
  direction: rtl;
}

[dir="rtl"] .hero-module-list li,
[dir="rtl"] .mini-check-list li,
[dir="rtl"] .footer-links li a {
  text-align: right;
}

/* Accordion support if used later */
[dir="rtl"] .accordion-button {
  text-align: right;
  padding-right: 1rem;
  padding-left: 2.5rem;
}

[dir="rtl"] .accordion-button::after {
  margin-left: 0;
  margin-right: auto;
}

/* Keep Latin labels readable inside RTL contexts when needed */
[dir="rtl"] .panel-label,
[dir="rtl"] .panel-badge,
[dir="rtl"] .module-status {
  direction: ltr;
  unicode-bidi: plaintext;
}

/* Inline icon spacing in RTL */
[dir="rtl"] .btn .bi,
[dir="rtl"] .status-chip .bi,
[dir="rtl"] .mini-check-list .bi {
  vertical-align: -0.125em;
}

/* ---------------------------------------------------------
   Print (minimal cleanup)
   --------------------------------------------------------- */
@media print {
  html,
  body {
    background: #fff !important;
  }

  .site-header,
  .site-footer,
  .skip-link,
  .btn,
  .navbar-toggler {
    display: none !important;
  }

  .section-pad {
    padding-block: 1.25rem !important;
  }

  .section-soft,
  .hero-section {
    background: #fff !important;
    border: 0 !important;
  }

  a {
    text-decoration: none;
    color: inherit;
  }
}