body.wide .doc
{
   max-width: 80rem;  /* Changing this to 'none' widens the page */
}

@media screen and (min-width:1024px) {
   body.wide .doc {
      max-width: 85rem; /* Changing this to 'none' widens the page */
   }
}

body.very-wide .doc
{
   max-width: none;  /* Changing this to 'none' widens the page */
}

@media screen and (min-width:1024px) {
   body.very-wide .doc {
      max-width: none; /* Changing this to 'none' widens the page */
   }
}
/* === Make top nav text visible on dark header background === */
.navbar,
.navbar .navbar-item,
.navbar a.navbar-item {
  color: #f8f8f8 !important;      /* light gray-white text */
}

.navbar a.navbar-item:hover {
  color: #ffffff !important;      /* pure white on hover */
  background: none !important;    /* avoid gray highlight */
}


/* When ':page-role: wide' is used, images will have shadwow-border. */
body.wide .imageblock img {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: white;
  padding: 6px;
  max-width: 100%;
  height: auto;
}

/* CSS style for adding a border to literal blocks within tables. This is used
 * for displaying the transliteration/translation tables. The steps:
 *
 * 1. Specify the table using: [.widepair,cols="1a,1a",grid=none,frame=none]
 *
 *    This increase the center gutter width between the adjacent cells.
 *    grid=none,frame=none will eliminate the appearance of grid lines.
 *    
 * 2. [literal.bordered] -- This will cause the literblock to have a border
 * that is solid, 3px wide border with slightly round corners
 *  
 */

/* Reduce cell padding for these paired tables */
table.tableblock.widepair td {
  padding-left: 1.25em;
  padding-right: 1.25em;
}

/* Bordering the content only of literal blocks */
.literalblock.bordered > .content {
  background-color: #f9f9f9;      /* subtle contrast */
  box-shadow: 0 0 4px rgba(0,0,0,0.15);  /* soft depth */
  margin-top: 0.4em;              /* separation from title */
  padding: 0.85em 1em;            /* breathing room inside box */
  border-radius: 6px;             /* rounded corners */
  border: 3px solid #444;         /* dark gray frame */
}


/* Making sections narrower */
.literal-narrow {
    max-width: 95ch;
    border-left: 3px solid #ccc; /* A visual separator */ 
}


/* used in: [role="literal-max-width"] */
.literal-narrower {
    max-width: 90ch;
    border-left: 3px solid #ccc; /* A visual separator */ 
}

.narrow {
    max-width: 95ch;
}

.narrower {
    max-width: 90ch;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 10px;
}

.grid-item {
    width: 100%;
}

.grid-item img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 
Note: The Poppins font (and the Comfortaa font) are enabled using the Goolge font API in the
header-styles.hbs partial in antora-supplemental-ui/partials/
 */ 

.tl-wrapper * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Fira Sans Condensed", "Poppins", sans-serif;
  font-weight: 400;
}

html {
  scroll-behavior: smooth;
}
/*
 BUG: This won't work. Using the additional '.doc' subselector
 causes the timeline's div's arrow to disappear.
body.timeline .doc {
  background: #3ea0e2; 
}
*/

body.timeline {

  background: #3ea0e2; 
}

body.timeline.wide .doc {
  max-width: none;
}

body.timeline .doc h1 {
  color: #f2f2f2;
}

body.timeline .doc .pagination a {
  color: white;
}

::selection {
  color: #fff;
  background: #3ea0e2;
}

.tl-wrapper {
  max-width: 1080px;
  margin: 50px auto;
  padding: 0 20px;
  position: relative;
}

.tl-wrapper .center-line {
  position: absolute;
  height: 100%;
  width: 4px;
  background: #fff;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
}

.tl-wrapper .row {
  display: flex;
}

.tl-wrapper .row-1 {
  justify-content: flex-start;
}

.tl-wrapper .row-2 {
  justify-content: flex-end;
}

.tl-wrapper .row section {
  background: #fff;
  border-radius: 5px;
  /* Note: Changing '- 40px' will also
     require repositioning/adjusting-size-of circles */
  width: calc(50% - 40px);
  padding: 20px;
  position: relative;
}

.tl-wrapper .row section::before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  background: #fff;
  top: 28px;
  z-index: -1;
  transform: rotate(45deg);
}

.row-1 section::before {
  right: -7px;
}

.row-2 section::before {
  left: -7px;
}

.row section .icon,
.center-line .scroll-icon {
  position: absolute;
  background: #f2f2f2;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: #3ea0e2;
  font-size: 17px;
  box-shadow: 0 0 0 4px #fff, inset 0 2px 0 rgba(0,0,0,0.08), 0 3px 0 4px rgba(0,0,0,0.05);
}

.center-line .scroll-icon {
  bottom: 0px;
  left: 50%;
  font-size: 25px;
  transform: translateX(-50%);
}

.row-1 section .icon {
  top: 15px;
  right: -60px;
}

.row-2 section .icon {
  top: 15px;
  left: -60px;
}

.row section .details,
.row section .bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.row section .details .title {
  font-size: 22px;
  font-weight: 600;
}

.row section p {
  margin: 10px 0 17px 0;
}

.row section .bottom a {
  text-decoration: none;
  background: #3ea0e2;
  color: #fff;
  padding: 7px 15px;
  border-radius: 5px;
  /* font-size: 17px; */
  font-weight: 400;
  transition: all 0.3s ease;
}

.row section .bottom a:hover {
  transform: scale(0.97);
}

@media(max-width: 790px) {
  .tl-wrapper .center-line {
    left: 40px;
  }

  .tl-wrapper .row {
    margin: 30px 0 3px 60px;
  }

  .tl-wrapper .row section {
    width: 100%;
  }

  .row-1 section::before {
    left: -7px;
  }

  .row-1 section .icon {
    left: -60px;
  }
}

@media(max-width: 440px) {
  .tl-wrapper .center-line,
  .row section::before,
  .row section .icon {
    display: none;
  }

  .tl-wrapper .row {
    margin: 10px 0;
  }

}