/* Flashcards: a word list ("Ordlista") that toggles with a centered flashcard
   and its nav footer.  Loaded only for this entry type, by _setF3Files(). */

/* Both views size to their content and let the modal grow around them (see the
   .theme-lb.modal-content override below).  They must not claim a slice of the
   viewport of their own: a min-height taller than the modal is spent as dead
   space above the card, and pushes the nav footer out through the bottom. */
#mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  padding: 0.5em 0 1em;
}

/* ---- Card ---------------------------------------------------------------- */

.board {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
}

.card {
  position: relative;
  cursor: pointer;
  width: min(80vw, 400px);
  height: 35vh;
  border-radius: 0.5em;
  color: white;
  text-align: center;
  text-wrap: wrap;
  font-size: xx-large;
  font-weight: bolder;
  text-shadow: 0.05em 0.05em black;
  perspective: 1000px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* The flag sits as a small badge in the top-left corner rather than filling
   the face. */
.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5em;
  background-color: burlywood;
  background-repeat: no-repeat;
  background-position: 0.6rem 0.6rem;
  background-size: 2.6rem auto;
  box-shadow: 0.3em 0.3em 0.3em rgba(70, 70, 70, 0.3);
  transition: transform 0.8s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}

.front.flip {
  transform: rotateY(180deg);
}

.back.flip {
  transform: none;
}

.message {
  width: 100%;
  text-align: center;
  font-size: 1em;
}

/* Pinned to the (non-flipping) .card wrapper while on-demand TTS generates. */
.flashcards-audio-badge {
  position: absolute;
  top: 0.4em;
  right: 0.4em;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.6em;
  border-radius: 1em;
  background-color: rgba(255, 255, 255, 0.92);
  color: #333;
  font-size: 0.6em;
  font-weight: normal;
  text-shadow: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.flashcards-audio-badge .bi-exclamation-triangle {
  color: #c0392b;
}

/* ---- Nav footer ---------------------------------------------------------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  max-width: 480px;
}

/* orjhlab.css gives every adjacent .btn a 1em left margin.  At the footer's
   1.4em type that is 25px on top of the flex gap, which was enough to wrap the
   language-swap button onto a second row. */
.footer .btn + .btn {
  margin-left: 0;
}

.footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  font-size: 1.4em;
  padding: 0.25em 0.7em;
  min-width: 2.5em;
  text-shadow: 0.05em 0.05em black;
}

.footer .btn:hover {
  background-color: #70a2cd !important;
  color: white;
}

.flag {
  height: 1em;
  width: auto;
  vertical-align: middle;
}

/* ---- Word-list view ------------------------------------------------------ */

.wordlist-view {
  width: min(92vw, 640px);
  margin: 0 auto;
  padding: 0.5em 0 1em;
}

.wordlist-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  margin-bottom: 0.75em;
}

.wordlist-toolbar h2 {
  margin: 0;
  color: #1a4d7a;
  font-size: 1.3em;
}

.wordlist-actions {
  display: flex;
  gap: 0.5em;
}

.wordlist-hint {
  margin: -0.35em 0 0.6em;
  color: #5a6b7a;
  font-size: 0.9em;
}

.wordlist-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wordlist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.5em 0.25em;
  border-bottom: 1px solid #a9c7e0;
  /* Rows are clickable: a click picks the word for the flashcard round. */
  cursor: pointer;
  border-left: 4px solid transparent;
  border-radius: 0.25em 0.25em 0 0;
}

.wordlist-row:hover {
  background: #eef5fb;
}

.wordlist-row.selected {
  background: #dcecfa;
  border-left-color: #1a6fb5;
}

/* Rows are keyboard-reachable now, so they need a visible focus ring. */
.wordlist-row:focus-visible {
  outline: 2px solid #1a6fb5;
  outline-offset: -2px;
}

/* Left cell: the Spanish (foreign) word, which is the side that is spoken. */
.wordlist-foreign {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  color: #1a4d7a;
}

.wordlist-native {
  color: #333;
  text-align: right;
}

.wordlist-speak {
  cursor: pointer;
  border: none;
  background: transparent;
  color: #0a7a55;
  font-size: 1.3em;
  line-height: 1;
  padding: 0 0.3em;
}

.wordlist-speak:hover {
  color: #086644;
}

.wordlist-speak:disabled {
  color: #bbb;
  cursor: default;
}

.wl-btn {
  cursor: pointer;
  border: none;
  border-radius: 0.4em;
  padding: 0.4em 1em;
  font-size: 1em;
  font-weight: 600;
}

.wl-btn-primary {
  background: #1a6fb5;
  color: #fff;
}

.wl-btn-primary:hover {
  background: #155a93;
}

.wl-btn-secondary {
  background: #e0e0e0;
  color: #333;
}

.wl-btn-secondary:hover {
  background: #d0d0d0;
}

/* ---- Utilities ----------------------------------------------------------- */

.hide {
  display: none !important;
}

.invisible {
  visibility: hidden;
}

.help {
  margin-right: 2em;
}

.modal-dialog .btn {
  margin: 0.25em;
  font-size: 1.5em !important;
  width: auto !important;
}

/* Flashcards-specific overrides on top of entrytype/theme/lightblue.css.  The
   modal follows its content instead of claiming a fixed slice of the viewport,
   so neither view has to fill (or overflow) a height it did not ask for.  Only
   a word list longer than the screen scrolls. */
.theme-lb.modal-content {
  height: auto;
  max-height: 92vh;
  /* The theme sizes the modal to max-content, which on a phone is wider than
     the screen (the nav footer's four buttons on one line).  Cap it and let
     the footer wrap instead of hanging off both edges. */
  max-width: 96vw;
  overflow: hidden;
}

/* A word list longer than the screen scrolls under the header (the modal is a
   flex column, hence min-height: 0) rather than pushing it out of view. */
.theme-lb.modal-content > .modal-body {
  min-height: 0;
  overflow-y: auto;
}

/* ---- Phones -------------------------------------------------------------- */

/* On a phone the exercise is the whole page, so the modal fills the screen
   rather than floating in it.  The content is fixed-positioned and centred by
   .modal-container, so sizing it to the viewport is all that is needed. */
@media only screen and (max-width: 575.98px) {
  .theme-lb.modal-content {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  /* Let the height of the screen reach the card board: the body and the
     .exercises wrapper the exercise is rendered into both become full-height
     columns.  (!important because that wrapper carries bootstrap's .d-grid in
     a chapter exercise.) */
  .theme-lb.modal-content > .modal-body {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
  }

  /* In a chapter exercise the wrapper also carries bootstrap's
     .justify-content-center, which is harmless while it is a grid but centres
     the column once we make it one: a word list taller than the screen is then
     centred on it, and the half that overflows the top - the toolbar with the
     "Öva med kort" and "Avsluta" buttons - sits under the header where no
     scrolling can reach it (overflow past the start edge is not scrollable).
     The board does its own centring, in #mobile below. */
  .theme-lb.modal-content > .modal-body > .exercises {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start !important;
    flex: 1;
    min-height: 0;
    width: 100%;
  }

  /* The board is centred in the screen the modal now fills; the word list
     keeps its natural place at the top, where a list belongs.  "safe" keeps
     the top of an overlong board reachable rather than cropping it. */
  #mobile {
    flex: 1;
    justify-content: center;
    justify-content: safe center;
  }

  /* Title, counter, help and close on one row.  The pieces are sized to fit
     the narrowest phone we support (320px) without wrapping. */
  #modal-header {
    flex-wrap: nowrap;
    gap: 0.4em;
    padding: 0.3em 0.5em;
  }

  #modal-header .title {
    margin: 0 !important;   /* bootstrap's mx-4 */
    font-size: 1.4rem;
    white-space: nowrap;
  }

  #modal-header .score {
    white-space: nowrap;
    font-size: 0.9rem;
  }

  #modal-header .help {
    margin-right: 0;
  }

  #modal-header .btn-close {
    margin: 0 !important;   /* the template sets style="margin: 20px" */
    flex: none;
  }

  /* Now that the modal owns the screen, the card can use more of it. */
  .card {
    width: min(88vw, 400px);
    height: 44vh;
  }

  /* Smaller type keeps the four nav buttons on one row here too.  !important
     because the .modal-dialog .btn rule above forces 1.5em on every button in
     a chapter exercise; the padding keeps the tap targets ~44px tall. */
  .footer .btn {
    font-size: 1.15em !important;
    padding: 0.4em 0.6em;
  }
}

/* ---- Orientation hint (touch devices in landscape) ----------------------- */

.mobile-message {
  display: none;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  padding: 2em 1em;
}

@media screen and (orientation: landscape) {

  /* On a touch device #mobile gets the .mobile class; hide the board in
     landscape and show the rotate hint instead.  The word list is outside
     #mobile, so it stays usable in either orientation. */
  #mobile.mobile {
    display: none;
  }

  .mobile-message {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .bi-phone-landscape {
    margin-top: 0.4em;
    font-size: 2em;
    animation: rot 3s ease-in-out infinite;
    -webkit-animation: rot 3s ease-in-out infinite;
  }
}

@keyframes rot {
  0%, 30% {
    transform: rotate(0);
  }

  50%, 70% {
    transform: rotate(90deg);
  }

  100% {
    transform: rotate(0);
  }
}

@media screen and (orientation: portrait) {
  .mobile-message {
    display: none;
  }

  /* The help button used to be lifted out of the flow here (position:absolute,
     pinned to the modal's top-right).  It sits in the header row instead - it
     only needed that while the header was being broken into stacked rows. */
}

@media only screen and (min-width: 900px) {
  .card {
    width: min(60vw, 460px);
    height: 40vh;
  }

  .message {
    font-size: 1.5em;
  }
}