/* =========================
   Palette, base, structure
   ========================= */
:root{
  --cp-primary:#006d63;
  --cp-secondary:#00897b;
  --cp-accent:#ffa726;
  --cp-bg:#f6fbfa;
  --cp-text:#1a2b2b;
  --cp-body:Open Sans;
  --cp-head:Roboto;

  /* optional per-section vars (from metabox) */
  --cp-btn-gap:10px;
  --cp-img-radius:10px;
}

.cp-campaign-wrapper{
  background:var(--cp-bg);
  color:var(--cp-text);
  font-family:var(--cp-body),system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}

/* Progress */
#cp-progress{position:sticky; top:0; height:4px; background:#eee; z-index:1000}
#cp-progress span{display:block; height:100%; width:0; background:var(--cp-primary)}

/* Layout */
.cp-campaign{display:grid; grid-template-columns:260px 1fr; gap:24px; max-width:1200px; margin:32px auto; padding:0 16px}
.cp-sidebar{
  position:sticky; 
  top:84px; 
  align-self:start;
  background:white;
  border-radius:8px;
  padding:20px;
  z-index:100; /* Ensure sidebar stays above content but below main nav */
  box-shadow:0 2px 8px rgba(0,0,0,.08); /* Optional: adds visual separation */
}

/* Sidebar menu */
.cp-menu ul{list-style:none; margin:0; padding:0}
.cp-menu a{display:block; padding:8px 10px; border-radius:8px; color:var(--cp-primary); text-decoration:none; font-weight:700}
.cp-menu a:hover,.cp-menu a.is-active{background:color-mix(in srgb, var(--cp-primary) 10%, transparent)}

/* Sidebar "Species" group with animated expand */
.cp-menu .cp-menu-group .cp-group-title{
  display:block; font-weight:800; color:var(--cp-primary); margin:8px 8px 4px;
}
.cp-menu .cp-menu-group .cp-submenu{
  overflow:hidden; max-height:0; opacity:0; visibility:hidden; pointer-events:none;
  transition:max-height .3s ease, opacity .25s ease, visibility .25s ease;
  padding-left:8px;
}
.cp-menu .cp-menu-group:hover .cp-submenu,
.cp-menu .cp-menu-group:focus-within .cp-submenu{
  max-height:600px; opacity:1; visibility:visible; pointer-events:auto;
}
.cp-menu .cp-submenu a{padding:6px 10px}

/* Cards */
.cp-content .cp-sec{
  background:#fff; border:1px solid #e5eaec; border-radius:12px; padding:18px;
  box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.cp-sec + .cp-sec{margin-top:20px}
.cp-sec h2{
  font-family:var(--cp-head),system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--cp-primary);
  font-size:clamp(1.4rem,1.1rem + 1vw,2rem); margin:0 0 10px
}
.cp-sec-body p{margin:.6rem 0}

/* Media grids */
.cp-media-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--cp-media-gap,12px); margin-top:10px;
}
.cp-media-item img, .cp-media-item video{
  width:100%; height:auto; border-radius:var(--cp-img-radius);
  max-height:var(--cp-img-maxh,none); object-fit:var(--cp-img-fit,initial);
}

/* Partner logos */
.cp-partner-strip{display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:center; padding:8px 0}
.cp-partner-strip img{max-height:56px; filter:grayscale(100%); opacity:.9; transition:.2s}
.cp-partner-strip img:hover{filter:none; opacity:1; transform:translateY(-2px)}

/* Buttons (ALWAYS centered) */
.cp-sec .cp-sec-buttons{
  display:flex; gap:var(--cp-btn-gap,10px); flex-wrap:wrap; margin-top:12px; width:100%; justify-content:center;
}
.cp-btn{
  display:inline-flex; align-items:center; padding:var(--cp-btn-py,.6em) var(--cp-btn-px,1em);
  border-radius:var(--cp-btn-radius,10px);
  background:var(--cp-btn-bg,var(--cp-primary)) !important; color:var(--cp-btn-text,#fff) !important;
  text-decoration:none; font-weight:700; transition:.15s; box-shadow:0 1px 0 rgba(0,0,0,.03);
  border: none !important;
}
.cp-btn:hover{
  transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.16);
  filter:brightness(1.03);
  background:var(--cp-btn-hover-bg, var(--cp-btn-hover, var(--cp-primary))) !important;
  color:var(--cp-btn-hover-text,#fff) !important;
}
.cp-btn.btn-secondary{
  background:transparent !important; color:var(--cp-primary) !important;
  border:1px solid color-mix(in srgb, var(--cp-primary) 30%, #d7dbe0) !important;
}
.cp-btn.btn-secondary:hover{background:color-mix(in srgb, var(--cp-primary) 10%, #ffffff) !important;}

/* =====================
   Species: column layout
   ===================== */
.cp-spec-scientific{font-style:italic; opacity:.85; margin:.25rem 0 .5rem}
.cp-spec-chips{display:flex; gap:8px; flex-wrap:wrap; margin:.25rem 0 1rem}
.cp-chip{display:inline-block; background:color-mix(in srgb, var(--cp-primary) 10%, #ffffff); color:var(--cp-primary); border:1px solid color-mix(in srgb, var(--cp-primary) 25%, #d7dbe0); padding:.25em .55em; border-radius:999px; font-size:.85rem; font-weight:700}
.cp-chip-status{background:var(--cp-accent); color:#111; border-color:transparent}

/* Make the species section a single, consistent column */
.cp-type-species .cp-sec-body{
  display:flex; flex-direction:column; gap:clamp(14px, 2vw, 22px);
}
.cp-type-species .cp-media{
  order:1; margin:0 auto; width:100%; max-width:var(--cp-media-maxw, 740px);
}
.cp-type-species .cp-media .cp-media-item{width:100%}
.cp-type-species .cp-media img, .cp-type-species .cp-media video{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:12px; display:block;
}
.cp-type-species .cp-spec-chips{order:2}
.cp-type-species .cp-sec-body .cp-text{order:3}
.cp-type-species .cp-species-threats,
.cp-type-species .cp-species-help{
  order:4; background:#fff; border:1px solid #e6e8eb; border-radius:12px;
  padding:clamp(12px,1.4vw,18px); box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.cp-type-species .cp-species-threats h3,
.cp-type-species .cp-species-help h3{margin-top:0; color:var(--cp-primary)}
/* "alive" hover like facts */
.cp-type-species .cp-species-threats:hover,
.cp-type-species .cp-species-help:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  border-color:color-mix(in srgb, var(--cp-primary) 30%, #e6e8eb);
}
.cp-type-species .cp-sec-buttons{order:5; margin-top:4px}

/* ===========================
   Species tabs (collapsible)
   =========================== */
.cp-species-tabs{
  position:relative; display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 16px;
}
/* collapsed by default: show one pill "Affected species" */
.cp-species-tabs::before{
  content:"Affected species";
  display:inline-flex; align-items:center;
  padding:.45em .8em; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--cp-primary) 25%, #d7dbe0);
  color:var(--cp-primary); background:#fff; font-weight:700;
}
.cp-species-tabs .cp-species-tab{display:none}
/* expand on hover/focus */
.cp-species-tabs:hover::before,
.cp-species-tabs:focus-within::before{ display:none }
.cp-species-tabs:hover .cp-species-tab,
.cp-species-tabs:focus-within .cp-species-tab{ display:inline-flex }

.cp-species-tab{
  text-decoration:none; padding:.45em .8em; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--cp-primary) 25%, #d7dbe0);
  color:var(--cp-primary); background:#fff; font-weight:700;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cp-species-tab:hover{
  background:color-mix(in srgb, var(--cp-primary) 9%, #fff);
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.cp-species-tab.is-active{
  background:var(--cp-primary); color:#fff; border-color:var(--cp-primary);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}

/* ===== Facts Grid: bullets -> equal-height cards (max 4 columns) ===== */
/* Catch lists that are direct children OR wrapped one level (Elementor container) */
.cp-type-facts .cp-sec-body > ul,
.cp-type-facts .cp-sec-body > ol,
.cp-type-facts .cp-sec-body > * > ul,
.cp-type-facts .cp-sec-body > * > ol{
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 columns on desktop */
}

/* Breakpoints */
@media (max-width:1100px){
  .cp-type-facts .cp-sec-body > ul,
  .cp-type-facts .cp-sec-body > ol,
  .cp-type-facts .cp-sec-body > * > ul,
  .cp-type-facts .cp-sec-body > * > ol{
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width:800px){
  .cp-type-facts .cp-sec-body > ul,
  .cp-type-facts .cp-sec-body > ol,
  .cp-type-facts .cp-sec-body > * > ul,
  .cp-type-facts .cp-sec-body > * > ol{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width:520px){
  .cp-type-facts .cp-sec-body > ul,
  .cp-type-facts .cp-sec-body > ol,
  .cp-type-facts .cp-sec-body > * > ul,
  .cp-type-facts .cp-sec-body > * > ol{
    grid-template-columns: 1fr;
  }
}

/* Each bullet becomes a card */
.cp-type-facts .cp-sec-body :is(ul,ol) > li{
  position: relative;
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  padding: 14px 16px;
  display: flex;
  min-height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.cp-type-facts .cp-sec-body :is(ul,ol) > li:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  border-color: color-mix(in srgb, var(--cp-primary) 30%, #e6e8eb);
}
.elementor .elementor-section:has(.cp-campaign-wrapper),
.elementor .elementor-container:has(.cp-campaign-wrapper),
.elementor .elementor-column:has(.cp-campaign-wrapper) {
  min-height: auto !important;
}

/* Ensure the widget wrapper doesn't clip the content */
.elementor .elementor-widget-shortcode .elementor-widget-container {
  overflow: visible !important;
}

/* The campaign block should take normal flow */
.cp-campaign-wrapper {
  display: block;
  width: 100%;
}
.elementor .elementor-section .elementor-container .elementor-widget-shortcode .cp-campaign-wrapper {
  /* climb to section and let it grow */
}
.elementor .elementor-section { min-height: 0 !important; } /* If needed */

/* ===== Mobile hard-fix: force single column & non-sticky sidebar ===== */
@media (max-width: 768px){  /* Changed from 900px to 768px */
  /* simplest & safest: drop the grid entirely on phones */
  .cp-campaign{
    display:block !important;
    grid-template-columns: 1fr !important; /* in case grid remains */
  }

  .cp-sidebar{
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px !important; /* space before content */
  }

  .cp-content{
    width: 100% !important;
  }

  /* menu card should fill width nicely on phones */
  .cp-menu a{ padding:12px 14px; }

  /* make sure any species tabs or extra navs wrap nicely */
  .cp-species-tabs{ flex-wrap:wrap; }
}

/* ---------- Mobile drawer / triggers ---------- */
@media (max-width:768px){  /* Changed from 900px to 768px */
  /* hide the static sidebar; content goes full-width */
  .cp-campaign{ grid-template-columns: 1fr; }
  .cp-sidebar{ display:none; }

  /* top "Sections" pill */
  .cp-sections-trigger{
    display:inline-flex !important; align-items:center; gap:.5rem;
    margin:8px 16px 0; padding:10px 14px;
    border-radius:999px; border:1px solid color-mix(in srgb,var(--cp-primary) 25%, #d7dbe0);
    background:#fff; color:var(--cp-primary); font-weight:800;
    box-shadow:0 1px 2px rgba(0,0,0,.06);
  }

  /* floating action button (shows after you scroll) */
  .cp-sections-fab{
    position:fixed !important; right:16px !important; bottom:calc(16px + env(safe-area-inset-bottom)) !important;
    display:inline-flex; align-items:center; justify-content:center;
    width:52px; height:52px; border-radius:12px;
    background:var(--cp-primary) !important; color:white !important; font-weight:900; border:none !important;
    box-shadow:0 10px 24px rgba(0,0,0,.18);
    transform:translateY(120%) !important; opacity:0; pointer-events:none;
    transition:transform .25s ease, opacity .25s ease !important;
    z-index:10001 !important;
  }
  .cp-sections-fab.show{ transform:none !important; opacity:1 !important; pointer-events:auto !important; }
  .cp-sections-fab::before{ content:"☰"; font-size:20px; line-height:1; }

  /* overlay + drawer - BOTTOM DRAWER APPROACH */
  .cp-drawer-backdrop{
    position:fixed !important; inset:0 !important; background:rgba(0,0,0,.45) !important;
    opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
    z-index:10000 !important;
  }
  .cp-menu--drawer{
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important;
    background:#fff !important; border-radius:16px 16px 0 0 !important;
    transform:translateY(105%) !important; transition:transform .25s ease !important;
    max-height:min(86vh, 680px) !important; overflow:auto !important; padding:12px 12px 18px !important;
    box-shadow:0 -12px 30px rgba(0,0,0,.2) !important;
    z-index:10001 !important;
    margin:0 !important; /* Override any conflicting margins */
  }
  body.cp-drawer-open .cp-drawer-backdrop{ opacity:1 !important; visibility:visible !important; }
  body.cp-drawer-open .cp-menu--drawer{ transform:translateY(0) !important; }
  body.cp-no-scroll{ overflow:hidden !important; touch-action:none !important; }

  /* drawer menu styles */
  .cp-menu--drawer ul{ list-style:none; margin:0; padding:0; }
  .cp-menu--drawer a{
    display:block; padding:12px; border-radius:10px;
    text-decoration:none; color:var(--cp-text); font-weight:700;
  }
  .cp-menu--drawer a.is-active{
    background:color-mix(in srgb, var(--cp-primary) 12%, #fff);
    color:var(--cp-primary);
  }

  /* Species group acts like an accordion in the drawer */
  .cp-menu--drawer .cp-menu-group .cp-group-title{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px; border-radius:10px; cursor:pointer; font-weight:800;
    color:var(--cp-primary);
  }
  .cp-menu--drawer .cp-menu-group .cp-submenu{
    max-height:0; overflow:hidden; transition:max-height .25s ease; padding-left:8px;
  }
  .cp-menu--drawer .cp-menu-group.is-open .cp-submenu{ max-height:600px; }
  .cp-menu--drawer .cp-submenu a{ padding:10px 12px; font-weight:600; }
}

/* ===== Places: same card style as species, media first ===== */
.cp-type-places .cp-sec-body{
  display:flex; flex-direction:column; gap:clamp(14px, 2vw, 22px);
}
.cp-type-places .cp-media{
  order:-1;            /* show media ABOVE text even if HTML has text first */
  margin:0 auto; width:100%; max-width:var(--cp-media-maxw, 740px);
}
.cp-type-places .cp-media .cp-media-item{ width:100% }
.cp-type-places .cp-media img, .cp-type-places .cp-media video{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:12px; display:block;
}

/* ===== Places tabs (collapsed pill like Species) ===== */
.cp-places-tabs{
  position:relative; display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 16px;
}
.cp-places-tabs::before{
  content:"Places of Interest";
  display:inline-flex; align-items:center;
  padding:.45em .8em; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--cp-primary) 25%, #d7dbe0);
  color:var(--cp-primary); background:#fff; font-weight:700;
}
.cp-places-tabs .cp-places-tab{ display:none }
.cp-places-tabs:hover::before,
.cp-places-tabs:focus-within::before{ display:none }
.cp-places-tabs:hover .cp-places-tab,
.cp-places-tabs:focus-within .cp-places-tab{ display:inline-flex }

.cp-places-tab{
  text-decoration:none; padding:.45em .8em; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--cp-primary) 25%, #d7dbe0);
  color:var(--cp-primary); background:#fff; font-weight:700;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cp-places-tab:hover{
  background:color-mix(in srgb, var(--cp-primary) 9%, #fff);
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.cp-places-tab.is-active{
  background:var(--cp-primary); color:#fff; border-color:var(--cp-primary);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}

/* Optional: hide "status/chips/help" blocks if someone copied species fields into a places section */
.cp-type-places .cp-spec-chips,
.cp-type-places .cp-species-threats,
.cp-type-places .cp-species-help { display:none !important; }

/* Sidebar group hover expand already exists. Add identical behavior for Places if you scoped it to .cp-menu-species only: */
.cp-menu .cp-menu-group.cp-menu-places .cp-submenu{
  overflow:hidden; max-height:0; opacity:0; visibility:hidden; pointer-events:none;
  transition:max-height .3s ease, opacity .25s ease, visibility .25s ease;
  padding-left:8px;
}
.cp-menu .cp-menu-group.cp-menu-places:hover .cp-submenu,
.cp-menu .cp-menu-group.cp-menu-places:focus-within .cp-submenu{
  max-height:600px; opacity:1; visibility:visible; pointer-events:auto;
}
.cp-sec.is-hidden { display: none !important; }
.cp-sec { scroll-margin-top: 80px; } 

/* Desktop menu styling for group titles */
.cp-menu .cp-menu-group .cp-group-title {
  display: inline-block;       /* keeps it sized to content */
  font-weight: 800;
  text-decoration: none;       /* remove underline */
  margin: 8px 8px 4px;
  padding: 8px 16px;
  background-color: var(--cp-primary);   /* teal tone (change as needed) */
  color: #fff;                 /* white text */
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.cp-menu .cp-menu-group .cp-group-title:hover {
  transform: translateY(-2px); /* subtle lift */
}

.cp-menu .cp-menu-group .cp-group-title:active {
  transform: translateY(0);    /* reset lift */
}
.cp-menu--drawer{position:fixed; top:0; right:0; bottom:0; width:320px; background:#fff;
  transform:translateX(100%); opacity:0; visibility:hidden; transition:.3s;}
.cp-drawer-open .cp-menu--drawer{transform:none; opacity:1; visibility:visible;}
.cp-drawer-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; visibility:hidden; transition:.3s;}
.cp-drawer-open .cp-drawer-backdrop{opacity:1; visibility:visible;}