/* CCLLG Ghana: the Ghana colours, made visible.
   Red #CE1126, gold #FCD116 and green #006B3F, with navy as the anchor.
   Loaded after app.css so it only adds to the design and never rewrites it.

   Contrast rule: gold is used for fills, stripes and borders. Text that sits on
   gold is dark, and text that is gold-coloured on white uses --gold-text. */

:root {
  --tri: linear-gradient(90deg, #CE1126 0 33.34%, #FCD116 33.34% 66.67%, #006B3F 66.67% 100%);
  --tri-v: linear-gradient(180deg, #CE1126 0 33.34%, #FCD116 33.34% 66.67%, #006B3F 66.67% 100%);
}

/* ---- the stripe across the very top, always visible ---------------------- */
.site-header { border-top: 6px solid transparent; border-image: var(--tri) 1 0 0 0; }

/* ---- hero: tricolour edge and a flag-inspired panel ---------------------- */
.hero { overflow: hidden; }
.tri-bar { height: 10px; background: var(--tri); }
.hero > .wrap { position: relative; }
.hero > .wrap::after {
  content: "";
  position: absolute;
  right: 24px; top: 50%;
  width: 330px; aspect-ratio: 3 / 2;
  transform: translateY(-50%);
  border-radius: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,6 61.8,38.2 96,38.2 68.3,58.5 78.6,91 50,71 21.4,91 31.7,58.5 4,38.2 38.2,38.2' fill='%23111'/%3E%3C/svg%3E") center / 27% no-repeat,
    var(--tri-v);
  box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .6), 0 0 0 5px rgba(255, 255, 255, .14);
  pointer-events: none;
}
@media (max-width: 1199px) { .hero > .wrap::after { width: 230px; right: 16px; } }
@media (max-width: 959px)  { .hero > .wrap::after { display: none; } }

/* ---- inner page headings ------------------------------------------------- */
.page-head { position: relative; }
.page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--tri); }

/* ---- small tricolour mark before every eyebrow label --------------------- */
body:not(.portal-shell) .eyebrow::before {
  content: "";
  display: inline-block;
  width: 30px; height: 4px; margin-right: 10px;
  vertical-align: middle;
  border-radius: 2px;
  background: var(--tri);
}

/* ---- section headings get a tricolour underline -------------------------- */
.section-head h2::after {
  content: "";
  display: block;
  width: 64px; height: 5px; margin-top: 14px;
  border-radius: 3px;
  background: var(--tri);
}

/* ---- cards: a coloured top edge and a tinted icon, in turn --------------- */
main .section .grid > .card { --c: #CE1126; --ci: #CE1126; --ct: #FDE8EB; border-top: 5px solid var(--c); }
main .section .grid > .card:nth-child(3n + 2) { --c: #FCD116; --ci: #7A5F00; --ct: #FFF3C2; }
main .section .grid > .card:nth-child(3n)     { --c: #006B3F; --ci: #006B3F; --ct: #DFF2E8; }
main .section .grid-4 > .card:nth-child(4n + 1) { --c: #CE1126; --ci: #CE1126; --ct: #FDE8EB; }
main .section .grid-4 > .card:nth-child(4n + 2) { --c: #FCD116; --ci: #7A5F00; --ct: #FFF3C2; }
main .section .grid-4 > .card:nth-child(4n + 3) { --c: #006B3F; --ci: #006B3F; --ct: #DFF2E8; }
main .section .grid-4 > .card:nth-child(4n)     { --c: #0B3A7A; --ci: #0B3A7A; --ct: #E7EEF8; }
main .section .grid > .card .card-icon { background: var(--ct); color: var(--ci); }
main .section .grid > .card-link:hover { border-color: var(--line); border-top-color: var(--c); }

/* ---- the numbers: one colour each ---------------------------------------- */
.stat {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 5px solid #CE1126;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 26px 12px;
}
.stat-value {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #CE1126;
}
.grid > .stat:nth-child(4n + 2) { border-top-color: #FCD116; }
.grid > .stat:nth-child(4n + 2) .stat-value { color: #7A5F00; }
.grid > .stat:nth-child(4n + 3) { border-top-color: #006B3F; }
.grid > .stat:nth-child(4n + 3) .stat-value { color: #006B3F; }
.grid > .stat:nth-child(4n) { border-top-color: #0B3A7A; }
.grid > .stat:nth-child(4n) .stat-value { color: #0B3A7A; }

/* ---- the sliding motto strip: coloured separators ------------------------ */
.marquee-track span::after { font-size: .8em; color: #CE1126; }
.marquee-track span:nth-child(3n + 2)::after { color: #FCD116; }
.marquee-track span:nth-child(3n)::after { color: #006B3F; }

/* ---- the navy band and the footer ---------------------------------------- */
.section-brand { border-top: 8px solid transparent; border-image: var(--tri) 1 0 0 0; }
.band { border-top: 8px solid transparent; border-image: var(--tri) 1 0 0 0; }
.site-footer { border-top: 10px solid transparent; border-image: var(--tri) 1 0 0 0; }
.site-footer h3 { position: relative; padding-bottom: 10px; }
.site-footer h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 34px; height: 3px; border-radius: 2px; background: var(--tri);
}

/* ---- buttons: the header call to action is red --------------------------- */
.site-nav .btn, .site-header .btn {
  background: #CE1126; border-color: #CE1126;
}
.site-nav .btn:hover, .site-header .btn:hover { background: #A30D1E; border-color: #A30D1E; }

/* ---- portraits: red, gold and green in turn ------------------------------ */
.face-row > .face:nth-child(3n + 1) .avatar-xl { background: linear-gradient(150deg, #CE1126, #8F0B1B); }
.face-row > .face:nth-child(3n + 2) .avatar-xl { background: linear-gradient(150deg, #FCD116, #E3B400); color: #1a1400; }
.face-row > .face:nth-child(3n)     .avatar-xl { background: linear-gradient(150deg, #00854D, #006B3F); }
.face-row > .face:nth-child(3n + 2):hover .avatar-xl,
.face-row > .face:nth-child(3n + 2):focus-within .avatar-xl { outline-color: #0B3A7A; }

/* ---- keep the portals calm: no decoration inside the signed-in screens --- */
.portal-shell .site-header { border-image: none; border-top-color: transparent; }

/* ---- sign-in card ---------------------------------------------------------- */
.signin-card { border-top: 8px solid transparent; border-image: var(--tri) 1 0 0 0; }
.signin-wrap { background: linear-gradient(180deg, #F5F7FA, #fff); }