/* ---------------------------------------------------------
   WildSense base theme
   Dark forest + phthalo green vibes (unified)
   + Default page header + responsive hero + dark content panels
   + Readable “A4-ish” text width
--------------------------------------------------------- */

:root {
  --ws-bg: #09171a;              /* near-black, but lighter */
  --ws-bg-alt: #16342d;          /* deep forest green */
  --ws-surface: #1c2e38;         /* card / panel background */
  --ws-border-subtle: rgba(255, 255, 255, 0.06);

  --ws-text: #f5f5f5;
  --ws-text-muted: #ced8e0;      /* bright for readability */

  --ws-green: #1caf8c;           /* main phthalo-ish green */
  --ws-green-soft: #47d6a6;
  --ws-green-deep: #0d7458;

  --ws-accent: #8be9c4;
  --ws-warning: #facc6b;

  --ws-radius-lg: 1.25rem;
  --ws-radius-md: 0.9rem;

  /* Readability control (A4-ish line length) */
  --ws-readable: 960px;
}

/* ---------------------------------------------------------
   Global
--------------------------------------------------------- */

body {
  background: #050a0c; /* plain dark, gradient sits on .wildsense-home */
  color: var(--ws-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

main {
  background: transparent;
}

/* Readable width only for default content-page elements, not the homepage layout */
.ws-page-header,
.ws-hero,
.system-page,
.project-page,
.news-page {
  max-width: var(--ws-readable);
  margin-left: auto;
  margin-right: auto;
}

a {
  color: var(--ws-accent);
}

a:hover {
  color: var(--ws-green-soft);
}

/* Slightly stronger paragraph / body text */
p,
.card-text,
.section-body,
.lead {
  font-weight: 400;
}

/* Soft section borders */
section {
  position: relative;
}

section.border-top {
  border-top: 1px solid var(--ws-border-subtle) !important;
}

/* Remove white/grey strips on homepage sections using bg-light */
.wildsense-home section.bg-light,
.wildsense-home .bg-light {
  background-color: transparent !important;
}

/* Overall homepage background */
.wildsense-home {
  background:
    radial-gradient(circle at top left, rgba(71, 214, 166, 0.42), transparent 55%),
    radial-gradient(circle at bottom right, rgba(28, 175, 140, 0.28), transparent 60%),
    linear-gradient(145deg, var(--ws-bg-alt), var(--ws-bg));
}

/* ---------------------------------------------------------
   Default page header (used by default layout)
--------------------------------------------------------- */

.ws-page {
  background: var(--ws-bg);
  color: var(--ws-text);
}

.ws-page-header {
  margin-bottom: 1rem;
}

.ws-page-title {
  font-weight: 800;
  letter-spacing: 0.2px;
  margin: 0 0 0.5rem 0;
}

.ws-page-summary {
  color: var(--ws-text-muted);
  max-width: var(--ws-readable);
  margin: 0;
}

/* Responsive hero for posts/pages using hero_image */
.ws-hero {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* More square hero */
.ws-hero-img {
  width: 100%;
  aspect-ratio: 4 / 3;   /* change to 1 / 1 for perfectly square */
  height: auto;
  object-fit: cover;
  display: block;
}

.ws-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* ---------------------------------------------------------
   Navbar
--------------------------------------------------------- */

.navbar {
  background: linear-gradient(90deg, #05090c, #0a1820) !important;
  border-bottom: 1px solid var(--ws-border-subtle);
}

/* moth icon next to brand text */
.ws-brand-icon {
  height: 22px;
  width: auto;
  display: block;
}

.navbar-brand {
  color: #ffffff !important;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  font-weight: 700; /* bolder brand */
}

/* nav links */
.navbar-light .navbar-nav .nav-link {
  color: var(--ws-text-muted);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600; /* thicker nav text */
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--ws-accent);
}

/* Dropdown */
.dropdown-menu {
  background-color: #05090c;
  border-radius: var(--ws-radius-md);
  border: 1px solid var(--ws-border-subtle);
}

.dropdown-item {
  color: var(--ws-text-muted);
  font-size: 0.9rem;
}

.dropdown-item:hover {
  background-color: #10171c;
  color: var(--ws-accent);
}

/* Fix dropdown spacing under navbar */
.navbar .dropdown-menu {
  margin-top: 0 !important;
  transform: translateY(0) !important;
  top: 100% !important;
}

/* ---------------------------------------------------------
   Hero (homepage)
--------------------------------------------------------- */

.wildsense-home .py-5.py-lg-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 3.5rem !important;
  background: transparent;
}

.wildsense-home h1.display-5 {
  color: #f9fafb;
}

.wildsense-home .lead {
  color: var(--ws-text-muted);
  font-weight: 400;
}

/* Hero image sizing */
.hero-image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3 aspect ratio */
  overflow: hidden;
  background: radial-gradient(circle at top, #214c3f 0%, #09171a 72%);
  border-color: rgba(139, 233, 196, 0.34) !important;
}

.hero-image-wrapper .hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Hero placeholder panel (safe to delete later) */
.wildsense-home .ratio-4x3.rounded-4.border.bg-light {
  background: radial-gradient(circle at top, #214c3f 0%, #09171a 72%) !important;
  border-color: rgba(139, 233, 196, 0.34) !important;
  color: var(--ws-text-muted);
}

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */

.btn-success {
  background: linear-gradient(135deg, var(--ws-green), var(--ws-green-soft));
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.btn-success:hover {
  background: linear-gradient(135deg, var(--ws-green-soft), var(--ws-green));
}

.btn-outline-secondary {
  border-color: rgba(148, 163, 184, 0.6);
  color: var(--ws-text-muted);
}

.btn-outline-secondary:hover {
  border-color: var(--ws-accent);
  color: var(--ws-accent);
  background-color: rgba(28, 175, 140, 0.1);
}

.btn-outline-success {
  border-color: var(--ws-green-soft);
  color: var(--ws-green-soft);
}

.btn-outline-success:hover {
  background-color: rgba(28, 175, 140, 0.18);
  color: #f9fafb;
}

/* ---------------------------------------------------------
   Cards & panels
--------------------------------------------------------- */

/* Base card look used by news, fieldwork, spotlight, etc. */
.card {
  background: radial-gradient(circle at top, #214c3f 0%, #09171a 72%);
  border-radius: var(--ws-radius-lg) !important;
  border: 1px solid var(--ws-border-subtle);
  color: var(--ws-text);
}

/* News card thumbnails */
.news-card-media {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  background: radial-gradient(circle at top, #214c3f 0%, #09171a 72%);
}

.news-card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-body .small {
  color: var(--ws-text-muted);
  font-weight: 500;
}

.card h3,
.card h2,
.card h5,
.card h6 {
  color: #f9fafb;
}

/* Fieldwork diary image placeholders (top half of those cards) */
.ratio-4x3.rounded-top-4.bg-light {
  background: linear-gradient(135deg, #16856a, #09171a) !important;
}

/* Map + other big placeholders */
.ratio-21x9.rounded-4.border.bg-light,
.ratio-16x9.rounded-4.border.bg-light,
.ratio-1x1.rounded-4.border.bg-light {
  background: radial-gradient(circle at center, #214c3f 0%, #09171a 68%) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: var(--ws-text-muted);
}

/* ---------------------------------------------------------
   News "Updates" strip / carousel
--------------------------------------------------------- */

.wildsense-home section.py-4.bg-light .card {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* (These selectors are harmless if #newsCarousel doesn't exist yet) */
#newsCarousel .carousel-control-prev-icon,
#newsCarousel .carousel-control-next-icon {
  filter: invert(0.9) grayscale(1);
}

#newsCarousel .carousel-control-prev,
#newsCarousel .carousel-control-next {
  width: 3rem;
}

/* ---------------------------------------------------------
   Typography tweaks
--------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0.02em;
}

.text-muted {
  color: var(--ws-text-muted) !important;
}

/* Stats numbers */
.section-stats .h3,
.section-stats h3 {
  font-family: "JetBrains Mono", Menlo, monospace;
}

/* ---------------------------------------------------------
   Content pages (systems, projects, news indexes)
   → Dark panels (NOT white)
--------------------------------------------------------- */

.system-page,
.project-page,
.news-page {
  background: radial-gradient(circle at top, rgba(33, 76, 63, 0.65) 0%, rgba(9, 23, 26, 0.95) 72%);
  color: var(--ws-text);
  border-radius: 1.5rem;
  padding: 2.5rem 2rem;
  margin-top: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  border: 1px solid var(--ws-border-subtle);
}

/* Headings and text inside these panels */
.system-page h1,
.system-page h2,
.system-page h3,
.system-page h4,
.system-page h5,
.system-page h6,
.project-page h1,
.project-page h2,
.project-page h3,
.project-page h4,
.project-page h5,
.project-page h6,
.news-page h1,
.news-page h2,
.news-page h3,
.news-page h4,
.news-page h5,
.news-page h6 {
  color: #f9fafb;
}

.system-page p,
.project-page p,
.news-page p {
  color: var(--ws-text-muted);
}

/* Links inside content panels */
.system-page a,
.project-page a,
.news-page a {
  color: var(--ws-accent);
}

.system-page a:hover,
.project-page a:hover,
.news-page a:hover {
  color: var(--ws-green-soft);
}

/* ---------------------------------------------------------
   Partners strip
--------------------------------------------------------- */

.section-partners .border.rounded-4 {
  background: rgba(28, 175, 140, 0.1);
  border-color: rgba(148, 163, 184, 0.4) !important;
  color: var(--ws-text-muted);
}

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */

footer {
  background: #050a0d;
  border-top: 1px solid var(--ws-border-subtle);
  color: var(--ws-text-muted);
}