/*
Theme Name: Pollinators Without Borders
Theme URI: https://pollinatorswithoutborders.org
Author: Pollinators Without Borders
Author URI: https://pollinatorswithoutborders.org
Description: A continental information hub for pollinator conservation across the Americas -- monarch butterflies, native bees, migratory hummingbirds, and nectar-feeding bats. Sister site to Monarchs Without Borders. Built for a simple, content-first nonprofit presence.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pollinators-without-borders
Tags: nonprofit, environment, one-column, two-columns, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. CSS VARIABLES / DESIGN TOKENS
   ========================================================================== */
:root{
  --pwb-green-dark:#1b4332;
  --pwb-green:#2d6a4f;
  --pwb-green-mid:#40916c;
  --pwb-green-light:#95d5b2;
  --pwb-orange:#e8871e;
  --pwb-orange-dark:#c96f14;
  --pwb-gold:#d4a017;
  --pwb-cream:#faf6ee;
  --pwb-cream-2:#f2ead8;
  --pwb-text:#2b2b25;
  --pwb-text-light:#5c5c52;
  --pwb-white:#ffffff;
  --pwb-border:#e2dcc8;
  --pwb-shadow: 0 10px 30px rgba(27,67,50,0.10);
  --pwb-radius: 14px;
  --pwb-font-head: 'Poppins', 'Segoe UI', sans-serif;
  --pwb-font-body: 'Nunito Sans', 'Segoe UI', Arial, sans-serif;
  --pwb-maxw: 1180px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--pwb-font-body);
  color:var(--pwb-text);
  background:var(--pwb-cream);
  line-height:1.7;
  font-size:17px;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--pwb-green); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--pwb-orange); }
h1,h2,h3,h4,h5{
  font-family:var(--pwb-font-head);
  color:var(--pwb-green-dark);
  line-height:1.25;
  margin:0 0 .6em;
  font-weight:700;
}
h1{ font-size:2.6rem; }
h2{ font-size:2rem; }
h3{ font-size:1.4rem; }
p{ margin:0 0 1.1em; }
ul{ margin:0 0 1.1em 1.2em; padding:0; }
li{ margin-bottom:.4em; }
.container{ max-width:var(--pwb-maxw); margin:0 auto; padding:0 24px; }
.screen-reader-text{ position:absolute; left:-9999px; }

/* Buttons */
.btn{
  display:inline-block;
  background:var(--pwb-orange);
  color:var(--pwb-white);
  padding:.85em 1.8em;
  border-radius:50px;
  font-weight:700;
  font-family:var(--pwb-font-head);
  font-size:.95rem;
  letter-spacing:.02em;
  box-shadow:var(--pwb-shadow);
  border:2px solid transparent;
}
.btn:hover{ background:var(--pwb-orange-dark); color:var(--pwb-white); }
.btn-outline{
  background:transparent;
  border:2px solid var(--pwb-white);
  color:var(--pwb-white);
}
.btn-outline:hover{ background:var(--pwb-white); color:var(--pwb-green-dark); }
.btn-green{ background:var(--pwb-green); }
.btn-green:hover{ background:var(--pwb-green-dark); }

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.site-header{
  background:var(--pwb-white);
  border-bottom:1px solid var(--pwb-border);
  position:sticky; top:0; z-index:500;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px; gap:20px;
}
.site-branding{ display:flex; align-items:center; gap:12px; }
.site-branding .logo-mark{ width:44px; height:44px; flex-shrink:0; }
.site-branding .site-title{
  font-family:var(--pwb-font-head); font-weight:800; font-size:1.25rem;
  color:var(--pwb-green-dark); margin:0; line-height:1.1;
}
.site-branding .site-title span{ color:var(--pwb-orange); }
.site-branding .site-tagline{ font-size:.78rem; color:var(--pwb-text-light); margin:0; }

#primary-menu{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:2px;
}
#primary-menu li{ margin:0; position:relative; }
#primary-menu a{
  display:block; padding:10px 14px; color:var(--pwb-green-dark);
  font-weight:600; font-size:.92rem; border-radius:8px;
}
#primary-menu a:hover, #primary-menu li.current-menu-item > a{
  background:var(--pwb-cream-2); color:var(--pwb-orange-dark);
}
.menu-toggle{ display:none; background:none; border:2px solid var(--pwb-green); color:var(--pwb-green-dark); border-radius:8px; padding:8px 12px; font-size:1.1rem; cursor:pointer; }

@media(max-width:900px){
  .menu-toggle{ display:block; }
  #primary-menu{ display:none; flex-direction:column; width:100%; padding-bottom:10px; }
  #primary-menu.is-open{ display:flex; }
  .site-header .container{ flex-wrap:wrap; }
}

/* ==========================================================================
   4. HERO
   ========================================================================== */
.hero{
  background:linear-gradient(160deg, var(--pwb-green-dark) 0%, var(--pwb-green) 55%, var(--pwb-green-mid) 100%);
  color:var(--pwb-white);
  padding:80px 0 90px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 85% 20%, rgba(232,135,30,.35), transparent 45%),
              radial-gradient(circle at 10% 90%, rgba(212,160,23,.25), transparent 40%);
  pointer-events:none;
}
.hero .container{ position:relative; z-index:2; max-width:820px; text-align:center; margin:0 auto; }
.hero h1{ color:var(--pwb-white); font-size:2.9rem; margin-bottom:.4em; }
.hero p.lead{ font-size:1.2rem; color:#eafff0; max-width:660px; margin:0 auto 1.6em; }
.hero .hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.page-hero{
  background:linear-gradient(160deg, var(--pwb-green-dark), var(--pwb-green));
  color:var(--pwb-white); padding:60px 0 64px; text-align:center;
}
.page-hero h1{ color:var(--pwb-white); margin-bottom:.3em; }
.page-hero p{ color:#eafff0; max-width:720px; margin:0 auto; font-size:1.1rem; }
.breadcrumb-line{ color:var(--pwb-green-light); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; margin-bottom:.6em; }

/* ==========================================================================
   5. SECTIONS / CARDS
   ========================================================================== */
.section{ padding:70px 0; }
.section-tight{ padding:44px 0; }
.section-alt{ background:var(--pwb-white); }
.section-cream2{ background:var(--pwb-cream-2); }
.section-head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.eyebrow{
  display:inline-block; color:var(--pwb-orange-dark); font-weight:800;
  text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; margin-bottom:.6em;
}

.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--pwb-white); border:1px solid var(--pwb-border); border-radius:var(--pwb-radius);
  padding:28px; box-shadow:var(--pwb-shadow);
}
.icon-card{ text-align:center; }
.icon-card .icon{
  width:60px; height:60px; margin:0 auto 16px; color:var(--pwb-orange);
}
.icon-card h3{ font-size:1.1rem; }
.icon-card p{ font-size:.95rem; color:var(--pwb-text-light); margin-bottom:0; }

.pillar-card{ display:flex; flex-direction:column; height:100%; }
.pillar-card .icon{ width:42px; height:42px; color:var(--pwb-green); margin-bottom:12px; }
.pillar-card p{ color:var(--pwb-text-light); flex-grow:1; }
.pillar-card a.more{ font-weight:700; color:var(--pwb-orange-dark); }

.two-col{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
@media(max-width:800px){ .two-col{ grid-template-columns:1fr; } }

/* Partner network cards */
.partner-card{
  background:var(--pwb-white); border:1px solid var(--pwb-border); border-radius:var(--pwb-radius);
  padding:24px; box-shadow:var(--pwb-shadow); display:flex; flex-direction:column; gap:10px;
}
.partner-card .tag{
  align-self:flex-start; font-size:.72rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; background:var(--pwb-cream-2); color:var(--pwb-green-dark);
  padding:4px 10px; border-radius:50px;
}
.partner-card h3 a{ color:var(--pwb-green-dark); }
.partner-card p{ color:var(--pwb-text-light); font-size:.95rem; margin-bottom:6px; }
.partner-card .visit{ font-weight:700; font-size:.9rem; }

/* Org directory tables */
.region-block{ margin-bottom:46px; }
.region-block h3{
  border-bottom:3px solid var(--pwb-orange); padding-bottom:8px; margin-bottom:18px;
  display:inline-block;
}
.org-table{ width:100%; border-collapse:collapse; background:var(--pwb-white); border-radius:var(--pwb-radius); overflow:hidden; box-shadow:var(--pwb-shadow); }
.org-table th, .org-table td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--pwb-border); vertical-align:top; font-size:.94rem; }
.org-table th{ background:var(--pwb-green-dark); color:var(--pwb-white); font-family:var(--pwb-font-head); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; }
.org-table tr:last-child td{ border-bottom:none; }
.org-table tr:nth-child(even) td{ background:var(--pwb-cream); }
.org-table td a{ font-weight:700; }
@media(max-width:700px){
  .org-table thead{ display:none; }
  .org-table, .org-table tbody, .org-table tr, .org-table td{ display:block; width:100%; }
  .org-table tr{ margin-bottom:14px; border:1px solid var(--pwb-border); border-radius:10px; overflow:hidden; }
  .org-table td{ border-bottom:1px solid var(--pwb-border); }
  .org-table td::before{ content:attr(data-label); display:block; font-weight:800; color:var(--pwb-green); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
}

/* Species / migration profile cards */
.species-card{ border-left:5px solid var(--pwb-orange); background:var(--pwb-white); border-radius:0 var(--pwb-radius) var(--pwb-radius) 0; padding:26px 28px; box-shadow:var(--pwb-shadow); margin-bottom:26px; }
.species-card h3{ margin-bottom:.3em; }
.species-card .meta{ font-size:.85rem; color:var(--pwb-orange-dark); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.8em; }
.stat-row{ display:flex; flex-wrap:wrap; gap:14px; margin:14px 0; }
.stat-pill{ background:var(--pwb-cream-2); border-radius:10px; padding:10px 16px; font-size:.88rem; font-weight:700; color:var(--pwb-green-dark); }

/* Action checklist */
.action-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.action-list li{
  background:var(--pwb-white); border:1px solid var(--pwb-border); border-radius:10px; padding:16px 18px 16px 50px; position:relative; font-size:.97rem;
}
.action-list li::before{
  content:"\2713"; position:absolute; left:16px; top:16px; color:var(--pwb-white);
  background:var(--pwb-green); width:22px; height:22px; border-radius:50%; font-size:.75rem;
  display:flex; align-items:center; justify-content:center; font-weight:800;
}

/* Map / SVG panel */
.map-panel{ background:var(--pwb-white); border:1px solid var(--pwb-border); border-radius:var(--pwb-radius); padding:20px; box-shadow:var(--pwb-shadow); }
.map-caption{ text-align:center; font-size:.85rem; color:var(--pwb-text-light); font-style:italic; margin-top:10px; }
.legend{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:14px; font-size:.85rem; }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:14px; height:14px; border-radius:3px; display:inline-block; }

/* Callout / CTA banner */
.cta-banner{
  background:linear-gradient(120deg, var(--pwb-orange), var(--pwb-gold));
  color:var(--pwb-white); border-radius:var(--pwb-radius); padding:44px; text-align:center;
}
.cta-banner h2{ color:var(--pwb-white); }
.cta-banner p{ color:#fff7ea; max-width:640px; margin:0 auto 1.4em; }

/* Zone/ecoregion grid */
.zone-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.zone-card{ background:var(--pwb-white); border-radius:12px; padding:20px; border-top:5px solid var(--pwb-green); box-shadow:var(--pwb-shadow); }
.zone-card h4{ font-size:1rem; margin-bottom:.4em; color:var(--pwb-green-dark); }
.zone-card p{ font-size:.88rem; color:var(--pwb-text-light); margin-bottom:0; }

/* Table of contents / anchor nav */
.page-toc{ background:var(--pwb-cream-2); border-radius:12px; padding:20px 24px; margin-bottom:40px; }
.page-toc strong{ display:block; margin-bottom:8px; font-family:var(--pwb-font-head); color:var(--pwb-green-dark); }
.page-toc ul{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px 20px; }
.page-toc a{ font-weight:700; font-size:.9rem; }

/* ==========================================================================
   6. FOOTER
   ========================================================================== */
.site-footer{ background:var(--pwb-green-dark); color:#dfeee3; padding:56px 0 20px; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; }
@media(max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer h4{ color:var(--pwb-white); font-size:1rem; margin-bottom:14px; }
.site-footer a{ color:#cfe9d6; }
.site-footer a:hover{ color:var(--pwb-orange); }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:8px; font-size:.92rem; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.15); margin-top:40px; padding-top:18px; text-align:center; font-size:.82rem; color:#a9c9b1; }
.social-row{ display:flex; gap:12px; margin-top:10px; }
.social-row a{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ background:var(--pwb-orange); }

/* Utility */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.small{ font-size:.85rem; color:var(--pwb-text-light); }
.divider{ height:1px; background:var(--pwb-border); margin:40px 0; border:none; }