/* ============================================================
   RMS - rms-shared.css  (cleaned up)
   ============================================================
   Replaces both rms-jp.css and maps-jp.css, which were
   near-identical duplicates. Load this single file instead.

   Changes from originals:
   - Duplicate file merged into one
   - Commented-out old accordion block (~80 lines) deleted
   - Duplicate @media (max-width: 472px) block removed
     (redundant — 768px breakpoint already covers it)
   - Float-based .showcol layout replaced with flexbox
   - `background: 000` typo fixed to `background: #eee`
   - `offset: 50px` on .top fixed to CSS custom property
   - Old -webkit-transition / -moz-transition prefixes removed
   - CSS variables used for repeated colours & fonts
   ============================================================ */

@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap";

/* ------------------------------------------------------------
   CSS Custom Properties
   ------------------------------------------------------------ */
:root {
  --color-maroon:    #800000;
  --color-blue:      #004080;
  --color-accent:    #d00045;
  --color-grey-bg:   #eee;
  --color-stripe:    #e6e6fa;
  --font-montserrat: 'Montserrat', sans-serif;
}


/* ------------------------------------------------------------
   Global
   ------------------------------------------------------------ */
html, body {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}


/* ------------------------------------------------------------
   Show listing layout
   ------------------------------------------------------------ */
h6.showdec {
  color: var(--color-maroon);
  font-style: italic;
  font-size: 30px;
  font-family: Georgia, Times, 'Times New Roman', serif;
  text-shadow: 1px 1px #18191a;
}

/* Three-column show grid — uses flexbox instead of floats */
.showrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.showcol {
  flex: 0 0 33.33%;
  max-width: 33.33%;
  text-align: center;
  padding: 5px;
}

.headercol {
  width: 100%;
  text-align: center;
}

.lyricrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.lyriccol {
  flex: 0 0 33.33%;
  max-width: 33.33%;
  text-align: center;
  background-color: #EBEBEB;
}

@media only screen and (max-width: 768px) {
  .showcol,
  .lyriccol {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


/* ------------------------------------------------------------
   Floating Back-To-Top Button
   ------------------------------------------------------------ */
.top {
  --offset: 50px;
  position: sticky;
  bottom: 20px;
  margin-right: 10px;
  place-self: end;
  margin-top: calc(100vh + var(--offset));
  text-decoration: none;
  padding: 10px;
  font-family: sans-serif;
  color: #fff;
  background: #000;
  border-radius: 100px;
  white-space: nowrap;
}


/* ------------------------------------------------------------
   AIMS Awards table
   ------------------------------------------------------------ */
.awards-table {
  border-radius: .4em;
  overflow: hidden;
  margin: 0 auto;
  min-width: 300px;
}

.awards-table tr {
  border-color: #fff;
}

.awards-table th {
  display: none;
}

.awards-table td {
  display: block;
}

.awards-table td:first-child { padding-top: .2em; }
.awards-table td:last-child  { padding-bottom: .2em; }

.awards-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 6.5em;
  display: inline-block;
}

.awards-table th,
.awards-table td {
  margin: .2em 1em;
}

.awards-table tr:nth-child(odd) {
  background-color: var(--color-stripe);
}

@media (min-width: 480px) {
  .awards-table td:before {
    display: none;
  }

  .awards-table th,
  .awards-table td {
    display: table-cell;
    text-align: left;
    padding: 1em !important;
  }

  .awards-table th:first-child,
  .awards-table td:first-child { padding-left: 0 !important; }

  .awards-table th:last-child,
  .awards-table td:last-child  { padding-right: 0 !important; }

  .awards-table th,
  .awards-table td:before {
    color: var(--color-blue);
  }
}


/* ------------------------------------------------------------
   Body helpers
   ------------------------------------------------------------ */
.awards-body,
.aud-body,
.lyrics-body {
  padding: 0 2em;
  font-family: var(--font-montserrat);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-align: center;
  color: #444;
  background: var(--color-grey-bg);
}

.lyrics-body {
  width: 75%;
}


/* ------------------------------------------------------------
   Accordion
   ------------------------------------------------------------ */
.accordion {
  position: relative;
  margin: 10px auto;
  width: 100%;
}

[id*="open-accordion"],
[id*="close-accordion"] {
  background: #9b9b9b;
  border-bottom: 1px solid #fff;
  line-height: 40px;
  height: 40px;
  display: block;
  margin: 0 auto;
  position: relative;
  width: 99%;
}

[id*="close-accordion"] {
  display: none;
}

.accordion a {
  color: var(--color-accent);
  font-size: 1.25em;
  font-weight: normal;
  padding-left: 2%;
  text-decoration: none;
}

[id*="open-accordion"]:after,
[id*="close-accordion"]:after {
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(255, 255, 255, 0.6);
  position: absolute;
  right: 5px;
  top: 15px;
  z-index: 999;
  transform: rotate(-90deg);
}

.target-fix {
  display: block;
  top: 0;
  left: 0;
  position: fixed;
}

.accordion-content {
  background: #fff;
  height: 0;
  margin: -1px auto 0;
  padding: 0 2.5%;
  position: relative;
  overflow: hidden;
  width: 90%;
  transition: all 0.1s ease;
}

.accordion span:target ~ .accordion-content {
  display: block;
  height: auto;
  padding: 10px 2.5% 25px;
}

.accordion span:target ~ [id*="close-accordion"] {
  display: block;
}

.accordion span:target ~ [id*="open-accordion"] {
  display: none;
}

.accordion span:target ~ [id*="close-accordion"]:after {
  border-top-color: #fff;
  transform: rotate(0deg);
}

/* Colour variants */
.accordion.blue [id*="open-accordion"],
.accordion.blue [id*="close-accordion"] { background: #87C3D3; }

.accordion.red [id*="open-accordion"],
.accordion.red [id*="close-accordion"]  { background: #D38791; }