/* ------------------------------------------------------
   Brand tokens (MWAN theme)
------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap");

:root {
  --bg: #002b3c; /* primary deep blue */
  --bg-soft: #01364a;
  --ink: #f1f6f5; /* light neutral */
  --ink-strong: #d2e6e4;
  --accent: #009d4f; /* MWAN green */
  --accent-2: #7cba58; /* light green */
  --accent-warm: #7CBA58; /* supporting yellow */
  --card: rgba(1, 54, 74, 0.82);
  --shadow: 0 12px 32px rgba(0, 43, 60, 0.45);
  --radius: 18px;

  --header-h: 76px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", "Cairo", sans-serif;
  background-color: var(--bg);
  background-image: 
    linear-gradient(to bottom, rgba(0, 43, 60, 0.175), rgba(0, 43, 60, 0.247)),
    url("bg-1920x1080.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------
   Header (logo left, slogan right)
------------------------------------------------------ */
.brand-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: calc(var(--header-h) + var(--safe-top));
  padding: calc(10px + var(--safe-top)) max(16px, var(--safe-right)) 10px
    max(16px, var(--safe-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: ltr; /* forces physical left/right */
  z-index: 20;
  pointer-events: none;
}
.brand-header img {
  height: clamp(56px, 8vw, 72px);
  max-width: 44vw;
  object-fit: contain;
  pointer-events: auto;
}
/* Make slogan bigger than logo */
.brand-header .brand-right,
.brand-header img[alt*="slogan" i],
.brand-header img[alt*="شعار الحملة" i],
.brand-header img[src*="slogan" i] {
  height: clamp(70px, 10vw, 90px); /* 25% bigger than logo */
  max-width: 50vw;
}