/* ==========================================================
   GLOBAL & LAYOUT BASE
   ========================================================== */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: auto; /* page never scrolls */
}

h2 {
  font-size: 18px;
  font-weight: normal;
}

h3 {
  display: block;
  text-align: center;
  padding-top: 2px;
  background-color: transparent;
  padding-bottom: 2px;
  margin: 0;
  color: #8B0000;
  font-size: 12px;
} 

#mainContent h2,
#mainContent h3 {
  margin-top: 0;
  margin-left: 0;
}

/* ==========================================================
   PAGE HEADER & NAVIGATION
   ========================================================== */
.nav-arrow-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 0.5rem;
}

.nav-label {
  display: inline;
  font-size: 1rem;
} 

.page-title-wrapper {
  margin-top: 150px;
  text-align: center;
}

.page-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  background-color: #000;
  color: #CD5C5C;
  margin: 0;
  position: relative;
}  

.page-title {
  font-size: 17px;
  font-weight: normal;
  margin: 0;
  color: #CD5C5C;
  line-height: 1px;
  padding-top: 2px;
}

.header-bar {
  height: 6px;
  width: 100%;
  background-color: #404040;
}

.header-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.header-link:hover {
  color: #7799DD;
  text-decoration: underline;
}

/* ==========================================================
   MAIN WRAPPER FRAME
   ========================================================== */
#mainWrapper {
  max-width: 640px;
  height: calc(100vh - 125px - 21px);
  margin: 6px auto;
  background: #738D73;
  border: 1px solid #606060;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  padding: 0;
  box-sizing: border-box;
  position: relative; /* Anchors absolute scroll buttons */
  overflow: hidden;   /* Clips content inside 6px rounded corners */
  display: none;
}

#mainWrapper.has-content {
  display: block;
}

/* ==========================================================
   SCROLLABLE CONTENT WINDOW
   ========================================================== */
#mainContent,
#mainContent.scroll-container {
  position: relative;
  margin: 0;
  max-width: none;
  background-color: #738D73;
  border-radius: 6px;
  padding: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  height: 100%;

  /* Firefox Custom Scrollbar (CV Red) */
  scrollbar-width: auto;
  scrollbar-color: #C62828 #4F5F4F;
}

#mainContent > * {
  margin-top: 0;
  margin-left: 0;
}

/* ==========================================================
   CUSTOM HYBRID SCROLLBAR (WebKit / Chrome / Safari)
   ========================================================== */
#mainContent::-webkit-scrollbar,
#mainContent.scroll-container::-webkit-scrollbar {
  width: 16px !important; /* CV page track width */
}

#mainContent::-webkit-scrollbar-track,
#mainContent.scroll-container::-webkit-scrollbar-track {
  background-color: #4F5F4F !important; /* CV dark track */
}

#mainContent::-webkit-scrollbar-thumb,
#mainContent.scroll-container::-webkit-scrollbar-thumb {
  background-color: #C62828 !important; /* CV Red thumb */
  border-radius: 0px;
  border: none;
}

#mainContent::-webkit-scrollbar-thumb:hover,
#mainContent.scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: #A02020 !important;
}

/* ==========================================================
   CUSTOM SCROLL ARROW BUTTONS (CV Red Arrows)
   ========================================================== */
.scrollbar-arrow-btn {
  display: none;
  position: absolute;
  right: 1px;
  width: 18px;
  height: 18px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.scrollbar-arrow-btn.active {
  display: flex;
}

.scrollbar-top-btn { 
  top: 2px; 
}

.scrollbar-bottom-btn { 
  bottom: 2px; 
}

/* Red CSS Triangle Arrows */
.scrollbar-top-btn::after {
  content: '';
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #C62828;
}

.scrollbar-bottom-btn::after {
  content: '';
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #C62828;
}

/* ==========================================================
   INTERNAL PAGE CONTENT STYLING
   ========================================================== */
/* ==========================================================
   INTERNAL PAGE CONTENT STYLING
   ========================================================== */
#mainContent img,
main #mainContent img {
  display: block;
  height: auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto 10px auto;
  border-radius: 4px;
}

/* Updated rule with higher specificity and max-width override */
#mainContent img.small-image,
main #mainContent img.small-image {
  width:400px !important;    /* Change 300px to your desired size */
  max-width: 400px !important;
}

#mainContent .image-wrapper {
  width: 400px;                 /* Matches your image size */
  margin-left: auto !important; /* Forces it to center despite the global rule */
  margin-right: auto !important;
}



#subtitle {
  font-size: 0.85rem;
  color: #A30808;
  margin-top: 4px;
  margin-bottom: 12px;
  white-space: nowrap;
  font-style: italic;
  text-align: right;    /* Aligns the text to the right edge of the wrapper/image */
}




/* Normal state: White links */
#content a {
  color: #FFFFFF;
  text-decoration: underline; /* Optional: adds an underline so links are easy to spot */
}

/* Hover state: Blue links */
#content a:hover {
  color: #2D54D9; /* Matches your header link hover blue */
  text-decoration: underline;
}




.intro-heading {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 1.5rem;
  font-weight: 550;
  margin-bottom: 0.05rem;
  letter-spacing: 0.5px;
}

#content {
  max-width: 600px;
  margin: 0 auto;
  padding-top: 0;
  line-height: 1.3;
  text-align: justify;
}

#content p {
  margin: 1em 0;
}

#content p:first-of-type {
  margin-top: 0;
}

#content ul,
#content ol {
  margin: 1em 0 1em 1.5em;
  padding-left: 1em;
}

#content ul {
  list-style-type: disc;
}

#content ol {
  list-style-type: decimal;
}

.text-container li {
  unicode-bidi: normal;
  direction: ltr;
  list-style-type: disc;
  display: list-item;
}