/* ============================================================================
   FBC Ghana — PASSBOOK theme  (Tweak 212, Phase 2)
   ----------------------------------------------------------------------------
   The public site rebuilt on the grammar of a well-kept ledger: hairline rules
   and tight columns carry the structure that 96px of whitespace used to carry,
   every figure is tabular and right-aligned, and a red margin rail with mono
   folio indices runs down the content column.

   THE IDENTITY IS MADE OF DELETIONS. There are deliberately NO box-shadows, NO
   rounded cards, NO gradient text, NO hover lift and NO colour-glow washes in
   this file. One of those added back collapses the design into the generic
   template it replaced — so do not reintroduce them.

   This stylesheet redefines the SAME class vocabulary the shared templates use,
   so pages Passbook does not structurally override (legal, news, contact, FAQ,
   executives, auth) restyle correctly without duplicated markup.
   ========================================================================== */

:root {
    --forest:   #0a4a23;
    --deep:     #0f6330;
    --gold:     #c89b2a;
    --gold-lt:  #e7b94d;
    --rail-red: #dba69f;   /* the margin rule — nowhere else, ever */

    --ink:   #181d19;      /* green-biased near-black, not a blue slate */
    --text:  #4b5450;      /* 7.8:1 on paper */
    --muted: #69736d;      /* 4.9:1 — the lightest tone that may carry text */

    --rule:   #dfe2dd;     /* the load-bearing hairline */
    --rule-2: #c3c9c2;

    --paper: #fdfdfa;      /* barely-warm ground: stock, not screen */
    --stone: #f2f2ec;      /* alternating bands */
    --wash:  #f8f3e5;      /* the ONLY hover feedback on the site */

    --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --serif: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    /* If Plex Mono fails to load the fallback MUST stay monospaced, or every
       figure column jumps and the core conceit visibly fails. */
    --mono:  'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

    --radius: 3px;         /* buttons only. Everything else is square. */
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--forest); text-decoration: none; }
a:hover { color: var(--deep); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; font-weight: 600; text-wrap: balance; }
h1 { font-family: var(--serif); font-size: 46px; line-height: 1.05; letter-spacing: -.021em; }
h2 { font-family: var(--serif); font-size: 28px; line-height: 1.15; letter-spacing: -.015em; }
/* Product names and card titles are DATA, not prose — they take the grotesque. */
h3 { font-family: var(--sans); font-size: 18px; line-height: 1.30; letter-spacing: -.006em; }
h4 { font-family: var(--sans); font-size: 15px; line-height: 1.35; }
h5, h6 { font-family: var(--sans); font-size: 13.5px; }
p { margin: 0 0 .8rem; }

/* Every stretch of real prose gets the serif at a proper measure. This is where
   a 15px interface size would genuinely hurt, so prose does not use it. */
.lead, .news-body p, .news-body li, .fbc-faq-answer p {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.55;
    color: var(--text);
}
.lead { max-width: 56ch; margin: 0 0 1rem; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }

/* THE GLOBAL FIGURE RULE — every money value, rate, term, date and count.
   Columns then line up decimal-to-decimal down the page. */
.fig, .num, .stat-num, td.num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Eyebrows / labels. NOTE: gold is a rule, a fill or a background — never a
   word on light (it fails contrast). Eyebrows are forest or muted. */
.eyebrow, .label {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--forest);
}

.fbc-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.fbc-skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--forest); color: #fff; padding: 10px 16px;
}
.fbc-skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

/* ---------- THE SIGNATURE: margin rail + folio indices ---------- */
.rail { position: relative; padding-left: 52px; }
.rail::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    border-left: 1px solid var(--rail-red);
}
.rail > .folio, .folio {
    position: absolute; left: 0; width: 40px; text-align: right;
    font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--gold);
}

/* Its companion — the accountant's double rule closing a certified total. */
.total { position: relative; padding-bottom: 7px; }
.total::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    border-top: 2px solid var(--gold);
    border-bottom: 1px solid var(--forest);
}

/* ---------- header ---------- */
.fbc-header { background: var(--paper); border-bottom: 1px solid var(--rule); }
.fbc-header-inner {
    display: flex; align-items: center; gap: 1.5rem;
    height: 56px;
}
.fbc-logo { display: flex; align-items: center; gap: .5rem; font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--forest); }
.fbc-logo img { max-height: 30px; width: auto; }

.fbc-nav { display: flex; align-items: center; gap: 1.15rem; margin-left: .5rem; }
.fbc-nav > a {
    font-size: 13.5px; font-weight: 500; color: var(--text);
    padding: 3px 0; border-bottom: 2px solid transparent;
}
.fbc-nav > a:hover { color: var(--forest); text-decoration: none; border-bottom-color: var(--rule-2); }
.fbc-nav-cta { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

/* the utility micro-bar + tally rule live in the theme's header partial */
.pb-util { background: var(--forest); color: #cfe0d4; height: 32px; display: flex; align-items: center; }
.pb-util .fbc-container { display: flex; align-items: center; gap: 1.4rem; width: 100%; }
.pb-util .eyebrow { color: var(--gold-lt); font-size: 10.5px; }
.pb-util .sp { margin-left: auto; }
.pb-tally {
    height: 4px;
    background: linear-gradient(90deg, #0a4a23 0 46%, #c89b2a 46% 74%, #e8731c 74% 90%, #d6342a 90% 100%);
}

.fbc-mobile-toggle { display: none; background: none; border: 0; padding: 6px; color: var(--ink); cursor: pointer; }
.fbc-mobile-toggle svg { width: 22px; height: 22px; }
.fbc-mobile-menu { display: none; border-top: 1px solid var(--rule); padding: 8px 0 14px; }
.fbc-mobile-menu.open { display: block; }
.fbc-mobile-menu > a { display: block; padding: 11px 0; font-size: 15px; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--rule); }
.fbc-mobile-menu .btn { margin-top: 10px; }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    height: 40px; padding: 0 15px;
    border: 1px solid transparent; border-radius: var(--radius);
    font-family: var(--sans); font-size: 13.5px; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 14.5px; }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--forest); color: #fff; }
.btn-primary:hover { background: var(--deep); color: #fff; }
/* gold fill takes INK text — never white (contrast) */
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-lt); color: var(--ink); }
.btn-outline { background: transparent; color: var(--forest); border-color: var(--rule-2); }
.btn-outline:hover { background: var(--wash); color: var(--forest); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { color: var(--forest); }

/* ---------- sections: rules replace whitespace ---------- */
.section { padding: 40px 0; border-top: 1px solid var(--rule); }
.section-soft { background: var(--stone); }
.section-dark { background: var(--forest); color: #fff; border-top: 0; }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .lead { color: #bcd2c3; }
.section-dark .eyebrow { color: var(--gold-lt); }

/* The two-column ruled statement header: removes ~90px of stacked space per
   section and produces the letterhead read. Never centred. */
.section-header {
    display: grid; grid-template-columns: 5fr 6fr; gap: 32px;
    align-items: end; margin-bottom: 20px; max-width: none; text-align: left;
}
.section-header h2 { margin: .25rem 0 0; }
.section-header .lead { margin: 0; }

/* ---------- hero ---------- */
.hero { padding: 44px 0; background: var(--paper); position: relative; }
.hero-inner { position: relative; }
/* the decorative blob is deleted, not restyled */
.hero-ornament { display: none !important; }
.hero h1 { margin: .4rem 0 .7rem; color: var(--ink); }
.hero .lead { max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.1rem; }

/* the hero figures become a ruled ledger extract */
.hero-meta {
    margin-top: 1.6rem; padding-top: 0;
    border-top: 1px solid var(--rule);
    display: block;
}
.hero-meta-item {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: 11px 0; border-bottom: 1px solid var(--rule);
}
.hero-meta-item:last-child { border-bottom: 0; }
.hero-meta-item .num {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: -.01em;
    color: var(--forest); order: 2;
}
.hero-meta-item .num small { font-size: 15px; color: var(--muted); }
.hero-meta-item .label {
    margin: 0; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted); order: 1;
}

/* ---------- grids: the 1px gutter IS the rule ---------- */
.grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- cards / values: the ruled matrix ---------- */
.card, .value {
    background: var(--paper);
    border: 0; border-radius: 0;
    padding: 20px 24px;
    box-shadow: none;
    text-align: left;
}
.card:hover, .value:hover { background: var(--wash); transform: none; box-shadow: none; }
.card h3, .value h4 { margin-bottom: .3rem; color: var(--ink); }
.card p, .value p { color: var(--text); margin: 0; font-size: 14px; line-height: 1.5; }

/* the 56px gradient icon plate becomes a small ruled mark */
.card-icon, .value-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin-bottom: 8px;
    background: none; border: 0; border-radius: 0;
    color: var(--forest);
}
.card-icon svg, .value-icon svg { width: 22px; height: 22px; }

.card-meta {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid var(--rule);
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 13px; color: var(--muted);
}
.card-meta strong { color: var(--forest); font-weight: 500; }

/* ---------- trust strip ---------- */
.fbc-trust-strip { background: var(--stone); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.fbc-trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--rule); }
.fbc-trust-item { display: flex; align-items: flex-start; gap: .6rem; background: var(--stone); padding: 11px 14px; }
.fbc-trust-item svg { width: 18px; height: 18px; color: var(--forest); flex: none; margin-top: 2px; }
.fbc-trust-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.fbc-trust-sub { font-size: 12px; color: var(--muted); }

/* ---------- branches ---------- */
.branch-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.16); }
.branch-pill {
    display: block; background: var(--forest); color: #fff;
    padding: 14px 16px; border: 0; border-radius: 0;
}
.branch-pill svg { display: none; }
.branch-pill .b-name { font-size: 14px; font-weight: 600; }
.branch-pill .b-meta { font-family: var(--mono); font-size: 12.5px; color: #a9c4b2; margin-top: 2px; }

/* ---------- CTA strip ---------- */
.cta-strip { text-align: left; max-width: 640px; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.cta-strip .lead { margin-left: 0; margin-right: 0; }

/* ---------- announcement bar ---------- */
.fbc-announce-bar { background: var(--forest); color: #fff; font-size: 13px; }
.fbc-announce-inner { display: flex; align-items: center; gap: .7rem; padding: 8px 0; }
.fbc-announce-pill {
    font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
    background: var(--gold); color: var(--ink); padding: 2px 7px; border-radius: 2px;
}
.fbc-announce-link { color: #fff; font-weight: 500; }
.fbc-announce-link:hover { color: var(--gold-lt); }
.fbc-announce-arrow { color: var(--gold-lt); }
.fbc-announce-close { margin-left: auto; background: none; border: 0; color: #a9c4b2; cursor: pointer; font-size: 18px; line-height: 1; }

/* ---------- FAQ ---------- */
.fbc-faq-item { border-bottom: 1px solid var(--rule); padding: 0; background: none; border-radius: 0; }
.fbc-faq-item summary {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 13px 0; cursor: pointer; font-size: 15px; font-weight: 600; list-style: none;
}
.fbc-faq-item summary::-webkit-details-marker { display: none; }
.fbc-faq-item summary svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.fbc-faq-item[open] summary svg { transform: rotate(180deg); }
.fbc-faq-answer { padding: 0 0 14px; max-width: 68ch; }
.fbc-faq-answer p { margin: 0; }

/* ---------- long-form article / legal ---------- */
.news-body { max-width: 68ch; }
.news-body h2 { margin-top: 1.6rem; }
.news-body h3 { margin-top: 1.2rem; font-family: var(--serif); font-size: 20px; }
.news-body ul, .news-body ol { padding-left: 1.2rem; }
.news-body li { margin-bottom: .35rem; }
.news-body blockquote {
    margin: 1.2rem 0; padding: 0 0 0 16px;
    border-left: 2px solid var(--gold);
    font-family: var(--serif); font-style: italic; color: var(--text);
}
.news-body img { border-radius: 2px; }

/* ---------- forms ---------- */
.field { margin-bottom: 14px; }
.field label {
    display: block; margin-bottom: 4px;
    font-family: var(--mono); font-size: 11px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.field input, .field select, .field textarea, input[type="text"], input[type="email"],
input[type="password"], input[type="date"], input[type="number"], input[type="tel"], select, textarea {
    width: 100%; height: 38px; padding: 0 10px;
    background: #fff; border: 1px solid var(--rule-2); border-radius: var(--radius);
    font-family: var(--sans); font-size: 15px; color: var(--ink);
}
textarea, .field textarea { height: auto; padding: 9px 10px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus,
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--forest);
    box-shadow: inset 0 -2px 0 var(--gold);
}
/* iOS zooms any input under 16px on focus, which would visibly break the
   aligned ruled columns. Pin inputs to 16px on small screens. */
@media (max-width: 767px) {
    .field input, .field select, .field textarea,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="date"], input[type="number"], input[type="tel"], select, textarea { font-size: 16px; }
}
.field-error { color: #a3312b; font-size: 13px; margin-top: 4px; }
.field-honeypot { position: absolute; left: -9999px; }

.alert-success, .alert-error {
    padding: 11px 14px; margin-bottom: 1rem; border-radius: 0;
    border: 1px solid var(--rule); border-left-width: 3px;
    font-size: 14.5px;
}
.alert-success { background: var(--wash); border-left-color: var(--forest); color: #2c4a35; }
.alert-error { background: #fbf0ef; border-left-color: #a3312b; color: #7d2620; }

/* ---------- footer ---------- */
.fbc-footer { background: var(--ink); color: #b9c0ba; padding: 32px 0 0; font-size: 13.5px; }
.fbc-footer .fbc-container > .grid { background: none; border: 0; gap: 28px; }
.fbc-footer .grid-4 { grid-template-columns: 2fr 1fr 1fr 1.3fr; }
.fbc-footer h4 {
    font-family: var(--mono); font-size: 11px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: .5rem;
}
.fbc-footer a { display: block; color: #b9c0ba; padding: 2px 0; }
.fbc-footer a:hover { color: #fff; text-decoration: none; }
.fbc-footer-brand img { max-height: 32px; margin-bottom: .5rem; }
.fbc-footer-brand p { font-family: var(--serif); font-size: 14.5px; color: #8e968f; max-width: 34ch; }
.fbc-footer-bottom {
    border-top: 1px solid #2a312b; margin-top: 24px; padding: 12px 0;
    display: flex; justify-content: space-between; gap: 1rem;
    font-size: 12.5px; color: #79817a;
}
.fbc-footer-bottom a { display: inline; }

/* ---------- ledger table (theme-specific, used by the home overrides) ---------- */
.pb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pb-table th {
    font-family: var(--mono); font-size: 11px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
    text-align: left; padding: 0 12px 7px 0; border-bottom: 2px solid var(--forest);
}
.pb-table th.r, .pb-table td.r { text-align: right; padding-right: 0; }
.pb-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.pb-table tr:last-child td { border-bottom: 0; }
.pb-table .nm { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.pb-table .ds { font-size: 13px; color: var(--muted); margin-top: 2px; }
.pb-table td.r .fig { font-size: 15px; font-weight: 500; color: var(--forest); }
.pb-table tbody tr:hover td { background: var(--wash); }

/* hero image slot — used only when an admin has uploaded one */
.pb-hero-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; display: block; }
/* the designed NO-PHOTO state: a flat colour panel, never an empty frame */
.pb-hero-panel {
    aspect-ratio: 4 / 3; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 2px;
    background: var(--rule);
}
.pb-hero-panel i { display: block; background: var(--forest); }
.pb-hero-panel i:nth-child(3n) { background: var(--deep); }
.pb-hero-panel i:nth-child(7n) { background: var(--gold); }

/* portraits (executives) — normalised so phone photos read as one set */
.pb-portrait, .value img.portrait {
    width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px;
    filter: grayscale(1) sepia(.28) saturate(1.3);
}

.fade-in { animation: none; opacity: 1; }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
    .section-header { grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; }
}
@media (max-width: 767px) {
    .fbc-container { padding: 0 16px; }
    .section { padding: 28px 0; }
    .hero { padding: 32px 0; }
    h1, .hero h1 { font-size: clamp(2rem, 1.3rem + 2.2vw, 2.875rem); }
    h2 { font-size: 22px; }
    .lead { font-size: 15.5px; }
    .grid-2, .grid-3, .grid-4, .fbc-footer .grid-4 { grid-template-columns: 1fr; }
    .card, .value { padding: 16px 18px; }
    .hero-meta-item .num { font-size: 27px; }

    /* The rail collapses, but the folio indices stay INLINE so the ledger
       grammar survives on the device most members actually use. */
    .rail { padding-left: 0; }
    .rail::before { display: none; }
    .rail > .folio, .folio { position: static; display: inline; width: auto; margin-right: .5rem; }

    /* :hover does not exist on touch — give every interactive row a permanent
       affordance instead, or the mobile site has none at all. */
    .card, .value, .pb-table tbody tr { border-left: 2px solid var(--forest); }
    .pb-table td:first-child { padding-left: 10px; }

    .fbc-nav { display: none; }
    .fbc-mobile-toggle { display: inline-flex; margin-left: auto; }
    .fbc-nav-cta { display: none; }
    .fbc-footer-bottom { flex-direction: column; gap: .4rem; }
    .btn { width: auto; }
}

@media (hover: none) {
    .card:hover, .value:hover, .pb-table tbody tr:hover td { background: var(--paper); }
}

@media print {
    .fbc-header, .pb-util, .pb-tally, .fbc-footer, .fbc-announce-bar, .hero-actions { display: none; }
    body { background: #fff; }
}