@font-face {
  font-family: "Robto Serif";
  src: url("./roboto-lightest.woff");
}

:root {
  --off-white: rgb(221, 221, 221);
  --light-off-white: rgb(253, 253, 253);
  --off-black: rgb(4, 1, 19);
  --dark-gray: #5a5a5a;
  --light-gray: #8f8f8f;
  --dark-gray2: #9E9E9E;
  --light-gray2: #616161;
  --dark-blue: #42426a;
  --blue: #3434be;
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg) /* rtl:ignore */;
  }
}
.spinner-border {
  margin: 20px auto;
  
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: -0.125em;
  border: 0.25em solid var(--off-white);
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: 0.75s linear infinite spinner-border;
          animation: 0.75s linear infinite spinner-border;
}

.dark .spinner-border {
  border: 0.25em solid var(--light-gray);
  border-right-color: transparent;
}

.text-decoration-none {
  text-decoration: none;
}

.text-decoration-none:hover {
  text-decoration: none; 
}
body {
  margin: 1rem 3rem;
  background-color: var(--light-off-white);
  font-family: "Robto Serif", serif;
}

body.dark {
  background-color: var(--off-black);
}

#form {
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

#form-div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#paliauto {
  height: 35px;
  padding-left:10px;
  width:220px;
  padding-right:10px;
  border-radius: 32px;
  border: 1px solid;
  background-color: var(--off-white);
  color: var(--dark-gray);
}

#theme-button {
  position:relative;  
  top:-3px;
}

#fdg-button {
  margin:0px 0px;
  position:relative; top:1px;
}

#home-button {
  position:relative; 
  top: -2px;
}
.dark #paliauto {
  background-color: var(--dark-blue);
  color: var(--off-white);
}

#paliauto:focus {
  background-color: var(--off-white);
  color: var(--off-black);
  outline: none;
}

/* apple-design audit: outline:none above had no visible replacement, so keyboard
   focus on this button was invisible (confirmed via screenshot). */
#paliauto:focus-visible {
  outline: 2px solid var(--blue, #3434be);
  outline-offset: 2px;
}

.dark #paliauto:focus {
  background-color: var(--off-white);
  color: var(--off-black);
  border-color: var(--off-white);
}

.dark #paliauto:focus-visible {
  outline: 2px solid var(--off-white);
  outline-offset: 2px;
}

.icon-button {
  border: none;
  background: none;
  margin-left: 5px;
}

.icon-button svg {
  margin-top: 3px;
}

.instructions ul li {
  line-height: 1.3;
}

.instructions ul {
  margin-top: 0rem;
  padding: 0rem;
  list-style-type: none;
}

.instructions h2 {
  font-size: 1.2rem;
  margin-top: 0rem;
  margin-bottom: 0.1rem;
  margin-left: 0rem;
}

.instructions h3 {
  font-size: 1.2rem;
  margin-top: 0rem;
  margin-bottom: 0.1rem;
  margin-left: 0rem;
}

.lists {
  display: flex;
  flex-direction: row;
  column-gap: 0rem;
  font-size: 1.2rem;
  /* font-size: 95%; */
}

.suttas {
  /*width: 11rem;*/
}

.vinaya {
  display: flex;
  flex-direction: row;
  gap: 1.2rem;
}

.abbr {
  font-family: monospace;
  background-color: rgb(220, 220, 231);
  padding: 1px 4px;
  border: solid 0px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 115%;
}

.dark .abbr {
  background-color: var(--dark-blue);
}

@media only screen and (max-width: 730px) {
  #paliauto {
  width:210px;
  }
  
  .lists,
  .vinaya {
    flex-direction: column;
  }
}

p.sc-link {
  text-align: center;
  margin-bottom: 0rem !important;
  margin-top: 0.3rem !important;
}

/* apple-design audit: DPR/BJT/Voice/4nt/SC/BB/TBW links sat edge-to-edge with only
   whitespace between them — under the 44px HIG touch target on mobile. */
p.sc-link a {
  display: inline-block;
  padding: 6px 8px;
  /* Owner: "гигантский квадрат при хувере... над ссылками вначале и вконце в ридере" — same
     apple-design-audit padding above is exactly what native mobile tap-highlight flashes to. */
  -webkit-tap-highlight-color: transparent;
}

span.pli-lang,
span[class*="-lang"] {
  display: block;
}

p,
dt,
li,
dd,
h1,
h2,
h3,
h4,
h5 {
  font-family: sans-serif;
  color: var(--dark-gray) ;
}

.dark p,
.dark dt,
.dark li,
.dark dd,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5 {
  color: var(--light-gray);
}

p .pli-lang,
dt .pli-lang,
li .pli-lang,
dd .pli-lang,
h1 .pli-lang,
h2 .pli-lang,
h3 .pli-lang,
h4 .pli-lang,
h5 .pli-lang {
  color: var(--off-black);
}

.dark p .pli-lang,
.dark dt .pli-lang,
.dark li .pli-lang,
.dark dd .pli-lang,
.dark h1 .pli-lang,
.dark h2 .pli-lang,
.dark h3 .pli-lang,
.dark h4 .pli-lang,
.dark h5 .pli-lang {
  color: var(--off-white) ;
}

p .lang-2nd,
dt .lang-2nd,
li .lang-2nd,
dd .lang-2nd,
h1 .lang-2nd,
h2 .lang-2nd,
h3 .lang-2nd,
h4 .lang-2nd,
h5 .lang-2nd {
  color: var(--dark-gray2);
}

.dark p .lang-2nd,
.dark dt .lang-2nd,
.dark li .lang-2nd,
.dark dd .lang-2nd,
.dark h1 .lang-2nd,
.dark h2 .lang-2nd,
.dark h3 .lang-2nd,
.dark h4 .lang-2nd,
.dark h5 .lang-2nd {
  color: var(--light-gray2) ;
}

a {
  color: var(--blue);
}

.dark a {
  color: rgb(122, 122, 249);
}

dt {
  font-weight: bold;
}

/*
.button-area {
  position: fixed;
  right: 10px;
  top: 10px;
}*/

#sutta {
  max-width: 45rem;
  margin: auto;
  line-height: 1.5;
}

.hide-pali p .pli-lang,
.hide-pali h1 .pli-lang,
.hide-pali h2 .pli-lang,
.hide-pali h3 .pli-lang,
.hide-pali h4 .pli-lang,
.hide-pali li .pli-lang {
  display: none !important;
}

/* Реальный язык — из lang="", не из позиционного класса (rus-lang/eng-lang больше не
   используются как языковые метки, только .lang-2nd как позиционный маркер стиля). */
.hide-english p [lang="en"],
.hide-english h1 [lang="en"],
.hide-english h2 [lang="en"],
.hide-english h3 [lang="en"],
.hide-english h4 [lang="en"],
.hide-english li [lang="en"] {
  display: none !important;
}

.hide-russian p [lang="ru"],
.hide-russian h1 [lang="ru"],
.hide-russian h2 [lang="ru"],
.hide-russian h3 [lang="ru"],
.hide-russian h4 [lang="ru"],
.hide-russian li [lang="ru"] {
  display: none !important;
}

#sutta.hide-pali p span.lang-2nd {
  display: inline !important;
}

#sutta.hide-pali p {
  margin: 0px 0px 0.8rem 0rem;
}

#sutta.hide-pali blockquote.gatha p span.verse-line span.lang-2nd {
  display: block !important;
  margin-bottom: 0rem;
}

span[class*="-lang"] {
  margin-bottom: 0.4rem;
}

header ul {
  list-style: none;
  padding: 0;
  margin-top: 0;
}

header ul li {
  text-align: center;
  color: #5a5a5a;
}

@media only screen and (max-width: 975px) {
  body {
    margin: 1rem 0.5rem;
  }

  .button-area {
    right: 1px;
    top: 1px;
  }
}

.byline {
  text-align: right;
  font-style: italic;
  font-size: 0.8rem;
}

br {
  line-height: 0px;
}

/* Owner: "почему не влезли иконки... нужно не влияя на ширину страницы чтобы они умещались" —
   no flex-wrap meant nowrap (the default), so the extra Chapters icon pushed this row past
   narrow mobile widths with no wrap and no overflow handling, overflowing the page horizontally
   instead of dropping to a second line. */
.links-area {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.links-area a {
  position: relative;
  top: 0;
  transition: all ease 0.5s;
  filter: opacity(40%);
  /* Owner: "гигантский квадрат при хувере... над ссылками вначале и вконце в ридере" — native
     mobile tap-highlight flash, sized to this link's own padding box, was never reset here;
     :hover below (opacity+lift) already gives feedback without it. */
  -webkit-tap-highlight-color: transparent;
}

.links-area a:hover {
  top: -3px;
  filter: opacity(100%);
}

.dark .links-area a {
  filter: invert(50%);
}

.dark .links-area a:hover {
  filter: invert(200%);
}

.navigation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

@media only screen and (max-width: 475px) {

  #paliauto {
  width:200px;
  }
}

.hide-button {
  background-color: var(--off-white);
  color: var(--off-black);
  border: solid 2px var(--dark-gray);
  
}

.hide-button:hover {
  background-color: var(--dark-blue);
  color: var(--off-white);
}

.dark .hide-button {
  background-color: var(--dark-blue);
  color: var(--off-white);
}

.dark .hide-button:hover {
  background-color: var(--blue);
  color: var(--off-white);
}

.right-text {
    direction: rtl;
}

/*

  .reverse-order {
    display: flex;
    flex-direction: column-reverse;
  }
  
  .flip-horizontal {
  transform: scaleY(-1);
  transform: scaleX(-1);
}

inline-reversed {
  display: inline-block;
  transform: rotate(180deg);
}  
  
  */