/* ===== Modern look & feel (drop in after Bootstrap) ===== */

:root{
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-1: 0 2px 10px rgba(0,0,0,.06);
  --shadow-2: 0 8px 24px rgba(0,0,0,.10);
  --shadow-pressed: 0 1px 4px rgba(0,0,0,.12) inset, 0 0 0 1px rgba(0,0,0,.06);
  --primary: #007bff;          /* Bootstrap 4 primary */
  --primary-rgb: 0,123,255;
}

/* Prefer-reduced-motion respect */
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}

/* ----- Sections & cards ----- */
section.bg-light.rounded {
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: var(--shadow-1);
}

.card{
  border: 0 !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden; /* for header rounding */
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.card.bg-light{
  background: #f9fafb; /* slightly cooler than #f8f9fa */
}

.card-header{
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
  font-weight: 600;
  padding-top: .9rem;
  padding-bottom: .9rem;
}

/* Nested cards (like your News + Participants items) */
.card .card{
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}
.card .card:hover{
  box-shadow: var(--shadow-2);
}

/* ----- Buttons: hover/press/focus “feel” ----- */
.btn{
  border-radius: 10px;
  transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
  position: relative; /* also enables optional ripple below */
}

/* Primary-filled */
.btn-primary{
  box-shadow: 0 6px 16px rgba(var(--primary-rgb), .25);
}
.btn-primary:hover{
  box-shadow: 0 10px 24px rgba(var(--primary-rgb), .32);
  transform: translateY(-1px);
}
.btn-primary:active{
  transform: translateY(1px) scale(.99);
  box-shadow: var(--shadow-pressed);
}

/* Outline variant */
.btn-outline-primary{
  border-color: rgba(var(--primary-rgb), .5);
  color: rgb(var(--primary-rgb));
  background-color: transparent;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.btn-outline-primary:hover{
  background-color: rgba(var(--primary-rgb), .06);
  border-color: rgba(var(--primary-rgb), .8);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.btn-outline-primary:active{
  transform: translateY(1px) scale(.99);
  box-shadow: var(--shadow-pressed);
}

/* Small buttons still feel tactile */
.btn-sm{ border-radius: 9px; }

/* Accessible focus ring */
.btn:focus, .btn.focus{
  outline: 0;
  box-shadow:
    0 0 0 .2rem rgba(var(--primary-rgb), .25),
    0 6px 16px rgba(0,0,0,.12);
}

/* ----- Optional CSS ripple (add class .btn-ripple to any .btn) ----- */
.btn-ripple{ overflow: hidden; }
.btn-ripple::after{
  content:"";
  position:absolute; inset:auto;
  width:10px; height:10px; border-radius:50%;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  opacity: 0;
  transition: transform .45s ease, opacity .6s ease;
}
.btn-ripple:active::after{
  left: var(--x,50%); top: var(--y,50%);  /* falls back to center */
  transform: scale(30);
  opacity: 1;
}

/* (Optional) If you want ripple centered without JS, use this variant: */
/*
.btn-ripple:active::after{
  left: 50%; top: 50%; transform: translate(-50%,-50%) scale(30);
  opacity: 1;
}
*/

/* ----- Avatars / social icons subtle pop ----- */
.hover_img_round{
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.hover_img_round:hover{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  filter: saturate(1.05);
}

/* ----- Utility: tidy small text color inside cards ----- */
.card .small{ color: rgba(0,0,0,.6); }


/* ===== Universal Bootstrap button modernizer ===== */

/* Base style for all buttons */
.btn{
  border-radius: 10px;
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease, background-color .12s ease, color .12s ease;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Hover = gentle lift */
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* Active (press) = dip in */
.btn:active{
  transform: translateY(1px) scale(.99);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
}

/* Keep accessibility focus ring */
.btn:focus, .btn.focus{
  outline: 0;
  box-shadow:
    0 0 0 .2rem rgba(0,123,255,.25),
    0 6px 14px rgba(0,0,0,.12);
}

/* Filled buttons (primary, success, danger, etc.) → white text always */
.btn[class*="btn-"]:not([class*="outline"]):not(.btn-light):not(.btn-link){
  color: #fff !important;
}

/* Outline buttons → white background + colored text */
.btn[class*="btn-outline-"]{
  background: #fff !important;
}
.btn[class*="btn-outline-"]:hover,
.btn[class*="btn-outline-"]:focus{
  background: linear-gradient(180deg, rgba(0,0,0,.03), #fff) !important;
}

/* Special cases */
.btn-light{
  color: #212529 !important;
  background: #f8f9fa !important;
}
.btn-link{
  box-shadow: none !important;
  transform: none !important;
}

/* Keep outline button text colored (never white) across hover/focus */
.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  color: #007bff !important;
}

.btn-outline-secondary,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus{
  color: #6c757d !important;
}

.btn-outline-success,
.btn-outline-success:hover,
.btn-outline-success:focus{
  color: #28a745 !important;
}

.btn-outline-danger,
.btn-outline-danger:hover,
.btn-outline-danger:focus{
  color: #dc3545 !important;
}

.btn-outline-warning,
.btn-outline-warning:hover,
.btn-outline-warning:focus{
  color: #ffc107 !important;
}

.btn-outline-info,
.btn-outline-info:hover,
.btn-outline-info:focus{
  color: #17a2b8 !important;
}

.btn-outline-dark,
.btn-outline-dark:hover,
.btn-outline-dark:focus{
  color: #343a40 !important;
}

/* Optional: outline-light on white bg is low contrast — make it readable */
.btn-outline-light,
.btn-outline-light:hover,
.btn-outline-light:focus{
  color: #495057 !important;        /* readable gray */
  border-color: #dee2e6 !important; /* subtle border */
}

/* 1) When a modal is open, kill hover transforms to avoid flicker */
.modal-open .card:hover,
.modal-open .btn:hover,
.modal-open .hover_img_round:hover{
  transform: none !important;
  box-shadow: inherit !important;
}

/* 2) Constrain big images inside modals so they never exceed viewport */
.modal-body img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;

  /* keep within viewport height minus header/footer paddings */
  max-height: calc(100vh - 6rem);
  object-fit: contain;
}

/* 3) Allow modal content to scroll instead of resizing the whole page */
.modal-body{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* 4) Reduce compositing glitches on fade transitions (helps on Safari/Chrome) */
.modal,
.modal-backdrop{
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* Let dropdowns escape the card */
.card{ overflow: visible; }

/* Still keep nice rounded header visuals */
.card-header{
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  overflow: hidden;
}