/* ============================================================
   HLA — brand theme (layered over Bootstrap 5.3)
   Palette derived from HLA's existing identity: deep teal-navy
   surfaces with a bright teal accent and a warm donate accent.
   Adjust the tokens below to fine-tune against the live brand.
   ============================================================ */
:root {
    --hla-navy:      #123a49;   /* header / footer surface */
    --hla-navy-900:  #0d2c38;   /* deeper navy (topbar, hovers) */
    --hla-teal:      #17a2a0;   /* primary accent / CTAs */
    --hla-teal-600:  #128f8d;
    --hla-teal-300:  #4cc7c4;
    --hla-amber:     #e8833a;   /* donate / warm accent */
    --hla-ink:       #1f2d33;   /* body text */
    --hla-muted:     #5f7078;
    --hla-mist:      #f4f7f8;   /* light section bg */
    --hla-line:      #e2e9eb;

    --bs-primary:    var(--hla-teal);
    --font-display:  "Barlow Condensed", system-ui, sans-serif;
    --font-body:     "Barlow", system-ui, sans-serif;
}

body {
    font-family: var(--font-body);
    color: var(--hla-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .display-1, .display-2, .display-3 {
    font-family: var(--font-display);
    letter-spacing: .01em;
}

a { text-decoration: none; }

.skip-link {
    position: absolute; top: .5rem; left: .5rem; z-index: 2000;
    background: var(--hla-teal); color: #fff; padding: .5rem .9rem; border-radius: .375rem;
}

/* ---------- Top utility bar ---------- */
.topbar {
    background: var(--hla-navy-900);
    color: #cfe0e2;
    font-size: .82rem;
    padding: .4rem 0;
}
.topbar__donate { color: #ffd7b0; font-weight: 600; }
.topbar__donate:hover { color: #fff; }
.topbar__donate .bi { color: var(--hla-amber); }
.topbar__social { display: flex; gap: .75rem; font-size: 1rem; }
.topbar__social a { color: #cfe0e2; }
.topbar__social a:hover { color: #fff; }

/* ---------- Main navbar ---------- */
.main-nav {
    background: var(--hla-navy);
    padding-top: .35rem; padding-bottom: .35rem;
    box-shadow: 0 2px 14px rgba(0,0,0,.12);
}
.main-nav .navbar-brand img { display: block; }
.main-nav .navbar-nav .nav-link {
    color: #eaf1f2;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .5rem .85rem;
}
.main-nav .navbar-nav .nav-link:hover,
.main-nav .navbar-nav .nav-link:focus,
.main-nav .navbar-nav .show > .nav-link { color: var(--hla-teal-300); }

/* LinkedIn (and any other social) icon in the navbar CTA group */
.nav-social {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 50%;
    color: #eaf1f2; font-size: 1.1rem; line-height: 1;
    border: 1px solid rgba(255,255,255,.25);
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nav-social:hover, .nav-social:focus { color: #fff; border-color: var(--hla-teal); background: var(--hla-teal); }

.navbar-toggler { border-color: rgba(255,255,255,.35); }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdowns */
.main-nav .dropdown-menu {
    border: 0; border-radius: .4rem; margin-top: .35rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.16);
    padding: .4rem;
}
.main-nav .dropdown-item {
    font-weight: 500; border-radius: .3rem; padding: .5rem .8rem;
}
.main-nav .dropdown-item:hover,
.main-nav .dropdown-item:focus { background: var(--hla-mist); color: var(--hla-teal-600); }

/* Multi-level flyout submenu */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin: -.4rem 0 0 .1rem; }
.dropdown-submenu > .dropdown-toggle::after {
    border: none; content: "\F285"; /* bi chevron-right */
    font-family: "bootstrap-icons"; float: right; font-size: .8rem;
    vertical-align: middle;
}
@media (min-width: 1200px) {
    .dropdown-submenu:hover > .dropdown-menu { display: block; }
}
@media (max-width: 1199.98px) {
    /* On mobile, nest submenus inline instead of flyout */
    .dropdown-submenu > .dropdown-menu { position: static; left: 0; box-shadow: none; padding-left: .75rem; }
}

.nav-cta .btn { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }

/* ---------- Buttons ---------- */
.btn-teal { background: var(--hla-teal); border-color: var(--hla-teal); color: #fff; }
.btn-teal:hover, .btn-teal:focus { background: var(--hla-teal-600); border-color: var(--hla-teal-600); color: #fff; }
.btn-amber { background: var(--hla-amber); border-color: var(--hla-amber); color: #fff; }
.btn-amber:hover { filter: brightness(.94); color: #fff; }
.btn-outline-teal { color: var(--hla-teal-600); border-color: var(--hla-teal); }
.btn-outline-teal:hover { background: var(--hla-teal); color: #fff; }

/* ---------- Section helpers ---------- */
.section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section--mist { background: var(--hla-mist); }
.section--navy { background: var(--hla-navy); color: #eaf1f2; }
.eyebrow {
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em;
    font-size: .82rem; font-weight: 600; color: var(--hla-teal-600);
}
.section--navy .eyebrow { color: var(--hla-teal-300); }
.section-title { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; }

/* Page header (interior pages without a hero image) */
.page-head {
    background: linear-gradient(120deg, var(--hla-navy) 0%, var(--hla-navy-900) 100%);
    color: #fff; padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.page-head h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin: 0; }
.page-head .lead { color: #bcd2d4; margin-top: .5rem; }
.breadcrumb-hla { --bs-breadcrumb-divider: '›'; font-size: .85rem; }
.breadcrumb-hla a { color: var(--hla-teal-300); }
.breadcrumb-hla .active { color: #9fb6b9; }

/* ---------- Hero ---------- */
.hero {
    position: relative; color: #fff;
    background: var(--hla-navy) center/cover no-repeat;
    padding: clamp(4rem, 10vw, 8rem) 0;
}
.hero::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(13,44,56,.86), rgba(13,44,56,.45)); }
.hero > .container { position: relative; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 700; max-width: 20ch; }
.hero p.lead { max-width: 46ch; color: #dce8e9; }

/* ---------- Value cards ---------- */
.value-card { padding: 1.75rem; height: 100%; border-radius: .6rem; background: #fff; box-shadow: 0 6px 24px rgba(18,58,73,.06); }
.value-card h4 { color: var(--hla-teal-600); font-weight: 700; }

/* ---------- Update / link cards ---------- */
.update-card {
    height: 100%; border: 1px solid var(--hla-line); border-radius: .6rem; overflow: hidden;
    background: #fff; transition: transform .18s ease, box-shadow .18s ease;
}
.update-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(18,58,73,.12); }
.update-card__body { padding: 1.35rem 1.4rem 1.6rem; }
.update-card__body h4 { font-weight: 700; font-size: 1.2rem; }
.update-card__tag { color: var(--hla-teal-600); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Feed pages (tenders / jobs) ---------- */
.feed-toolbar {
    background: #fff; border: 1px solid var(--hla-line); border-radius: .6rem;
    padding: 1.1rem 1.25rem; box-shadow: 0 4px 18px rgba(18,58,73,.05);
}
.feed-count { font-family: var(--font-display); font-weight: 700; color: var(--hla-navy); }
.feed-count strong { color: var(--hla-teal-600); }
.feed-card {
    border: 1px solid var(--hla-line); border-left: 4px solid var(--hla-teal);
    border-radius: .5rem; background: #fff; padding: 1.25rem 1.35rem; margin-bottom: 1rem;
    transition: box-shadow .18s ease;
}
.feed-card:hover { box-shadow: 0 10px 26px rgba(18,58,73,.1); }
.feed-card__title { font-weight: 700; font-size: 1.15rem; color: var(--hla-navy); }
.feed-card__title a { color: inherit; }
.feed-card__title a:hover { color: var(--hla-teal-600); }
.feed-card__meta { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .85rem; color: var(--hla-muted); margin-top: .6rem; }
.feed-card__meta .label { font-weight: 600; color: var(--hla-ink); }
.feed-empty { border: 2px dashed var(--hla-line); border-radius: .6rem; padding: 3rem 1rem; text-align: center; color: var(--hla-muted); }

/* Placeholder banner marking a member-zone / feed page awaiting content */
.embed-note {
    border: 1px dashed var(--hla-teal); background: rgba(23,162,160,.06);
    border-radius: .6rem; padding: 1rem 1.25rem; color: var(--hla-teal-600);
    font-size: .9rem; display: flex; gap: .6rem; align-items: flex-start;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--hla-navy); color: #cfe0e2; padding: 3.5rem 0 1.75rem; margin-top: 0; }
.footer__heading { color: #fff; font-weight: 700; text-transform: uppercase; font-size: 1rem; letter-spacing: .06em; margin-bottom: 1rem; }
.footer__text { font-size: .9rem; line-height: 1.7; color: #b8cccf; }
.footer__list { list-style: none; padding: 0; margin: 0; }
.footer__list li { margin-bottom: .45rem; }
.footer__list a { color: #cfe0e2; font-size: .92rem; }
.footer__list a:hover { color: var(--hla-teal-300); }
.footer__social { display: flex; gap: .9rem; font-size: 1.15rem; }
.footer__social a { color: #cfe0e2; }
.footer__social a:hover { color: var(--hla-teal-300); }
.footer__rule { border-color: rgba(255,255,255,.12); margin: 2.25rem 0 1.25rem; }
.footer__copy { color: #9fb6b9; }
.footer__toplink { color: #cfe0e2; font-size: .88rem; }
.footer__toplink:hover { color: var(--hla-teal-300); }