/*
  Paria Conservation Challenge – Child & Mobile Friendly Theme (Bootstrap 4)
  Palette ratio usage target: teal:orange:cyan:amber = 50%:30%:10%:10%
  Hex:
    --teal: #20c997;
    --orange: #ff7518;
    --cyan: #008196;
    --amber: #f0ad4e;

  Notes on ratio implementation:
  - Primary surfaces, gradients, and CTAs favor teal (≈50%).
  - Secondary accents, section headers, and major highlights use orange (≈30%).
  - Supporting accents and links use cyan (≈10%).
  - Tertiary highlights use amber (≈10%).
*/

:root {
  --pc-teal: #20c997;
  --pc-teal-600: #1ba886;
  --pc-teal-700: #16896b;
  --pc-orange: #ff7518;
  --pc-orange-600: #e56714;
  --pc-cyan: #008196;
  --pc-cyan-600: #006778;
  --pc-amber: #f0ad4e;
  --pc-amber-600: #d99637;
  --pc-white: #FFFFFF;
  --pc-black: #091b0a;

  --pc-radius: 18px;
  --pc-radius-lg: 24px;
  --pc-shadow-sm: 0 2px 6px rgba(0,0,0,.07);
  --pc-shadow: 0 6px 24px rgba(0,0,0,.12);

  --pc-h1: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  --pc-h2: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
  --pc-h3: clamp(1.25rem, 1rem + 1.2vw, 1.5rem);
  --pc-body: clamp(1rem, .95rem + .5vw, 1.125rem);
}

body {
  font-family: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--pc-body);
  line-height: 1.6;
  color: var(--pc-black);
  background: linear-gradient(180deg, rgba(32,201,151,.08) 0%, rgba(255,117,24,.05) 50%, rgba(0,129,150,.04) 100%), var(--pc-white);
}

/* Header band and menu */
/* #HomeBand { height: 6px; background: linear-gradient(90deg, var(--pc-teal), var(--pc-orange)); } */
#xHome .Menu .Item {
  background: linear-gradient(180deg, var(--pc-teal) 0%, var(--pc-orange) 100%);
  color: var(--pc-white); border-radius: var(--pc-radius-lg);
  padding: .5rem 1rem; box-shadow: var(--pc-shadow-sm);
  font-weight: 800;
}

/* Hero overlay */
/* #Poster::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(32,201,151,.45) 0%, rgba(255,117,24,.25) 60%, rgba(0,129,150,.15) 100%);
} */

/* Tabs */
.nav-tabs .nav-link {
  border: 0; border-radius: 999px; font-weight: 700;
  background: linear-gradient(180deg, rgba(0,129,150,.15) 0%, rgba(32,201,151,.15) 100%);
  color: var(--pc-cyan);
}
.nav-tabs .nav-link.active {
  background: linear-gradient(180deg, var(--pc-teal) 0%, var(--pc-orange) 100%);
  color: var(--pc-white);
}

/* Scoreboard */
#Scoreboard h3 { color: var(--pc-teal); font-weight: 900; }
.table thead th { background: linear-gradient(180deg, var(--pc-teal) 0%, var(--pc-orange) 140%); color: var(--pc-white); }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(32,201,151,.06); }
.table-hover tbody tr:hover { background: rgba(255,117,24,.08); }

/* Buttons */
.btn-primary { background-image: linear-gradient(180deg, var(--pc-teal), var(--pc-orange)); color: var(--pc-white); }
.btn-success { background-image: linear-gradient(180deg, var(--pc-teal), var(--pc-cyan)); color: var(--pc-white); }
.btn-info { background-image: linear-gradient(180deg, var(--pc-cyan), var(--pc-teal)); color: var(--pc-white); }
.btn-warning { background-image: linear-gradient(180deg, var(--pc-amber), var(--pc-amber-600)); color: #4A3510; }

/* Cards */
.card .front { background: linear-gradient(135deg, var(--pc-teal) 0%, var(--pc-orange) 100%); color: var(--pc-white); }
.card .back { background: var(--pc-white); color: var(--pc-black); }

/* Captions and section headings */
.gallery-caption h4, #xAbout h3, #RulesSection h3, #xPrizesSection h3, #xFunFactsSection h2, #GallerySection h3 { color: var(--pc-orange); font-weight: 900; }

/* About Section */
#xAbout { background: linear-gradient(180deg, rgba(0,129,150,.08) 0%, rgba(32,201,151,.08) 100%); border-radius: var(--pc-radius-lg); box-shadow: var(--pc-shadow); }

/* Back to top */
#BackToTop { background: linear-gradient(180deg, var(--pc-teal), var(--pc-orange)); }

/* Footer */
#page-footer { background: linear-gradient(180deg, var(--pc-cyan) 0%, var(--pc-teal) 100%); color: var(--pc-white) !important; }

/* Utility */
.bg-teal-grad { background: linear-gradient(135deg, var(--pc-teal), var(--pc-orange)) !important; color: var(--pc-white) !important; }
.bg-orange-chip { background: linear-gradient(135deg, var(--pc-orange), var(--pc-orange-600)) !important; color: #3a2a0a !important; }
.bg-cyan { background: var(--pc-cyan) !important; color: var(--pc-white) !important; }
.bg-amber { background: var(--pc-amber) !important; color: #4a3510 !important; }

.text-teal { color: var(--pc-teal) !important; }
.text-orange { color: var(--pc-orange) !important; }
.text-cyan { color: var(--pc-cyan) !important; }
.text-amber { color: var(--pc-amber) !important; }

#xAbout p {
    color: black;
}
#funFactsCarousel p {
  color: black;
}

.pagination {
  background: linear-gradient(180deg, rgba(0,129,150,.15) 0%, rgba(32,201,151,.15) 100%);
}
.page_item {
  background: linear-gradient(180deg, var(--pc-teal) 0%, var(--pc-orange) 100%);
}