/*
 * HappyRail - Help Scout Docs theme (support.happyrail.com)
 *
 * Upload in Help Scout: Settings > Docs Sites > [site] > Custom Code > Custom Stylesheet,
 * and empty the "Insert <head> code" field (its old <style> block never applied: Help Scout
 * stores the braces as &#123; / &#125;, which a browser does not read as CSS).
 *
 * Mirrors the redesigned website: Open Sans, the red header bar, red uppercase titles,
 * green actions with the darker arrow segment, white cards with a #ddd border and the
 * card shadow, DarkGrey (#f4f1e9) panels.
 */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

:root {
  --hr-red: #e9001c; /* header bar */
  --hr-title-red: #d71635; /* page titles (H1) */
  --hr-subtitle-red: #d1002e; /* small section titles (H3) */
  --hr-green: #1a9200; /* links, actions */
  --hr-green-dark: #157500; /* button arrow segment, hover */
  --hr-text: #414141;
  --hr-text-muted: #585858;
  --hr-grey: #767676;
  --hr-border: #dddddd;
  --hr-divider: #eeeeee;
  --hr-surface: #f4f1e9; /* DarkGrey panels */
  --hr-surface-light: #fafafa; /* card headers */
  --hr-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  --hr-radius-card: 16px;
  --hr-radius-block: 12px;
  --hr-radius-input: 10px;
  --hr-font: 'Open Sans', Arial, sans-serif;
  --hr-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='%23fff' d='M8.63 3.66l3.2 2.97a.5.5 0 010 .75l-3.2 2.97a.57.57 0 01-.8-.74l2.24-2.08H2.57a.53.53 0 010-1.05h7.5L7.83 4.4a.5.5 0 01.8-.74z'/%3E%3C/svg%3E");
  --hr-print-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 14h12v8H6z'/%3E%3C/svg%3E");
  --hr-print-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a9200' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 14h12v8H6z'/%3E%3C/svg%3E");
  --hr-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath fill='%231a9200' d='M3.93 5L.84 8.09a.58.58 0 00.82.82l3.5-3.5a.58.58 0 000-.82l-3.5-3.5a.58.58 0 00-.82.82z'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

body,
input,
button,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--hr-font);
}

body {
  color: var(--hr-text);
  font-size: 13px;
  line-height: 1.5;
  background: #fff;
}

a,
.contentWrapper a {
  color: var(--hr-green);
}

a:hover,
a:focus {
  color: var(--hr-green-dark);
}

/* ---------- Header ---------- */

#mainNav .navbar-inner {
  background: var(--hr-red);
  min-height: 58px;
}

/* The full HappyRail logo instead of the uploaded mark */
#mainNav .brand {
  display: block;
  width: 194px;
  height: 58px;
  padding: 0;
  margin: 0;
  background: url('https://cdn.happyrail.com/static-content/uploads/media/000003/HR1.svg') no-repeat left center /
    194px 24px;
}

#mainNav .brand img {
  display: none;
}

#mainNav .nav li a {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#mainNav .nav li a:hover,
#mainNav .nav li a:focus,
#mainNav .nav .active a {
  color: #fff;
  opacity: 0.85;
}

#mainNav .nav .active a {
  opacity: 1;
}

/* Active tab: a white bar under the item's text instead of the triangle */
#mainNav .nav .active .caret {
  left: 12px;
  right: 12px;
  width: auto;
  height: 3px;
  margin-left: 0;
  border: 0;
  border-radius: 3px 3px 0 0;
  background: #fff;
}

@media (min-width: 769px) {
  #mainNav .nav li a {
    line-height: 58px;
    padding: 0 12px;
  }
}

/* ---------- Search hero (home) ---------- */

#docsSearch {
  background: var(--hr-surface);
  border-bottom: 1px solid var(--hr-border);
  padding: 2em 0 1em;
}

#docsSearch h1 {
  color: var(--hr-title-red);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}

#searchBar .search-query {
  height: 48px;
  padding: 0 150px 0 16px;
  font-size: 15px;
  color: var(--hr-text);
  background: #fff;
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-input);
  box-shadow: var(--hr-shadow);
}

/* Focus: no outline or glow, as the website's fields */
#searchBar .search-query:focus {
  border-color: var(--hr-border);
  box-shadow: var(--hr-shadow);
  outline: 0;
}

#sidebar form .search-query:focus {
  border-color: var(--hr-border);
  box-shadow: none;
  outline: 0;
}

/* The field and the button share one top offset, so they line up exactly */
#searchBar {
  padding: 24px 0;
}

#searchBar button {
  top: 24px;
}

/* Green action button with the darker arrow segment, as on the website */
#searchBar button {
  height: 48px;
  padding: 0 52px 0 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: none;
  color: #fff;
  border: 0;
  border-radius: 0 var(--hr-radius-input) var(--hr-radius-input) 0;
  background: var(--hr-arrow) no-repeat right 9px center / 16px 16px,
    linear-gradient(to left, var(--hr-green-dark) 34px, var(--hr-green) 34px);
  right: 0;
}

#searchBar button:hover,
#searchBar button:focus {
  background: var(--hr-arrow) no-repeat right 9px center / 16px 16px,
    linear-gradient(to left, var(--hr-green-dark) 34px, var(--hr-green-dark) 34px);
}

/* Small search in the sidebar: a plain field with the magnifier */
#searchBar.sm button,
#searchBar.sm button:hover,
#searchBar.sm button:focus {
  top: 0;
  right: 12px;
  height: 40px;
  padding: 0;
  background: none;
  border-radius: 0;
}

#searchBar.sm button .icon-search {
  line-height: 40px;
}

#sidebar form .search-query {
  height: 40px;
  padding: 0 36px 0 14px;
  font-size: 13px;
  color: var(--hr-text);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-input);
  box-shadow: none;
}

#sidebar form button .icon-search:before {
  color: var(--hr-green);
}

/* Live search suggestions */
#serp-dd {
  border: 1px solid var(--hr-border);
  border-radius: 0 0 var(--hr-radius-input) var(--hr-radius-input);
  box-shadow: var(--hr-shadow);
}

#serp-dd .result a {
  color: var(--hr-text);
  font-size: 14px;
}

#serp-dd .result a:hover,
#serp-dd .result > li.active {
  color: var(--hr-green);
  background: var(--hr-surface);
}

/* ---------- Home: collection cards ---------- */

.threeCol .collection,
.twoCol .collection {
  background: #fff;
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-card);
  box-shadow: var(--hr-shadow);
  overflow: hidden;
}

.threeCol .collection .collection-head,
.twoCol .collection .collection-head {
  background: var(--hr-surface-light);
  border-bottom: 1px solid var(--hr-border);
  padding-top: 1.2em;
  padding-bottom: 1.2em;
  margin-bottom: 1.2em;
}

/* Help Scout drops the divider when a collection has no description; keep it */
.threeCol .collection .collection-head.no-desc,
.twoCol .collection .collection-head.no-desc {
  border-bottom: 1px solid var(--hr-border);
  padding-bottom: 1.2em;
}

.threeCol h2,
.twoCol h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.threeCol h2 a,
.twoCol h2 a,
.threeCol h2 a:hover,
.twoCol h2 a:hover {
  color: var(--hr-title-red);
  border-bottom: 0;
}

.threeCol .collection-head p,
.twoCol .collection-head p {
  color: var(--hr-text-muted);
  font-size: 13px;
}

/* Question lists: dark text behind a green chevron, as the website's link lists */
.threeCol .popArticles,
.twoCol .popArticles,
.most-pop-articles .popArticles {
  font-size: 14px;
}

.threeCol .popArticles li,
.twoCol .popArticles li,
.most-pop-articles .popArticles li {
  margin-bottom: 0.8em;
}

.threeCol .popArticles a,
.twoCol .popArticles a,
.most-pop-articles .popArticles a,
.contentWrapper .articleList a,
.related ul > li a {
  color: var(--hr-text);
}

.threeCol .popArticles a:hover,
.twoCol .popArticles a:hover,
.most-pop-articles .popArticles a:hover,
.contentWrapper .articleList a:hover,
.related ul > li a:hover {
  color: var(--hr-green);
}

/* The chevron sits in an 18px gutter, so a wrapped question lines up under its first line */
.threeCol .popArticles,
.twoCol .popArticles,
.most-pop-articles .popArticles,
.related ul {
  margin-left: 0;
  padding: 0;
}

#contentArea .articleList > li,
.related ul > li {
  padding-left: 0;
}

.threeCol .popArticles a,
.twoCol .popArticles a,
.most-pop-articles .popArticles a,
.contentWrapper .articleList a,
#serp .articleList > li a,
.related ul > li a {
  position: relative;
  display: block;
  margin-left: 0;
  padding-left: 18px;
  line-height: 1.5;
}

.popArticles .icon-article-doc,
.articleList .icon-article-doc,
.related .icon-article-doc {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  height: 1.5em;
}

.popArticles .icon-article-doc:before,
.articleList .icon-article-doc:before,
.related .icon-article-doc:before,
#serp-dd .icon-article-doc:before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 11px;
  margin-right: 10px;
  background: var(--hr-chevron) no-repeat center / contain;
}

/* Search result snippets line up under their title */
#serp .articleList > li p {
  padding-left: 18px;
}

/* "Browse all articles": the website's white secondary button */
.threeCol .browse,
.twoCol .browse {
  display: inline-block;
  margin-top: 0.5em;
  padding: 0 16px;
  line-height: 32px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hr-text);
  background: #fff;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
}

.threeCol .browse:hover,
.twoCol .browse:hover {
  color: var(--hr-green);
  border-color: var(--hr-green);
}

/* Desktop: the cards of a row share one height and "Browse all articles" sits on the bottom
   edge. Help Scout lists at most 10 questions per card, so the heights stay close. */
@media (min-width: 769px) {
  .threeCol,
  .twoCol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
  }

  /* Bootstrap's clearfix pseudo-elements would become empty flex items */
  .threeCol:before,
  .threeCol:after,
  .twoCol:before,
  .twoCol:after {
    display: none;
  }

  .threeCol .collection,
  .twoCol .collection {
    display: flex;
    flex-direction: column;
  }

  .threeCol .collection .collection-body,
  .twoCol .collection .collection-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .threeCol .collection-body .browse,
  .twoCol .collection-body .browse {
    align-self: center;
    margin-top: auto;
  }
}

/* Category tiles (used when the home page or a collection lists categories) */
.category-list .category {
  background: #fff;
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-card);
  box-shadow: var(--hr-shadow);
}

.category-list .category:hover {
  background: var(--hr-surface);
}

.category-list h3 {
  color: var(--hr-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.category-list .category p {
  color: var(--hr-text-muted);
}

.category-list .category .article-count,
.category-list .category:hover .article-count {
  color: var(--hr-green);
  font-weight: 600;
}

.collection-category h2 a {
  color: var(--hr-title-red);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Content pages (collection, category, search, article) ---------- */

#main-content {
  background: none;
}

.contentWrapper {
  min-height: 0;
  padding: 0 46px 16px;
  overflow: hidden;
  color: var(--hr-text);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-card);
  box-shadow: var(--hr-shadow);
}

/* The block's title is its header strip, as on the home page cards */
.contentWrapper > h1,
#categoryHead,
#serp > h1,
#fullArticle > .title {
  margin: 0 -46px 16px;
  padding: 22px 46px;
  background: var(--hr-surface-light);
  border-bottom: 1px solid var(--hr-border);
}

#categoryHead h1 {
  margin: 0 200px 0 0;
}

#categoryHead p.descrip:empty {
  display: none;
}

#categoryHead p.descrip {
  margin: 6px 0 0;
}

#categoryHead .sort form {
  margin: 0;
}

#categoryHead .sort {
  top: 50%;
  right: 46px;
  transform: translateY(-50%);
}

#fullArticle > .title {
  padding-right: 86px;
}

#fullArticle .printArticle {
  text-decoration: none;
}

.contentWrapper h1,
#fullArticle h1,
#fullArticle .title {
  color: var(--hr-title-red);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}

.contentWrapper p.descrip,
#serp .articlesFound {
  color: var(--hr-text-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contentWrapper .articleList {
  margin-bottom: 0;
  font-size: 15px;
}

.contentWrapper .articleList li {
  margin: 0;
  padding: 0.75em 0;
  border-bottom: 1px solid var(--hr-divider);
}

.contentWrapper .articleList li:last-child {
  border-bottom: 0;
}

#serp .articleList > li a {
  font-size: 16px;
  font-weight: 600;
}

#serp p {
  color: var(--hr-text-muted);
  font-size: 13px;
}

#serp .articleList > li a {
  margin-bottom: 0;
}

#serp .articleList > li p {
  margin: 4px 0 0;
}

#categoryHead .sort select {
  height: 30px;
  font-size: 12px;
  color: var(--hr-text);
  border: 1px solid var(--hr-border);
  border-radius: 8px;
}

.pagination ul li a {
  color: var(--hr-green);
}

.pagination ul li.active a {
  color: var(--hr-text);
  font-weight: 700;
}

/* ---------- Sidebar ---------- */

#sidebar h3 {
  color: var(--hr-subtitle-red);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

#sidebar .nav-list a {
  color: var(--hr-text);
  font-size: 13px;
}

#sidebar .nav-list a:hover,
#sidebar .nav-list a:focus {
  color: var(--hr-green);
}

#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover,
#sidebar .nav-list .active a:focus {
  color: var(--hr-green);
  font-weight: 600;
}

#sidebar .nav-list .active a .icon-arrow:before {
  color: var(--hr-green);
}

/* ---------- Article ---------- */

#fullArticle {
  color: var(--hr-text);
  font-size: 14px;
  line-height: 1.65;
}

#fullArticle h2 {
  color: #000;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hr-border);
}

#fullArticle h3 {
  color: var(--hr-subtitle-red);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  line-height: 1.5;
  text-transform: uppercase;
}

/* Label lines ("Deutsche Bahn (Germany)") sit close to the text they introduce, so each
   label and its text read as one group, with the normal gap before the next label */
#fullArticle > div:has(> strong:first-child),
#fullArticle > div:has(> b:first-child) {
  margin-top: 1.75em;
  margin-bottom: 4px;
}

#fullArticle h4,
#fullArticle h5 {
  color: var(--hr-text);
  font-size: 14px;
  font-weight: 700;
}

#fullArticle strong,
#fullArticle b {
  color: var(--hr-text);
  font-weight: 700;
}

#fullArticle a,
#fullArticle strong a,
#fullArticle a strong {
  color: var(--hr-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#fullArticle a:hover {
  color: var(--hr-green-dark);
}

#fullArticle li::marker {
  color: var(--hr-green);
}

#fullArticle img {
  border-radius: var(--hr-radius-block);
}

#fullArticle table {
  border-collapse: collapse;
}

#fullArticle table td,
#fullArticle table th {
  border: 1px solid var(--hr-border);
  padding: 8px 12px;
}

#fullArticle table th {
  background: var(--hr-surface);
}

/* Callout boxes: DarkGrey panels; the colour variants keep a coloured left edge */
#fullArticle .callout,
#fullArticle .callout-blue,
#fullArticle .callout-green,
#fullArticle .callout-red,
#fullArticle .callout-yellow {
  color: var(--hr-text);
  background: var(--hr-surface);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-block);
}

#fullArticle .callout-green {
  border-left: 4px solid var(--hr-green);
}

#fullArticle .callout-red {
  border-left: 4px solid var(--hr-title-red);
}

#fullArticle .callout-yellow {
  border-left: 4px solid #f5a623;
}

#fullArticle .callout-blue {
  border-left: 4px solid #4f92ca;
}

/* Print: an outline printer icon instead of Help Scout's font glyph, centred on the
   title's first line */
#fullArticle .printArticle {
  top: 26px;
  line-height: 0;
}

#fullArticle .printArticle .icon-print:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: var(--hr-print-icon) no-repeat center / contain;
}

#fullArticle .printArticle:hover .icon-print:before {
  background-image: var(--hr-print-icon-hover);
}

/* "Still need help? Contact Us" */
.articleFoot {
  color: var(--hr-grey);
}

.articleFoot .icon-contact:before {
  color: var(--hr-green);
}

.articleFoot p,
.articleFoot time {
  font-family: var(--hr-font);
  font-style: normal;
}

.articleFoot .help {
  color: var(--hr-text);
  font-weight: 600;
}

/* Help Scout styles these by id, so the id is needed to recolour them */
#sbContact,
#sbContactMobile,
.articleFoot .help a.contactUs {
  border-bottom: 0;
  margin-left: 8px;
  padding: 8px 16px;
  line-height: 1;
  color: #fff;
  font-weight: 600;
  background: var(--hr-green);
  border-radius: 8px;
}

#sbContact:hover,
#sbContactMobile:hover,
.articleFoot .help a.contactUs:hover {
  color: #fff;
  background: var(--hr-green-dark);
  text-decoration: none;
}

.articleFoot time.lu {
  color: var(--hr-grey);
  font-size: 12px;
}

/* Related articles under an article */
.related {
  border: 1px solid var(--hr-border);
  border-top: 0;
  border-radius: 0 0 var(--hr-radius-card) var(--hr-radius-card);
}

.contentWrapper.withRelated {
  border-radius: var(--hr-radius-card) var(--hr-radius-card) 0 0;
  box-shadow: none;
}

.related h3 {
  color: var(--hr-subtitle-red);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
}

/* ---------- Footer ---------- */

footer p,
footer p a {
  color: var(--hr-grey);
  font-size: 12px;
}

footer p a:hover {
  color: var(--hr-green);
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  #mainNav .brand {
    width: 160px;
    height: 50px;
    margin-left: 4px;
    background-size: 160px auto;
  }

  #mainNav .navbar-inner {
    min-height: 50px;
  }

  #mainNav .btn-navbar {
    margin-top: 11px;
  }

  #mainNav .btn-navbar .icon-bar,
  #mainNav .btn-navbar:hover .icon-bar {
    background: #fff;
  }

  #mainNav .nav li a {
    line-height: 2.6em;
    font-size: 13px;
  }

  #docsSearch {
    padding: 1.5em 0 0.5em;
  }

  #docsSearch h1 {
    font-size: 18px;
  }

  /* Cards keep their frame on phones, with a side margin */
  .threeCol .collection,
  .twoCol .collection {
    width: auto;
    margin: 0 0 16px;
    padding: 0;
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius-card);
  }

  .threeCol .collection .collection-head,
  .twoCol .collection .collection-head {
    padding: 1em 1.2em;
    margin-bottom: 0.8em;
    border-bottom: 1px solid var(--hr-border);
  }

  .threeCol .collection .collection-body,
  .twoCol .collection .collection-body {
    padding: 0 1.2em 1.4em;
  }

  .threeCol .collection:first-child,
  .twoCol .collection:first-child {
    padding-top: 0;
  }

  .threeCol .collection:first-child .collection-head,
  .twoCol .collection:first-child .collection-head {
    padding-top: 1em;
  }

  .contentWrapper {
    padding: 0 20px 12px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }

  .contentWrapper > h1,
  #categoryHead,
  #serp > h1,
  #fullArticle > .title {
    margin: 0 -20px 12px;
    padding: 18px 20px;
  }

  #fullArticle > .title {
    padding-right: 56px;
  }

  #categoryHead h1 {
    margin-right: 0;
  }

  /* Phones: the sort menu drops under the title (Help Scout's own phone layout) */
  #categoryHead .sort {
    position: static;
    transform: none;
    margin-top: 10px;
  }

  #fullArticle .printArticle {
    top: 20px;
    right: 20px;
  }

  #searchBar {
    padding: 18px 0;
  }

  #searchBar button {
    top: 18px;
  }

  .contentWrapper h1,
  #fullArticle h1,
  #fullArticle .title {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  /* Phones: the button shrinks to the green arrow segment */
  #searchBar .search-query {
    padding-right: 60px;
    margin-right: 0;
  }

  #searchBar button,
  #searchBar button:hover,
  #searchBar button:focus {
    width: 48px;
    padding: 0;
    background: var(--hr-arrow) no-repeat center / 18px 18px, var(--hr-green);
  }

  #searchBar button .icon-search {
    display: none;
  }
}