/* mindmap.css — shared radial mind-map poster template.
 * Used by every "fact-card" style mind map (hub + N colour-coded branch
 * cards around it, connected by lines). Subject-agnostic — chemistry today,
 * intended for reuse by other subjects later.
 *
 * Canvas is a fixed 1520x1120 box; branch positions are pre-computed
 * .posN-k classes for N = 4, 5 or 6 branches (evenly spaced, starting at
 * 12 o'clock, clockwise). Pick the .posN-k set matching how many <div
 * class="node"> elements the page has.
 *
 * Colour is decorative only, never the sole way to tell branches apart —
 * every branch also has a distinct icon + heading, and print mode drops
 * all colour fills in favour of black text + a thin colour rule, because
 * most browsers print with "background graphics" off by default (which
 * would otherwise make white header text vanish on an unprinted colour
 * fill — a real bug caught in the first pilot).
 */
:root{
  --mm-bg:#f4f1ea; --mm-ink:#241f18; --mm-hub:#241f18;
  --mm-c1:#0e7490; --mm-c2:#b91c1c; --mm-c3:#6d28d9;
  --mm-c4:#b45309; --mm-c5:#15803d; --mm-c6:#1e3a8a;
  --mm-c7:#be185d; --mm-c8:#4338ca;
}
.mm-body{font-family:'Nirmala UI','Latha','Noto Sans Tamil','Segoe UI',sans-serif;background:var(--mm-bg);color:var(--mm-ink);padding:18px;display:flex;flex-direction:column;align-items:center}
.mm-body *{box-sizing:border-box}
.sr-only{position:absolute;left:-9999px}

.toolbar{width:1520px;max-width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.toolbar h1{font-size:15px;color:#475569;letter-spacing:1px;text-transform:uppercase;opacity:.8;font-weight:600}
.btn{background:var(--mm-hub);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:13px;cursor:pointer;font-family:inherit}
.btn:hover{background:#3f3527}

/* ---- Cross-map sibling nav (injected by js/mindmap-nav.js) ----
   A slim pill-row under the toolbar so a student can jump between every
   map in the same unit, or back to the full gallery, without returning
   to the index page each time. */
.mm-sibnav{width:1520px;max-width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 14px;padding-bottom:10px;border-bottom:1px solid rgba(36,31,24,.12)}
.mm-sibnav a{font-size:12.5px;font-weight:600;text-decoration:none;color:var(--mm-ink);background:#fff;border:1.5px solid rgba(36,31,24,.18);border-radius:99px;padding:5px 12px;transition:background .12s,border-color .12s}
.mm-sibnav a:hover{border-color:var(--mm-hub);background:#efe9dc}
.mm-sibnav a.current{background:var(--mm-hub);color:#fff;border-color:var(--mm-hub)}
.mm-sibnav a.home{background:none;border-style:dashed;opacity:.8}
.mm-sibnav .sep{width:1px;height:16px;background:rgba(36,31,24,.15);margin:0 2px}

.canvas-scroll{width:1520px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.canvas{position:relative;width:1520px;height:1180px;background:#fff;border:2.5px solid var(--mm-hub);border-radius:18px;box-shadow:0 10px 40px rgba(36,31,24,.15);overflow:hidden;flex-shrink:0}
.canvas svg{position:absolute;inset:0;width:100%;height:100%}

.hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:216px;height:216px;border-radius:50%;
     background:radial-gradient(circle at 35% 30%,#3a3122,var(--mm-hub));color:#fff;display:flex;flex-direction:column;
     align-items:center;justify-content:center;text-align:center;box-shadow:0 8px 26px rgba(0,0,0,.35);z-index:5;padding:10px}
.hub .ic{font-size:38px;margin-bottom:4px}
.hub .ta{font-size:21px;font-weight:800;line-height:1.2}
.hub .en{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;opacity:.75;margin-top:4px}

.node{position:absolute;width:355px;border-radius:14px;border:2px solid;background:#fff;z-index:4;
      box-shadow:0 6px 18px rgba(0,0,0,.10)}
.node .nh{color:#fff;font-size:15px;font-weight:800;padding:9px 14px;border-radius:11px 11px 0 0;display:flex;align-items:center;gap:7px;line-height:1.3}
.node .nb{padding:10px 14px 12px}
.node ul{list-style:none}
.node li{font-size:13px;line-height:1.65;padding-left:15px;position:relative;margin:5px 0}
.node li:before{content:"▸";position:absolute;left:0;font-weight:700}
.node li b{color:var(--mm-ink)}
.node .sub{font-size:11px;color:#64748b;font-style:italic;margin:2px 0 4px 0}

/* A branch card with few bullets gets a size bump so it doesn't look
   sparse next to a denser neighbour — set via a modifier class on .node
   (e.g. class="node n3 pos5-2 roomy") when a card has room to spare. */
.node.roomy li{font-size:14.5px;line-height:1.75;margin:7px 0}
.node.roomy .nh{font-size:16px;padding:11px 16px}
.node.roomy .nb{padding:13px 16px 15px}

.n1{border-color:var(--mm-c1)} .n1 .nh{background:var(--mm-c1)} .n1 li:before{color:var(--mm-c1)}
.n2{border-color:var(--mm-c2)} .n2 .nh{background:var(--mm-c2)} .n2 li:before{color:var(--mm-c2)}
.n3{border-color:var(--mm-c3)} .n3 .nh{background:var(--mm-c3)} .n3 li:before{color:var(--mm-c3)}
.n4{border-color:var(--mm-c4)} .n4 .nh{background:var(--mm-c4)} .n4 li:before{color:var(--mm-c4)}
.n5{border-color:var(--mm-c5)} .n5 .nh{background:var(--mm-c5)} .n5 li:before{color:var(--mm-c5)}
.n6{border-color:var(--mm-c6)} .n6 .nh{background:var(--mm-c6)} .n6 li:before{color:var(--mm-c6)}
.n7{border-color:var(--mm-c7)} .n7 .nh{background:var(--mm-c7)} .n7 li:before{color:var(--mm-c7)}
.n8{border-color:var(--mm-c8)} .n8 .nh{background:var(--mm-c8)} .n8 li:before{color:var(--mm-c8)}

/* ---- 6-branch positions (hub centre 760,590; used by most concept maps) ---- */
.pos6-1{ left:575px; top:14px;  width:370px; }   /* 12 o'clock */
.pos6-2{ left:1135px; top:130px; }                /* 2 o'clock */
.pos6-3{ left:1135px; top:690px; }                /* 4 o'clock */
.pos6-4{ left:575px; top:800px; width:370px; }    /* 6 o'clock */
.pos6-5{ left:35px;  top:690px; }                 /* 8 o'clock */
.pos6-6{ left:35px;  top:130px; }                 /* 10 o'clock */

/* ---- 5-branch positions (72° apart, starting at 12 o'clock) ---- */
.pos5-1{ left:575px; top:4px;   width:370px; }
.pos5-2{ left:1122px; top:250px; }
.pos5-3{ left:900px;  top:730px; }
.pos5-4{ left:265px;  top:730px; }
.pos5-5{ left:43px;   top:250px; }

/* ---- 4-branch positions (90° apart — N/E/S/W) ---- */
.pos4-1{ left:575px; top:10px;  width:370px; }
.pos4-2{ left:1140px; top:460px; }
.pos4-3{ left:575px; top:880px; width:370px; }
.pos4-4{ left:35px;  top:460px; }

.scroll-hint{display:none;width:1520px;max-width:100%;text-align:center;font-size:11.5px;color:#94a3b8;margin-top:8px}
@media (max-width:1560px){ .scroll-hint{display:block} }

.foot{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:space-between;padding:0 26px;font-size:11px;color:#94a3b8}

/* ---- Black-ink print mode ----
   Most print dialogs default "background graphics" OFF, which would make
   the white header text vanish on a colour fill that never prints. So for
   print we drop all colour fills and redraw every node as an outlined
   black-ink box: bold black header text over a border-bottom rule in the
   branch's colour (a thin line still prints fine in grayscale and costs
   almost no ink even in colour). The hub becomes an outlined circle
   instead of a solid dark disc for the same reason. */
@media print{
  .toolbar{display:none}
  .mm-sibnav{display:none}
  .scroll-hint{display:none}
  .canvas-scroll{width:100%;overflow:visible}
  .canvas{border:1.5px solid #000;box-shadow:none;width:100%;height:auto;aspect-ratio:1520/1120}
  @page{size:A3 landscape;margin:8mm}
  .mm-body{background:#fff;padding:0;color:#000}

  .hub{background:#fff !important;border:3px solid #000;color:#000}
  .hub .en{opacity:1;color:#444}

  .node{background:#fff}
  .node .nh{background:#fff !important;color:#000 !important;border-bottom:2.5px solid;border-radius:0}
  .node li:before{color:#000 !important}
  .node li b{color:#000}
  .node .sub{color:#333}

  .canvas svg path{stroke:#000 !important;opacity:.55}
}