/* Shared homepage identity. Component rules below are opt-in only. */
@font-face{font-family:Tajawal;src:url('/assets/fonts/Tajawal-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Tajawal;src:url('/assets/fonts/Tajawal-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Tajawal;src:url('/assets/fonts/Tajawal-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Tajawal;src:url('/assets/fonts/Tajawal-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}

:root {
  --ink:#001834;
  --ink-2:#0a2c4d;
  --muted:#496178;
  --paper:#fbfaff;
  --wash:#f3eefc;
  --ice:#edf7f8;
  --line:#d5dce6;
  --line-strong:#bac8d4;
  --violet:#641fc5;
  --violet-2:#5012b7;
  --teal:#08716d;
  --teal-light:#50c8c6;
  --success:#176b58;
  --danger:#8b3148;
  --ease:cubic-bezier(.16,1,.3,1);
  --brand-hero-background:
    linear-gradient(145deg,rgba(100,31,197,.065),transparent 42%),
    linear-gradient(320deg,rgba(80,200,198,.13),transparent 42%),
    var(--paper);
  --brand-primary-background:linear-gradient(110deg,var(--violet-2),#604bdd 55%,var(--teal-light));
  --brand-primary-hover:linear-gradient(110deg,#4710a7,#5542cf 55%,#42b6b5);
  --brand-title-background:linear-gradient(95deg,var(--violet-2),#4f5fd0 52%,#35aaa9);
}

/* Keep legacy layout, validation, visibility and responsive behavior intact. */
.workshop-brand {
  --navy:var(--ink);
  --ice-2:var(--wash);
  background:var(--paper);
  color:var(--ink);
  font-family:Tajawal,Arial,sans-serif;
  line-height:1.8;
}
.workshop-brand::selection { background:rgba(100,31,197,.18);color:var(--ink); }
.workshop-brand :focus-visible { outline:3px solid rgba(100,31,197,.45);outline-offset:3px; }
.workshop-brand .header,
.workshop-brand .admin-topbar {
  background:rgba(251,250,255,.92);
  border-bottom-color:rgba(213,220,230,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.workshop-brand .desktop-nav a:hover,
.workshop-brand .desktop-nav a:focus-visible { color:var(--violet); }
.workshop-brand .mobile-menu,
.workshop-brand .admin-sidebar { background:var(--paper); }
.workshop-brand .page-hero,
.workshop-brand .auth-shell,
.workshop-brand .auth-aside,
.workshop-brand .admin-login-shell,
.workshop-brand .verify-shell,
.workshop-brand .result-shell,
.workshop-brand.admin-body { background:var(--brand-hero-background); }
.workshop-brand .gradient-title {
  background:var(--brand-title-background);
  background-size:180% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:var(--violet);
  -webkit-text-fill-color:transparent;
}
.workshop-brand .eyebrow { color:var(--violet); }
.workshop-brand .eyebrow::before { background:var(--teal-light); }
.workshop-brand .btn { border-radius:15px; }
.workshop-brand .btn:not(.btn-sm) { min-height:52px; }
.workshop-brand .btn-primary {
  border-color:transparent;
  background:var(--brand-primary-background);
  color:#fff;
  box-shadow:0 14px 34px rgba(96,25,180,.18);
}
.workshop-brand .btn-primary:hover { background:var(--brand-primary-hover); }
.workshop-brand .btn-secondary { background:#fff;border-color:var(--line-strong);color:var(--ink); }
.workshop-brand .btn-quiet { background:var(--wash);color:var(--ink); }
.workshop-brand .btn:disabled { opacity:.65;transform:none;box-shadow:none; }
.workshop-brand .input:focus,
.workshop-brand .select:focus,
.workshop-brand .textarea:focus { border-color:var(--violet);box-shadow:0 0 0 4px rgba(100,31,197,.12); }
.workshop-brand .choice:has(input:checked) { border-color:var(--violet);background:var(--wash); }
.workshop-brand .surface,
.workshop-brand .admin-card,
.workshop-brand .info-card,
.workshop-brand .resource-card,
.workshop-brand .verify-card,
.workshop-brand .result-card { background:#fff;border-color:var(--line);color:var(--ink); }
.workshop-brand .admin-nav button.is-active { color:var(--violet);background:var(--wash);box-shadow:inset -3px 0 var(--teal); }
.workshop-brand .admin-login-shell { min-height:100svh;display:grid;align-content:center;justify-items:center;gap:24px;padding:40px 20px; }
.workshop-brand .admin-login-brand { text-align:center; }
.workshop-brand .admin-login-brand img { margin-inline:auto; }
.workshop-brand .admin-login-brand p,
.workshop-brand .admin-login-back { color:var(--muted); }
.workshop-brand .admin-login-card { width:min(100%,480px); }
.workshop-brand .result-shell { padding-block:clamp(40px,7vw,80px); }
.workshop-brand .result-card,
.workshop-brand .verify-search {
  max-width:760px;margin-inline:auto;padding:clamp(24px,4vw,48px);
  border:1px solid var(--line);border-radius:20px;background:#fff;
  box-shadow:0 16px 50px rgba(0,24,52,.055);
}
.workshop-brand .verify-search { margin-block-end:24px; }
.workshop-brand .result-actions { display:flex;flex-wrap:wrap;gap:12px;margin-block:24px; }
.workshop-brand .result-truth { color:var(--muted);font-size:.9rem; }
.workshop-brand .footer { background:var(--ink);color:var(--paper);border-top-color:var(--ink); }
.workshop-brand .footer p,
.workshop-brand .footer-bottom { color:#c5d1dd;border-color:rgba(213,220,230,.2); }
.workshop-brand .footer-logo { filter:brightness(0) invert(1); }
@media (prefers-reduced-motion:reduce) {
  .workshop-brand .btn { transition:none; }
  .workshop-brand .btn:hover { transform:none; }
}
@media print {
  .workshop-brand,
  .workshop-brand .verify-shell { background:#fff; }
  .workshop-brand .verify-card { box-shadow:none; }
}
.workshop-brand .blog-grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.workshop-brand .blog-card img,
.workshop-brand .blog-cover { width:100%; height:auto; border-radius:16px; display:block; background:#001834; }
.workshop-brand .blog-article { max-width:760px; }
.workshop-brand .blog-body p { margin-block:0 1.1em; }
.workshop-brand .rating-row { display:flex; flex-wrap:wrap; gap:8px; }
.workshop-brand .rating-row label { display:flex; align-items:center; gap:6px; min-width:42px; }
.workshop-brand .qa-list { display:grid; gap:12px; }
.workshop-brand .qa-item { padding:16px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.workshop-brand .qa-reply { margin-block-start:10px; padding:12px; background:var(--ice); border-radius:12px; }