/* jmrpStyles.css
   Centralized styles for JMRP pages (Games/Resume/Main) + shared components.
   Goal: remove all inline <style> tags and keep styling consistent site-wide.
*/

/* ----------------------------
   0) Design Tokens (Red/Black Identity)
---------------------------- */
:root{
  --rt-black: #0b0b0e;
  --rt-ink: #121218;
  --rt-white: #f5f5f7;

  --rt-red: #c1121f;
  --rt-red-2: #e11d2e;

  --rt-border: rgba(0,0,0,.14);
  --rt-border-soft: rgba(0,0,0,.10);
  --rt-shadow: 0 .35rem 1.25rem rgba(0,0,0,.08);

  --rt-muted: rgba(0,0,0,.62);
  --rt-muted-2: rgba(0,0,0,.50);

  --rt-radius: 16px;
  --rt-radius-sm: 14px;
}

/* Dark mode assumes you toggle body.dark-mode */
body.dark-mode{
  background: var(--rt-black);
  color: var(--rt-white);
}

/* Bootstrap text helpers in dark mode */
body.dark-mode .text-body-secondary{
  color: rgba(255,255,255,.65) !important;
}
body.dark-mode .text-muted{
  color: rgba(255,255,255,.60) !important;
}

/* ----------------------------
   1) Typography Helpers
---------------------------- */
.page-hero-title{
  font-weight: 800;
  letter-spacing: -0.02em;
}

.section-title{
  font-weight: 700;
  margin-bottom: .25rem;
}

.section-subtitle{
  color: var(--rt-muted);
  margin-bottom: 1rem;
}

body.dark-mode .section-subtitle{
  color: rgba(255,255,255,.65);
}

/* Optional: keep big intro paragraphs from spanning too wide */
.intro-lead{
  max-width: 70ch;
}

/* ----------------------------
   2) Cards (Premium, consistent)
---------------------------- */
.card{
  border-radius: var(--rt-radius);
  border: 1px solid var(--rt-border);
  overflow: hidden;
}

.card.shadow-sm{
  box-shadow: var(--rt-shadow) !important;
}

body.dark-mode .card{
  background: rgba(18,18,24,.92);
  border-color: rgba(255,255,255,.14);
}

/* Red accent stripe (use: class="card ... card-accent") */
.card.card-accent{
  position: relative;
}
.card.card-accent::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--rt-red);
}

/* ----------------------------
   3) Buttons (Your Red/Black identity)
   Works with your existing classes: bootsButton-wr, bootsButton-rb
---------------------------- */
.bootsButton-wr{
  background: var(--rt-red);
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.35) !important;
}

.bootsButton-wr:hover,
.bootsButton-wr:focus{
  background: var(--rt-red-2);
  color: #fff !important;
}

.bootsButton-rb{
  background: var(--rt-ink);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

.bootsButton-rb:hover,
.bootsButton-rb:focus{
  filter: brightness(1.08);
  color: #fff !important;
}

body.dark-mode .bootsButton-rb{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14) !important;
}

body.dark-mode .bootsButton-wr{
  border-color: rgba(255,255,255,.10) !important;
}

/* Make these play nicely when used as <a class="btn bootsButton-..."> */
a.btn.bootsButton-wr,
a.btn.bootsButton-rb{
  text-decoration: none;
}

/* Optional: a subtle “accent link” utility */
a.link-accent{
  color: var(--rt-red);
  text-decoration: none;
}
a.link-accent:hover{
  color: var(--rt-red-2);
  text-decoration: underline;
}

/* ----------------------------
   4) Badges (less “bootstrap-y”)
---------------------------- */
.badge.text-bg-secondary{
  background: rgba(18,18,24,.92) !important;
  border: 1px solid rgba(255,255,255,.12);
}

body.dark-mode .badge.text-bg-secondary{
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.14);
}

/* Convert “warning” badges into a red-accent badge style */
.badge.text-bg-warning{
  background: rgba(193,18,31,.15) !important;
  color: var(--rt-red) !important;
  border: 1px solid rgba(193,18,31,.35);
}

/* ----------------------------
   5) Media Fit Helpers (for your image cards)
---------------------------- */
.img-fit-contain{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #111;
}

.img-fit-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  cursor: pointer;
}

/* ----------------------------
   6) Modal styling (image zoom modal)
---------------------------- */
.modal-content{
  border-radius: var(--rt-radius);
  border: 1px solid var(--rt-border);
}

body.dark-mode .modal-content{
  background: rgba(18,18,24,.96);
  border-color: rgba(255,255,255,.14);
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer{
  border-color: rgba(255,255,255,.10);
}

/* ----------------------------
   7) Pillar Cards (“Choose a path” cards)
---------------------------- */
.pillar-card{
  transition: transform .12s ease, box-shadow .12s ease;
}

.pillar-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 .6rem 1.5rem rgba(0,0,0,.10) !important;
}

.pillar-title{
  font-weight: 800;
  letter-spacing: -0.01em;
}

.pillar-desc{
  color: var(--rt-muted);
}

body.dark-mode .pillar-desc{
  color: rgba(255,255,255,.70);
}

/* Category icon in pillar cards */
.pillar-icon{
  font-size: 1.75rem;
  opacity: 0.88;
  margin-bottom: .5rem;
}
.pillar-card:hover .pillar-icon{
  opacity: 1;
}

/* ----------------------------
   8) Collapse Toggle helpers (Resume page)
---------------------------- */
.collapse-toggle{
  cursor: pointer;
  user-select: none;
}

.collapse-toggle:hover{
  opacity: .92;
}

.arrowToggle{
  display: inline-block;
  transition: transform .18s ease;
  margin-left: .5rem;
}

.arrowToggle.rotated{
  transform: rotate(180deg);
}

/* ----------------------------
   9) Hero Banner (Homepage “main character”)
---------------------------- */
.hero-banner{
  position: relative;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  padding: 28px;
  color: #fff;

  /* Pure gradient hero (no image) */
  background:
    radial-gradient(900px 280px at 18% 12%, rgba(193,18,31,.28), transparent 62%),
    radial-gradient(700px 240px at 85% 30%, rgba(225,29,46,.14), transparent 60%),
    linear-gradient(180deg, rgba(28,28,34,.85) 0%, rgba(10,10,14,.96) 65%, rgba(8,8,10,.98) 100%);

  border-radius: 16px;
  box-shadow: 0 .75rem 2rem rgba(0,0,0,.22);
}

.hero-banner::after{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  height: 2px;
  background: linear-gradient(90deg, rgba(193,18,31,.0), rgba(193,18,31,.65), rgba(193,18,31,.0));
  opacity: .75;
}


.hero-kicker{
  font-weight: 600;
  opacity: .92;
}

.hero-sub{
  opacity: .92;
  max-width: 70ch;
}

/* If you want a “no image” hero variant:
   Add class="hero-banner hero-banner--flat" to the element. */
.hero-banner.hero-banner--flat{
  background:
    radial-gradient(900px 280px at 20% 10%, rgba(193,18,31,.25), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.88) 100%);
}

/* ----------------------------
   10) Bottom navigation (mini or standard)
---------------------------- */
/* Use this on any “footer nav container” */
.bottom-nav{
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}

/* If you kept the older fixed-bar approach and ever need it again:
   Add class="bottom-nav bottom-nav--fixed" */
.bottom-nav.bottom-nav--fixed{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

/* When using fixed bottom nav, apply this class on the page wrapper */
.page-content--has-fixed-bottomnav{
  padding-bottom: 90px; /* nav height + breathing room */
}

/* ----------------------------
   11) Footer (optional polish)
---------------------------- */
.site-footer hr{
  opacity: .25;
}

body.dark-mode .site-footer hr{
  opacity: .18;
}

/* ----------------------------
   12) Small QoL helpers
---------------------------- */
.text-shadow-soft{
  text-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* Make sure card images have clean corners */
.card img.card-img-top{
  display: block;
}

/* Avoid underline in nav buttons/CTAs */
a.text-decoration-none{
  text-decoration: none !important;
}



/* Footer mini navigation (4 selectors) */
.site-mini-nav{
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}

.site-mini-nav .site-nav-btn{
  display: block;
  width: 100%;
  padding: .75rem 1rem;
  border-radius: 10px;

  background: var(--rt-red);
  color: #fff !important;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;

  border: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.08);
}

.site-mini-nav .site-nav-btn:hover{
  background: var(--rt-red-2);
  color: #fff !important;
}

body.dark-mode .site-mini-nav .site-nav-btn{
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 .35rem 1rem rgba(0,0,0,.25);
}




/* =========================================
   Button Normalization (fix broken buttons)
   Supports: <a>, <button>, <input>
========================================= */

/* Make all .btn elements look consistent */
a.btn, button.btn, input.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border-radius: 10px;
  line-height: 1.1;
  font-weight: 700;
  text-decoration: none;
}

/* Ensure our custom “brand buttons” work on BOTH <a> and <button> */
a.bootsButton-wr, button.bootsButton-wr, input.bootsButton-wr,
a.btn.bootsButton-wr, button.btn.bootsButton-wr, input.btn.bootsButton-wr{
  background: var(--rt-red) !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.35) !important;
}

a.bootsButton-wr:hover, button.bootsButton-wr:hover, input.bootsButton-wr:hover,
a.btn.bootsButton-wr:hover, button.btn.bootsButton-wr:hover, input.btn.bootsButton-wr:hover{
  background: var(--rt-red-2) !important;
  color: #fff !important;
}

a.bootsButton-rb, button.bootsButton-rb, input.bootsButton-rb,
a.btn.bootsButton-rb, button.btn.bootsButton-rb, input.btn.bootsButton-rb{
  background: var(--rt-red) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

a.bootsButton-rb:hover, button.bootsButton-rb:hover, input.bootsButton-rb:hover,
a.btn.bootsButton-rb:hover, button.btn.bootsButton-rb:hover, input.btn.bootsButton-rb:hover{
  filter: brightness(1.08);
  color: #fff !important;
}

/* Fix outline buttons getting “empty” due to reset rules */
a.btn-outline-secondary, button.btn-outline-secondary{
  border-width: 1px;
}

/* Remove “default button reset” effects if you had any in older CSS */
button, input[type="button"], input[type="submit"]{
  background-color: initial;
}