/*
 * Governance components (FCJ website revamp, slides 30–36).
 *
 * Loaded on: Corporate Governance, Company Policies (Risk Management),
 * Board Committees, Board of Directors, Governance landing, single committee.
 *
 * Palette follows the revamp deck. Tailwind (CDN) still provides layout
 * utilities; everything here is component styling that Tailwind cannot
 * express cleanly (connectors, shapes, hover/focus highlight states).
 */

:root {
    --fcj-blue:  #0052D9;
    --fcj-navy:  #011B55;
    --fcj-cyan:  #01BFD7;
    --fcj-teal:  #19C0A0;
    --fcj-gold:  #FBBF24;
    --fcj-ink:   #0f172a;
    --fcj-muted: #64748b;
    --fcj-line:  rgba(1, 27, 85, 0.38);
    --fcj-title-font: 'Inter', sans-serif;
}

.dark {
    --fcj-ink:   #f1f5f9;
    --fcj-muted: #94a3b8;
    --fcj-line:  rgba(255, 255, 255, 0.28);
}

/* Tone helpers shared by hierarchy nodes and chips */
.fcj-tone-navy { --fcj-tone: var(--fcj-navy); --fcj-tone-soft: rgba(1, 27, 85, 0.10); }
.fcj-tone-blue { --fcj-tone: var(--fcj-blue); --fcj-tone-soft: rgba(0, 82, 217, 0.10); }
.fcj-tone-cyan { --fcj-tone: var(--fcj-cyan); --fcj-tone-soft: rgba(1, 191, 215, 0.14); }
.fcj-tone-teal { --fcj-tone: var(--fcj-teal); --fcj-tone-soft: rgba(25, 192, 160, 0.14); }
.fcj-tone-gold { --fcj-tone: var(--fcj-gold); --fcj-tone-soft: rgba(251, 191, 36, 0.16); }

/* -------------------------------------------------------------------------
 * Slide 34 — breathing room between governance sections
 * ---------------------------------------------------------------------- */

.fcj-governance-page > section:not(.fcj-subnav):not(.fcj-hero) {
    padding-top: clamp(5rem, 9vw, 8rem);
    padding-bottom: clamp(5rem, 9vw, 8rem);
}

.fcj-governance-page .fcj-section-heading {
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

/* -------------------------------------------------------------------------
 * Slides 30 + 35 — vertical hierarchy stack
 * ---------------------------------------------------------------------- */

.fcj-hierarchy {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 36rem;
    counter-reset: fcj-hierarchy;
}

.fcj-hierarchy__item {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Connector drawn above every item except the first */
.fcj-hierarchy__item + .fcj-hierarchy__item {
    padding-top: 2.75rem;
}

.fcj-hierarchy__item + .fcj-hierarchy__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    height: 2.75rem;
    width: 0;
    transform: translateX(-50%);
    border-left: 3px dotted var(--fcj-line);
}

.fcj-hierarchy--solid .fcj-hierarchy__item + .fcj-hierarchy__item::before {
    border-left-style: solid;
}

/* Arrow head at the bottom of each connector */
.fcj-hierarchy__item + .fcj-hierarchy__item::after {
    content: '';
    position: absolute;
    top: 2.1rem;
    left: 50%;
    width: 0.65rem;
    height: 0.65rem;
    transform: translateX(-50%) rotate(45deg);
    border-right: 3px solid var(--fcj-line);
    border-bottom: 3px solid var(--fcj-line);
}

.fcj-hierarchy__node {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem 1.5rem;
    border-radius: 1rem;
    background: var(--fcj-tone, var(--fcj-blue));
    color: #fff;
    box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--fcj-tone, var(--fcj-blue)) 70%, transparent);
    text-align: left;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.fcj-hierarchy__node:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 34px -14px rgba(1, 27, 85, 0.55);
    box-shadow: 0 20px 34px -14px color-mix(in srgb, var(--fcj-tone, var(--fcj-blue)) 85%, transparent);
}

.fcj-tone-cyan .fcj-hierarchy__node,
.fcj-tone-teal .fcj-hierarchy__node,
.fcj-tone-gold .fcj-hierarchy__node {
    color: var(--fcj-navy);
}

.fcj-hierarchy__step {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-family: var(--fcj-title-font);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.fcj-tone-cyan .fcj-hierarchy__step,
.fcj-tone-teal .fcj-hierarchy__step,
.fcj-tone-gold .fcj-hierarchy__step {
    background: rgba(1, 27, 85, 0.12);
}

.fcj-hierarchy__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.fcj-hierarchy__label {
    font-family: var(--fcj-title-font);
    font-weight: 800;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.fcj-hierarchy__sublabel {
    font-size: 0.85rem;
    opacity: 0.85;
}

/* Structure diagram variant: pill-shaped, centred labels, no sublabels */
.fcj-hierarchy--structure .fcj-hierarchy__node {
    justify-content: center;
    border-radius: 999px;
    padding-inline: 2.5rem;
}

.fcj-hierarchy--structure .fcj-hierarchy__text {
    align-items: center;
    text-align: center;
}

/* -------------------------------------------------------------------------
 * Slide 31 — gear visual slots on the risk cards
 * ---------------------------------------------------------------------- */

.fcj-risk-card {
    position: relative;
}

.fcj-gear-visual {
    position: absolute;
    right: -0.9rem;
    bottom: -0.9rem;
    width: 5.5rem;
    height: 5.5rem;
    margin: 0;
    pointer-events: none;
    opacity: 0.9;
}

.fcj-gear-visual__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(1, 27, 85, 0.25));
}

/* Nothing is drawn until the export is uploaded */
.fcj-gear-visual--pending {
    width: 0;
    height: 0;
    opacity: 0;
}

/* Inline variant: a normal flow element sized by its parent (gear band on Risk Management) */
.fcj-gear-visual--inline {
    position: static;
    right: auto;
    bottom: auto;
    width: var(--fcj-gear-size, 6rem);
    height: var(--fcj-gear-size, 6rem);
    flex: 0 0 auto;
    opacity: 1;
}

/* Spin is always defined and paused; hover resumes from the current angle (no reset) */
@media (prefers-reduced-motion: no-preference) {
    .fcj-risk-card .fcj-gear-visual__img {
        animation: fcj-gear-spin 6s linear infinite;
        animation-play-state: paused;
    }
    .fcj-risk-card:hover .fcj-gear-visual__img {
        animation-play-state: running;
    }
}

@keyframes fcj-gear-spin {
    to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
 * Slide 32 — annual-report style committee group photos
 * ---------------------------------------------------------------------- */

.fcj-group-photo {
    margin: 0;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--fcj-navy);
    box-shadow: 0 24px 40px -24px rgba(1, 27, 85, 0.6);
}

/* Inside a committee card the card supplies the radius and shadow */
.committee-card > .fcj-group-photo {
    border-radius: 0;
    box-shadow: none;
}

.fcj-group-photo__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #e2e8f0, #f8fafc);
}

.dark .fcj-group-photo__frame {
    background: linear-gradient(135deg, #1e293b, #0f172a);
}

.fcj-group-photo--feature .fcj-group-photo__frame {
    aspect-ratio: 21 / 9;
}

.fcj-group-photo__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.7s ease;
}

.group:hover .fcj-group-photo__img,
.fcj-group-photo:hover .fcj-group-photo__img {
    transform: scale(1.04);
}

.fcj-group-photo__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--fcj-muted);
    font-size: 2.5rem;
    background-image:
        linear-gradient(rgba(1, 27, 85, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 27, 85, 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
}

.fcj-group-photo__caption {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.25rem;
    color: #fff;
    background: var(--fcj-navy);
}

.fcj-group-photo--feature .fcj-group-photo__caption {
    padding: 1.25rem 1.75rem;
}

.fcj-group-photo__rule {
    flex: 0 0 auto;
    width: 0.35rem;
    height: 1.6rem;
    border-radius: 999px;
    background: var(--fcj-cyan);
}

.fcj-group-photo__title {
    font-family: var(--fcj-title-font);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.fcj-group-photo--feature .fcj-group-photo__title {
    font-size: 1.15rem;
}

/* -------------------------------------------------------------------------
 * Slide 33 — Board Leadership Roles cards
 * ---------------------------------------------------------------------- */

.fcj-leader-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 1.5rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(1, 27, 85, 0.08);
    box-shadow: 0 24px 48px -28px rgba(1, 27, 85, 0.45);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
}

.dark .fcj-leader-card {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.08);
}

.fcj-leader-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 32px 56px -28px rgba(0, 82, 217, 0.5);
}

.fcj-leader-card__band {
    height: 0.4rem;
    background: linear-gradient(90deg, var(--fcj-navy), var(--fcj-blue) 55%, var(--fcj-cyan));
}

.fcj-leader-card__media {
    display: flex;
    justify-content: center;
    padding: 2rem 2rem 0;
}

.fcj-leader-card__headshot {
    position: relative;
    width: 11rem;
    height: 11rem;
    border-radius: 1.25rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(0, 82, 217, 0.12), rgba(1, 191, 215, 0.18));
    outline: 4px solid #fff;
    box-shadow: 0 0 0 2px var(--fcj-blue), 0 20px 30px -20px rgba(1, 27, 85, 0.7);
}

.dark .fcj-leader-card__headshot {
    outline-color: #0f172a;
}

.fcj-leader-card__headshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.fcj-leader-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.5rem 2rem 2rem;
    text-align: center;
}

.fcj-leader-card__name {
    font-family: var(--fcj-title-font);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    color: var(--fcj-ink);
}

.fcj-leader-card__honours {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    min-height: 1.75rem;
}

.fcj-leader-card__role {
    display: inline-block;
    margin: 0.9rem auto 0;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: var(--fcj-tone-soft, rgba(0, 82, 217, 0.1));
    color: var(--fcj-tone, var(--fcj-blue));
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.fcj-leader-card__quote {
    margin: 1.5rem 0 0;
    padding-left: 1rem;
    border-left: 3px solid var(--fcj-tone, var(--fcj-blue));
    text-align: left;
    font-style: italic;
    font-weight: 600;
    color: var(--fcj-tone, var(--fcj-blue));
}

.fcj-tone-teal .fcj-leader-card__quote,
.fcj-tone-cyan .fcj-leader-card__quote,
.fcj-tone-teal .fcj-leader-card__role,
.fcj-tone-cyan .fcj-leader-card__role {
    color: var(--fcj-navy);
}

.dark .fcj-leader-card__quote,
.dark .fcj-tone-teal .fcj-leader-card__quote,
.dark .fcj-tone-cyan .fcj-leader-card__quote {
    color: #bfdbfe;
}

.dark .fcj-tone-teal .fcj-leader-card__role,
.dark .fcj-tone-cyan .fcj-leader-card__role {
    color: var(--fcj-tone);
}

.fcj-leader-card__cite {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-style: normal;
    color: var(--fcj-muted);
}

.fcj-leader-card__desc {
    margin-top: 1.25rem;
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #334155;
}

.dark .fcj-leader-card__desc {
    color: #cbd5e1;
}

/* -------------------------------------------------------------------------
 * Slide 34 — board composition by gender (70 / 30)
 * ---------------------------------------------------------------------- */

.fcj-gender-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    padding-bottom: 3.5rem; /* room for the labels hanging below the circles */
}

/* Side = just the circle; label + count hang beneath so the circle centre
   lines up with the ring centre and the connecting lines. */
.fcj-gender-chart__side {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
}

.fcj-gender-chart__label,
.fcj-gender-chart__count {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.fcj-gender-chart__label { top: calc(100% + 0.6rem); }
.fcj-gender-chart__count { top: calc(100% + 2.1rem); }

.fcj-tone-teal .fcj-gender-chart__value,
.fcj-tone-cyan .fcj-gender-chart__value,
.fcj-tone-gold .fcj-gender-chart__value {
    color: var(--fcj-navy);
}

/* The 70 / 30 figures sit INSIDE their circles, set in the governance title font */
.fcj-gender-chart__value {
    display: grid;
    place-items: center;
    width: 6.25rem;
    height: 6.25rem;
    border-radius: 999px;
    background: var(--fcj-tone, var(--fcj-blue));
    color: #fff;
    font-family: var(--fcj-title-font);
    font-weight: 800;
    font-size: 2.25rem;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 18px 30px -18px rgba(1, 27, 85, 0.5);
    box-shadow: 0 18px 30px -18px color-mix(in srgb, var(--fcj-tone, var(--fcj-blue)) 80%, transparent);
}

.fcj-gender-chart__value small {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-left: 0.1rem;
    align-self: flex-end;
    padding-bottom: 0.35rem;
}

.fcj-gender-chart__value span {
    display: inline-flex;
    align-items: baseline;
}

.fcj-gender-chart__label {
    font-family: var(--fcj-title-font);
    font-weight: 700;
    font-size: 1rem;
    color: var(--fcj-ink);
}

.fcj-gender-chart__count {
    font-size: 0.8rem;
    color: var(--fcj-muted);
}

/* Horizontal connectors joining male → ring → female */
.fcj-gender-chart__line {
    flex: 1 1 2.5rem;
    height: 0;
    min-width: 1.5rem;
    max-width: 5rem;
    border-top: 3px solid var(--fcj-line);
    align-self: center;
}

.fcj-gender-chart__ring {
    position: relative;
    flex: 0 0 auto;
    width: 11rem;
    height: 11rem;
}

.fcj-gender-chart__ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.fcj-gender-chart__centre {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
}

.fcj-gender-chart__total {
    font-family: var(--fcj-title-font);
    font-weight: 800;
    font-size: 2rem;
    line-height: 1;
    color: var(--fcj-ink);
}

.fcj-gender-chart__total-label {
    font-size: 0.8rem;
    color: var(--fcj-muted);
}

@media (max-width: 640px) {
    .fcj-gender-chart {
        flex-direction: column;
        gap: 0;
        padding-bottom: 3.5rem;
    }
    .fcj-gender-chart__side {
        margin-bottom: 3.25rem; /* space for the hanging labels before the next connector */
    }
    .fcj-gender-chart__side:last-child {
        margin-bottom: 0;
    }
    .fcj-gender-chart__line {
        width: 0;
        min-width: 0;
        max-width: none;
        flex-basis: 2rem;
        height: 2rem;
        border-top: 0;
        border-left: 3px solid var(--fcj-line);
        align-self: center;
    }
}

/* -------------------------------------------------------------------------
 * Slide 36 — hover / focus highlight
 * ---------------------------------------------------------------------- */

.fcj-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1.5px solid var(--fcj-blue);
    background: rgba(0, 82, 217, 0.08);
    color: var(--fcj-blue);
    font-family: var(--fcj-title-font);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.dark .fcj-chip {
    border-color: var(--fcj-cyan);
    background: rgba(1, 191, 215, 0.12);
    color: var(--fcj-cyan);
}

.fcj-chip:hover,
.fcj-chip:focus-visible,
.fcj-chip[aria-pressed="true"],
.fcj-chip.is-active {
    background: var(--fcj-blue);
    color: #fff;
    transform: translateY(-1px);
}

.dark .fcj-chip:hover,
.dark .fcj-chip:focus-visible,
.dark .fcj-chip[aria-pressed="true"],
.dark .fcj-chip.is-active {
    background: var(--fcj-cyan);
    color: var(--fcj-navy);
}

.fcj-chip:focus-visible {
    outline: 3px solid var(--fcj-gold);
    outline-offset: 2px;
}

.fcj-chip__meaning {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.85;
}

.fcj-chip-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 0.6rem;
}

.fcj-chip-legend__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fcj-muted);
    margin-right: 0.25rem;
}

/* Items inside a scope: muted when a tag is active and they don't carry it */
[data-fcj-highlight-scope] [data-fcj-tags] {
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

[data-fcj-highlight-scope].is-filtering [data-fcj-tags].is-muted {
    opacity: 0.28;
    filter: grayscale(1);
}

[data-fcj-highlight-scope].is-filtering [data-fcj-tags].is-match {
    opacity: 1;
    filter: none;
}

[data-fcj-highlight-scope].is-filtering .fcj-leader-card.is-match {
    transform: translateY(-4px);
    box-shadow: 0 0 0 3px var(--fcj-cyan), 0 32px 56px -28px rgba(0, 82, 217, 0.5);
}

[data-fcj-highlight-scope].is-filtering tr[data-fcj-tags].is-match > td,
[data-fcj-highlight-scope].is-filtering tr[data-fcj-tags].is-match > th {
    background: rgba(1, 191, 215, 0.14);
}

/* Column header triggers in the competency matrix */
.fcj-matrix-trigger {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    padding: 0.35rem 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    white-space: nowrap;
}

.fcj-matrix-trigger:hover,
.fcj-matrix-trigger:focus-visible,
.fcj-matrix-trigger[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.22);
    outline: none;
}

.fcj-matrix-trigger:focus-visible {
    box-shadow: 0 0 0 3px var(--fcj-gold);
}

@media (prefers-reduced-motion: reduce) {
    [data-fcj-highlight-scope] [data-fcj-tags],
    .fcj-chip,
    .fcj-leader-card,
    .fcj-hierarchy__node,
    .fcj-group-photo__img {
        transition: none;
    }
    .fcj-risk-card:hover .fcj-gear-visual__img {
        animation: none;
    }
}