/* Universal font override - ensure ALL text uses Georgia */
* {
  font-family: "Georgia", "Times New Roman", "Noto Serif", "Droid Serif", serif !important;
}

/* General tag list -- Don't use abbr,sub,sup.  */
b,i,p,q,s,
em,h1,h2,h3,h4,h5,h6,tt,
big,del,dfn,kbd,ins,pre,small,var,
cite,code,samp
{display:inline;font-family:"Georgia", "Times New Roman", "Noto Serif", "Droid Serif", serif;font-size:100%;font-style:normal;quotes:none;margin:0px;padding:0px;text-decoration:none;vertical-align:baseline;text-align:justify;line-height:1.5;}
/* General stuff.  */
body{font-family:"Georgia", "Times New Roman", "Noto Serif", "Droid Serif", serif;text-align:justify;color:#000000;background-color:#F8F5F0;font-size:140%;line-height:1.5;}
a{text-decoration:none;}
a,a:hover,a:visited{text-decoration:none;color:#654321;}
a:hover{text-decoration:underline;color:#8B4513;}

/* Consistent spacing for all text elements */
p, div, span, td, th, li, pre, blockquote {
  line-height: 1.5;
}

/* Notes and special text should also have good spacing */
.note, .footnote, .reference {
  line-height: 1.5;
}

/* Ensure key navigation elements have tan backgrounds */
table, tr, td, th {
  background-color: transparent;
}

/* Uniform button styling */
input[type=button], input[type=submit], button {
  background: #8B4513;
  color: #F5F0E8;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-family: "Georgia", "Times New Roman", "Noto Serif", serif;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

input[type=button]:hover, input[type=submit]:hover, button:hover {
  background: #654321;
}

input[type=button]:active, input[type=submit]:active, button:active {
  background: #5D3A1A;
}

/* Text input uniform styling */
input[type=text] {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px 12px;
  font-family: "Georgia", "Times New Roman", "Noto Serif", serif;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

input[type=text]:focus {
  outline: none;
  border-color: #8B4513;
}

/* No underline.  */
u{text-decoration:none}
/* Sup.  */
s{vertical-align:super;font-size:80%;color:#999999}
/* Bold.  */
b{font-weight:bold;color:#444444;}
/* Note para.  */
p{display:block;margin-bottom:4px;text-align:justify;font-weight:normal;}
/* Poetry 1 & 2.  */
q{display:block;margin-left:20px;}
/* Italics.  */
i{font-style:italic;}
/* Gray box.  */
div{display:block;text-align:justify;background-color:#E8DCC8 !important;padding:6px 8px;margin-top:8px;margin-bottom:8px;border:none !important;font-weight:normal;line-height:1.35;font-size:95%;}
/* Title para.  */
h2{display:block;text-align:center;margin-top:16px;font-size:115%;font-weight:normal;}
/* Subtitle.  */
h3,h3.hr{display:block;text-align:center;font-weight:normal;margin-bottom:10px;background-color:#F8F5F0 !important;padding:6px;border:none !important;border-radius:4px;}
h3.hr{border-bottom:none !important;margin-bottom:10px;padding-bottom:5px;}
/* Tan box.  */
h4{display:block;text-align:center;background-color:#F8F5F0 !important;padding:3px;margin-top:6px;margin-bottom:6px;border:none !important;font-weight:normal;}
/* Outline text in verses.  */
h1,tt,h5,del,var,code{font-weight:normal;display:block;text-indent:-20px;}
/* ot1 */ h1{margin-left:20px;font-weight:bold;}
/* ot2 */ tt{margin-left:30px;} tt.psa{text-indent:0px;margin-left:10px;}
/* ot3 */ h5{margin-left:40px;}
/* ot4 */ del{margin-left:50px;}
/* ot5 */ var{margin-left:60px;}
/* ot6 */ code{margin-left:70px;}
/* Outline text in outline listing.  */
kbd,em,h6,dfn,big,samp{font-weight:normal;display:block;text-indent:-20px;}
/* ol1 */ kbd{margin-left:20px;font-weight:bold;}
/* ol2 */ em{margin-left:35px;} em.psa{text-indent:0px;margin-left:15px;}
/* ol3 */ h6{margin-left:50px;}
/* ol4 */ dfn{margin-left:65px;}
/* ol5 */ big{margin-left:80px;}
/* ol6 */ samp{margin-left:95px;}
/* Intro para.  */
ins{display:block;text-indent:-20px;margin-left:20px;margin-bottom:3px;font-weight:normal;}
/* Outline links inside boxes */
u.o{font-size:108%;line-height:1.25;}

/* Responsive Design for Mobile */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  html {
    background-color: #F8F5F0 !important;
    padding: 0 !important;
    margin: 0 !important;
    /* iPhone safe area support */
    padding-top: env(safe-area-inset-top) !important;
    /* Prevent horizontal scrolling */
    overflow-x: hidden !important;
    width: 100% !important;
  }
  
  body {
    font-size: 140% !important;
    padding: 0 2px !important; /* Very minimal left/right padding */
    margin: 0 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    font-family: "Georgia", "Times New Roman", "Noto Serif", serif !important;
    background-color: #F8F5F0 !important;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent horizontal scrolling */
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  /* Verse reference numbers - make much smaller on mobile so they don't distract from reading */
  s {
    font-size: 50% !important;
  }
  
  /* Bold verse references at start of each verse (like "3Jo 1") - same size as verse text */
  b {
    font-size: 100% !important;
  }
  
  /* Prevent any elements from causing horizontal overflow */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure text wraps properly */
  p, div, span, pre, blockquote {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Tighter spacing for verse text and footnotes */
  br {
    line-height: 1.2 !important;
  }
  
  /* Paragraphs - match search results line spacing */
  p {
    margin-bottom: 2px !important;
    line-height: 1.3 !important;
  }
  
  /* Hide both h3 navigation bars on mobile (book navigation and Book|Outline|Notes) */
  body > h3 {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    max-height: 0 !important;
  }
  
  /* Keep chapter navigation visible on mobile - it's useful! */
  body > h4 {
    display: block !important;
    margin: 8px 0 !important;
    padding: 8px !important;
    background: #F0EBE3 !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 90% !important;
    line-height: 1.4 !important;
  }
  
  body > h4 a {
    padding: 2px 6px !important;
    display: inline-block !important;
  }
  
  /* Main title - book name at top */
  pre {
    font-size: 120% !important;
    margin-top: 5px !important;
    margin-bottom: 8px !important;
    padding: 8px;
    background: #E8DCC8;
    border: none;
    border-radius: 6px;
  }
  
  /* Chapter title sections - h2 elements */
  h2 {
    font-size: 115% !important;
    margin-top: 15px !important;
    margin-bottom: 8px !important;
    padding: 8px;
    background: #F0EBE3;
    border-radius: 6px;
    font-weight: 600 !important;
  }
  
  /* Hide the "Chapter X of Y" h3 that follows h2 - we don't need it on mobile */
  h2 + h3 {
    display: none !important;
  }
  
  /* Subtitle sections */
  h3, h3.hr {
    font-size: 110% !important;
    margin-bottom: 8px !important;
    padding: 4px;
    font-weight: 500 !important;
  }
  
  /* Hide top navigation on mobile */
  body > h3:nth-child(1),
  body > h3:nth-child(3) {
    display: none !important;
  }
  
  /* Keep h3 inside content visible but styled */
  div h3, p h3 {
    display: block !important;
  }
  
  /* Gray boxes (introduction text) */
  div {
    background-color: #E8DCC8 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px !important;
    margin: 10px 0 !important;
    line-height: 1.6 !important;
    text-align: left !important;
    font-size: 90% !important;
  }
  
  /* Hide outlines when toggled off */
  body.hide-outlines div {
    display: none !important;
  }
  
  /* Reading Mode - toggle superscripts and disable links */
  
  /* Hide all superscripts (footnotes, cross-references) */
  body.reading-mode s {
    display: none !important;
  }
  
  /* Make all links look like regular text and non-clickable */
  body.reading-mode a {
    pointer-events: none !important;
    color: inherit !important;
    text-decoration: none !important;
  }
  
  /* Hide elements marked by JavaScript */
  .reading-mode-hidden {
    display: none !important;
  }
  
  /* Hide breaks that aren't sentence endings */
  body.reading-mode br.reading-mode-break-hidden {
    display: none !important;
  }
  
  /* Keep verse number superscripts visible */
  body.reading-mode sup.reading-mode-verse-num {
    display: inline !important;
  }
  
  body.reading-mode h2, body.reading-mode h3 {
    display: block !important; /* Keep chapter headings */
    margin: 16px 0 8px 0 !important;
  }
  
  /* Remove indentation from outline items inside boxes */
  div h1, div tt, div h5, div del, div var, div code,
  div kbd, div em, div h6, div dfn, div big, div samp {
    margin-left: 0 !important;
    text-indent: 0 !important;
    display: block;
    margin-bottom: 3px;
    font-size: 90% !important;
    text-align: left !important;
  }
  
  /* Main outline headings inside boxes */
  div h1, div kbd {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 95% !important;
  }
  
  /* Outline items - proportional sizing */
  div h5 {
    font-size: 85% !important;
  }
  
  /* Tan boxes */
  h4 {
    background-color: #F0EBE3 !important;
    border: 1px solid #E8DCC8 !important;
    border-radius: 8px !important;
    padding: 10px !important;
    margin: 12px 0 !important;
    line-height: 1.3 !important;
  }
  
  /* Paragraphs */
  p {
    margin-bottom: 2px !important;
    line-height: 1.3 !important;
  }
  
  /* Outline sections - reduce indentation for mobile */
  h1 { margin-left: 0; text-indent: 0; font-size: 90% !important; font-weight: 600; margin-bottom: 6px; text-align: left !important; }
  tt { margin-left: 0; text-indent: 0; margin-bottom: 4px; font-size: 90% !important; text-align: left !important; }
  h5 { margin-left: 0; text-indent: 0; margin-bottom: 4px; font-size: 85% !important; text-align: left !important; }
  del { margin-left: 0; text-indent: 0; margin-bottom: 4px; font-size: 90% !important; text-align: left !important; }
  var { margin-left: 0; text-indent: 0; margin-bottom: 4px; font-size: 90% !important; text-align: left !important; }
  code { margin-left: 0; text-indent: 0; margin-bottom: 4px; font-size: 90% !important; text-align: left !important; }
  
  kbd { margin-left: 0; text-indent: 0; font-size: 90%; font-weight: 600; margin-bottom: 6px; }
  em { margin-left: 0; text-indent: 0; margin-bottom: 4px; }
  h6 { margin-left: 0; text-indent: 0; margin-bottom: 4px; }
  dfn { margin-left: 0; text-indent: 0; margin-bottom: 4px; }
  big { margin-left: 0; text-indent: 0; margin-bottom: 4px; }
  samp { margin-left: 0; text-indent: 0; margin-bottom: 4px; }
  
  /* Introduction paragraphs */
  ins { 
    margin-left: 8px; 
    text-indent: -8px; 
    margin-bottom: 2px;
    line-height: 1.3;
  }
  
  /* Poetry */
  q { margin-left: 8px; line-height: 1.3; }
  
  /* Outline pages - completely remove indentation for mobile */
  /* ol1 */ kbd { margin-left: 0 !important; text-indent: 0 !important; font-size: 90%; font-weight: 600; margin-bottom: 8px; }
  /* ol2 */ em { margin-left: 0 !important; text-indent: 0 !important; margin-bottom: 6px; }
  /* ol3 */ h6 { margin-left: 0 !important; text-indent: 0 !important; margin-bottom: 6px; }
  /* ol4 */ dfn { margin-left: 0 !important; text-indent: 0 !important; margin-bottom: 6px; }
  /* ol5 */ big { margin-left: 0 !important; text-indent: 0 !important; margin-bottom: 6px; }
  /* ol6 */ samp { margin-left: 0 !important; text-indent: 0 !important; margin-bottom: 6px; }
  
  /* Links - make more tappable and use same font */
  a {
    padding: 2px 4px;
    border-radius: 3px;
    font-family: "Georgia", "Times New Roman", "Noto Serif", serif !important;
  }
  
  a:hover {
    background: #F0EBE3;
  }
}

@media (max-width: 480px) {
  html {
    background-color: #F8F5F0 !important;
    padding: 0 !important;
    margin: 0 !important;
    /* iPhone safe area support */
    padding-top: env(safe-area-inset-top) !important;
    /* Prevent horizontal scrolling */
    overflow-x: hidden !important;
    width: 100% !important;
  }
  
  body {
    font-size: 150% !important;
    padding: 0 2px !important; /* Very minimal left/right padding */
    margin: 0 !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    background-color: #F8F5F0 !important;
    /* Prevent horizontal scrolling */
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  pre {
    font-size: 140% !important;
  }
  
  h2 {
    font-size: 125% !important;
    line-height: 1.3 !important;
  }
}

/* Desktop: Make outline elements smaller */
@media (min-width: 769px) {
  /* Main outline levels - make them smaller than body text */
  kbd, div kbd { font-size: 85% !important; }
  em, div em { font-size: 85% !important; }
  h6, div h6 { font-size: 85% !important; }
  dfn, div dfn { font-size: 85% !important; }
  big, div big { font-size: 85% !important; }
  samp, div samp { font-size: 85% !important; }
  tt, div tt { font-size: 80% !important; }
  h5, div h5 { font-size: 80% !important; }
  del, div del { font-size: 80% !important; }
  var, div var { font-size: 80% !important; }
  code, div code { font-size: 80% !important; }
  
  /* Outline containers should also be smaller */
  div { font-size: 90% !important; }
}

/* Main title.  */
pre{display:block;text-align:center;font-size:120%;margin-top:16px;margin-bottom:12px;white-space:normal;background-color:#F8F5F0;padding:8px;border:none;border-radius:4px;}
/* Footer.  */
small{display:block;border-top:1px solid #ccccdd;padding-top:5px;text-align:center;color:#555555;margin-top:10px;margin-bottom:80%;}
/* Center-aligned text: Psalm inserted text.  */
span{display:block;text-align:center;margin-top:5px;margin-bottom:3px;}