/* HLI brand overrides — layered on top of Charitify's main.css */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@500;600;700&display=swap');

/* ============================================================
   THEME VARIABLES — LIGHT MODE (active by default)
   ============================================================ */
:root{
    --bg: #FAF8F2;
    --bg-alt: #EFEEE6;
    --surface: #FFFFFF;
    --surface-alt: #F8F8F8;
    --ink: #1F2A22;
    --muted: #6B756D;
    --line: #EAEAEA;
    --input-bg: #FFFFFF;
    --input-text: #333333;
    --input-border: #E0E0E0;
    --shadow: rgba(18,56,33,0.08);

    /* Brand colors — constant across both modes */
    --forest: #1A5C38;
    --forest-deep: #123821;
    --gold: #C8952A;
}

/* ============================================================
   DARK MODE TOGGLE
   To switch the ENTIRE site to dark mode: delete the "/*" on the
   line just below, and the "*​/" a few lines further down, so this
   :root block becomes active CSS instead of a comment.
   To switch back to light mode: re-add the "/*" and "*​/" around it.
   No HTML edits, no rebuild — just save this file and reload the page.
   ============================================================ */
/*
:root{
    --bg: #101B15;
    --bg-alt: #16241C;
    --surface: #1B2B21;
    --surface-alt: #1F3226;
    --ink: #EDEFE9;
    --muted: #9FB0A2;
    --line: #2B3D31;
    --input-bg: #16241C;
    --input-text: #EDEFE9;
    --input-border: #34483B;
    --shadow: rgba(0,0,0,0.35);
}
*/


/* ---- Base surfaces & text, wired to the variables above ---- */
body{
    background-color: var(--bg);
    color: var(--ink);
}
.bg-grey{
    background-color: var(--bg-alt);
}
h1, h2, h3, h4, h5, h6{
    color: var(--ink);
}
p, li{
    color: var(--ink);
}
.section-heading p,
.pager-header p{
    color: var(--muted);
}
a{
    color: var(--forest);
}

/* The nav bar stays white in both modes on purpose — recreating the logo
   as a theme-swappable asset isn't worth the complexity for one thin bar.
   Everything below the nav still fully switches with the theme. */

/* HLI logo lockup: the emblem image plus a separately-set text wordmark
   (not baked into the image, so it stays crisp and legible at any size).
   Used in both the header and the footer widget. */
.hli-logo-lockup{
    display: flex;
    align-items: center;
    gap: 12px;
}
.hli-logo-lockup img{
    max-height: 60px;
    width: auto;
    flex-shrink: 0;
}
.hli-logo-wordmark{
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-family: Arial, Helvetica, sans-serif;
    white-space: nowrap;
}
.hli-logo-line1{
    font-weight: 700;
    font-size: 18px;
    color: #1A5C38;
    letter-spacing: 0.2px;
}
.hli-logo-line2{
    font-weight: 600;
    font-size: 11px;
    color: #C8952A;
    letter-spacing: 3px;
    margin-top: 3px;
}
/* Footer sits on the dark green widget background, so the main line needs
   to switch to white; the gold second line already reads fine on both. */
.hli-logo-lockup--light .hli-logo-line1{
    color: #FFFFFF;
}

/* Form fields (Contact page) */
.form-control{
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}
.form-control::placeholder{
    color: var(--muted);
    opacity: 1;
}

/* Contact info card background (Charitify hardcodes #f2f2f2) */
.contact-wrap{
    background-color: var(--surface-alt) !important;
}
.contact-info ul li a{
    color: var(--ink);
}
.contact-info ul li a:hover{
    color: var(--gold);
}

/* ---- Gravitas pass: serif headings, safer line-breaking ---- */
h1, h2, h3{
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 600;
    hyphens: none;
}
.section-heading h2,
.pager-header h2,
.leader-name,
.hli-story-card h3,
.hli-program-card h3,
.hli-data-block h3{
    hyphens: none;
}
p, li, .contact-info p{
    hyphens: none;
}

/* A deeper, more institutional section for trust-building content.
   Uses --forest-deep directly (not --surface) since it's meant to read
   as a strong brand-green panel regardless of light/dark mode. */
.bg-deep{
    background-color: var(--forest-deep);
}
.bg-deep h2, .bg-deep h3, .bg-deep .leader-name, .bg-deep p{
    color: #fff;
}
.bg-deep .section-heading p{
    color: #CFE0D3;
}
/* Cards with their own light surface (story/goal/program cards) keep their
   normal ink color even when the section around them is bg-deep */
.bg-deep .hli-story-card,
.bg-deep .hli-story-card p,
.bg-deep .hli-goal-card,
.bg-deep .hli-goal-card p{
    color: var(--ink);
}
.bg-deep .hli-story-card h3,
.bg-deep .hli-goal-card h4{
    color: var(--forest);
}
.bg-deep .leader-block{
    border-bottom-color: rgba(255,255,255,0.14);
}
.bg-deep .leader-title{
    color: #E0B95C;
}
.bg-deep .leader-photo{
    border-color: rgba(255,255,255,0.18);
}
.bg-deep .hli-check-list li,
.bg-deep p{
    color: #E5EBE6;
}
.bg-deep .hli-tag-list li{
    background-color: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.35);
    color: #fff;
}
.bg-deep strong{
    color: #E0B95C;
}

/* Superseded by .hli-logo-lockup img above — the footer logo is now
   wrapped in that lockup div, so it's no longer a direct child here. */
.top-content-wrap .right-info .badge-text{
    color: #fff;
    font-size: 14px;
    line-height: 25px;
    display: inline-block;
}
.footer-section .copyright{
    text-align: center;
    width: 100%;
}

/* Simple content tables (org info, giving levels, programs-at-a-glance) */
.hli-table-wrap{
    overflow-x: auto;
}
table.hli-table{
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}
table.hli-table th,
table.hli-table td{
    border: 1px solid var(--line);
    padding: 14px 18px;
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
}
table.hli-table th{
    background-color: var(--forest);
    color: #fff;
    font-weight: 600;
}
table.hli-table tr:nth-child(even) td{
    background-color: var(--surface-alt);
}

/* Placeholder / coming-soon notices for content not yet supplied */
.hli-placeholder{
    background-color: #fbf3e4;
    border-left: 4px solid var(--gold);
    padding: 15px 20px;
    font-size: 15px;
    color: #6b5a2f;
    margin-bottom: 20px;
}

.hli-tag-list{
    list-style: none;
    padding: 0;
    margin: 0 0 15px;
}
.hli-tag-list li{
    display: inline-block;
    background-color: var(--surface-alt);
    color: var(--forest);
    border: 1px solid var(--forest);
    border-radius: 3px;
    padding: 6px 14px;
    margin: 0 8px 8px 0;
    font-size: 14px;
}
.hli-tag-list li a{
    color: inherit;
    font-weight: 600;
}
.hli-tag-list li a:hover{
    text-decoration: underline;
}
.bg-deep .hli-tag-list li a{
    color: inherit;
}

.hli-goal-card{
    background-color: var(--surface-alt);
    border-left: 4px solid var(--gold);
    padding: 20px 25px;
    margin-bottom: 20px;
}
.hli-goal-card h4{
    color: var(--forest);
    margin-bottom: 8px;
}
.hli-goal-card p{
    color: var(--ink);
}

.hli-donate-embed{
    background-color: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 30px;
    min-height: 200px;
}

/* Leadership bio blocks */
.leader-block{
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--line);
}
.leader-block:last-child{
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.leader-photo{
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--surface-alt);
}
.leader-name{
    margin-bottom: 4px;
}
.leader-title{
    display: block;
    color: var(--gold);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

/* Success story cards */
.hli-story-card{
    background-color: var(--surface-alt);
    border-radius: 4px;
    padding: 30px;
    margin-bottom: 30px;
}
.hli-story-card h3{
    color: var(--forest);
}
.hli-story-card p{
    color: var(--ink);
}

/* Program card list items */
.hli-check-list li{
    padding: 6px 0;
    color: var(--ink);
}
.hli-check-list i{
    color: var(--gold);
    margin-right: 10px;
}

/* Program cards on Programs page */
.hli-program-card{
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 40px 35px;
    margin-bottom: 30px;
    height: 100%;
}
.hli-program-card p{
    color: var(--ink);
}
.hli-program-card .hli-program-icon{
    font-size: 46px;
    color: var(--gold);
    display: block;
    margin-bottom: 20px;
}
.hli-program-card h3{
    color: var(--forest);
}

/* Photo-topped variant, used on the Programs page and Home pillars */
.hli-program-card.has-photo{
    padding: 0;
    overflow: hidden;
    box-shadow: 0 14px 34px var(--shadow);
    border-color: var(--line);
}
.hli-program-media{
    position: relative;
    height: 230px;
    overflow: hidden;
}
.hli-program-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hli-program-media::after{
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 60%;
    background: linear-gradient(rgba(18,56,33,0), rgba(13,31,20,0.55));
}
.hli-program-icon-badge{
    position: absolute;
    left: 28px;
    bottom: -26px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 8px 18px var(--shadow);
    border: 3px solid var(--surface);
    z-index: 2;
}
.hli-program-card.has-photo .hli-program-body{
    padding: 46px 35px 35px;
}
.hli-program-card.has-photo h3{
    color: var(--forest);
}

/* Compact photo pillar variant — used on the Home page's "What We Do" */
.hli-pillar-card{
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 30px;
    height: 100%;
    box-shadow: 0 10px 26px var(--shadow);
}
.hli-pillar-media{
    position: relative;
    height: 170px;
    overflow: hidden;
}
.hli-pillar-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hli-pillar-body{
    padding: 28px 26px 32px;
    text-align: center;
}
.hli-pillar-body h3{
    color: var(--forest);
}
.hli-pillar-body p{
    color: var(--ink);
}
.hli-pillar-body a{
    color: var(--gold);
    font-weight: 600;
}

/* Subtle dot-grid texture for sections that otherwise read as flat/empty */
.hli-textured{
    background-color: var(--bg);
    background-image: radial-gradient(rgba(200,149,42,0.16) 1px, transparent 1.4px);
    background-size: 20px 20px;
}
.bg-deep.hli-textured{
    background-color: var(--forest-deep);
    background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1.4px);
}

/* Testimonial cards (Charitify hardcodes the card background and the
   location-line color, so neither followed the theme system — wire them
   in so dark mode can't silently produce light text on a white card). */
.testimonial-item{
    background-color: var(--surface-alt);
}
.testi-footer span{
    color: var(--muted);
}

/* Home page pillar-section wrapper — same hardcoded-white issue */
.promo-wrap .row{
    background-color: var(--bg);
}

/* Partner endorsement letters (Partner With Us page) */
.hli-endorsement-card{
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 32px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 26px var(--shadow);
}
.hli-endorsement-logo{
    display: inline-block;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 14px 18px;
    /* Partner logos are recreated from their letterhead art with dark,
       fixed colors, so give them a light chip rather than trying to
       theme third-party brand marks for dark mode. */
}
.hli-endorsement-logo img{
    max-width: 200px;
    max-height: 46px;
    width: auto;
    height: auto;
    display: block;
}
.hli-endorsement-card blockquote{
    margin: 0 0 20px;
    padding: 0 0 0 16px;
    border-left: 3px solid var(--gold);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    font-style: italic;
    flex-grow: 1;
}
.hli-endorsement-signer{
    font-weight: 600;
    color: var(--forest);
    margin-bottom: 2px;
}
.hli-endorsement-title{
    display: block;
    font-size: 13.5px;
    color: var(--muted);
    margin-bottom: 16px;
}
.hli-endorsement-links{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.hli-endorsement-links a{
    color: var(--forest);
    font-weight: 600;
}
.hli-endorsement-links a:hover{
    color: var(--gold);
}
.hli-endorsement-links i{
    margin-right: 5px;
}

/* Data / stat lists (Impact page) */
.hli-data-block{
    margin-bottom: 35px;
}
.hli-data-block h3{
    color: var(--forest);
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: inline-block;
}
.hli-stat-list{
    list-style: none;
    padding: 0;
    margin: 0;
}
.hli-stat-list li{
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    color: var(--ink);
}
.hli-stat-list li:last-child{
    border-bottom: none;
}
.hli-stat-list li strong{
    color: var(--forest);
}
.hli-ranked-list{
    padding-left: 20px;
    margin: 0;
}
.hli-ranked-list li{
    padding: 5px 0;
    font-size: 16px;
    color: var(--ink);
}

/* "Areas of Impact" photo strip (Impact page), reusing the 4 program images */
.hli-impact-strip a{
    position: relative;
    display: block;
    height: 190px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 10px 26px var(--shadow);
}
.hli-impact-strip img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.hli-impact-strip a:hover img{
    transform: scale(1.05);
}
.hli-impact-strip .hli-impact-strip-label{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 14px 16px;
    background: linear-gradient(rgba(13,31,20,0), rgba(11,22,15,0.82));
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

/* Contact page — no live map embed, so remove the reserved map gap */
.contact-section.no-map .contact-wrap{
    margin-top: 0;
}