/* ================================
   PAGE BACKGROUND (fixed image)
   ================================ */
body.pagelayout-course {
  --ne-bg: url("https://sea.pennacool.com/pennacool/renewable-minds/images/renewable_minds_bg.png");
  background-image: var(--ne-bg);
  background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Let the site chrome be transparent so your sections show their own backgrounds */
body.pagelayout-course #page,
body.pagelayout-course #page-content,
body.pagelayout-course #region-main,
body.pagelayout-course .Main,
body.pagelayout-course .container,
body.pagelayout-course .container-fluid,
body.pagelayout-course .card,
body.pagelayout-course .section {
  background: transparent !important;
}

/* ================================
   GAMES SECTION
   ================================ */
#xGamesSection {
  background-image: linear-gradient(#ffffffd4, #e8f5e9e3) !important;
}

/* ================================
   SCOREBOARD CARD
   ================================ */
#xScoreboardSection {
  width: min(1200px, 92vw);
  margin: 40px auto;
  background-color: #fff;
  background-image: linear-gradient(#ffffffd4, #e8f5e9e3) !important;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 24px 24px 32px;
  overflow: hidden; /* clip rounded corners */
}

/* Inner widgets should be see-through so the card gradient shows */
#xScoreboardSection .dataTables_wrapper,
#xScoreboardSection .table,
#xScoreboardSection table,
#xScoreboardSection .card {
  background: transparent !important;
  border-radius: 16px;
}

/* Neutralize accidental container classes inside */
#xScoreboardSection.container,
#xScoreboardSection.container-fluid {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Tabs */
#xScoreboardSection .nav-tabs {
  background: transparent;
  border-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}
#xScoreboardSection .nav-tabs .nav-link {
  background: rgba(255,255,255,0.18);
  border: 0;
  border-radius: 999px; /* pill */
}
#xScoreboardSection .nav-tabs .nav-link.active,
#xScoreboardSection .nav-tabs .nav-link:hover,
#xScoreboardSection .nav-tabs .nav-link:focus {
  background: rgba(255,255,255,0.28);
  border: 0;
  box-shadow: none;
  outline: none;
}

/* DataTables controls */
#xScoreboardSection .dataTables_length select,
#xScoreboardSection .dataTables_filter input {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: none;
}

/* Table rows: remove Bootstrap white stripes */
#xScoreboardSection .table-striped tbody tr:nth-of-type(odd),
#xScoreboardSection .table tbody tr,
#xScoreboardSection .table td,
#xScoreboardSection .table th {
  background-color: transparent !important;
}

/* Pagination buttons */
#xScoreboardSection .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: rgba(255,255,255,0.18);
  border: 0;
}
#xScoreboardSection .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: rgba(255,255,255,0.28);
}

/* ================================
   ABOUT CARD
   ================================ */
#xAboutSection {
  width: min(1200px, 92vw);
  margin: 40px auto;
  background-image: linear-gradient(#d0dbd1, #e8f5e9c2) !important;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: 32px 28px 36px;
  overflow: hidden;
}

/* Strip inner whites and borders inside About */
#xAboutSection .container,
#xAboutSection .container-fluid,
#xAboutSection .card,
#xAboutSection .card-body,
#xAboutSection .row,
#xAboutSection .col,
#xAboutSection .section,
#xAboutSection .Main,
#xAboutSection .table,
#xAboutSection table {
  background: transparent !important;
  border: 0;
}

/* About text & links */
#xAboutSection,
#xAboutSection p,
#xAboutSection li,
#xAboutSection ol,
#xAboutSection ul,
#xAboutSection h1,
#xAboutSection h2,
#xAboutSection h3,
#xAboutSection h4,
#xAboutSection h5,
#xAboutSection h6 {
  color: #217a94 !important;
}
#xAboutSection a { color: #0b72b9; }
#xAboutSection a:hover,
#xAboutSection a:focus { color: #094f82; text-decoration: underline; }

/* ================================
   MOBILE TWEAKS
   ================================ */
@media (max-width: 768px) {
  #xScoreboardSection { padding: 20px; }
  #xScoreboardSection .nav-tabs .nav-link { background: rgba(255,255,255,0.16); }
  #xScoreboardSection .nav-tabs .nav-link.active { background: rgba(255,255,255,0.24); }
  #xScoreboardSection .dataTables_length select,
  #xScoreboardSection .dataTables_filter input { background: rgba(255,255,255,0.16); }

  #xAboutSection {
    width: 94vw;
    margin: 24px auto;
    padding: 24px;
    border-radius: 20px;
  }
}

#goto-top-link > a {
  background-color: #30aed2 !important;
}

/* --- Tab color tokens (tweak if needed) --- */
:root {
  --tab-red: #e31b23;           /* active bg */
  --tab-red-text: #ffffff;      /* active text */
  --tab-red-light: #fde3e5;     /* inactive bg */
  --tab-red-dark: #ff0009;      /* inactive text */
  --tab-focus: #ffb3b8;         /* focus ring */
}

/* Base pill styles (inactive by default) */
#xScoreboardSection .nav-tabs .nav-link,
#nav-monthlytable-tab,
#nav-classtable-tab {
  background: var(--tab-red-light) !important;
  color: var(--tab-red-dark) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: .5rem 1rem;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease;
}

/* Hover on inactive */
#xScoreboardSection .nav-tabs .nav-link:not(.active):hover,
#nav-monthlytable-tab:not(.active):hover,
#nav-classtable-tab:not(.active):hover {
  background: #f9cbd0 !important; /* a hair stronger than light */
}

/* Active = red pill with white text */
#xScoreboardSection .nav-tabs .nav-link.active,
#nav-monthlytable-tab.active,
#nav-classtable-tab.active {
  background: var(--tab-red) !important;
  color: var(--tab-red-text) !important;
}

/* Focus-visible ring (keyboard users) */
#xScoreboardSection .nav-tabs .nav-link:focus-visible,
#nav-monthlytable-tab:focus-visible,
#nav-classtable-tab:focus-visible {
  outline: 3px solid var(--tab-focus);
  outline-offset: 2px;
  box-shadow: none !important;
}

/* Remove default blue click outline/shadow */
#xScoreboardSection .nav-tabs .nav-link:focus,
#nav-monthlytable-tab:focus,
#nav-classtable-tab:focus {
  outline: none;
  box-shadow: none !important;
}

/* ---------- Activities Grid Palette ---------- */
:root{
  --pc-bg:        #f6fbff;   /* page section bg */
  --pc-surface:   #ffffff;   /* card surface */
  --pc-text:      #163041;   /* main text */
  --pc-muted:     #6a7a88;   /* secondary text */
  --pc-primary:   #0d6efd;   /* button & accents */
  --pc-primary-contrast: #ffffff;
  --pc-accent:    #00bfa6;   /* subtle accent highlight */
  --pc-radius:    14px;
  --pc-shadow:    0 10px 24px rgba(0,0,0,.08);
  --pc-shadow-hover: 0 16px 36px rgba(0,0,0,.12);
}

/* ---------- Section ---------- */
#xGamesSection.activities-grid{
  background: var(--pc-bg);
  border-radius: calc(var(--pc-radius) + 6px);
  padding: 1.25rem;
}

@media (min-width: 576px){
  #xGamesSection.activities-grid{ padding: 1.75rem; }
}

#xGamesSection .section-title{
  color: var(--pc-text);
  font-weight: 800;
  letter-spacing: .2px;
}

/* ---------- Cards ---------- */
.game-card{
  background: var(--pc-surface);
  border: 0;
  border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.game-card:focus-within,
.game-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--pc-shadow-hover);
}

/* image wrapper keeps consistent aspect ratio */
.card-img-top-wrap{
  position: relative;
  height: 220px;
  background: #eef3f7;
  overflow: hidden;
}

@media (min-width: 992px){
  .card-img-top-wrap{ height: 240px; }
}

.card-img-top{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.game-card:hover .card-img-top{ transform: scale(1.04); }
@media (prefers-reduced-motion: reduce){
  .game-card, .card-img-top{ transition: none; }
}

/* ---------- Typography & spacing ---------- */
.game-card .card-body{
  display: flex;
  flex-direction: column;
  text-align: center;
  color: var(--pc-text);
}

.game-card .card-title{
  font-weight: 700;
  color: var(--pc-text);
}

/* ---------- Buttons (big, friendly, accessible) ---------- */
.btn-pc{
  --btn-radius: calc(var(--pc-radius) * .8);
  --btn-padding-y: .85rem;
  --btn-padding-x: 1.25rem;

  border-radius: var(--btn-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  min-width: 164px;               /* >=44px hit target in height + generous width */
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(13,110,253,.25);
}

.btn-pc-primary{
  background: var(--pc-primary);
  color: var(--pc-primary-contrast);
  border: 2px solid var(--pc-primary);
}

.btn-pc-primary:hover,
.btn-pc-primary:focus{
  background: #0b5ed7;            /* slightly darker, still variable-friendly */
  border-color: #0b5ed7;
  color: var(--pc-primary-contrast);
}

/* Strong visible keyboard focus */
.game-link:focus,
.btn-pc:focus{
  outline: 3px solid var(--pc-accent);
  outline-offset: 3px;
}

/* Subtle label chip (optional, if you add one later) */
.pc-chip{
  display: inline-block;
  background: rgba(0,191,166,.12);
  color: var(--pc-accent);
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .8rem;
  font-weight: 700;
}

/* ---------- Even, responsive card grid ---------- */
:root{
  /* keep your existing vars; these are just shown for context */
  --pc-grid-gap: 20px;
  --pc-card-min: 280px;  /* min card width before wrapping */
}

.pc-card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--pc-card-min), 1fr));
  gap: var(--pc-grid-gap);
  align-items: stretch;      /* make all grid tracks same height */
}

@media (min-width: 576px){
  :root{ --pc-grid-gap: 22px; }
}
@media (min-width: 992px){
  :root{ --pc-grid-gap: 24px; --pc-card-min: 300px; }
}

/* ensure the article fills its grid cell vertically */
.pc-card-item{ display: flex; }
.pc-card-item .game-card{ width: 100%; display: flex; flex-direction: column; }

/* keep from earlier snippet; ensures consistent image height & tidy look */
.card-img-top-wrap{ height: 220px; }
@media (min-width: 992px){ .card-img-top-wrap{ height: 240px; } }
.game-card .card-body{ flex: 1; display: flex; flex-direction: column; text-align: center; }

/* Figure should expand to the image's natural height */
.pc-card-item .card-img-top-wrap {
  height: auto !important;      /* ensure no fixed height */
  overflow: visible;            /* nothing gets clipped */
  margin: 0;
}

/* Image scales proportionally, no cropping */
.pc-card-item .card-img-top {
  display: block;               /* removes inline-image bottom gap */
  width: 100%;
  height: auto !important;      /* keep aspect ratio */
  max-height: none !important;  /* in case a cap exists elsewhere */
  object-fit: initial !important; /* undo cover/contain rules */
}