/* =====================================================================
   Awqaf NZ Knowledge Guide — website integration (added 13 Oct 2026)
   The character artwork is FROZEN. Do not recolour, crop, flip,
   distort or filter the images in assets/img/mascot/. Layout only.
   Shared by en/index.html and ar/index.html (RTL via logical props).
   ===================================================================== */

.kg-img { display:block; height:auto; user-select:none; -webkit-user-drag:none; }

/* ---------- 1. Meet the Guide (research section intro) ---------- */
.kg-intro {
  margin-top:30px; position:relative; display:grid;
  grid-template-columns: 190px 1fr; gap:10px 28px; align-items:center;
  background:linear-gradient(135deg,#fff 0%,var(--teal-faint) 55%,var(--gold-pale) 100%);
  border:1px solid rgba(26,122,114,0.22); border-radius:22px;
  padding:22px 30px 22px 22px; box-shadow:0 10px 32px rgba(45,36,56,0.10); overflow:hidden;
}
[dir="rtl"] .kg-intro { padding:22px 22px 22px 30px; }
.kg-intro::after { /* soft leaf-coloured halo behind the character */
  content:""; position:absolute; inset-inline-start:-40px; bottom:-60px; width:280px; height:280px;
  border-radius:50%; background:radial-gradient(circle,rgba(232,201,106,0.35),rgba(75,191,179,0.12) 55%,transparent 70%);
  z-index:0; pointer-events:none;
}
.kg-intro > * { position:relative; z-index:1; }
.kg-intro .kg-img { width:170px; margin:0 auto; animation:kg-bob 5.5s ease-in-out infinite; }
.kg-kicker { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-deep); font-weight:700; margin-bottom:6px; }
[dir="rtl"] .kg-kicker { letter-spacing:0; }
.kg-intro h3 { margin:0 0 10px; color:var(--purple); font-family:var(--serif); font-size:28px; line-height:1.15; }
[dir="rtl"] .kg-intro h3 { font-family:var(--arabic); font-size:24px; line-height:1.5; }
.kg-bubble {
  position:relative; background:#fff; border:1.5px solid rgba(26,122,114,0.25); border-radius:16px;
  padding:14px 18px; color:var(--ink-mid); font-size:14.5px; line-height:1.7; max-width:680px;
  box-shadow:0 4px 14px rgba(45,36,56,0.06);
}
.kg-bubble::before { /* bubble tail pointing at the Guide */
  content:""; position:absolute; top:26px; inset-inline-start:-9px; width:16px; height:16px; background:#fff;
  border-inline-start:1.5px solid rgba(26,122,114,0.25); border-bottom:1.5px solid rgba(26,122,114,0.25);
  transform:rotate(45deg);
}
[dir="rtl"] .kg-bubble::before { transform:rotate(-45deg); }
.kg-three { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; list-style:none; }
.kg-three a {
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; text-decoration:none;
  padding:6px 13px; border-radius:999px; border:1.5px solid var(--gold); background:var(--gold-pale); color:var(--gold-deep);
  transition:transform .15s, box-shadow .15s;
}
.kg-three a:hover, .kg-three a:focus-visible { transform:translateY(-1px); box-shadow:0 4px 12px rgba(201,148,58,.25); }
.kg-three b { font-family:var(--serif); font-size:15px; }
.kg-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:16px; }
.kg-toggle {
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; border:0; font:inherit; font-size:13.5px; font-weight:700;
  padding:9px 16px 9px 10px; border-radius:999px; color:#fff; background:linear-gradient(135deg,var(--teal-deep),var(--teal-dark));
  box-shadow:0 6px 18px rgba(26,122,114,.3);
}
[dir="rtl"] .kg-toggle { padding:9px 10px 9px 16px; }
.kg-switch { width:34px; height:20px; border-radius:20px; background:rgba(255,255,255,.35); position:relative; flex:0 0 auto; transition:background .2s; }
.kg-switch::after { content:""; position:absolute; top:3px; inset-inline-start:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:inset-inline-start .2s; }
.kg-toggle[aria-pressed="true"] .kg-switch { background:var(--gold-light); }
.kg-toggle[aria-pressed="true"] .kg-switch::after { inset-inline-start:17px; }
.kg-disclaimer { font-size:11.5px; color:var(--ink-light); line-height:1.6; max-width:520px; margin:0; }

/* ---------- 2. Plain-words notes on each research item ---------- */
.kg-note {
  display:none; grid-template-columns:64px 1fr; gap:14px; align-items:center; margin-top:16px;
  background:var(--teal-faint); border:1.5px dashed rgba(26,122,114,.35); border-radius:14px; padding:12px 16px 12px 10px;
  color:var(--ink-mid); font-size:13.8px; line-height:1.65; animation:kg-in .35s ease both;
}
[dir="rtl"] .kg-note { padding:12px 10px 12px 16px; line-height:1.9; }
.kg-note .kg-img { width:60px; }
.kg-note strong.kg-label { color:var(--teal-deep); font-size:11px; letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:2px; }
[dir="rtl"] .kg-note strong.kg-label { letter-spacing:0; font-size:12px; }
.kg-note.on-dark { background:rgba(255,255,255,.09); border-color:rgba(232,201,106,.45); color:rgba(255,255,255,.9); }
.kg-note.on-dark strong.kg-label { color:var(--gold-light); }
.kg-plain .kg-note { display:grid; }

/* ---------- 3. The eight research themes: two even rows of four ---------- */
.kg-themes { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
@media (max-width:1100px){ .kg-themes { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:600px){ .kg-themes { grid-template-columns:1fr !important; } }
.kg-new-tag { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:var(--gold-light); color:var(--purple-deep); padding:2px 7px; border-radius:4px; vertical-align:middle; margin-inline-start:8px; }
[dir="rtl"] .kg-new-tag { letter-spacing:0; }

/* ---------- 4. Wayfinder: the Guide follows the reader down the page ---------- */
.kg-way { position:fixed; bottom:18px; inset-inline-end:18px; z-index:900; display:flex; flex-direction:column; align-items:flex-end;
  opacity:0; transform:translateY(20px); pointer-events:none; transition:opacity .35s, transform .35s; }
.kg-way.show { opacity:1; transform:none; pointer-events:auto; }
.kg-way-btn { position:relative; width:84px; height:96px; border:0; padding:0; cursor:pointer; background:none; }
.kg-way-btn::before { content:""; position:absolute; inset:auto 6px 0 6px; height:62px; border-radius:50%;
  background:radial-gradient(circle,rgba(232,201,106,.55),rgba(75,191,179,.18) 60%,transparent 72%); }
.kg-way-btn .kg-img { position:relative; width:76px; margin:0 auto; transition:opacity .25s, transform .2s; filter:drop-shadow(0 6px 10px rgba(45,36,56,.25)); }
.kg-way-btn:hover .kg-img, .kg-way-btn:focus-visible .kg-img { transform:translateY(-3px); }
.kg-way-btn.swap .kg-img { opacity:0; }
.kg-way-tip { margin-bottom:6px; background:var(--purple-deep); color:#fff; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:12px;
  max-width:220px; line-height:1.45; box-shadow:0 6px 18px rgba(45,36,56,.25); }
.kg-way-panel { display:none; width:min(300px,calc(100vw - 36px)); margin-bottom:8px; background:#fff; border:1px solid var(--border);
  border-radius:18px; box-shadow:0 18px 44px rgba(45,36,56,.25); overflow:hidden; }
.kg-way.open .kg-way-panel { display:block; animation:kg-in .25s ease both; }
.kg-way.open .kg-way-tip { display:none; }
.kg-way-head { background:linear-gradient(135deg,var(--purple-deep),var(--teal-deep)); color:#fff; padding:14px 16px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.kg-way-head b { display:block; font-size:14.5px; }
.kg-way-head span { font-size:12px; opacity:.8; }
.kg-way-close { background:rgba(255,255,255,.15); border:0; color:#fff; width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:16px; line-height:1; flex:0 0 auto; }
.kg-way-panel ul { list-style:none; margin:0; padding:8px; }
.kg-way-panel li a { display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; color:var(--purple); text-decoration:none; font-size:13.5px; font-weight:600; line-height:1.35; }
.kg-way-panel li a:hover, .kg-way-panel li a:focus-visible { background:var(--teal-faint); }
.kg-way-panel li small { display:block; font-weight:400; color:var(--ink-light); font-size:12px; }
.kg-way-panel li i { font-style:normal; font-family:var(--serif); font-weight:700; color:var(--gold-deep); font-size:18px; width:22px; flex:0 0 auto; text-align:center; }
.kg-way-foot { border-top:1px solid var(--border); padding:9px 16px 11px; font-size:11px; color:var(--ink-light); line-height:1.5; }

/* ---------- 5. Reading direction (Husain, 13 Oct 2026, v3) ----------
   Intro card and plain-words notes: each image carries its pose's natural facing
   (kg-face-r / kg-face-l) and is mirrored so the Guide faces right in English and
   left in Arabic.
   Corner wayfinder: checked by Husain on the live pages. Every pose is mirrored
   on English pages and shown as drawn on Arabic pages.
   Mirroring is the ONLY permitted alteration of the frozen artwork. */
.kg-intro .kg-face-l, .kg-note .kg-face-l { scale:-1 1; }
[dir="rtl"] .kg-intro .kg-face-l, [dir="rtl"] .kg-note .kg-face-l { scale:1 1; }
[dir="rtl"] .kg-intro .kg-face-r, [dir="rtl"] .kg-note .kg-face-r { scale:-1 1; }
.kg-way .kg-way-btn .kg-img { scale:-1 1; }
[dir="rtl"] .kg-way .kg-way-btn .kg-img { scale:1 1; }

/* ---------- motion, mobile, print ---------- */
@keyframes kg-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes kg-in  { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .kg-intro .kg-img, .kg-note, .kg-way-panel { animation:none !important; } .kg-way { transition:none; } }
@media (max-width:760px) {
  .kg-intro { grid-template-columns:1fr; text-align:center; padding:22px 18px !important; }
  .kg-intro .kg-img { width:130px; }
  .kg-bubble { text-align:start; margin:0 auto; }
  .kg-bubble::before { top:-9px; inset-inline-start:calc(50% - 8px); transform:rotate(135deg); }
  [dir="rtl"] .kg-bubble::before { transform:rotate(-135deg); }
  .kg-three, .kg-actions { justify-content:center; }
  .kg-disclaimer { margin:0 auto; }
  .kg-way-btn { width:66px; height:76px; } .kg-way-btn .kg-img { width:58px; }
  .kg-way-tip { display:none; }
}
@media print { .kg-way, .kg-toggle { display:none !important; } .kg-intro .kg-img { animation:none; } }