/* ============================================================================
   TrivialStudies site stylesheet
   Extracted from quizzer/scripts/colors.php + quizzer/scripts/mobile.php.
   Themes are switched by <html data-theme="light|dark|default">.
   Mobile is the base; desktop overrides come from @media (min-width: 769px).
   Version this file with a ?v= query in the <link> tag for cache busting.
   ============================================================================ */

/* ---- Theme palettes ---- */
:root,
:root[data-theme="light"] {
  --body:            white;
  --header:          #ededed;
  --option:          #ededed;
  --hover:           grey;
  --correct:         #ededed;
  --incorrect:       #ededed;
  --stripe:          #ededed;
  --font:            black;

  --opt-0:           #dedede;
  --opt-1:           #e3e3e3;
  --opt-2:           #e7e7e7;
  --opt-3:           #ebebeb;
  --opt-4:           #efefef;

  --link:            black;
  --link-visited:    grey;
  --link-hover:      grey;
  --link-active:     grey;

  --text-shadow:     rgba(79,150,190,1);
}

:root[data-theme="dark"] {
  --body:            black;
  --header:          #122023;
  --option:          #122023;
  --hover:           grey;
  --correct:         #122023;
  --incorrect:       #122023;
  --stripe:          #122023;
  --font:            white;

  --opt-0:           #122023;
  --opt-1:           #101d20;
  --opt-2:           #0e1a1d;
  --opt-3:           #0c171a;
  --opt-4:           #0a1417;

  --link:            white;
  --link-visited:    grey;
  --link-hover:      grey;
  --link-active:     grey;

  --text-shadow:     rgba(144,144,144,1);
}

/* The "book" default (used before white/dark cookies were introduced) */
:root[data-theme="default"] {
  --body:            #3477B5;
  --header:          #215C97;
  --option:          #215C97;
  --hover:           #73C586;
  --correct:         #56A659;
  --incorrect:       #ED616F;
  --stripe:          #448ABB;
  --font:            white;

  --opt-0:           #6CB7C0;
  --opt-1:           #70BDBE;
  --opt-2:           #73C1BE;
  --opt-3:           #75C5BD;
  --opt-4:           #6FC4AB;

  --link:            blue;
  --link-visited:    teal;
  --link-hover:      orangered;
  --link-active:     fuchsia;

  --text-shadow:     rgba(79,150,190,1);
}

/* Special event palettes formerly generated by quizzer/quizzes.php. */
:root[data-theme="halloween"] {
  --body:            #000000;
  --header:          #FF6A00;
  --option:          #FF6A00;
  --hover:           #B200FF;
  --correct:         #4C9F00;
  --incorrect:       #FF6A00;
  --stripe:          #FF6A00;
  --font:            white;
  --opt-0:           #FF6A00;
  --opt-1:           #FF6A00;
  --opt-2:           #FF6A00;
  --opt-3:           #FF6A00;
  --opt-4:           #FF6A00;
  --link:            white;
  --link-visited:    grey;
  --link-hover:      #B200FF;
  --link-active:     #B200FF;
  --text-shadow:     rgba(144,144,144,1);
}

:root[data-theme="christmas"] {
  --body:            #0D5901;
  --header:          #B3000C;
  --option:          #B3000C;
  --hover:           #DC3D2A;
  --correct:         #378B29;
  --incorrect:       #B3000C;
  --stripe:          #B3000C;
  --font:            white;
  --opt-0:           #B3000C;
  --opt-1:           #B3000C;
  --opt-2:           #B3000C;
  --opt-3:           #B3000C;
  --opt-4:           #B3000C;
  --link:            white;
  --link-visited:    grey;
  --link-hover:      #DC3D2A;
  --link-active:     #DC3D2A;
  --text-shadow:     rgba(144,144,144,1);
}

:root[data-theme="twa"] {
  --body:            #000000;
  --header:          #8D2A35;
  --option:          #536388;
  --hover:           #ACD9F0;
  --correct:         #ACD9F0;
  --incorrect:       #8D2A35;
  --stripe:          #8D2A35;
  --font:            white;
  --opt-0:           #536388;
  --opt-1:           #536388;
  --opt-2:           #536388;
  --opt-3:           #536388;
  --opt-4:           #536388;
  --link:            white;
  --link-visited:    grey;
  --link-hover:      #ACD9F0;
  --link-active:     #ACD9F0;
  --text-shadow:     rgba(144,144,144,1);
}

:root[data-theme="oregon"] {
  --body:            #000000;
  --header:          #16A400;
  --option:          #16A400;
  --hover:           #F05910;
  --correct:         #16A400;
  --incorrect:       #F05910;
  --stripe:          #16A400;
  --font:            white;
  --opt-0:           #16A400;
  --opt-1:           #16A400;
  --opt-2:           #16A400;
  --opt-3:           #16A400;
  --opt-4:           #16A400;
  --link:            white;
  --link-visited:    grey;
  --link-hover:      #F05910;
  --link-active:     #F05910;
  --text-shadow:     rgba(144,144,144,1);
}

/* ============================================================================
   Base layout (mobile-first — matches the "$global_mobile == true" branches)
   ============================================================================ */

.dummy { margin: 0; }

html {
  margin: 0;
  padding: 0;
  font-family: arial;
  font-size: 2.25vh;
  font-weight: 450;
  color: var(--font);
}

.copy_font { color: var(--font); }

body {
  margin: 0;
  padding: 0;
  background: var(--body);
  text-align: center;
}

/* Shared navigation rendered by quizzer/scripts/setup.php. */
.site-nav {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  color: var(--font);
  font-size: 0.95rem;
}

.site-nav a,
.site-nav summary {
  color: var(--font);
  cursor: pointer;
  text-decoration: none;
  padding: 0.35rem 0.5rem;
  border-radius: 0.35rem;
}

.site-nav a:hover,
.site-nav summary:hover {
  background: var(--option);
}

.site-nav a:link,
.site-nav a:visited,
.site-nav summary { color: var(--font); }
.site-nav a.is-current { color: var(--link-visited); }

.site-nav details { position: relative; }
.site-nav summary { list-style: none; }
.site-nav summary::-webkit-details-marker { display: none; }
.site-nav-menu {
  position: absolute;
  right: 0;
  top: 2.2rem;
  min-width: 10rem;
  padding: 0.35rem;
  background: var(--header);
  border: 1px solid var(--hover);
  border-radius: 0.4rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.25);
}
.site-nav-menu a { display: block; white-space: nowrap; }

.live-quiz-section-header {
  font-size: 110%;
  font-weight: 700;
}

@media (max-width: 768px) {
  .site-nav { right: 0.35rem; gap: 0.1rem; font-size: 0.8rem; }
  .site-nav a, .site-nav summary { padding: 0.25rem; }
  td.header, td#header { padding: 0.5rem; }
}

table#page {
  margin: 0 auto;
  height: 100vh;
  width: 100vw;
  position: absolute;
  overflow: auto;
  top: 0; bottom: 0; left: 0; right: 0;
  text-align: center;
  border-collapse: collapse;
}

td.header,
td#header {
  background: var(--header);
  height: 8vh;
  vertical-align: middle;
  text-align: center;
  font-size: 4vh;                                 /* mobile */
  text-shadow: 1px 1px 1px var(--text-shadow);
  box-sizing: border-box;
}

td.tabs_header {
  background: var(--header);
  height: 6vh;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
  font-size: 4vh;
  padding: 1vh;
  /* border-radius applied on desktop only */
}

table#tabs {
  margin-left: auto;
  margin-right: auto;
  font-size: 3vh;
  text-align: center;
  border-collapse: collapse;
  overflow: auto;
}

.tab_cell {
  background: var(--option);
  padding: 1vh;
  width: 20vw;
  height: 5vh;
  border: 1vh solid var(--body);
  border-radius: 2vh;
}
.tab_cell:hover {
  background: var(--hover);
  cursor: pointer;
}

.link_cell,
.patron_cell {
  background: var(--option);
  padding: 2px;
  border-width: 0 3px;
  border-style: solid;
  border-color: var(--body);
  border-radius: 5px;
}
.link_cell:hover { background: var(--hover); }

td#ajax_reload {
  height: 89vh;
  vertical-align: middle;
  text-align: center;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  overflow: auto;
}

table#main {
  margin: 0 auto;
  padding: 0;
  height: 89vh;
  width: 100vw;                                   /* mobile */
  text-align: center;
  border-collapse: collapse;
  position: absolute;
  overflow: auto;
  top: 8vh; bottom: 0; left: 0; right: 0;
}

table#data { border-collapse: collapse; }

td#data {
  text-align: center;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  overflow: auto;
  vertical-align: top;
}

table.data {
  margin-left: auto;
  margin-right: auto;
  padding: 1vh;
  width: 97vw;                                    /* mobile */
  text-align: center;
  border-collapse: collapse;
  overflow: auto;
}

table.title { border-collapse: collapse; padding: 0; }

td.title {
  background: var(--header);
  height: 4vh;
  vertical-align: middle;
  text-align: center;
  font-size: 4vh;
}

td.title_back {
  width: 2vw;
  cursor: pointer;
  line-height: 0.93;
}
td.title_back:hover { text-shadow: 1px 1px 1px var(--text-shadow); }

td.title_text {
  width: 98vw;
  line-height: 0.93;
}

td.section_header,
div.section_header { background: var(--option); }
div.section_header { width: 100%; }

div.blog_header {
  background: var(--option);
  padding: 5px;
  border-radius: 5px;
  border: 2px solid var(--hover);
}

td.section_title {
  background: var(--header);
  width: 95vw;
}

td#question {
  height: 40vh;
  vertical-align: middle;
  text-align: center;
  border-collapse: collapse;
  padding: 0;
  overflow: auto;
  text-wrap: balance;
  color: var(--font);
}

td.response {
  border-collapse: collapse;
  border-style: none;
  text-align: left;
  vertical-align: top;
}

td.icon {
  border-collapse: collapse;
  border-style: none;
  text-align: right;
  vertical-align: top;
}

td.pavlov {
  border-collapse: collapse;
  border-style: none;
  text-align: right;
  vertical-align: top;
  font-weight: bold;
  color: var(--font);
}

td.info {
  text-align: left;
  border-collapse: collapse;
  margin: 0;
  padding: 2px;
  overflow: auto;
  vertical-align: top;
  color: var(--font);
}

td.quiz_link {
  font-size: 2.5vh;
  font-weight: 500;
}

div#home {
  font-size: 2.5vh;                               /* mobile */
  margin: 0 auto;
  width: 88vw;                                    /* mobile */
  padding: 1.5vh;
  line-height: 1.1;                               /* mobile */
  text-wrap: balance;
}

div#randq,
div.randq {
  background: var(--option);
  border: 2px solid var(--hover);
  padding: 2vh;
  border-radius: 8px;
}

td.spacer {
  height: 2.5vh;
  border-collapse: collapse;
  padding: 0;
  overflow: auto;
}

td.option {
  background: var(--option);
  height: 8.5vh;
  border-collapse: collapse;
  vertical-align: middle;
  text-align: center;
  text-wrap: balance;
  line-height: 1.4;
  font-size: 3vh;
  padding: 2px;
  overflow: auto;
}
td.option:hover,
td.option:active {
  background: var(--hover);
  cursor: pointer;
}

div.return_home {
  background: var(--option);
  margin: 0 auto;
  height: 4.5vh;
  width: 100vw;                                   /* mobile */
  border-collapse: collapse;
  vertical-align: middle;
  text-align: center;
  text-wrap: balance;
  line-height: 1.4;
  font-size: 3vh;
  padding: 2px;
  position: fixed;
  overflow: auto;
  bottom: 0; left: 0; right: 0;
  z-index: 1;
}
div.return_home:hover,
div.return_home:active {
  background: var(--hover);
  cursor: pointer;
}

/* option0..option3 colored answer cells */
td.option0, td.option1, td.option2, td.option3 {
  height: 8.5vh;
  border-collapse: collapse;
  vertical-align: middle;
  text-align: center;
  text-wrap: balance;
  line-height: 1.4;
  font-size: 3vh;
  padding: 2px;
  overflow: auto;
  border-radius: 1vh;
}
td.option0 { background: var(--opt-0); }
td.option1 { background: var(--opt-1); }
td.option2 { background: var(--opt-2); }
td.option3 { background: var(--opt-3); }

td.option0:hover, td.option0:active,
td.option1:hover, td.option1:active,
td.option2:hover, td.option2:active,
td.option3:hover, td.option3:active {
  background: var(--hover);
  cursor: pointer;
}

table#correct,
table#wrong,
table#results {
  margin: 0 auto;
  padding: 0;
  height: 91vh;
  width: 97vw;                                    /* mobile */
  text-align: center;
  border-collapse: collapse;
  position: absolute;
  overflow: auto;
  top: 8vh; bottom: 0; left: 0; right: 0;
}

td#correct_header {
  background: var(--correct);
  font-weight: 650;
  height: 9vh;
  border-collapse: collapse;
  vertical-align: middle;
  font-size: 4.5vh;
  text-align: center;
  padding: 0;
  overflow: auto;
}

td#incorrect_header {
  background: var(--incorrect);
  font-weight: 650;
  height: 9vh;
  border-collapse: collapse;
  font-size: 4.5vh;
  vertical-align: middle;
  text-align: center;
  padding: 0;
  overflow: auto;
}

td#answer {
  height: 42vh;
  vertical-align: middle;
  text-align: center;
  text-wrap: balance;
  border-collapse: collapse;
  padding: 0;
  overflow: auto;
  color: var(--font);
}

span.notes {
  font-size: 2.5vh;
  line-height: 1.0;                               /* mobile */
}

span.bld { font-weight: bold; }
span.itl { font-style: italic; }

td#footer {
  height: 4vh;
  vertical-align: middle;
  text-align: center;
  border-collapse: collapse;
  padding: 0;
  overflow: auto;
}

tr.outlined_row { border-bottom: 1px solid var(--stripe); }

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

tr.stripe:hover {
  background: var(--hover);
  cursor: pointer;
}

img {
  border: 1px solid lightgrey;
  height: 20vh;                                   /* mobile */
  object-fit: contain;
  max-width: 80vh;
}

a:link    { color: var(--link); }
a:visited { color: var(--link-visited); }
a:hover   { color: var(--link-hover); text-shadow: 2px 2px 2px var(--text-shadow); }
a:active  { color: var(--link-active); }

.mouse_pointer:hover { cursor: pointer; }

.font_85 { font-size: 85%; }

.button {
  vertical-align: middle;
  border: 0;
  height: auto;
  width: auto;
}

img.convert {
  vertical-align: middle;
  border: 0;
  max-width: 100%;
}

table.amazon_link {
  color: navy;
  background: white;
  font-size: 65%;                                 /* mobile */
  padding: 0;
  margin: 0 auto;
  border-style: solid;
  border-width: 3px 1px 1px 1px;
  border-color: darkorange gray gray gray;
}
table.amazon_link:hover { color: blue; }

td.amazon_shop {
  width: 118px;
  vertical-align: bottom;
  text-align: right;
}
img.amazon_shop {
  border: 0;
  height: auto;
}

.input[type=text] {
  font-size: 2.25vh;
  color: white;
  background-color: var(--header);
  padding: 4px 4px;
  margin: 8px 0;
  box-sizing: border-box;
}

input[type=submit] {
  font-size: 2.25vh;
  color: var(--font);
  background-color: var(--option);
  border: none;
  padding: 8px 16px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
input[type=submit]:hover { background-color: var(--hover); }

.raise:hover,
.raise:focus {
  box-shadow: 0 0.3em 0.3em -0.2em #000;
  transform: translateY(-0.05em);
}

/* Popup */
.popup {
  background-color: var(--option);
  padding: 2px;
  border-radius: 4px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.popup:hover { background-color: var(--hover); }

.popup .popuptext {
  visibility: hidden;
  width: 90vw;                                    /* mobile */
  background-color: var(--option);
  color: var(--font);
  text-align: left;
  border-radius: 6px;
  padding: 1vh;
  position: absolute;
  z-index: 20;
  bottom: 125%;
  left: 12%;
  margin-left: 0;
  cursor: pointer;
}

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 5%;
  margin-left: -11px;
  border-width: 11px;
  border-style: solid;
  border-color: var(--option) transparent transparent transparent;
}

.popup .show { visibility: visible; }

.popupinst {
  padding: 2px;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  z-index: 24;
}
.popupinst:hover { background-color: var(--hover); }

.popupinst .popuptext_inst {
  visibility: hidden;
  width: 60vw;                                    /* mobile */
  background-color: var(--option);
  color: var(--font);
  text-align: left;
  border-radius: 8px;
  padding: 1vh;
  position: absolute;
  z-index: 25;
  top: 15%;
  right: 110%;
  cursor: pointer;
  border: 2px solid var(--hover);
}
.popupinst .show { visibility: visible; }

span.blink { animation: blinker 3s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }

td.compscorehead {
  font-weight: bold;
  padding: 0.5vh;
  text-align: center;
}
td.compscore {
  padding: 0.5vh;
  text-align: center;
}

/* ============================================================================
   Flash Cards page
   ============================================================================ */

body.flash_cards_page td#data {
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
}

body.flash_cards_page div.cards_all {
  width: 98vw;
}

body.flash_cards_page div.flash_card {
  border: 1px solid var(--stripe);
  border-radius: 8px;
  box-shadow: 1px 1px 10px 0 var(--header);
  padding: 2vw;
  margin: 1vw;
  text-align: center;
}

body.flash_cards_page div.flash_card_color {
  background: var(--option);
}

body.flash_cards_page div.flash_card:hover {
  cursor: pointer;
  border: 1px solid var(--hover);
}

body.flash_cards_page span.title {
  font-weight: bold;
  text-shadow: 1px 1px 1px var(--text-shadow);
}

body.flash_cards_page a:link {
  color: DarkOrange;
  font-weight: bold;
  text-decoration: none;
}

body.flash_cards_page a:hover {
  color: DeepPink;
  text-shadow: 2px 2px 2px var(--text-shadow);
}

.flash_card_cell_center {
  text-align: center;
}

.flash_card_stack {
  display: block;
  text-align: center;
}

.cards_all_layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flash_distribution_table {
  width: 25vw;
}

.flash_card_image {
  background-color: white;
  max-width: 240px;
  max-height: 240px;
  width: auto;
  height: auto;
}

.return_home_link {
  cursor: pointer;
}

/* ============================================================================
   Rapid Reader mode (flash/index.php?reader=1)
   ============================================================================ */

body.rapid_reader_body {
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.rapid_reader {
  font-family: Arial, Helvetica, sans-serif;
  background-color: MediumSeaGreen;
  border: none;
  color: white;
  padding: 2vh 4vh;
  text-align: center;
  font-size: 3.4vh;
  margin: 0.6vh 0.3vh;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
}

.rapid_reader_timer {
  background-color: DarkMagenta;
}

.rapid_reader_button {
  background-color: #f4511e;
  border: 0.5vh solid transparent;
  color: white;
  padding: 2vh 4vh;
  text-align: center;
  font-size: 4vh;
  margin: 0.2vh 0.7vh;
  transition: border-color 0.3s ease, opacity 0.3s ease;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.9;
}

.rapid_reader_button:hover {
  opacity: 1;
  border-color: MediumBlue;
}

.rapid_reader_article {
  visibility: hidden;
}

/* ============================================================================
   Desktop overrides (was: $global_mobile == false)
   ============================================================================ */
@media (min-width: 769px) {
  td.header,
  td#header       { font-size: 6vh; }

  td.tabs_header  { border-radius: 1vh; }

  table#main      { width: 80vw; }
  table.data      { width: 75vw; }

  div#home        { font-size: 3vh; width: 75vw; line-height: 1.3; }

  div.return_home { width: 80vw; }

  body.flash_cards_page td#data {
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 3%;
    padding-bottom: 3%;
  }

  body.flash_cards_page div.cards_all {
    width: 80vw;
  }

  table#correct,
  table#wrong,
  table#results   { width: 80vw; }

  span.notes      { line-height: 1.2; }

  img             { height: 32vh; }

  table.amazon_link { font-size: 50%; }

  .popup .popuptext        { width: 60vw; }
  .popupinst .popuptext_inst { width: 35vw; }
}