/* ==========================================================================
   Bird Conservation Nepal — page furniture
   --------------------------------------------------------------------------
   The parts every redesigned inner page needs: the base type and ground, the
   page header, the listing grid and its cards, and pagination. Species,
   projects and anything else added later share these rules rather than each
   carrying a copy.

   Anything specific to one kind of record — the two names on a species, its
   taxonomy — lives in that page's own stylesheet.

   Plain CSS, no build step. Load it first:
     $data['page_css'] = array('bcn-page.css', 'bcn-blocks.css', 'bcn-birds.css');
   ========================================================================== */

:root {
    --paper:     #e6ebf0;
    --paper-hi:  #f3f6f9;
    --ink:       #1d2723;
    --ink-2:     #5a655f;
    --ink-3:     #8b948d;
    --rule:      #d2dae2;
    --rule-2:    #bcc6d0;
    --blue:      #2e6ba6;
    --accent:     #3f7052;
    --moss:      #4a7c59;

    /* The one colour that is not from the partner palette. It marks the
       things a reader must not mistake for ordinary text — removing a line
       from the basket, a file that is not on the server — and it has to sit
       apart from the blue and the green to do that. Red at rest, not only on
       hover: a control that destroys something should say so before the
       pointer arrives. */
    --alert:     #b42318;
    --alert-dk:  #8f1c13;

    /* 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. */
    --display: "Lora", Georgia, "Times New Roman", serif;
    --text:    "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --display-weight: 700;
    --display-weight-hero: 400;
    --display-track: -0.02em;

    --edge:  clamp(1.25rem, 4vw, 3.5rem);
    --stack: clamp(3rem, 6vw, 5rem);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--text);
    font-size: 1.0625rem;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
    font-family: var(--display);
    font-weight: var(--display-weight);
    line-height: 1.12;
    letter-spacing: var(--display-track);
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
}

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

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

/* --- Page header ---------------------------------------------------------- */

.page-head {
    background: var(--paper-hi);
    border-bottom: 1px solid var(--rule);
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
}

.page-head__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 1rem;
}

.page-head__eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--accent);
}

/* The measure is set from the longest title the site actually has — "About
   Bird Conservation Nepal", which needs about 23ch at the full size — so that
   every section title sits on one line and every page head is the same height.
   At 18ch four of them wrapped, two of them (Projects, Events) by only a dozen
   pixels, which read as an accident rather than as a decision. These titles are
   written into the views rather than edited in the admin, so the set is known
   and this measure can be sized to it. On a phone the clamp takes the size down
   and a long title wraps again, which is correct there. */
.page-head__title {
    font-size: clamp(1.875rem, 4.4vw, 3.375rem);
    font-weight: var(--display-weight-hero);
    max-width: 24ch;
    margin-bottom: 0.9rem;
}

/* A detail page takes its title from the database, and those run long: one
   project name is 137 characters and several vacancy notices pass fifty. Set
   as a document title rather than a headline — a size down, a wider measure —
   so the longest of them still lands in about three lines.

   This lives here, once, on purpose. Each per-page stylesheet used to carry
   its own copy of this override and they had drifted to three different sizes,
   which is why a section title looked one size on News and another on About.
   Only pages whose title is editorial and short keep the full size above. */
.page-head--long .page-head__title {
    max-width: 34ch;
    font-size: clamp(1.625rem, 3vw, 2.25rem);
    line-height: 1.16;
}

.page-head__note {
    color: var(--ink-2);
    max-width: 58ch;
    margin: 0;
}

.page-head__count {
    font-family: var(--display);
    font-style: italic;
    color: var(--accent);
}

/* --- Species grid --------------------------------------------------------- */

.listing { padding: var(--stack) 0; }

.listing__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 860px) {
    .listing__grid { grid-template-columns: 1fr 1fr; }
}

/* A column, so the "Read more" can be pushed to the bottom. Titles and blurbs
   vary in length, and without this every card in a row ends at a different
   height and the link sits at a different place on each. */
.entry {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.entry__frame { flex: 0 0 auto; }

/* The frame for every card photograph on the site. 16:10 suits the mixture of
   pictures actually in the database: species photographs are 1600x600 banners
   with a white margin baked into them by whoever made them, and this shape
   crops that margin away; project images run from 400x153 to 1042x687 and
   several are composite banners with partner logos on them, which a wider
   frame cropped harshly.

   Set once here so the species and project grids cannot drift apart. The news
   listing overrides it in bcn-news.css, where the pictures are ordinary
   press photographs rather than banners. */
.entry__frame {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 2px;
    background: var(--rule);
    margin-bottom: 1.15rem;
}

.entry__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(.2,.7,.3,1);
}

.entry:hover .entry__frame img { transform: scale(1.04); }

/* The two names, on one line, with a rule running between them — the way a
   guide sets an index entry. */
.entry__names {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rule-2);
}

.entry__name {
    font-family: var(--display);
    font-size: clamp(1.25rem, 2.1vw, 1.625rem);
    font-weight: var(--display-weight);
    letter-spacing: -0.015em;
    transition: color 0.15s ease-out;
}

.entry:hover .entry__name { color: var(--blue); }

.entry__leader {
    flex: 1 1 auto;
    border-bottom: 1px dotted var(--rule-2);
    transform: translateY(-0.25em);
    min-width: 1.5rem;
}

.bird__local {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(1rem, 1.7vw, 1.25rem);
    color: var(--accent);
    white-space: nowrap;
}

.bird__taxon {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    margin: 0.6rem 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--ink-3);
}

.bird__binomial { font-style: italic; }

.bird__family {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.6875rem;
    align-self: center;
}

.entry__text {
    color: var(--ink-2);
    margin: 0 0 0.85rem;
    font-size: 0.9375rem;
}

.entry__more {
    margin-top: auto;
    padding-top: 0.35rem;
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.entry__more::after { content: "→"; transition: transform 0.15s ease-out; }
.entry:hover .entry__more::after { transform: translateX(3px); }

.listing__empty {
    padding: 3rem 0;
    color: var(--ink-3);
    font-size: 1.125rem;
}

/* --- Pagination ----------------------------------------------------------- */

.pagging {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule);
}

/* Saying which slice is on screen is what stops a short last page reading as
   a mistake. */
.pagging__count {
    text-align: center;
    margin: 0 0 1.1rem;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.pagging .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagging .page-link {
    display: inline-block;
    font-family: var(--text);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--blue);
    background: transparent;
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    padding: 0.5em 0.95em;
    transition: background-color 0.15s ease-out, color 0.15s ease-out,
                border-color 0.15s ease-out;
}

.pagging .page-link:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

.pagging .page-item.active .page-link {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

/* CodeIgniter puts its <a> inside the styled span, so the link has to fill it
   or only the text itself would be clickable. */
.pagging .page-link a,
.pagging .page-link__a {
    display: block;
    margin: -0.5em -0.95em;
    padding: 0.5em 0.95em;
    color: inherit;
    text-decoration: none;
}




/* ==========================================================================
   PROSE
   Body copy that comes out of the editor. The stored HTML carries inline
   styles — colour, Helvetica, 14px, and stray &nbsp; — pasted in from Word or
   set by the WYSIWYG. Inline styles beat any normal rule, so overriding them
   is one of the few places !important is the correct tool rather than a
   shortcut.
   ========================================================================== */

/* One measure for every block in a body column, so an image, a paragraph and
   a gallery all share the same left and right edges. Text alone would read
   fine at any width; it is the mismatch between them that shows. */
:root { --measure: 68ch; }

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.15rem; }
.prose h2, .prose h3 { margin: 2rem 0 0.75rem; font-size: 1.375rem; }
.prose img { border-radius: 2px; margin: 1.5rem 0; }

/* Neutralise what the editor pasted in, so stored content picks up the site's
   own type instead of Helvetica 14px grey. */
.prose [style],
.prose [style] * {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    background: none !important;
    line-height: inherit !important;
}

/* Word sets text-align:justify on paste — 22 news stories and 19 event
   notices carry it. A browser justifies by stretching the word spaces and
   does not hyphenate, so a narrow measure opens rivers of white down the
   middle of the paragraph. Only the justify case is overridden; a centred
   caption set deliberately in the editor still centres. */
.prose [style*="text-align:justify"],
.prose [style*="text-align: justify"] { text-align: left !important; }

.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent); }

.prose ul, .prose ol { margin: 0 0 1.15rem; padding-left: 1.4rem; }
.prose li { margin-bottom: 0.4rem; }

.prose strong, .prose b { font-weight: 700; }

.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.prose th, .prose td { border: 1px solid var(--rule); padding: 0.6rem 0.8rem; text-align: left; }



/* ==========================================================================
   DETAIL NAVIGATION
   The way out of a detail page. It used to be a single small text link that
   was defined only in the species stylesheet, so on project pages it rendered
   with no styling at all — no colour, no arrow, nothing to say it was a link.

   It now sits in a bordered bar with the neighbouring records either side, so
   a reader can move through the list without going back to it first.
   ========================================================================== */

.detail-nav {
    max-width: var(--measure);
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    align-items: stretch;
}

@media (min-width: 620px) {
    .detail-nav { grid-template-columns: 1fr auto 1fr; align-items: center; }
}

.detail-nav__step {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    min-width: 0;
    transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}

.detail-nav__step:hover { border-color: var(--blue); background: var(--paper-hi); }

.detail-nav__step--next { text-align: right; }

.detail-nav__dir {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.detail-nav__name {
    font-family: var(--display);
    font-size: 0.9375rem;
    line-height: 1.3;
    color: var(--ink);
    /* Neighbouring names can be very long; one line each keeps the bar even. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.detail-nav__step:hover .detail-nav__name { color: var(--blue); }

/* The way back to the list, given the weight of a button so it reads as the
   primary action of the bar. */
.back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    align-self: stretch;
    padding: 0.85em 1.6em;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--blue);
    border: 1px solid var(--blue);
    border-radius: 2px;
    white-space: nowrap;
    transition: background-color 0.18s ease-out, color 0.18s ease-out;
}

.back-link::before { content: "\2190"; }

.back-link:hover { background: transparent; color: var(--blue); }


/* ==========================================================================
   DETAIL FIGURE
   The photograph on a detail page. Shared, because both species and projects
   need it and it was previously only in the projects stylesheet.

   Not a cropped full-bleed hero. The species photographs are 1600x600 and the
   bird is often near one edge, so a hero that crops to a fixed height cuts the
   subject in half. Shown whole, at the body measure, the picture is complete
   and its edges line up with the text below it.
   ========================================================================== */

/* The project photograph. Not full-bleed: images run as small as 470x300 and
   several are composite banners, so blowing one across the viewport would show
   its compression and crop the partner logos in half. It shares the body
   measure so its edges line up with the text beneath. */
.detail__figure {
    max-width: var(--measure);
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    border-radius: 2px;
    overflow: hidden;
    background: var(--rule);
}

.detail__figure img { width: 100%; height: auto; }