/*
Theme Name: Rajasthan Biodiversity
Theme URI: https://rajasthanbiodiversity.org
Author: Tiger Watch
Description: Editorial theme for the Rajasthan Biodiversity Network. Bilingual Hindi/English, hierarchical subject categories, species tags, scrollable checklists, and a one-time migration off Divi.
Version: 1.1.9
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: rajbio
*/

:root {
  --sand: #F5F0E8;
  --sand-dark: #EDE6D8;
  --earth: #3B2F20;
  --earth-light: #5C4A36;
  --forest: #2D4A3E;
  --forest-light: #3D6B5A;
  --forest-pale: #E8F0EC;
  --amber: #C4873B;
  --amber-light: #E8A94D;
  --rust: #A0522D;
  --cream: #FDFBF7;
  --stone: #8A7E6E;
  --stone-light: #B0A697;
  --text: #2A2218;
  --text-secondary: #5C5346;
  --border: #D9D2C6;
  --white: #FFFFFF;
  --shadow-sm: 0 1px 3px rgba(59,47,32,0.08);
  --shadow-md: 0 4px 16px rgba(59,47,32,0.1);
  --shadow-lg: 0 8px 32px rgba(59,47,32,0.12);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Source Sans 3', 'Noto Sans Devanagari', system-ui, sans-serif;
  --deva: 'Noto Sans Devanagari', 'Source Sans 3', sans-serif;
  --max-width: 1280px;
  --nav-height: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: color 0.25s; }
a:hover { color: var(--amber); }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 2px; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 1rem; top: 1rem; z-index: 999; background: var(--forest); color: #fff;
  padding: 0.6rem 1rem; border-radius: var(--radius-md);
}

/* Hindi content gets the Devanagari face at a slightly larger size for even colour */
:lang(hi), .lang-hi, .lang-hi p, .lang-hi h1, .lang-hi h2, .lang-hi h3 { font-family: var(--deva); }
.lang-hi .entry-content p { font-size: 1.09rem; line-height: 1.9; }

/* ===== NAVIGATION ===== */
.nav-wrapper {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253,251,247,0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s;
}
.nav-wrapper.scrolled { box-shadow: var(--shadow-md); }
/* The WordPress toolbar is fixed over the top of the page for logged-in users,
   so a sticky header at top:0 spends its life half-hidden behind it. Below
   600px the toolbar scrolls away with the page and no offset is wanted. */
body.admin-bar .nav-wrapper { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .nav-wrapper { top: 46px; } }
@media screen and (max-width: 600px) { body.admin-bar .nav-wrapper { top: 0; } }
.nav {
  max-width: var(--max-width); margin: 0 auto; padding: 0 2rem;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-height); gap: 1rem;
}
.nav-logo { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
/* The logo is a stacked lockup — wordmark over three panels over a strapline —
   about 1.4:1. At any height a 72px bar allows, its own lettering is unreadable,
   so the header shows the three-panel mark cropped out of it and lets the
   typographic wordmark beside it carry the name. The full logo appears at
   proper size on the About page. */
.nav-logo img { height: 46px; width: 96px; object-fit: cover; object-position: center 50%; border-radius: var(--radius-sm); }
.nav-logo-text { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--forest); line-height: 1.2; }
.nav-logo-text span {
  display: block; font-size: 0.7rem; font-family: var(--sans); font-weight: 400;
  color: var(--stone); letter-spacing: 0.12em;
}

.nav-links { display: flex; align-items: center; list-style: none; }
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: block; padding: 0.5rem 0.8rem; font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.03em; color: var(--earth-light);
}
.nav-links > li > a:hover, .nav-links > li.current-menu-item > a { color: var(--forest); }
.nav-links .sub-menu {
  display: none; position: absolute; top: 100%; left: 0; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  min-width: 220px; padding: 0.5rem 0; list-style: none; z-index: 200;
}
.nav-links li:hover > .sub-menu, .nav-links li:focus-within > .sub-menu { display: block; }
.sub-menu a { display: block; padding: 0.55rem 1.2rem; font-size: 0.8rem; color: var(--text-secondary); }
.sub-menu a:hover { background: var(--sand); color: var(--forest); }
.menu-item-has-children > a::after { content: ' \25BE'; font-size: 0.75em; opacity: 0.6; }

.nav-search {
  display: flex; align-items: center; gap: 0.5rem; background: var(--sand);
  border-radius: 100px; padding: 0.4rem 0.8rem; border: 1px solid transparent;
  transition: border-color 0.25s;
}
.nav-search:focus-within { border-color: var(--forest-light); }
.nav-search input {
  border: none; background: transparent; font-family: var(--sans);
  font-size: 0.82rem; width: 140px; outline: none; color: var(--text);
}
.nav-search button { background: none; border: none; padding: 0; cursor: pointer; color: var(--stone); display: flex; }

.mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; color: var(--earth); }
.mobile-menu { display: none; }
.mobile-menu.open { display: block; border-top: 1px solid var(--border); background: var(--cream); }
.mobile-menu ul { list-style: none; padding: 0.5rem 2rem 1.5rem; }
.mobile-menu .sub-menu { display: block; position: static; border: none; box-shadow: none; padding: 0 0 0 1rem; min-width: 0; background: none; }
.mobile-menu a { display: block; padding: 0.55rem 0; font-size: 0.9rem; color: var(--earth-light); border-bottom: 1px solid var(--border); }

/* ===== HERO ===== */
.hero {
  position: relative; min-height: 85vh; display: flex; align-items: end;
  overflow: hidden; background: var(--earth);
}
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.5); }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(42,34,24,0.95) 0%, rgba(42,34,24,0.4) 50%, rgba(42,34,24,0.15) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; padding: 4rem 2rem 4.5rem; width: 100%; }
.hero-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; color: var(--amber); margin-bottom: 1rem; }
.hero-title {
  font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 700;
  color: var(--white); line-height: 1.15; max-width: 720px; margin-bottom: 1.2rem;
}
.hero-title:lang(hi), .hero-title.lang-hi { font-family: var(--deva); font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.35; }
.hero-excerpt { font-size: 1.05rem; color: rgba(255,255,255,0.78); max-width: 560px; margin-bottom: 2rem; }
.hero-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hero-author { font-size: 0.82rem; color: rgba(255,255,255,0.6); }
.hero-author strong { color: var(--white); font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.6rem;
  background: var(--amber); color: var(--white); font-weight: 600; font-size: 0.85rem;
  border-radius: 100px; transition: background 0.3s, box-shadow 0.3s; letter-spacing: 0.02em;
  border: none; cursor: pointer; font-family: var(--sans);
}
.btn:hover { background: var(--amber-light); color: var(--white); box-shadow: 0 4px 20px rgba(196,135,59,0.35); }
.btn-forest { background: var(--forest); }
.btn-forest:hover { background: var(--forest-light); box-shadow: 0 4px 20px rgba(45,74,62,0.3); }

/* ===== SECTIONS ===== */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; }
.section { padding: 5rem 0; }
.section-alt { background: var(--sand); }
.section-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 2.5rem; gap: 1rem; flex-wrap: wrap;
}
.section-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; color: var(--amber); margin-bottom: 0.5rem; }
.section-title { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; color: var(--earth); line-height: 1.2; }
.section-link {
  font-size: 0.82rem; font-weight: 600; color: var(--forest);
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0;
  border-bottom: 1.5px solid transparent; transition: border-color 0.25s;
}
.section-link:hover { border-bottom-color: var(--forest); color: var(--forest); }

/* ===== CARD GRIDS ===== */
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.featured-grid .card.is-lead { grid-column: 1 / 3; grid-row: 1 / 3; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.annals-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

.card {
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); display: flex; flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.35s, border-color 0.35s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card-img { position: relative; overflow: hidden; aspect-ratio: 16/10; background: var(--sand-dark); }
.card.is-lead .card-img { aspect-ratio: auto; flex: 1; min-height: 280px; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
.card:hover .card-img img { transform: scale(1.05); }
.card-tag {
  position: absolute; top: 0.75rem; left: 0.75rem; background: rgba(45,74,62,0.9);
  color: var(--white); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em;
  padding: 0.3rem 0.7rem; border-radius: 100px; backdrop-filter: blur(8px);
}
.card-body { padding: 1.25rem 1.5rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.card-category { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em; color: var(--amber); margin-bottom: 0.5rem; }
.card-title { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; line-height: 1.35; color: var(--earth); margin-bottom: 0.6rem; }
.card-title.lang-hi { font-family: var(--deva); font-size: 1.03rem; line-height: 1.55; font-weight: 600; }
.card.is-lead .card-title { font-size: 1.6rem; }
.card.is-lead .card-title.lang-hi { font-size: 1.3rem; }
.card-excerpt { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.65; flex: 1; }
.card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--border); gap: 0.5rem;
}
.card-author { font-size: 0.75rem; color: var(--stone); }
.card-author strong { color: var(--text); font-weight: 600; }
.card-date { font-size: 0.72rem; color: var(--stone-light); white-space: nowrap; }
.annal-card .card-img { aspect-ratio: 4/3; }
.annal-card .card-body { padding: 1rem 1.25rem 1.25rem; }
.annal-card .card-title { font-size: 1rem; }
.annal-card .card-title.lang-hi { font-size: 0.92rem; }

/* ===== PHOTO STORIES ===== */
.stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.story-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/4; background: var(--earth); display: block; }
.story-card img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; transition: transform 0.6s, opacity 0.4s; }
.story-card:hover img { transform: scale(1.08); opacity: 0.55; }
.story-card-overlay {
  position: absolute; inset: 0; padding: 1.5rem;
  background: linear-gradient(to top, rgba(42,34,24,0.9) 0%, transparent 60%);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.story-card-title { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--white); line-height: 1.3; margin-bottom: 0.3rem; }
.story-card-title.lang-hi { font-family: var(--deva); font-size: 1rem; line-height: 1.5; }
.story-card-credit { font-size: 0.72rem; color: rgba(255,255,255,0.6); }

/* ===== CHECKLIST CARDS =====
   Six rectangular cards, each carrying a photograph taken from the checklist's
   own page — its featured image, or the first picture in its text. An emoji
   stands in only if a checklist has no picture at all. */
.checklist-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.checklist-card {
  display: block; background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border); overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.checklist-card:hover { border-color: transparent; transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.checklist-card-img {
  display: block; position: relative; aspect-ratio: 16/10;
  background: var(--sand-dark); overflow: hidden;
}
.checklist-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
.checklist-card:hover .checklist-card-img img { transform: scale(1.05); }
.checklist-emoji {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 2.4rem; background: var(--forest-pale);
}
.checklist-card-body { display: block; padding: 1rem 1.35rem 1.2rem; }
.checklist-name { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--earth); line-height: 1.25; }
.checklist-sub { display: block; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--stone); margin-top: 0.2rem; }

/* ===== PHOTO OF THE WEEK ===== */
.potw { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center; }
.potw-image { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; background: var(--sand-dark); }
.potw-image img { width: 100%; height: 100%; object-fit: cover; }
.potw-badge {
  position: absolute; bottom: 1rem; right: 1rem; background: rgba(45,74,62,0.92);
  color: var(--white); padding: 0.5rem 1rem; border-radius: var(--radius-md);
  backdrop-filter: blur(8px); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
}
.potw-species { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 700; color: var(--earth); line-height: 1.2; margin-bottom: 0.5rem; }
.potw-species.lang-hi { font-family: var(--deva); font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
.potw-credit { font-size: 0.9rem; color: var(--stone); margin-bottom: 1.5rem; }
.potw-credit strong { color: var(--text); }

/* ===== ARCHIVE / PAGE HEADERS ===== */
.page-head { background: var(--sand); padding: 3rem 0 2.5rem; border-bottom: 1px solid var(--border); }
.page-head .section-title { margin-bottom: 0.5rem; }
.page-head p { color: var(--text-secondary); max-width: 640px; }

/* ===== ARTICLE ===== */
.article-page { padding: 3rem 0 4rem; }
/* 1.1.9 — text and pictures share one width. The column used to be 780px with
   pictures pulled 3rem out on each side, so every image ran 96px wider than
   the text beside it (and overflowed the screen between 769 and 875px).
   The column is now 876px and pictures sit flush with the text. */
.article-container { max-width: 876px; margin: 0 auto; padding: 0 2rem; }
.article-breadcrumb { font-size: 0.74rem; color: var(--stone); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.article-breadcrumb a { color: var(--forest); }
.article-breadcrumb span { opacity: 0.5; }
.article-hero-img {
  width: 100%; margin-left: 0; border-radius: var(--radius-lg);
  overflow: hidden; aspect-ratio: 21/9; margin-bottom: 2.5rem; box-shadow: var(--shadow-md);
}
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.article-meta-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.article-meta-top .card-category { margin-bottom: 0; }
.article-meta-top .card-date { font-size: 0.75rem; color: var(--stone); }
.article-page-title { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--earth); line-height: 1.2; margin-bottom: 1rem; }
.article-page-title.lang-hi { font-family: var(--deva); font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.45; font-weight: 600; }
.article-author-bar {
  display: flex; align-items: center; gap: 0.75rem; padding: 1rem 0; margin-bottom: 2rem;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.avatar-initials {
  width: 40px; height: 40px; border-radius: 50%; background: var(--forest-pale);
  display: flex; align-items: center; justify-content: center; font-family: var(--serif);
  font-weight: 700; font-size: 1rem; color: var(--forest); flex-shrink: 0;
}
.article-author-info .name { font-weight: 600; font-size: 0.88rem; color: var(--earth); }
.article-author-info .role { font-size: 0.75rem; color: var(--stone); }

.entry-content p { margin-bottom: 1.4rem; font-size: 1.05rem; color: var(--text); }
/* wpautop opens an empty paragraph after a leading inline element inside a
   block — an image or a link at the start of a div. Harmless in flowing text,
   but inside a grid an empty <p> takes a cell and pushes the real content onto
   the next row. */
.entry-content p:empty { display: none; }
.entry-content a { color: var(--forest); border-bottom: 1px solid rgba(45,74,62,0.25); }
.entry-content a:hover { color: var(--amber); border-bottom-color: var(--amber); }
.entry-content h2 { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--earth); margin: 2.5rem 0 1rem; line-height: 1.3; }
.entry-content h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--earth); margin: 2rem 0 0.75rem; }
.lang-hi .entry-content h2, .lang-hi .entry-content h3 { font-family: var(--deva); font-size: 1.3rem; line-height: 1.5; }
.entry-content ul, .entry-content ol { margin: 0 0 1.4rem 1.4rem; }
.entry-content li { margin-bottom: 0.5rem; }
.entry-content blockquote {
  border-left: 3px solid var(--amber); margin: 2rem 0; padding: 1rem 0 1rem 1.5rem;
  font-family: var(--serif); font-size: 1.2rem; font-style: italic;
  color: var(--earth-light); line-height: 1.6;
}
.lang-hi .entry-content blockquote { font-family: var(--deva); font-style: normal; font-size: 1.08rem; line-height: 1.8; }
/* A classic-editor [caption] carries the original image's pixel width as an
   inline style — style="width: 1024px", and up to 1800px on some articles.
   That beat the layout: the figure ran past the page, body{overflow-x:hidden}
   clipped its right-hand side, and the caption sat off-centre underneath.
   672 captions across 150 of the 276 articles. Only width:auto !important
   overrides an inline style. */
.entry-content figure, .entry-content .wp-caption {
  margin: 2rem 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  width: auto !important; max-width: 100%;
}
.entry-content figure img, .entry-content .wp-caption img { width: 100%; }
.entry-content figcaption, .entry-content .wp-caption-text {
  padding: 0.75rem 1rem; font-size: 0.8rem; color: var(--stone);
  background: var(--sand); font-style: italic; margin: 0;
}
.entry-content img { border-radius: var(--radius-md); }
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.9rem; }
.entry-content th, .entry-content td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; }
.entry-content th { background: var(--sand); font-weight: 600; }
.alignleft { float: left; margin: 0.4rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.4rem 0 1rem 1.5rem; }
.aligncenter { margin-left: auto; margin-right: auto; }

/* ===== ABOUT PAGE =====
   Every rule is scoped to .entry-content, because the article styles above are
   themselves scoped there and would otherwise win on specificity. */
.entry-content .about-lead { font-size: 1.12rem; line-height: 1.85; color: var(--text-secondary); }

.entry-content .about-mission {
  margin: 2.5rem 0; padding: 1.9rem 2.2rem; background: var(--forest-pale);
  border-left: 4px solid var(--forest); border-radius: var(--radius-md);
  font-family: var(--serif); font-size: 1.4rem; line-height: 1.45;
  color: var(--forest); font-style: italic;
}
.lang-hi .entry-content .about-mission { font-family: var(--deva); font-style: normal; font-size: 1.15rem; }

.entry-content .about-pillars { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); margin: 1.75rem 0 2.5rem; }
.entry-content .about-pillar { background: var(--sand); border-radius: var(--radius-md); padding: 1.35rem 1.4rem; }
.entry-content .about-pillar h3 { margin: 0 0 0.5rem; font-family: var(--serif); font-size: 1.12rem; color: var(--forest); }
.entry-content .about-pillar p { margin: 0; font-size: 0.94rem; color: var(--text-secondary); }

.entry-content .team-member {
  display: grid; grid-template-columns: 104px 1fr; gap: 1.6rem; align-items: start;
  padding: 1.7rem 0; border-top: 1px solid var(--border);
}
.entry-content .team-member:first-of-type { border-top: none; padding-top: 0.5rem; }
.entry-content .team-photo {
  width: 104px; height: 104px; border-radius: 50%; object-fit: cover; object-position: center top;
  border: 3px solid var(--white); box-shadow: var(--shadow-md); background: var(--sand);
}
.entry-content .team-name { margin: 0 0 0.15rem; font-family: var(--serif); font-size: 1.2rem; color: var(--earth); }
.entry-content .team-role {
  margin: 0 0 0.65rem; font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--amber); font-weight: 600;
}
.entry-content .team-member p { margin: 0; font-size: 0.97rem; }

.entry-content .about-agency {
  display: grid; grid-template-columns: 108px 1fr; gap: 1.75rem; align-items: center;
  background: var(--sand); border-radius: var(--radius-lg); padding: 1.75rem; margin: 1.5rem 0 2rem;
}
.entry-content .about-agency img { width: 108px; height: auto; border-radius: 0; }
.entry-content .about-agency p { margin: 0 0 0.9rem; font-size: 0.97rem; }
.entry-content .about-agency p:last-child { margin-bottom: 0; }

.entry-content .about-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 1.5rem 0 0; }
.entry-content .about-contact > div { background: var(--sand); border-radius: var(--radius-md); padding: 1.1rem 1.25rem; }
.entry-content .about-contact h3 {
  margin: 0 0 0.45rem; font-family: var(--sans); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); font-weight: 600;
}
.entry-content .about-contact p { margin: 0; font-size: 0.94rem; line-height: 1.65; }
.entry-content .about-contact a { border-bottom: none; }
.entry-content .about-contact a:hover { border-bottom: 1px solid var(--amber); }

.entry-content .about-logo { margin: 0 0 2rem; text-align: center; }
.entry-content .about-logo img { width: 320px; max-width: 100%; margin: 0 auto; border-radius: 0; }

/* ===== CONTACT FORM =====
   WPForms' modern renderer drives its whole appearance from custom properties,
   so the theme sets those rather than fighting the plugin's stylesheet with
   !important. Everything here resolves to the same tokens the rest of the
   site uses, and it survives a plugin update. */
.entry-content .rajbio-form {
  background: var(--sand); border-radius: var(--radius-lg);
  padding: 1.75rem 1.9rem 1.9rem; margin: 1.5rem 0 2.5rem;
}
.entry-content .wpforms-container {
  --wpforms-field-border-radius: var(--radius-md);
  --wpforms-field-background-color: var(--white);
  --wpforms-field-border-color: var(--border);
  --wpforms-field-text-color: var(--text);
  --wpforms-label-color: var(--earth);
  --wpforms-label-sublabel-color: var(--stone);
  --wpforms-label-error-color: var(--rust);
  --wpforms-button-border-radius: 100px;
  --wpforms-button-background-color: var(--forest);
  --wpforms-button-text-color: var(--white);
  --wpforms-field-size-input-height: 46px;
  --wpforms-field-size-padding-h: 15px;
  --wpforms-field-size-font-size: 15px;
  --wpforms-field-size-input-spacing: 18px;
  --wpforms-label-size-font-size: 14px;
  --wpforms-button-size-font-size: 15px;
  --wpforms-button-size-height: 46px;
  --wpforms-button-size-padding-h: 28px;
  margin: 0;
}
.entry-content .wpforms-container .wpforms-field-label { font-weight: 600; letter-spacing: 0.01em; }
.entry-content .wpforms-container input:focus,
.entry-content .wpforms-container select:focus,
.entry-content .wpforms-container textarea:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(45,74,62,0.12); }
.entry-content .wpforms-container textarea { min-height: 150px; }
.entry-content .wpforms-container button[type="submit"] { font-weight: 600; transition: background 0.3s, box-shadow 0.3s; }
.entry-content .wpforms-container button[type="submit"]:hover { background: var(--forest-light); box-shadow: var(--shadow-md); }
.entry-content .wpforms-confirmation-container-full {
  background: var(--forest-pale); border: none; border-left: 4px solid var(--forest);
  border-radius: var(--radius-md); padding: 1.4rem 1.6rem; color: var(--forest);
}
.entry-content .wpforms-confirmation-container-full p { margin-bottom: 0.7rem; color: inherit; }
.entry-content .wpforms-confirmation-container-full p:last-child { margin-bottom: 0; }

.entry-tags { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.entry-tags a {
  font-size: 0.75rem; padding: 0.3rem 0.8rem; background: var(--sand);
  border: 1px solid var(--border); border-radius: 100px; color: var(--text-secondary);
}
.entry-tags a:hover { background: var(--forest-pale); color: var(--forest); border-color: var(--forest-pale); }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; }
.post-nav a { padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); }
.post-nav a:hover { border-color: var(--forest); }
.post-nav .label { font-size: 0.68rem; letter-spacing: 0.13em; color: var(--amber); font-weight: 600; margin-bottom: 0.35rem; }
.post-nav .t { font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--earth); line-height: 1.35; }
.post-nav .t.lang-hi { font-family: var(--deva); font-size: 0.9rem; line-height: 1.55; }
.post-nav .next { text-align: right; }

/* ===== UNIFORM COMMENT SECTION ===== */
.comments-section { margin-top: 3rem; padding-top: 2.5rem; border-top: 2px solid var(--border); }
.comments-title { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--earth); margin-bottom: 0.3rem; }
.comments-count { font-size: 0.82rem; color: var(--stone); margin-bottom: 2rem; }

.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list ol.children { list-style: none; margin: 0 0 0 3.25rem; padding-left: 1rem; border-left: 2px solid var(--border); }
.comment-list > li { border-bottom: 1px solid var(--border); }
.comment-list > li:last-child { border-bottom: none; }
.comment-body { display: flex; gap: 1rem; padding: 1.25rem 0; }
.comment-content { flex: 1; min-width: 0; }
.comment-header { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.35rem; flex-wrap: wrap; }
.comment-name { font-weight: 600; font-size: 0.88rem; color: var(--earth); }
.comment-name a { color: inherit; }
.comment-badge {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; color: var(--forest);
  background: var(--forest-pale); padding: 0.15rem 0.5rem; border-radius: 100px;
}
.comment-date { font-size: 0.72rem; color: var(--stone-light); }
.comment-text { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; }
.comment-text p { margin-bottom: 0.75rem; }
.comment-text p:last-child { margin-bottom: 0; }
.comment-text:lang(hi), .comment-text.lang-hi { font-family: var(--deva); }
.comment-actions { margin-top: 0.4rem; display: flex; gap: 1rem; }
.comment-actions a { font-size: 0.75rem; font-weight: 600; color: var(--forest); }
.comment-actions a:hover { color: var(--amber); }
.comment-awaiting-moderation { font-size: 0.75rem; color: var(--rust); font-style: italic; display: block; margin-top: 0.4rem; }
.comment-pagination { margin: 1.5rem 0; font-size: 0.82rem; }

/* Comment form — one set of rules, applied identically on every post */
.comment-respond { margin-top: 2.5rem; padding: 2rem; background: var(--sand); border-radius: var(--radius-lg); }
.children .comment-respond { margin-top: 1.5rem; }
.comment-reply-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--earth); margin-bottom: 1.25rem; }
.comment-reply-title small { font-size: 0.72rem; font-family: var(--sans); font-weight: 400; margin-left: 0.75rem; }
.comment-reply-title small a { color: var(--rust); }
.comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.comment-form p { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.comment-form .comment-form-comment,
.comment-form .comment-form-cookies-consent,
.comment-form .form-submit,
.comment-form .comment-notes,
.comment-form .comment-form-url { grid-column: 1 / -1; }
.comment-form label { font-size: 0.75rem; font-weight: 600; color: var(--earth-light); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--white); font-family: var(--sans); font-size: 0.88rem; color: var(--text);
  outline: none; transition: border-color 0.25s; width: 100%;
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--forest); }
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form .comment-notes { font-size: 0.78rem; color: var(--stone); }
.comment-form .comment-form-cookies-consent { flex-direction: row; align-items: center; gap: 0.5rem; }
.comment-form .comment-form-cookies-consent label { font-weight: 400; font-size: 0.78rem; color: var(--text-secondary); }
.comment-form .required { color: var(--rust); }
.comment-form input[type="submit"] {
  display: inline-flex; padding: 0.7rem 1.8rem; background: var(--forest); color: var(--white);
  border: none; border-radius: 100px; font-family: var(--sans); font-size: 0.85rem;
  font-weight: 600; cursor: pointer; transition: background 0.3s, box-shadow 0.3s;
  width: auto; justify-self: start;
}
.comment-form input[type="submit"]:hover { background: var(--forest-light); box-shadow: var(--shadow-md); }
.no-comments { font-size: 0.85rem; color: var(--stone); font-style: italic; }

/* ===== PAGINATION ===== */
.pagination { display: flex; justify-content: center; gap: 0.4rem; margin-top: 3rem; flex-wrap: wrap; }
.pagination .page-numbers {
  padding: 0.5rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: 0.85rem; color: var(--text-secondary); background: var(--white);
}
.pagination .page-numbers:hover { border-color: var(--forest); color: var(--forest); }
.pagination .page-numbers.current { background: var(--forest); color: var(--white); border-color: var(--forest); }

/* ===== FOOTER ===== */
.footer { background: var(--earth); color: rgba(255,255,255,0.82); padding: 4rem 0 2rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 3rem; margin-bottom: 3rem; }
.footer-brand .nav-logo-text { color: var(--white); font-size: 1.3rem; }
.footer-brand .nav-logo-text span { color: rgba(255,255,255,0.6); }
.footer-desc { font-size: 0.88rem; line-height: 1.7; margin-top: 1rem; max-width: 340px; }
.footer-social { display: flex; gap: 0.7rem; margin-top: 1.5rem; flex-wrap: wrap; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center; color: var(--white);
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.footer-social a:hover { background: var(--amber); color: var(--white); transform: translateY(-2px); }
.footer-social svg { width: 17px; height: 17px; display: block; }
.footer-heading { font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 1.2rem; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-links a { font-size: 0.85rem; color: rgba(255,255,255,0.78); }
.footer-links a:hover { color: var(--amber-light); }
.footer-partners { display: flex; flex-direction: column; gap: 1.1rem; }
.footer-partner-label { font-size: 0.64rem; letter-spacing: 0.13em; color: rgba(255,255,255,0.6); margin-bottom: 0.45rem; }
/* Both partner marks are full-colour artwork on white — the Tiger Watch badge
   is a gold-on-black roundel — so they sit on a white chip rather than being
   flattened to a silhouette. */
.footer-partner-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); border-radius: var(--radius-md); padding: 0.5rem 0.7rem;
  transition: transform 0.3s, box-shadow 0.3s;
}
.footer-partner-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.footer-partner-logo { height: 40px; width: auto; display: block; }
.footer-bottom {
  padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.75rem; color: rgba(255,255,255,0.35); gap: 1rem; flex-wrap: wrap;
}

/* ===== RESPONSIVE ===== */
/* The primary menu carries eight top-level items since the re-categorisation.
   Between the desktop layout and the 768px hamburger the bar no longer fitted,
   and the search box was pushed off the right-hand edge of the page. Tighten
   first, then fall back to the hamburger while there is still room to spare —
   the mobile menu carries its own search box, so nothing is lost. */
@media (max-width: 1024px) {
  .nav { gap: 0.5rem; }
  .nav-links > li > a { padding: 0.5rem 0.5rem; font-size: 0.78rem; }
  .nav-search { padding: 0.4rem 0.7rem; }
  .nav-search input { width: 96px; }
  .featured-grid { grid-template-columns: 1fr 1fr; }
  /* The lead becomes an ordinary cell here. Spanning the full width left the
     remaining five cards as 2 + 2 + 1 and an empty cell at the end of the
     block; as a normal cell the six tile exactly. */
  .featured-grid .card.is-lead { grid-column: auto; grid-row: auto; }
  .post-grid { grid-template-columns: 1fr 1fr; }
  .annals-strip { grid-template-columns: repeat(2, 1fr); }
  .checklist-bar { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .potw { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 900px) {
  .nav-links, .nav-search { display: none; }
  .mobile-toggle { display: block; }
}
@media (max-width: 768px) {
  .nav { padding: 0 1.25rem; }
  .hero { min-height: 68vh; }
  .hero-content { padding: 3rem 1.25rem 3rem; }
  .container { padding: 0 1.25rem; }
  .featured-grid, .post-grid { grid-template-columns: 1fr; }
  .stories-grid { grid-template-columns: 1fr 1fr; }
  .annals-strip { grid-template-columns: 1fr; }
  .checklist-bar { grid-template-columns: repeat(2, 1fr); }
  .comment-form { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .article-container { padding: 0 1.25rem; }
  .article-hero-img, .entry-content figure, .entry-content .wp-caption { width: auto !important; max-width: 100%; margin-left: 0; margin-right: 0; }
  .section { padding: 3rem 0; }
  .post-nav { grid-template-columns: 1fr; }
  .comment-list ol.children { margin-left: 1rem; }
  .alignleft, .alignright { float: none; margin: 1rem auto; }
  .entry-content .about-pillars,
  .entry-content .about-contact { grid-template-columns: 1fr; }
  .entry-content .about-agency { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .entry-content .about-mission { padding: 1.4rem 1.5rem; font-size: 1.2rem; }
}
@media (max-width: 560px) {
  .entry-content .team-member { grid-template-columns: 72px 1fr; gap: 1.1rem; }
  .entry-content .team-photo { width: 72px; height: 72px; border-width: 2px; }
}
@media (max-width: 480px) {
  .stories-grid { grid-template-columns: 1fr; }
  .checklist-bar { grid-template-columns: 1fr 1fr; }
}


/* =========================================================================
   1.1.0 additions
   ====================================================================== */

/* ----- Wide tables: the species checklists -----------------------------
   The Birds Checklist is 677 rows by nine columns. Wrapped by
   rajbio_wrap_tables() so it scrolls inside its own box instead of pushing
   the page sideways, with the header row pinned while you scroll. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 34rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  margin: 1.75rem 0;
}
.table-scroll:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.entry-content .table-scroll table { margin: 0; font-size: 0.88rem; }
.entry-content .table-scroll th {
  position: sticky; top: 0; z-index: 2;
  background: var(--sand-dark);
  text-align: left;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--earth);
  padding: 0.7rem 0.85rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.entry-content .table-scroll td {
  padding: 0.55rem 0.85rem;
  border-top: 1px solid var(--sand-dark);
  vertical-align: top;
}
.entry-content .table-scroll tbody tr:nth-child(even) { background: rgba(245,240,232,0.5); }
.entry-content .table-scroll tbody tr:hover { background: var(--forest-pale); }

/* ----- Sub-category navigation on archives ---------------------------- */
.archive-description { max-width: 62ch; margin-top: 0.85rem; color: var(--text-secondary); }
.archive-description p { margin-bottom: 0.8rem; }
.archive-description p:last-child { margin-bottom: 0; }

.term-children { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.term-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.88rem; font-weight: 600; color: var(--earth);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.term-chip:hover { border-color: var(--forest); background: var(--forest-pale); color: var(--forest); }
.term-chip-count {
  font-size: 0.74rem; font-weight: 700; color: var(--stone);
  background: var(--sand); border-radius: 999px; padding: 0.05rem 0.45rem;
}
.section-label a { color: var(--forest); font-weight: 600; }
.section-label a:hover { color: var(--amber); }

/* ----- Content recovered from the builder ----------------------------- */
.rajbio-btn-wrap { margin: 1.5rem 0; }
.rajbio-cite { font-size: 0.92rem; color: var(--text-secondary); font-style: italic; margin-top: -0.4rem; }
.rajbio-portrait { max-width: 180px; border-radius: var(--radius-md); overflow: hidden; }
.entry-content figure.wp-block-image { margin: 1.8rem 0; }
.entry-content figure.wp-block-image img { border-radius: var(--radius-md); }
.entry-content figcaption {
  font-size: 0.86rem; color: var(--text-secondary);
  text-align: center; margin-top: 0.6rem; line-height: 1.5;
}
.card-image-fallback { width: 100%; height: 100%; background: var(--sand-dark); }

/* ----- Widgets -------------------------------------------------------- */
.archive-sidebar { margin-top: 3rem; display: grid; gap: 1.5rem; }
.footer-widgets { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 2.5rem; }
.widget { font-size: 0.94rem; }
.widget-title {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 700;
  color: var(--earth); margin-bottom: 0.7rem;
}
.widget ul { list-style: none; }
.widget li { padding: 0.3rem 0; border-bottom: 1px solid var(--sand-dark); }
.widget li:last-child { border-bottom: none; }
.widget a:hover { color: var(--amber); }

/* ----- Species tags on an article ------------------------------------- */
.article-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.article-tags a {
  display: inline-block; padding: 0.32rem 0.8rem;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--forest-pale); color: var(--forest);
  font-size: 0.85rem; font-weight: 600;
}
.article-tags a:hover { background: var(--forest); color: var(--white); border-color: var(--forest); }

/* ----- Hindi reading measure ------------------------------------------
   Devanagari needs more leading than Latin, not less. */
.lang-hi .entry-content { font-family: var(--deva); }
.lang-hi .entry-content p,
.lang-hi .entry-content li { font-size: 1.09rem; line-height: 1.95; }
.lang-hi .entry-content h2,
.lang-hi .entry-content h3 { line-height: 1.5; }

@media print {
  .nav-wrapper, .site-footer, .comments-area, .article-nav, .btn { display: none !important; }
  .table-scroll { max-height: none; overflow: visible; border: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
}