/* e4.org theme layer (fix-ups 1, screenshot gate 1 fixes F1-F3, F5). Loaded after STEP's own CSS.
   Brand: #013849 (logo square), #012a37 (hover/border), #1b5162 (strong text). */

/* F1. Header bar in the brand colour, white icons and labels */
#stepnavbar.navbar-default,
#stepnavbar .navbar-default {
  background: #013849 !important;
  background-image: none !important;
  border-color: #012a37 !important;
  box-shadow: none !important;
}
/* STEP paints the inner header strip with var(--clrBackground) (white); let the bar colour show */
#stepnavbar .navbar-header,
#stepnavbar .navbar-brand { background: transparent !important; }
/* icons use var(--clrText); repaint only the bar's own buttons, never the dropdown menus under them */
#stepnavbar .headerButtons > a,
#stepnavbar .headerButtons > .dropdown > a,
#stepnavbar .navbar-collapse > a,
#stepnavbar .navbar-collapse > .dropdown > a {
  --clrText: #ffffff;
  --clrBackground: #013849;
  color: #ffffff !important;
  opacity: .92;
}
#stepnavbar .headerButtons > a:hover,
#stepnavbar .headerButtons > .dropdown > a:hover,
#stepnavbar .navbar-collapse > a:hover,
#stepnavbar .navbar-collapse > .dropdown > a:hover,
#stepnavbar .open > a {
  background: rgba(255, 255, 255, .12) !important;
  opacity: 1;
}
#stepnavbar .navbarIconDesc,
#stepnavbar .glyphicon { color: #ffffff !important; }
#stepnavbar #fonts-icon .largerFont { background: rgba(255, 255, 255, .22) !important; color: #ffffff !important; }
#stepnavbar .navbar-toggle { border-color: rgba(255, 255, 255, .5); background: transparent; }
#stepnavbar .navbar-toggle .icon-bar { background: #ffffff; }
#stepnavbar .navbar-toggle:hover, #stepnavbar .navbar-toggle:focus { background: rgba(255, 255, 255, .12); }
/* phone: the collapsed band under the bar */
@media (max-width: 767px) {
  #stepnavbar .navbar-collapse,
  #stepnavbar .navbar-collapse.in,
  #stepnavbar .navbar-collapse.collapsing { background: #012a37 !important; color: #ffffff; }
  /* fix-ups 2 F1: the "More" and "Language" lists open inside the dark band; STEP's dark item text was
     1.11:1 there. White text on #012a37 = 15.1:1. */
  #stepnavbar .navbar-collapse .dropdown-menu { background: transparent !important; box-shadow: none; border: 0; }
  #stepnavbar .navbar-collapse .dropdown-menu > li > a,
  #stepnavbar .navbar-collapse .dropdown-menu a,
  #stepnavbar .navbar-collapse .dropdown-menu li,
  #stepnavbar .navbar-collapse .dropdown-menu .dropdown-header { color: #ffffff !important; }
  #stepnavbar .navbar-collapse .dropdown-menu > li > a { font-size: 15px; padding: 10px 24px; }
  #stepnavbar .navbar-collapse .dropdown-menu > li > a:hover,
  #stepnavbar .navbar-collapse .dropdown-menu > li > a:focus,
  #stepnavbar .navbar-collapse .dropdown-menu > .active > a { background: rgba(255, 255, 255, .12) !important; color: #ffffff !important; }
  #stepnavbar .navbar-collapse .dropdown-menu .divider { background: rgba(255, 255, 255, .2); }
}

/* F1 + F2. The mark (36 px, crisp up to 3x) with an "e4.org" wordmark beside it */
#stepnavbar span.title { display: inline-flex; align-items: center; height: 50px; }
#stepnavbar span.title .logo { display: inline-flex; align-items: center; }
#stepnavbar span.title img {
  width: 36px; height: 36px; margin: 0;
  outline: 2px solid #ffffff; outline-offset: -2px; border-radius: 4px;
}
#stepnavbar .e4-word {
  font: 600 20px/50px 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  color: #ffffff; margin-left: 10px; letter-spacing: .2px; text-decoration: none; white-space: nowrap;
}
#stepnavbar .e4-word:hover, #stepnavbar .e4-word:focus { color: #ffffff; text-decoration: none; }
@media (max-width: 480px) { #stepnavbar .e4-word { display: none; } }

/* F3. e4 welcome column (replaces STEP's welcome line and announcement) */
.examplesContainer .e4-welcome { padding: 28px 8px 8px; max-width: 640px; text-align: left; }
.examplesContainer .e4-welcome-mark { display: block; width: 96px; height: 96px; border-radius: 10px; margin: 0 0 16px; }
.examplesContainer .e4-welcome-title {
  font: 600 30px/1.15 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  color: #013849; margin: 0 0 6px; text-align: left;
}
.examplesContainer .e4-welcome-line {
  font: 400 18px/1.45 'Source Serif 4', Georgia, serif; color: #2b2b2b; margin: 0 0 18px;
}
.e4-quick { margin: 0 0 22px; }
.e4-quick a {
  display: inline-block; margin: 0 8px 10px 0; padding: 10px 18px;
  border: 1.5px solid #013849; border-radius: 8px; background: #ffffff;
  color: #013849 !important; font: 600 15px/1.2 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; text-decoration: none;
}
.e4-quick a:hover, .e4-quick a:focus { background: #e6eef0; text-decoration: none; }
.e4-quick a.primary { background: #013849; color: #ffffff !important; }
.e4-quick a.primary:hover, .e4-quick a.primary:focus { background: #012a37; }
.examplesContainer .e4-try {
  font: 600 13px/1.2 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .08em; color: #406a76; margin: 0 0 8px; text-align: left;
}
.e4-examples { list-style: none; padding: 0; margin: 0 0 26px; }
.e4-examples li { margin: 0 0 8px; font: 400 16px/1.4 'Source Serif 4', Georgia, serif; }
.e4-examples li a { color: #013849; text-decoration: underline; text-underline-offset: 3px; }
.examplesContainer .e4-faq-title {
  font: 600 18px/1.3 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  color: #013849; border-top: 1px solid #cdd9dd; padding-top: 18px; margin: 0 8px 8px; text-align: left;
}

/* F5. Reading typography: 16 px, line-height 1.6, about 70 characters a line, brand-colour headings */
.passageContainer .passageContent { font-size: 16px; }
.passageContainer .passageContentHolder { line-height: 1.6; max-width: 44em; margin-left: auto; margin-right: auto; }
.passageContentHolder h2, .passageContentHolder h3, .passageContentHolder h4,
.passageContentHolder .heading, .passageContentHolder .title {
  font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; color: #013849;
}
@media (max-width: 767px) {
  .passageContainer .passageContentHolder { text-align: left; hyphens: auto; -webkit-hyphens: auto; }
}

/* Fix-ups 2 (screenshot gate 2) */
/* F5. Summary button (inline Helvetica Neue 10 px in STEP's JS) and the intro tour use the e4 UI font */
#summbutton { font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif !important; font-size: 12px !important; }
.introjs-tooltip, .introjs-tooltiptext, .introjs-tooltip-title, .introjs-tooltipbuttons,
.introjs-button, .introjs-skipbutton, .introjs-helperNumberLayer {
  font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif !important;
}
/* F3 stop-gap: browsers or the edge may still hold a pre-fix sidebar bundle with STEP's lexicon-report link */
a[title="Report lexicon issues"] { display: none !important; }
/* F4. Phone passage picker: the "type in a passage" box sits above the book grid, not below the fold */
@media (max-width: 767px) {
  #passageSelectionModal .modal-content { display: flex; flex-direction: column; }
  #passageSelectionModal .modal-content > .modal-header { order: -2; }
  #passageSelectionModal .modal-content > .footer { order: -1; padding: 4px 8px 8px; }
  #passageSelectionModal .modal-content > .footer br:first-of-type { display: none; }
  #passageSelectionModal #enterYourPassage { width: 100% !important; height: 36px !important; box-sizing: border-box; margin: 0 !important; }
}