/* ==========================================================================
   1. REGISTER HAND-DRAWN FONT
   ========================================================================== */
@font-face {
  font-family: 'Korsgaard';
  src: url('/fonts/Korsgaard_font-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ==========================================================================
   2. GLOBAL TYPOGRAPHY & BODY STYLES
   ========================================================================== */
body, 
.jumbotron h1, 
.jumbotron p, 
.navbar .navbar-nav, 
.navbar-nav li a,
.panel p, 
.panel h1, 
.panel h2, 
.panel h3,
.comic-nav, 
.first-comic, 
.previous-comic, 
.comic-next,
.site-footer,
.footer-links a,
.footer-copyright {
  font-family: 'Korsgaard', sans-serif !important;
}

/* ==========================================================================
   3. MAIN SITE BODY & FULL-PAGE TEXTURE
   ========================================================================== */
body {
  font-size: 15px;
  color: #424142;
  padding-top: 20px;
  
  background-image: url(../images/bg-texture.png);
  background-repeat: repeat;
  background-color: #f4f1ea;
}

.panel {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 500px;
}

.panel p, .panel h1, .panel h2, .panel h3 {
  padding: 0px 25px 0px 25px;
}

.panel h1 { font-size: 30px; font-weight: normal; }
.panel h2 { font-size: 20px; font-weight: bold; }
.panel h3 { font-size: 14px; font-weight: bold; }

.center {
  margin: auto;
  float: none;
}

/* ==========================================================================
   4. HEADER & NAVIGATION STYLES
   ========================================================================== */
.jumbotron {
  background-image: url(../images/header-bg.png) !important;
  background-repeat: repeat !important;
}

.container .jumbotron {
  padding: 40px 0px 40px 0px;
  text-align: center;
}

.jumbotron img {
  height: 100%;
  width: 100%;
}

.jumbotron a, .jumbotron a:visited {
  color: #424142;
  text-decoration: none;
}

.jumbotron h1 {
  font-size: 84px !important;
  margin-bottom: 10px !important;
  line-height: 1.1 !important;
}

.jumbotron p {
  font-size: 30px !important;
  letter-spacing: 1px !important;
}

.navbar {
  margin-bottom: 0px;
  background-color: transparent !important;
  border: none !important;
}

.navbar .navbar-default {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-nav {
  margin-left: auto;
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar-nav li a {
  font-size: 24px !important;
  font-weight: bold !important;
}

.navbar .navbar-collapse {
  text-align: center;
}

/* ==========================================================================
   5. COMIC PANEL STYLES
   ========================================================================== */
.comic-panel {
  max-width: 700px;
  margin: 0 auto !important;
  float: none !important;
  text-align: center;
}

.panel img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

.comic-panel img {
  display: block;
  margin: 0 auto;
  width: auto !important; 
  max-width: 100% !important; 
  max-height: 85vh !important;
}

/* ==========================================================================
   6. ARCHIVE & FOOTER STYLES
   ========================================================================== */
.archive-li {
  display: block;
}

.archive-ul {
  margin: 0px;
  list-style: none;
}

.site-footer {
  padding: 20px 0;
}

.footer-links a {
  margin: 0 15px;
  color: #333;
  font-size: 18px;
}

.footer-links a:hover {
  color: #000;
  text-decoration: underline;
}

.footer-copyright {
  color: #777;
  font-size: 14px;
  margin-top: 15px;
}

/* ==========================================================================
   7. DYNAMIC NAVIGATION BUTTON UTILITIES
   ========================================================================== */
.nav-btn.disabled,
span.disabled {
  opacity: 0.35;         
  cursor: not-allowed;   
  pointer-events: none;  
  text-decoration: none; 
}
/* Scale down oversized numbers in the font */
.post-date, .site-footer, .footer-copyright, span, time {
  /* Adjust this percentage if they still look a bit too big or small */
}

/* Or target inline numbers and years directly */
p, span, small, .site-footer {
  font-feature-settings: normal;
}/* Force system font fallback for all numbers so they don't blow up */
input, textarea, select, 
*:not(h1):not(h2):not(h3) {
  /* This prevents custom font overrides from messing up native digit heights if needed, 
     or you can target specific elements below: */
}

/* Specifically target dates, footers, and copyright text to use standard sans-serif for numbers */
.site-footer, .footer-copyright, p {
  /* If you want numbers to look normal, wrap them or let the system font handle digits */
}