/*
 * The Equaser site on top of Bootstrap 5: light pages; the slide pictures, the key buttons and
 * the footer keep the dark of the videos (build/el531.py BG #14171B).
 */
:root {
  --eq-teal: #0e7c78;          /* links and buttons: the slides' teal, darkened to read on white */
  --eq-teal-bright: #35d0cb;   /* the slides' own teal */
  --eq-dark: #14171b;          /* the slides' background */
  --eq-lcd: #cbd3b5;
  --eq-lcd-ink: #1b2014;
  --eq-soft: #f4f7f8;
  --bs-link-color: var(--eq-teal);
  --bs-link-color-rgb: 14, 124, 120;
  --bs-link-hover-color: #0a5e5b;
  --bs-link-hover-color-rgb: 10, 94, 91;
}
body { background: #fff; color: #1d2327; font-size: 1.05rem; }

/* header */
.site-header { background: rgba(255, 255, 255, .96); border-bottom: 1px solid #e3e8ea; backdrop-filter: blur(6px); }
.site-header .navbar { padding-top: .45rem; padding-bottom: .45rem; }
.brand-word { font-weight: 700; letter-spacing: .2em; color: var(--eq-dark); }
.site-header .nav-link { color: #44505a; font-weight: 500; }
.site-header .nav-link:hover { color: var(--eq-teal); }
.btn-lang { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #cfd8dc; border-radius: 999px;
  padding: .3rem .8rem; font-weight: 500; color: #24303a; background: #fff; }
.btn-lang:hover { border-color: var(--eq-teal); color: var(--eq-teal); }

/* layout: the sidebar has the width of a 300 px ad on a desktop */
.page { padding-top: 1.25rem; }
@media (min-width: 992px) {
  .sidebar { width: 336px; }
  .sidebar-inner { position: sticky; top: 76px; }
}
.main-col { min-width: 0; }

/* buttons */
.btn-teal { background: var(--eq-teal); border-color: var(--eq-teal); color: #fff; }
.btn-teal:hover { background: #0a5e5b; border-color: #0a5e5b; color: #fff; }
.btn-outline-teal { border: 1px solid var(--eq-teal); color: var(--eq-teal); border-radius: 999px; }
.btn-outline-teal:hover { background: var(--eq-teal); color: #fff; }
.btn-youtube { background: #e62117; border-color: #e62117; color: #fff; font-weight: 600; }
.btn-youtube:hover { background: #c41a12; border-color: #c41a12; color: #fff; }

/* home */
.hero { background: linear-gradient(135deg, var(--eq-soft), #e9f6f5); border-radius: 1rem; padding: 2rem 1.5rem; }
.calc-card { border: 1px solid #e3e8ea; border-radius: 1rem; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.calc-card:hover { box-shadow: 0 .5rem 1.5rem rgba(20, 23, 27, .12); transform: translateY(-2px); }
.calc-photo { display: block; background: var(--eq-soft); padding: 1.25rem; text-align: center; }
.calc-photo img { max-height: 260px; width: auto; height: auto; }
.calc-hero { max-height: 340px; width: auto; }

/* part: step tiles */
.section-title { color: var(--eq-teal); }
.step-tile { border: 1px solid #e3e8ea; border-radius: .75rem; overflow: hidden; color: #1d2327; }
.step-tile:hover { border-color: var(--eq-teal); box-shadow: 0 .25rem .75rem rgba(20, 23, 27, .1); }
.step-tile .card-img-top { height: 120px; object-fit: cover; object-position: top left; background: var(--eq-dark); }
.tile-turn { display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--eq-teal);
  background: #e9f7f6 !important; }
.lead-text { color: #4a5660; font-size: 1.1rem; }

/* step */
figure.slide { margin: 0 0 1rem; }
figure.slide img { border-radius: .75rem; background: var(--eq-dark); box-shadow: 0 .25rem 1rem rgba(20, 23, 27, .15); }
.steptext { font-size: 1.1rem; line-height: 1.85; }
img.key { width: auto; vertical-align: -0.45em; margin: 0 1px; border-radius: 6px; background: var(--eq-dark); }
kbd { background: var(--eq-dark); }
.num { font-weight: 700; white-space: nowrap; }
.nw { white-space: nowrap; }
.lcd { background: var(--eq-lcd); color: var(--eq-lcd-ink); font-weight: 700; font-style: italic; padding: 0 .45em;
  border-radius: 5px; white-space: nowrap; border: 1px solid #a9b393; }
.lcdm { display: inline-block; vertical-align: middle; padding: 3px 8px; line-height: 0; }
.lcd img.math { width: auto; vertical-align: middle; }
.yourturn { background: #e9f7f6; border-radius: 1rem; margin-bottom: 1rem; }
.yourturn .q { font-size: 1.25rem; font-weight: 600; color: #12302f; }
.yourturn summary { cursor: pointer; color: var(--eq-teal); font-weight: 600; }
.yourturn .answer { font-size: 2rem; font-weight: 800; margin: .5rem 0; color: #12302f; }
.pager-link { display: block; height: 100%; border: 1px solid #e3e8ea; border-radius: .75rem; padding: .7rem 1rem;
  text-decoration: none; color: #1d2327; background: var(--eq-soft); }
.pager-link:hover { border-color: var(--eq-teal); }
.pager-dir { display: block; color: var(--eq-teal); font-weight: 600; font-size: .95rem; }

/* sidebar */
.side-box { background: var(--eq-soft); border: 1px solid #e3e8ea; border-radius: .9rem; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.side-title { font-size: 1rem; font-weight: 700; margin-bottom: .6rem; }
.side-sec summary { cursor: pointer; font-weight: 600; font-size: .95rem; padding: .2rem 0; }
.side-steps { margin: .2rem 0 .5rem; font-size: .9rem; }
.side-steps li { padding: .15rem 0 .15rem .75rem; border-inline-start: 2px solid #dbe3e5; }
.side-steps li.here { border-color: var(--eq-teal); font-weight: 600; }
.side-steps li.here a { color: #1d2327; text-decoration: none; }
.side-photo { object-fit: contain; }
.side-youtube { background: #fff5f4; border-color: #f6d7d4; }

/* ads: a dashed box marks an ad place that has no code yet (settings ad_placeholders) */
.ad { margin: 1.25rem 0; text-align: center; }
.sidebar .ad { margin-top: 0; }
.ad-placeholder { min-height: 90px; border: 2px dashed #d4dde0; border-radius: .75rem; color: #8a979f;
  display: flex; align-items: center; justify-content: center; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.sidebar .ad-placeholder { min-height: 250px; }

/* language window */
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; }
.lang-item { display: block; border: 1px solid #e3e8ea; border-radius: .6rem; padding: .5rem .75rem; text-decoration: none;
  color: #1d2327; background: #fff; }
a.lang-item:hover { border-color: var(--eq-teal); background: #f0faf9; }
.lang-item.current { border-color: var(--eq-teal); box-shadow: inset 0 0 0 1px var(--eq-teal); }
.lang-item.other { opacity: .75; }
.lang-item.soon { opacity: .45; }
.lang-name { display: block; font-weight: 600; }
.lang-en { display: block; font-size: .8rem; color: #6b7780; }

/* footer: the dark of the videos */
.site-footer { background: var(--eq-dark); color: #b8c1c8; }
.site-footer a { color: var(--eq-teal-bright); }
.footer-brand { color: #fff !important; font-weight: 700; letter-spacing: .2em; }
.copyright { color: #7d8891; border-top: 1px solid #2a313a; padding-top: 1rem; }

@media print {
  .site-header, .sidebar, .site-footer, .ad, .pager, .btn { display: none !important; }
}