:root{
  --bg:#f6f8fb; --fg:#1f2937; --muted:#6b7280;
  --card:#ffffff; --border:#e5e7eb;
  --accent:#1e88e5; --accent-ink:#0b3a6f;
  --shadow:0 10px 24px rgba(17,24,39,.08);

  --radius:16px; --line:1.65;

  /* Fonts */
  --font-ui-ar:"Cairo","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  --font-text-ar:"Noto Naskh Arabic","Cairo","Noto Sans Arabic","Amiri",serif;
  --font-latin:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --content-max:1280px;
  --gutter:16px;
  --footer-h:56px;

  /* Tables */
  --table-head:#eef2f7;
  --table-sub:#f7f9fc;
}

/* ========== Base ========== */
*{box-sizing:border-box}
html,body{height:100%}
html{font-size:17px}
@media (min-width:1200px){ html{ font-size:18px } }

body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-latin); line-height:var(--line);
  display:flex; flex-direction:column; min-height:100dvh; overflow-x:hidden;
  padding-bottom:0;                           /* footer padding only on landing */
}
body.landing{ padding-bottom: var(--footer-h); }
:lang(ar){ font-family:var(--font-text-ar); }

.site{display:flex; flex-direction:column; min-height:100%; flex:1}
.container{max-width:var(--content-max); margin-inline:auto; padding-inline:var(--gutter)}
main{flex:1; padding-block:14px}

/* ========== Brand header (P/C/Results pages) ========== */
.brandbar{
  background:#fff; border-bottom:1px solid var(--border);
  box-shadow:0 6px 16px rgba(17,24,39,.05);
}

.brandbar .container{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding-block:14px; direction:ltr;               /* keep logo visually left */
}
.brand{ display:flex; align-items:center; gap:10px; }
/* Bigger logo in brand header (forms + results), matching landing scale */
.brand-logo{
  width: clamp(110px, 12vw, 150px);  /* ~landing hero size */
  display:block;
}

.brand-title{
  grid-column:2; text-align:center;
  font:800 clamp(18px,2vw,24px)/1.2 var(--font-ui-ar);
  color:var(--accent-ink);
}
.brand-actions{ text-align:right }

/* Hide brandbar on landing */
.landing .brandbar{ display:none }

/* ========== Landing (scoped) ========== */
.landing .big-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  max-width:1100px; margin:16px auto;
  padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.4vw, 28px) 16px;
  margin-bottom: calc(var(--footer-h) + 16px);
}
.landing .hero{
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:clamp(16px,3vw,32px); direction:ltr;
}
.landing .logo{
  width:clamp(110px,12vw,150px); display:block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.06)); border-radius:12px;
}
.landing .title{ direction:rtl; text-align:center }
.landing .title h1{
  margin:0 0 6px; font-size:clamp(30px,3.6vw,42px);
  color:var(--accent-ink); letter-spacing:.2px; text-align:center;
  font-family:var(--font-ui-ar),var(--font-latin);
}
.landing .title .en{
  display:block; color:var(--muted); font-size:1.04rem; margin-top:2px;
  font-family:var(--font-latin);
}
.landing .title .ar{
  display:block; color:var(--fg); font-size:1.06rem; margin-top:2px;
  font-family:var(--font-ui-ar),var(--font-text-ar);
}
.landing .byline{
  margin-top:6px; color:#4b5563; font-weight:600; font-size:1.02rem;
  font-family:var(--font-ui-ar),var(--font-text-ar);
}
.landing .divider{
  height:1px; background:var(--border); opacity:.9; border-radius:999px;
  margin:clamp(14px,2.4vw,22px) 0;
}
.landing .section-subtitle,.landing .ref-title{
  font-weight:800; color:var(--accent-ink); font-size:1.08rem; margin:0 0 10px; text-align:right;
  font-family:var(--font-ui-ar),var(--font-text-ar);
}
.landing .intro{
  text-align:justify; line-height:1.9; font-size:1.06rem; max-width:920px; margin:0 auto;
}
.landing .refbox{
  background:var(--table-sub); border:1px solid var(--border);
  border-radius:12px; padding:14px; direction:ltr; text-align:left; font-size:.95rem;
  overflow-wrap:anywhere; max-width:920px; margin:0 auto;
}
.landing .bottom-cta{ display:flex; justify-content:center; padding-top:6px }

/* ========== Shared UI (cards/buttons/notes) ========== */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding: clamp(16px, 2.2vw, 24px); margin:16px auto;
}
.container.card{ margin-bottom:28px; }          /* footer is static on forms */

.note{ color:var(--muted) }
.small-note{ font-size:.94rem; color:var(--muted) }

.actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-start }
.form-cta{ display:flex; justify-content:center; margin:16px auto 12px; scroll-margin-bottom:96px }

.btn{
  display:inline-block; background:var(--accent); color:#fff;
  padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:800;
  letter-spacing:.2px; border:1px solid rgba(0,0,0,.05);
  transition:filter .15s ease, transform .02s ease, box-shadow .15s ease;
  font-family:var(--font-ui-ar),var(--font-latin);
}
.btn:hover{ filter:brightness(1.05); box-shadow:0 8px 18px rgba(30,136,229,.20) }
.btn:active{ transform:translateY(1px) }
.btn.secondary{ background:#ffffff; color:var(--accent-ink); border:1px solid var(--border) }

/* ========== Tables (forms) ========== */
.headerbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; gap:10px }
.headerbar h2{ margin:0 }

.table{ width:100%; border-collapse:collapse; table-layout:fixed; margin-top:10px }
.table th,.table td{ border:1px solid var(--border); padding:10px; vertical-align:top }
.table thead th{ background:var(--table-head) }

.subrow{ background:var(--table-sub); font-size:.95rem }
.subrow .likert{ font-size:.9rem; line-height:1.35; white-space:normal; word-break:break-word }
.subhead th,.subhead td{ background:var(--table-head); font-weight:600; text-align:center }

.numcol{ width:7%; text-align:center; white-space:nowrap }
.textcol{ width:auto; word-wrap:break-word; white-space:normal; line-height:1.8 }
.likert{ width:11%; text-align:center }

.cellpair .n{ display:block; font-weight:700 }
.cellpair .l{ display:block; color:var(--muted); font-size:.9rem; line-height:1.25 }
.likert input{ transform:scale(1.05); vertical-align:middle }

@media (max-width: 720px){
  .container{ padding-inline:16px }
  .likert{ width:12% }
  .numcol{ width:10% }
  .textcol{ line-height:1.7 }
}
@media (max-width: 480px){
  .brand-logo{ width: clamp(96px, 22vw, 130px); }
  .brand-title{ font-size: clamp(16px, 4.2vw, 22px); }
}


/* ========== Validation ========== */
.invalid{ outline:2px solid #ef4444; outline-offset:2px; border-radius:8px }

/* ========== Footer ========== */
/* Default: static footer for forms/results */
.footer{
  position:static;
  background:#0b3a6f; color:#fff;
  border-top:1px solid rgba(255,255,255,.18);
  height:var(--footer-h); z-index:10;
}
.footer .container{
  min-height:var(--footer-h);
  display:flex; justify-content:center; align-items:center;
  text-align:center; padding:0 var(--gutter); gap:8px; flex-wrap:wrap;
}
.footer a{ color:#fff; text-decoration:none; font-weight:700 }
.footer a:hover{ color:#dbeafe; text-decoration:underline }

/* Landing only: fixed footer visible from first glance */
.landing .footer{ position:fixed; bottom:0; left:0; right:0; }