/* Classic museum look for the Radio Days Theater of the Mind Museum (2026-10-27),
   modeled on the old radiodaysmuseum.org: deep blue background, cream framed panels,
   blue menu bar with cream lettering, blue headings. Made with plain CSS (no images
   from the old template). The walnut Radio Days version is saved as user-walnut-saved.css.
   Joomla updates don't overwrite this file (user.css). */
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");

:root {
  --mu-blue: #053a66; --mu-blue-dark: #03284a; --mu-nav1: #1d263c; --mu-nav2: #3a5f92;
  --mu-cream: #f8f3df; --mu-cream2: #efe6c4; --mu-frame: #d8c88e; --mu-frame-dark: #a8955a;
  --mu-ink: #1d1d1d; --mu-head: #365b90; --mu-link: #305185; --mu-link-hover: #1d3a66; --mu-navtext: #e3daa1;
  --cassiopeia-color-primary: #053a66; --cassiopeia-color-link: #305185; --cassiopeia-color-hover: #1d3a66;
  --link-color: #305185; --link-color-rgb: 48,81,133; --link-hover-color: #1d3a66; --link-hover-color-rgb: 29,58,102;
  --body-color: #1d1d1d; --bs-body-color: #1d1d1d; --bs-link-color: #305185; --bs-link-hover-color: #1d3a66;
  --rd-amber: #b8862b; --rd-muted: #6b6250; --rd-border: #d8c88e; --rd-panel: #fffaf0; --rd-text: #1d1d1d; --rd-hover: #8a6420;
}
body.site {
  background-color: var(--mu-blue);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 2px, rgba(0,0,0,0) 2px 5px),
    linear-gradient(180deg, #06467a 0%, #053a66 40%, #03284a 100%);
  background-attachment: fixed;
  color: var(--mu-ink);
  font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: .95rem;
}
h1, h2, h3, .page-header h1, .page-header h2, .item-title {
  font-family: "Century Gothic", "Apple Gothic", "Questrial", sans-serif; color: var(--mu-head); font-weight: 700;
}
a { color: var(--mu-link); }
a:hover, a:focus { color: var(--mu-link-hover); }

/* Cream framed panels (header and content), like the old site's parchment boxes */
.container-header, .site-grid {
  background: transparent !important; background-image: none !important;
}
.container-header > .grid-child, .site-grid > .grid-child, .site-grid > .container-component, .container-footer > .grid-child {
  background: linear-gradient(180deg, var(--mu-cream) 0%, var(--mu-cream2) 100%);
  border: 6px solid var(--mu-frame); border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--mu-frame-dark), inset 0 0 30px rgba(168,149,90,.35), 0 4px 14px rgba(0,0,0,.45);
}
.container-header > .grid-child { margin-top: 1rem; padding: .6rem 1.2rem; }
.container-header .navbar-brand { padding: .4rem 0; }
.container-header .brand-logo { background: transparent; border: 0; box-shadow: none; padding: 0; }
.container-header .brand-logo img { max-height: 120px; width: auto; }
.container-header .site-description { color: #4b4636; font-style: italic; }

/* Menu: a blue bar with cream lettering under the header */
.container-header > .container-nav {
  background: linear-gradient(180deg, var(--mu-nav1) 0%, var(--mu-nav2) 100%) !important;
  border: 0; border-radius: 0 0 8px 8px; box-shadow: 0 3px 10px rgba(0,0,0,.4);
  margin: 0 auto 1rem; padding: .25rem .6rem;
}
.container-header .metismenu, .container-header .mod-menu { gap: 0; flex-wrap: wrap; }
.container-header .metismenu > li > a, .container-header .mod-menu > li > a {
  color: var(--mu-navtext); font-family: Verdana, Geneva, sans-serif; font-size: .9rem; text-transform: none; letter-spacing: 0;
  background: transparent; border: 0; border-right: 1px solid rgba(255,255,255,.15); border-radius: 0;
  padding: .6rem 1rem; min-height: 44px; display: inline-flex; align-items: center; box-shadow: none;
}
.container-header .metismenu > li > a:hover, .container-header .metismenu > li > a:focus,
.container-header .mod-menu > li > a:hover { color: #fff; background: rgba(255,255,255,.12); }
.container-header .metismenu > li.active > a, .container-header .metismenu > li.current > a,
.container-header .mod-menu > li.active > a { color: #fff; background: rgba(0,0,0,.25); box-shadow: none; }
.container-header .navbar-toggler { color: var(--mu-navtext); border-color: var(--mu-navtext); }

/* Content */
.site-grid > .container-component { padding: 1.2rem 1.5rem; margin-bottom: 1rem; }
.item-page, .com-content-article, .blog-featured .blog-item, .blog .blog-item {
  background: transparent; border: 0; padding: 0; color: var(--mu-ink);
}
.container-component .page-header { border-bottom: 1px solid var(--mu-frame); margin-bottom: .8rem; }
.mod-breadcrumbs, .breadcrumb { color: #6b6250; }
.btn-primary, .btn-secondary { background: var(--mu-nav2); border-color: var(--mu-nav2); color: #fff; }
.card { background: #fffaf0; border-color: var(--mu-frame); }

/* Footer */
.container-footer { background: transparent !important; background-image: none !important; color: var(--mu-navtext); }
.container-footer > .grid-child { color: var(--mu-ink); }

/* Radio Premiums gallery: display cases */
.rd-case { background: #fffaf0; border: 1px solid var(--mu-frame); border-radius: 8px; margin: .6rem 0; }
.rd-case > summary { cursor: pointer; list-style: none; padding: .75rem 1rem; min-height: 44px; display: flex; align-items: center; gap: .6rem;
  font-family: "Century Gothic", "Questrial", sans-serif; font-weight: 700; color: var(--mu-head); font-size: 1.1rem; }
.rd-case > summary::-webkit-details-marker { display: none; }
.rd-case > summary::before { content: "\25B8"; color: var(--mu-head); transition: transform .2s; }
.rd-case[open] > summary::before { transform: rotate(90deg); }
.rd-case > summary span { margin-left: auto; font-family: Verdana, sans-serif; font-weight: 400; font-size: .85rem; color: #6b6250; }
.rd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .9rem; padding: 0 1rem 1rem; }
.rd-prem { margin: 0; background: #fff; border: 1px solid var(--mu-frame); border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.rd-prem img { width: 100%; height: 160px; object-fit: contain; background: #f3eedb; display: block; }
.rd-prem a:hover img, .rd-prem a:focus img { outline: 2px solid var(--mu-link); outline-offset: -2px; }
.rd-prem figcaption { font-size: .8rem; line-height: 1.3; color: var(--mu-ink); padding: .45rem .55rem .55rem; }
.rd-onair { display: block; margin-top: .45rem; padding-top: .45rem; border-top: 1px dashed var(--mu-frame); color: #6b6250; font-size: .76rem; }
.rd-onair a { color: var(--mu-link); text-decoration: underline; }

@media (max-width: 575px) {
  .container-header .brand-logo img { max-height: 84px; }
  .site-grid > .container-component { padding: 1rem; }
  .container-header .metismenu > li > a { border-right: 0; }
  .rd-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; padding: 0 .6rem .8rem; } .rd-prem img { height: 130px; }
}
/* Home page slideshow of the museum (16 photos, 5 seconds each, gentle crossfade; no script) */
.rd-show { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 560px; margin: 0 auto 1rem;
  background: #1d263c; border: 6px solid var(--mu-frame); border-radius: 8px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--mu-frame-dark), 0 4px 14px rgba(0,0,0,.45); }
.rd-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  animation: rdFade 80s infinite; }
.rd-slide:first-child { opacity: 1; animation-name: rdFadeFirst; }
@keyframes rdFadeFirst { 0% { opacity: 1; } 6.25% { opacity: 1; } 7.75% { opacity: 0; } 98.5% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rdFade { 0% { opacity: 0; } 1.5% { opacity: 1; } 6.25% { opacity: 1; } 7.75% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rd-slide { animation: none; } .rd-slide:not(:first-child) { display: none; } }
/* Shop: book covers */
.rd-books { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.rd-book { margin: 0; text-align: center; }
.rd-book img { width: 100%; max-width: 260px; height: auto; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.rd-book a:hover img, .rd-book a:focus img { outline: 3px solid var(--mu-link); outline-offset: 2px; }
.rd-book figcaption { margin-top: .7rem; line-height: 1.4; }
.rd-book .rd-buy { display: inline-block; margin-top: .5rem; padding: .55rem 1.1rem; min-height: 44px; line-height: 1.8;
  background: var(--mu-nav2); color: #fff; border-radius: 6px; text-decoration: none; font-weight: 700; }
.rd-book .rd-buy:hover, .rd-book .rd-buy:focus { background: var(--mu-nav1); color: #fff; }
/* Shop: one row per book, cover beside its description (stacked on phones) */
.rd-book-row { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; align-items: start; padding: 1.2rem 0; border-top: 1px solid var(--mu-frame); }
.rd-book-cover img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.rd-book-cover:hover img, .rd-book-cover:focus img { outline: 3px solid var(--mu-link); outline-offset: 2px; }
.rd-book-text h2 { margin-top: 0; font-size: 1.4rem; }
.rd-book-text .rd-buy { display: inline-block; padding: .55rem 1.1rem; min-height: 44px; line-height: 1.8; background: var(--mu-nav2); color: #fff; border-radius: 6px; text-decoration: none; font-weight: 700; }
.rd-book-text .rd-buy:hover, .rd-book-text .rd-buy:focus { background: var(--mu-nav1); color: #fff; }
@media (max-width: 640px) { .rd-book-row { grid-template-columns: 1fr; } .rd-book-cover { max-width: 240px; margin: 0 auto; } }