/* Dira Portal. Loaded after styles.css on the portal pages only (June, 25 October 2026): the portal is
   in Startup Lions colours, the Digital Lions branch in Digital Lions colours, and everything that
   teaches stays in Learning Lions green (styles.css).
   Startup Lions: the palette Ludwig uses in the Leo app, leo.startuplions.org, read 25 October 2026:
   orange F58020, dark orange B85B12, light orange F79648, ink 1E2D2A, grey 4F4E55, warm paper F8F7F3,
   warm surface FFF3E8, muted surface F2EFEB, border B9B3AB.
   Digital Lions: sampled from digitallions.co on 25 October 2026, no brand sheet to hand: yellow FFCB05,
   ink 333333, deep 121212, teal 4A7973 as the second colour. Check both with the owners. */
body.portal {
  --green: #B85B12;
  --green-dark: #1E2D2A;
  --green-light: #FFF3E8;
  --grey: #4F4E55;
  --orange: #F58020;
  --rule: #B9B3AB;
  --ink: #1E2D2A;
  --paper: #F8F7F3;
  --paper-2: #F2EFEB;
  background: var(--paper);
}
body.portal h1, body.portal h2 { color: var(--green-dark); }
body.portal .kicker { color: var(--orange); }
body.portal .top { background: var(--green-dark); }
body.portal .brand .mark { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); flex: none; }
body.portal .nav a { background: #FFF3E8; color: #B85B12; }
body.portal .nav a:hover, body.portal .nav a[aria-current] { background: var(--orange); color: #211915; }
body.portal .card { background: #fff; border-color: var(--rule); }
body.portal .card:hover { border-color: var(--orange); }
body.portal .card h2 { color: var(--green-dark); font-size: 1.1rem; margin-bottom: .3rem; }
body.portal .card h2 a { color: inherit; text-decoration: none; }
body.portal .card h2 a:hover { color: var(--green); }
body.portal .card p { margin: 0; color: var(--grey); font-size: .95rem; }
body.portal .card .num { display: inline-block; font-family: Poppins, sans-serif; font-weight: 700; color: var(--orange); margin-right: .4rem; }
body.portal .tiles .card { background: var(--green-light); border-color: transparent; }
body.portal .tiles .card:hover { border-color: var(--orange); }
body.portal .button { background: var(--orange); color: #211915; }
body.portal .button:hover { background: var(--green); color: #fff; }
body.portal .note { background: var(--green-light); border-left-color: var(--orange); }
body.portal .foot { color: var(--grey); }

/* The Digital Lions branch */
body.portal.digital {
  --green: #4A7973;
  --green-dark: #333333;
  --green-light: #FFF6CC;
  --orange: #FFCB05;
  --ink: #121212;
  --paper: #FFFFFF;
  --paper-2: #F7F7F7;
  --rule: #D9D9D9;
}
body.portal.digital .brand .mark { background: #FFCB05; }
body.portal.digital .kicker { color: #4A7973; }
body.portal.digital .nav a.hub:hover { background: #FFCB05; color: #121212; }
body.portal.digital .button { background: #FFCB05; color: #121212; }

/* The photo and the organisation chart, from the campus pages */
.photo { margin: 0 0 1.4rem; }
.photo img { display: block; width: 100%; height: auto; border-radius: 12px; }
.photo figcaption { color: var(--grey); font-size: .9rem; margin-top: .4rem; }
.diagram-wrap { overflow-x: auto; margin: .6rem 0 .4rem; padding-bottom: .4rem; }
.diagram { display: block; width: 100%; min-width: 860px; height: auto; font-family: Roboto, system-ui, Arial, sans-serif; }
.diagram .box { fill: #fff; stroke: var(--green); stroke-width: 1.5; }
.diagram .box.gov { fill: var(--green-dark); stroke: var(--green-dark); }
.diagram .box.board { fill: var(--green-light); }
.diagram .box.exec { fill: #fff; stroke: var(--green-dark); stroke-width: 2.5; }
.diagram .box.aside { fill: #fff; stroke: var(--grey); stroke-dasharray: 5 4; }
.diagram .box.ent { fill: var(--paper-2); stroke: var(--rule); stroke-dasharray: 4 4; }
.diagram text { fill: var(--ink); font-size: 13px; }
.diagram text.t { font-family: Poppins, Roboto, sans-serif; font-weight: 600; }
.diagram text.light { fill: #fff; }
.diagram text.s { font-size: 11.5px; fill: var(--grey); }
.diagram text.lbl { font-size: 11px; fill: var(--grey); font-style: italic; }
.diagram .line { stroke: var(--green-dark); stroke-width: 1.5; fill: none; }
.diagram .line.dash { stroke: var(--grey); stroke-dasharray: 5 4; }
.diagram .line.thin { stroke: var(--rule); stroke-width: 1.2; }
.diagram-caption { color: var(--grey); font-size: .9rem; margin: 0 0 1rem; }
.prose .note { margin: .9rem 0; }
.prose .note p:last-child { margin-bottom: 0; }

/* The Learning Lions branch of the portal: anything that teaches stays in Learning Lions green
   (the school page, and the tiles that lead to Darasa Hub). Same values as styles.css. */
body.portal.learning {
  --green: #3F8A5A;
  --green-dark: #237046;
  --green-light: #E8F1EA;
  --orange: #F58020;
  --ink: #222222;
  --paper: #FFFFFF;
  --paper-2: #F6F8F6;
  --rule: #BFBFBF;
}
body.portal.learning .brand .mark { background: #3F8A5A; }
body.portal.learning .kicker { color: #3F8A5A; }
body.portal.learning .button { background: #3F8A5A; color: #fff; }

/* The tiles carry the colour of what they lead to: green for education, yellow for Digital Lions,
   orange for the campus-wide Get Help line. */
body.portal .tiles .card { border-left: 4px solid var(--rule); }
body.portal .tiles .card.t-darasa, body.portal .tiles .card.t-school { border-left-color: #3F8A5A; }
body.portal .tiles .card.t-digital { border-left-color: #FFCB05; }
body.portal .tiles .card.t-help { border-left-color: #F58020; }
body.portal .tiles .card.t-leo, body.portal .tiles .card.t-ict { border-left-color: #B85B12; }
body.portal .tiles .card.t-nawi { border-left-color: #3F8A5A; }
body.portal .tiles .card.t-volunteers { border-left-color: #B85B12; }
body.portal .tiles .card.t-organisation { border-left-color: #F58020; }

/* Text runs the same width as the boxes beneath it (June, 25 October 2026): no narrower column for
   the lead or the prose than for the cards and the charts. */
body.portal .lead, body.portal .prose p, body.portal .prose ol, body.portal p { max-width: none; }

/* The Ukoo chart's boxes are doors */
.diagram a { cursor: pointer; }
.diagram a:hover rect, .diagram a:focus rect { stroke-width: 3; }
.diagram a:focus { outline: none; }
body.portal .tiles .card.t-dira-darasa { border-left-color: #B85B12; }
body.portal .tiles .card.t-odoo { border-left-color: #B85B12; }