/* Site background stays light grey */
/* Normalize box model and font rendering across browsers */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Normalize navbar font size and font site-wide */
#nav,
#nav * {
  font-family: 'Yanone Kaffeesatz', sans-serif !important;
}
#nav a {
  font-size: 1rem;
  font-family: 'Yanone Kaffeesatz', sans-serif;
}

/* Page background and container */
body.subpage {
  background-color: #eaeaea;
  margin: 0;
  padding: 0;
}

/* Content area has white background */
.container.main-content {
  background-color: #ffffff;
  padding: 2em;
  margin: 2em auto;
  max-width: 1200px;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

/* Banner stays inside content area */
.banner-container {
  text-align: center;
  margin-bottom: 2em;
}
.banner-container img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Apply Verdana ONLY to visible main content (not navbar) */
.main-content,
.main-content p,
.main-content h1,
.main-content h2,
.main-content h3,
.main-content li,
.main-content table,
.main-content blockquote,
.main-content a {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* ===========================
   Typography – Senior Friendly
   =========================== */

/* Increase base font size slightly for readability */
body,
.main-content {
  font-size: 1rem; /* ~14px */
  line-height: 1.6;
  color: #111;
  background-color: #ffffff;
}

/* Paragraphs */
.main-content p {
  margin-bottom: 1em;
}

/* Headings */
.main-content h1 {
  font-size: 2rem; /* ~36px */
  margin-bottom: 0.5em;
}
.main-content h1:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Fix: Make all <h2> inside any .main-content container bold and red */
.main-content h2,
.main-content .main-content h2 {
  color: #405966;       /* Bright red */
  font-size: 2rem;       /* ~32px */
  font-weight: bold;     /* Make it stand out */
  margin-bottom: 0.4em;  /* Reduce space below */
  margin-top: 1em;       /* Consistent spacing above */
}

.main-content h3 {
  font-size: 1.85rem; /* ~28px */
  font-weight: bold;
  line-height: 1.3;
  margin-top: 1rem;
  margin-bottom: 0.4rem;
}

/* Ordered and Unordered List styles */
.main-content ol {
  list-style: decimal !important;
  margin-left: 1.5em;
  padding-left: 1.2em;
}
.main-content ul {
  list-style: disc !important;
  margin-left: 1.5em;
  padding-left: 1.2em;
}
.main-content ol li,
.main-content ul li {
  display: list-item !important;
  list-style-position: inside !important;
}
/* Make sure lists have indentation inside main content area */
.main-content ul,
.main-content ol {
  margin-left: 1.5em;     /* space outside the list */
  padding-left: 1.2em;    /* space before the bullets/numbers */
  list-style-position: outside; /* ensures bullet/number is outside text */
}

/* Blockquotes */
.main-content blockquote {
  font-style: italic;
  border-left: 4px solid #ccc;
  padding: 0.5em 1em;
  margin: 1em 0;
  background-color: #f9f9f9;
}
b, strong {
  font-weight: 700; /* forces bold if the font supports it */
}

/* Tables */
.main-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}
.main-content td,
.main-content th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
.main-content tr:nth-child(even) {
  background-color: #f2f2f2;
}
/* Style for table header background and text */
.responsive-table thead th {
  background-color: #405966; /* Navy blue or any other color you like */
  color: #ffffff; /* White text for contrast */
  font-weight: bold;
  text-align: left;
}
/* Style the table header row */
.responsive-table thead th {
  background-color: #405966; /* Navy blue or any other color you like */
  color: #ffffff;            /* White text for contrast and readability */
  font-weight: bold;         /* Make the header text bold */
  text-align: left;          /* Align text to the left (can be 'center' if preferred) */
  padding: 0.75em;           /* Add spacing inside the table cells */
}
/* Container that allows horizontal scroll on small screens */
.responsive-table {
  width: 100%;
  overflow-x: auto;       /* Enables horizontal scrolling if needed */
  overflow-y: hidden;     /* Prevents useless vertical scrollbar */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Optional: prevent double scrollbars inside container */
.responsive-table table {
  width: 100%;
  border-collapse: collapse;
}

strong {
  font-weight: bold;
}
.bold-text {
  font-weight: bold;
}
b, strong {
  font-weight: bold;
}


/* Remove extra spacing at the top */
.main-content > *:first-child {
  margin-top: 0;
}
.banner-container {
  margin-top: 0;
  padding-top: 0;
}
#content {
  padding-top: 0;
  margin-top: 0;
}
.main-content img.bordered-feature-image {
  margin-top: 0;
  display: block;
}

/* Increase space between sections */
.main-content section {
  margin-bottom: 2rem;
}
/* Remove margin below banner image */
#content img,
.main-content img,
.intro img {
  margin-bottom: 0 !important;
  display: block;
}

/* Remove top margin on first heading */
.intro h1:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Optional: tighten top of .intro section */
.intro {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ===========================
   Navbar Logo Styling
   =========================== */

/* FORCE consistent navbar logo <h1> sizing across browsers */
.navbar h1,
.site-header h1,
.logo h1 {
  all: unset; /* reset all inherited styles from h1 */
  font-size: 1.25rem;      /* ~24px */
  font-weight: normal;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  line-height: 1.2;
  margin: 0;
  padding: 0.5em 1em;
  display: inline-block;
  white-space: nowrap;
}

/* Optional: constrain height to prevent overflow */
.navbar h1 {
  max-height: 3.5rem;
  overflow: hidden;
}
.responsive-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.responsive-table table {
  min-width: 750px;
}
/* Optional featured image styling */
.main-content img.bordered-feature-image {
  margin-top: 0;
  display: block;
}

/* -------------------------
   Section Styling
---------------------------- */
.main-content > *:first-child {
  margin-top: 0;
}

.intro,
.intro h1:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.main-content section {
  margin-bottom: 2rem;
}

/* Highlighted content block */
.section-highlight {
  border-left: 5px solid #8dbc8f;
  padding-left: 1em;
  background-color: #f8fdf8;
  margin-bottom: 1.5em;
}


/* Mobile: shrink a bit more */
@media (max-width: 600px) {
  .navbar h1 {
    font-size: 1.25rem;
  }
}