/* HERA Members - Public Styles (UIKit) */

/* ── Visibility by login state ────────────────────────── */
body:not(.logged-in) .hera-logged-in-only { display: none !important; }
body.logged-in .hera-logged-out-only { display: none !important; }

/* ── Directory ─────────────────────────────────────────── */
.hera-directory-wrap {
    width: 100%;
}

.hera-filter-bar {
    background: #f8f8f8;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
}

.hera-cert-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9em;
    cursor: pointer;
}

/* Directory Table */
.hera-directory-table {
    width: 100%;
}

.hera-table-thumb {
    width: 40px;
    max-width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.hera-member-name-link {
    font-weight: 600;
    text-decoration: none;
    color: #333;
}

.hera-member-name-link:hover {
    color: #1e87f0;
}

/* Pagination */
.hera-pagination {
    margin-top: 30px;
}

.hera-pagination .uk-active a {
    background: #1e87f0;
    color: #fff;
    border-radius: 3px;
    padding: 2px 10px;
}

/* ── Single Profile ────────────────────────────────────── */
.hera-profile-wrap {
    width: 100%;
}

.hera-profile-photo-container {
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
}

.hera-profile-photo-large {
    width: 100%;
    height: auto;
    display: block;
}

.hera-profile-name {
    margin-top: 0;
    font-size: 1.8em;
}

.hera-profile-company {
    font-size: 1.1em;
    color: #666;
    margin-top: -10px;
}

.hera-profile-position {
    font-size: 0.9em;
}

.hera-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.hera-profile-certs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.hera-cpd-section {
    background: #f0f7ff;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #bcdff1;
}

/* ── Edit Profile ──────────────────────────────────────── */
.hera-edit-profile-wrap {
    width: 100%;
}

.hera-edit-photo-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e5e5e5;
}

.hera-admin-section {
    background: #fff9e6;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #f0d060;
}

.hera-admin-section .uk-legend {
    color: #d35400;
}

/* ── Registration ──────────────────────────────────────── */
.hera-register-wrap {
    width: 100%;
}

/* ── CPD Log ───────────────────────────────────────────── */
.hera-cpd-log-wrap {
    width: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
}

.hera-cpd-log-wrap > h2 {
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 1.8em;
    font-weight: 700;
}

.hera-cpd-total {
    font-size: 2.5em;
    font-weight: 700;
    color: #1e87f0;
    margin: 0;
}

.hera-positive {
    color: #32d296;
    font-weight: 600;
}

.hera-negative {
    color: #f0506e;
    font-weight: 600;
}

.hera-cpd-total-sm {
    font-size: 1.8em;
}

/* Category badges */
.hera-cpd-cat {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.82em;
    font-weight: 600;
    line-height: 1.6;
}
.hera-cpd-cat-technical {
    background: #e2e9fc;
    color: #2D339F;
}
.hera-cpd-cat-non_technical {
    background: #eef1f5;
    color: #5a6472;
}

/* Valid / Expired status badges */

/* Expired award rows are greyed out */

/* ── Messages ──────────────────────────────────────────── */
.hera-message-success {
    background: #edfbf6;
    color: #32d296;
    padding: 12px 16px;
    border-radius: 4px;
    border: 1px solid #32d296;
    margin-bottom: 15px;
}

.hera-message-error {
    background: #fef4f6;
    color: #f0506e;
    padding: 12px 16px;
    border-radius: 4px;
    border: 1px solid #f0506e;
    margin-bottom: 15px;
}

/* Submitted, but not cleanly — an application whose upload failed. */
.hera-message-warning {
    background: #fdf6e3;
    color: #7a5a00;
    padding: 12px 16px;
    border-radius: 4px;
    border: 1px solid #e8d08a;
    margin-bottom: 15px;
}

/* ── Keyboard focus ────────────────────────────────────── */
/* UIkit removes the outline on buttons and inputs; keyboard users
   still need to see where they are inside the plugin's screens. */
.hera-login-wrap :is(a, button, input, select, textarea):focus-visible,
.hera-lost-password-wrap :is(a, button, input, select, textarea):focus-visible,
.hera-reset-password-wrap :is(a, button, input, select, textarea):focus-visible,
.hera-directory-wrap :is(a, button, input, select, textarea):focus-visible,
.hera-profile-wrap :is(a, button, input, select, textarea):focus-visible,
.hera-edit-profile-wrap :is(a, button, input, select, textarea):focus-visible,
.hera-register-wrap :is(a, button, input, select, textarea):focus-visible,
.hera-cpd-log-wrap :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid #1e87f0;
    outline-offset: 2px;
}

/* ── Responsive ────────────────────────────────────────── */
/* 767px, not UIkit's 639px: 640-767px is a portrait tablet and got
   the desktop layout with a full-width table. */
@media (max-width: 767px) {
    .hera-profile-name {
        font-size: 1.4em;
    }

    .hera-filter-bar {
        padding: 12px;
    }

    .hera-cpd-total {
        font-size: 2em;
    }

    .hera-table-thumb {
        width: 32px;
        height: 32px;
    }
}

/* ══════════════════════════════════════════════════════════════
   Member CPD dashboard
   ══════════════════════════════════════════════════════════════

   Built on UIkit, with a thin .hera-* layer on top — nothing here
   overrides a UIkit class. Colour is never the only signal: every
   state carries a word as well, so the card reads the same in
   greyscale, in print, and for colour-blind members. */

.hera-cpd-status-card {
    border: 1px solid #e3e5e8;
    border-left: 5px solid #9aa0a6;
    border-radius: 6px;
    background: #fff;
    padding: 20px 22px;
    margin: 0 0 28px;
}
.hera-cpd-status-green { border-left-color: #2f9e44; }
.hera-cpd-status-amber { border-left-color: #d9a406; }
.hera-cpd-status-red   { border-left-color: #c92a2a; }
.hera-cpd-status-grey  { border-left-color: #9aa0a6; }

.hera-cpd-status-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* The verdict comes first — it is what the member came for. */
.hera-cpd-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    border: 1px solid transparent;
}
.hera-cpd-badge-green { background: #edfaef; color: #14622a; border-color: #a7dcb4; }
.hera-cpd-badge-amber { background: #fdf6e3; color: #7a5a00; border-color: #e8d08a; }
.hera-cpd-badge-red   { background: #fdeceb; color: #8a1f16; border-color: #edaaa4; }
.hera-cpd-badge-grey  { background: #f2f3f4; color: #4a4f54; border-color: #d3d6d9; }

.hera-cpd-period { color: #5f6368; font-size: 14px; }

.hera-cpd-gap {
    font-size: 17px;
    line-height: 1.45;
    margin: 0 0 18px;
    color: #1f2328;
}

/* Two bars rather than a wall of digits, because the genuinely
   confusing case is enough points overall but too few Technical —
   that has to be visible at a glance. */
.hera-cpd-bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 14px;
}
.hera-cpd-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 14px;
}
.hera-cpd-bar-label strong { font-variant-numeric: tabular-nums; font-size: 16px; }
.hera-cpd-behind { color: #b02a1e; }

.hera-cpd-bar {
    height: 10px;
    background: #eceef0;
    border-radius: 5px;
    overflow: hidden;
}
.hera-cpd-bar span {
    display: block;
    height: 100%;
    border-radius: 5px;
    transition: width .3s ease;
}
.hera-cpd-bar .is-met    { background: #2f9e44; }
.hera-cpd-bar .is-behind { background: #d9a406; }

.hera-cpd-notes { margin: 0; padding-left: 18px; color: #5f6368; font-size: 14px; }
.hera-cpd-notes li { margin-bottom: 4px; }
.hera-cpd-note-alert { color: #b02a1e; font-weight: 600; }

.hera-cpd-staff-only {
    margin: 14px 0 0;
    padding: 8px 10px;
    background: #f6f7f7;
    border-left: 3px solid #2271b1;
    font-size: 13px;
    color: #50575e;
}

/* Period grouping --------------------------------------------- */
.hera-cpd-period-group { margin-bottom: 30px; }
.hera-cpd-period-group.is-past { opacity: .85; }
.hera-cpd-period-heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 16px;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #eceef0;
}
.hera-cpd-period-group.is-current .hera-cpd-period-heading { border-bottom-color: #2f9e44; }
.hera-cpd-period-dates { font-weight: 400; font-size: 13px; color: #5f6368; }

.hera-cpd-points-cell { font-variant-numeric: tabular-nums; font-weight: 600; }

/* A long unbroken note (a URL, say) must wrap rather than widen the
   table. `anywhere` also shrinks the column's minimum width, which
   `break-word` does not. No max-width: browsers ignore it on a table
   cell, and once the cell becomes a flex row on mobile it would cap
   the whole card row instead. No table-layout: fixed either — with no
   column widths set it would give Date the same width as Activity. */
.hera-cpd-table td.cell-note { overflow-wrap: anywhere; }

/* A voided entry stays visible, struck through: the fact a
   correction happened is part of the member's record. */
.hera-cpd-voided { color: #5f6368; } /* ~6:1 on white; #8a8f94 was ~3.3:1 */
.hera-cpd-voided .hera-cpd-points-cell,
.hera-cpd-voided td:first-child { text-decoration: line-through; }
.hera-cpd-void-flag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 9px;
    background: #f0f0f1;
    color: #50575e;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.hera-cpd-footnote { margin-top: 18px; }
.hera-cpd-empty { margin-top: 4px; }

/* Mobile ------------------------------------------------------
   Assessors are field workers; many will only ever open this on a
   phone. Below 768px the CPD log and the member directory reflow to
   stacked label:value cards rather than scrolling a wide table
   sideways. Each <td> carries the column heading in data-label. */
@media (max-width: 767px) {
    .hera-cpd-bars { grid-template-columns: 1fr; gap: 14px; }
    .hera-cpd-gap { font-size: 16px; }
    .hera-cpd-status-card { padding: 16px; }

    /* The theme's fixed call button (.floatingphone-mobile, 43px tall,
       10px off the bottom) must never cover the last row. The profile
       page nests the log, so the inner wrap gives its padding back. */
    .hera-cpd-log-wrap,
    .hera-profile-wrap { padding-bottom: 72px; }
    .hera-profile-wrap .hera-cpd-log-wrap { padding-bottom: 0; }

    /* Every selector below carries table.…​.uk-table rather than the bare
       class. This file loads BEFORE the theme's UIkit, so at equal
       specificity UIkit wins: .uk-table td would keep its 16px/12px
       padding and .uk-table-divider its border-top, which left the cards
       roomy and lined. Element + two classes out-ranks both. */
    table.hera-cpd-table.uk-table,
    table.hera-cpd-table.uk-table tbody,
    table.hera-cpd-table.uk-table tr,
    table.hera-cpd-table.uk-table td,
    table.hera-directory-table.uk-table,
    table.hera-directory-table.uk-table tbody,
    table.hera-directory-table.uk-table tr,
    table.hera-directory-table.uk-table td { display: block; width: 100%; box-sizing: border-box; }

    table.hera-cpd-table.uk-table thead,
    table.hera-directory-table.uk-table thead { display: none; }

    table.hera-cpd-table.uk-table tr,
    table.hera-directory-table.uk-table tr {
        border: 1px solid #e3e5e8;
        border-radius: 6px;
        margin-bottom: 12px;
        padding: 6px 12px;
        background: #fff;
    }
    table.hera-directory-table.uk-table-striped tbody tr:nth-of-type(odd) { background: #fff; }

    table.hera-cpd-table.uk-table td,
    table.hera-directory-table.uk-table td {
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
        gap: 14px;
        min-height: 44px;
        padding: 8px 0;
        border: 0;
        border-bottom: 1px solid #f2f3f4;
    }
    table.hera-cpd-table.uk-table tr td:last-child,
    table.hera-directory-table.uk-table tr td:last-child { border-bottom: 0; }

    table.hera-cpd-table.uk-table td::before,
    table.hera-directory-table.uk-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #5f6368;
        text-align: left;
        flex: 0 0 40%;
    }

    /* The photo and Edit cells have no heading: no label, no 40%
       gutter, so the thumbnail and button sit flush left. */
    table.hera-directory-table.uk-table td[data-label=""] { justify-content: flex-start; align-items: center; }
    table.hera-directory-table.uk-table td[data-label=""]::before { display: none; }
}

/* A long address must wrap, not push the directory table sideways. */
.hera-dir-email a { overflow-wrap: anywhere; }

/* Print: a member may bring their CPD statement to a QA audit. */
@media print {
    .hera-cpd-status-card { border: 1px solid #999; break-inside: avoid; }
    .hera-cpd-period-group { break-inside: avoid; }
    .hera-cpd-staff-only { display: none; }
    .hera-cpd-bar { border: 1px solid #999; }
}

/* ─── Application form ──────────────────────────────────────────
   The form is built from Hera_Members_Application_Fields and shows or hides
   fields as they become relevant, so [hidden] has to win against UIkit's grid
   display rules. */

#hera-register-form [hidden] { display: none !important; }

#hera-register-form .hera-section-desc { margin: -4px 0 12px; }

#hera-register-form .hera-field { margin-bottom: 4px; }

#hera-register-form .hera-field-desc { margin: 4px 0 0; line-height: 1.4; }

#hera-register-form .hera-required { color: #d8000c; font-weight: 600; }

/* Radio and checkbox groups */
#hera-register-form .hera-choices { margin-top: 6px; }

#hera-register-form .hera-choice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 7px;
    line-height: 1.45;
    cursor: pointer;
}

#hera-register-form .hera-choice input { flex: 0 0 auto; margin-top: 3px; }

#hera-register-form .hera-choices.hera-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
}

#hera-register-form .hera-choices.hera-inline .hera-choice { margin-bottom: 0; }

#hera-register-form .hera-note { margin: 6px 0 0; }

#hera-register-form .hera-submit-note { margin-top: 8px; }

#hera-register-form input[type="file"] { padding: 6px; height: auto; }

/* Validation problems listed one per line (A-8) */
.hera-message-list { margin: 0; padding-left: 1.2em; }
.hera-message-list li + li { margin-top: 2px; }