/* ==========================================================================
   Bird Conservation Nepal — shared site chrome
   --------------------------------------------------------------------------
   The masthead and footer, used by every page through view_header.php and
   view_footer.php. Plain CSS, no build step.

   Every class here is prefixed bcn- on purpose. This file loads alongside
   Bootstrap 4 and style.css on pages that have not been redesigned yet, and
   unprefixed names collide: Bootstrap already defines .nav, .menu and .brand
   among others. The prefix is what lets the new chrome sit on an old page
   without either one damaging the other.

   Deliberately narrow in scope: it styles the chrome and declares the design
   tokens, and does not restyle body, headings or links globally. Page bodies
   move over one at a time.
   ========================================================================== */

:root {
    /* Ground and ink */
    --bcn-paper:     #e6ebf0;   /* light bluish grey */
    --bcn-paper-hi:  #f3f6f9;
    --bcn-pine:      #16211d;
    --bcn-ink:       #1d2723;
    --bcn-ink-2:     #5a655f;
    --bcn-ink-3:     #8b948d;
    --bcn-rule:      #d2dae2;
    --bcn-rule-2:    #bcc6d0;

    /* Brand */
    --bcn-blue:      #2e6ba6;   /* BirdLife partner blue */
    --bcn-blue-2:    #255884;
    --bcn-accent:     #3f7052;   /* accent on paper */
    --bcn-accent-on-blue:      #a0dd83;   /* accent on blue */
    --bcn-moss:      #4a7c59;   /* actions */

    /* Type */
    /* Lora carries the display roles, Open Sans the text. Lora
       is a sturdy slab-ish serif that goes heavy at large sizes, so the hero
       scale is set at 400 and only the smaller headings take 700. */
    --bcn-display: "Lora", Georgia, "Times New Roman", serif;
    --bcn-text:    "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --display-weight: 700;
    --display-weight-hero: 400;
    --display-track: -0.02em;

    --bcn-edge: clamp(1.25rem, 4vw, 3.5rem);
}

.bcn-shell {
    max-width: 1320px;
    margin: 0 auto;
    padding-left: var(--bcn-edge);
    padding-right: var(--bcn-edge);
    box-sizing: border-box;
}

.bcn-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Keyboard users need a way past the navigation on every page. */
.bcn-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: #fff;
    color: var(--bcn-blue);
    font-family: var(--bcn-text);
    font-weight: 700;
    padding: 0.7rem 1.1rem;
}

.bcn-skip:focus { left: 0; }


/* ==========================================================================
   MASTHEAD
   ========================================================================== */

.bcn-masthead {
    background: var(--bcn-paper-hi);
    border-bottom: 1px solid var(--bcn-rule);
    position: sticky;
    top: 0;
    z-index: 100;
    font-family: var(--bcn-text);
}

.bcn-masthead__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.85rem 0;
}

.bcn-brand { display: flex; align-items: center; flex-shrink: 0; }

/* The logo file is white artwork on transparency, drawn for the old blue bar.
   brightness(0) renders it solid so it reads on paper. Replace the filter with
   a dark-ink logo file when one exists. */
.bcn-brand img {
    height: 46px;
    width: auto;
    display: block;
    filter: brightness(0);
    opacity: 0.88;
}

@media (max-width: 575.98px) { .bcn-brand img { height: 36px; } }

.bcn-nav { display: flex; align-items: center; gap: clamp(0.85rem, 1.8vw, 1.9rem); }

.bcn-nav__links {
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 1.8vw, 1.9rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.bcn-nav__link {
    display: inline-block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--bcn-ink);
    text-decoration: none;
    padding: 0.35rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease-out, color 0.15s ease-out;
}

.bcn-nav__link:hover,
.bcn-nav__link:focus,
.bcn-nav__item--current > .bcn-nav__link {
    border-color: var(--bcn-accent);
    color: var(--bcn-accent);
    text-decoration: none;
}

/* Dropdown for menu items that have children. Opens on hover on a pointer
   device and on focus for the keyboard, so it needs no JavaScript. */
.bcn-nav__item { position: relative; }

.bcn-nav__sub {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 15rem;
    background: var(--bcn-paper-hi);
    border: 1px solid var(--bcn-rule);
    border-radius: 3px;
    box-shadow: 0 16px 34px rgba(22,33,29,0.14);
    padding: 0.4rem 0;
    margin: 0;
    list-style: none;
    display: none;
    z-index: 120;
}

.bcn-nav__item:hover > .bcn-nav__sub,
.bcn-nav__item:focus-within > .bcn-nav__sub { display: block; }

.bcn-nav__sub a {
    display: block;
    padding: 0.6rem 1.15rem;
    font-size: 0.9375rem;
    color: var(--bcn-ink);
    text-decoration: none;
}

.bcn-nav__sub a:hover,
.bcn-nav__sub a:focus { background: var(--bcn-paper); color: var(--bcn-accent); text-decoration: none; }

.bcn-nav__tool {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9375rem;
    color: var(--bcn-ink);
    text-decoration: none;
    padding: 0.35rem 0;
}

.bcn-nav__tool:hover { color: var(--bcn-accent); text-decoration: none; }

.bcn-nav__count { font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.bcn-nav__support {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--bcn-moss);
    color: #fff;
    padding: 0.7em 1.4em;
    border-radius: 2px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s ease-out;
}

.bcn-nav__support:hover { background: #3c6749; color: #fff; text-decoration: none; }

/* Mobile menu, on <details> so it needs no JavaScript. Declared after the
   desktop rules, because a media query does not raise specificity. */
.bcn-menu { display: none; position: relative; }

.bcn-menu > summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--bcn-ink);
}

.bcn-menu > summary::-webkit-details-marker { display: none; }
.bcn-menu[open] > summary { color: var(--bcn-accent); }

.bcn-menu__icon {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 1.125rem;
}

.bcn-menu__icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.18s ease-out, opacity 0.18s ease-out, top 0.18s ease-out;
}

.bcn-menu__icon span:nth-child(1) { top: 0; }
.bcn-menu__icon span:nth-child(2) { top: 0.5rem; }
.bcn-menu__icon span:nth-child(3) { top: 1rem; }

.bcn-menu[open] .bcn-menu__icon span:nth-child(1) {
    top: 0.5rem;
    transform: rotate(45deg);
}

.bcn-menu[open] .bcn-menu__icon span:nth-child(2) { opacity: 0; }

.bcn-menu[open] .bcn-menu__icon span:nth-child(3) {
    top: 0.5rem;
    transform: rotate(-45deg);
}

.bcn-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.6rem);
    min-width: 15rem;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bcn-paper-hi);
    border: 1px solid var(--bcn-rule);
    border-radius: 3px;
    box-shadow: 0 16px 34px rgba(22,33,29,0.14);
    padding: 0.4rem 0;
    z-index: 150;
}

.bcn-menu__panel a {
    display: block;
    padding: 0.6rem 1.15rem;
    font-size: 0.9375rem;
    color: var(--bcn-ink);
    text-decoration: none;
}

.bcn-menu__panel a:hover { background: var(--bcn-paper); color: var(--bcn-accent); text-decoration: none; }
.bcn-menu__panel a.is-child { padding-left: 2.1rem; color: var(--bcn-ink-2); }

@media (max-width: 991.98px) {
    .bcn-nav__links { display: none; }
    .bcn-menu { display: block; }
}


/* ==========================================================================
   SEARCH OVERLAY
   Part of the shared header, so it belongs here. It used to be styled by the
   inline <style> block in view_header.php, which redesigned pages no longer
   load — without these rules the search field renders inline at the top of
   the page. main.js toggles display between block and none.
   ========================================================================== */

#myOverlay.overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    background-color: rgba(22, 33, 29, 0.96);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

#myOverlay .overlay-content {
    position: relative;
    top: 42%;
    transform: translateY(-50%);
    width: min(640px, 88%);
    margin: 0 auto;
}

#myOverlay form {
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
}

#myOverlay input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--bcn-text);
    font-size: 1.125rem;
    color: var(--bcn-ink);
    background: #fff;
    border: none;
    border-radius: 2px;
    padding: 0.9em 1.2em;
}

#myOverlay input[type="text"]:focus { outline: 2px solid var(--bcn-accent-on-blue); outline-offset: 2px; }

#myOverlay button {
    flex: 0 0 auto;
    background: var(--bcn-moss);
    color: #fff;
    border: none;
    border-radius: 2px;
    padding: 0 1.6em;
    font-size: 1.0625rem;
    cursor: pointer;
    transition: background-color 0.18s ease-out;
}

#myOverlay button:hover { background: #3c6749; }

#myOverlay .closebtn {
    position: absolute;
    top: -3.5rem;
    right: 0;
    font-size: 2.25rem;
    line-height: 1;
    color: #fff;
    opacity: 0.75;
    cursor: pointer;
    transition: opacity 0.15s ease-out;
}

#myOverlay .closebtn:hover { opacity: 1; }


/* ==========================================================================
   FOOTER
   ========================================================================== */

.bcn-foot {
    background: var(--bcn-blue);
    color: rgba(255,255,255,0.86);
    font-family: var(--bcn-text);
    font-size: 1rem;
    line-height: 1.62;
    padding: clamp(3rem, 6vw, 5rem) 0 2rem;
}

.bcn-foot__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.26);
}

@media (min-width: 760px) {
    .bcn-foot__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.bcn-foot h3 {
    color: #fff;
    font-family: var(--bcn-text);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 1rem;
}

.bcn-foot p { margin: 0 0 0.4rem; font-size: 0.9375rem; }

/* Links rest dimmer than the surrounding text so they have somewhere to
   travel to; the hover lifts to white and adds a rule. */
.bcn-foot a {
    color: rgba(255,255,255,0.74);
    text-decoration: none;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    transition: color 0.15s ease-out;
}

.bcn-foot a:hover,
.bcn-foot a:focus {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: #fff;
}

.bcn-foot__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    font-size: 0.9375rem;
}

/* Social links as circular icon buttons. Font Awesome 4.7 is already loaded
   on every page, so these need no image files — which matters, because the
   PNG icons named in the database are missing from the server. */
.bcn-foot__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
}

/* Scoped under .bcn-foot deliberately. The generic footer link rule is
   `.bcn-foot a:hover` at specificity (0,2,1); an unscoped `.bcn-social:hover`
   is only (0,2,0) and loses, which forced the icon to white on a white circle
   — invisible — and underlined it. Matching the scope wins the colour back. */
.bcn-foot .bcn-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.42);
    color: rgba(255,255,255,0.88);
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.18s ease-out, color 0.18s ease-out,
                border-color 0.18s ease-out;
}

.bcn-foot .bcn-social:hover,
.bcn-foot .bcn-social:focus {
    background: #fff;
    border-color: #fff;
    color: var(--bcn-blue);
    text-decoration: none;
}

.bcn-foot__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    padding-top: 1.75rem;
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.62);
}

@media (prefers-reduced-motion: reduce) {
    .bcn-masthead *, .bcn-foot * { transition-duration: 0.01ms !important; }
}