/* 1. UNIVERSAL LINK STATES */ 
a:link { color: var(--link-color); text-decoration: none; } 
a:visited { color: var(--link-color); text-decoration: none; } 
a:hover { color: var(--link-color); text-decoration: underline; } 
a:active { color: var(--link-color); text-decoration: none; } 

/* 2. UNIVERSAL LIGHT MODE CONFIGURATION */ 
:root, html { 
  --body-bg: #F5F6F5; 
  --body-text: #1A3C34; 
  --card-bg: #f9f9f9; 
  --link-color: #FF5809; 
  --h1-color: #1A3C34; 
  --h1-h1a-color: #0F2B5B; 
  --h1-h1b-color: #1A3C34; 
  --h1-h1c-color: #1A3C34; 
  --h1-h1d-color: #0F2B5B; 
  --h2-color: #91D7FC !important; 
  --h2-h2a-color: #1A3C34 !important; 
  --h2-h2b-color: #1A3C34 !important; 
  --h2-h2c-color: #1A3C34 !important; 
  --h3-color: #1A3C34 !important; 
  --h3-h3a-color: #1A3C34 !important; 
  --h3-h3b-color: #1A3C34 !important;
  --h3-h3c-color: #1A3C34 !important;
  --orange-accent: #FF874D; 
  --h1-h1a-size: 3rem !important; 
  --h1-h1b-size: 2.15rem !important; 
  --h1-h1c-size: 2.15rem !important; 
  --h1-h1d-size: 1.5rem !important; 
  --h2-h2a-size: 3rem !important; 
  --h2-h2b-size: 2.15rem !important; 
  --h2-h2c-size: 2rem !important; 
  --h3-h3a-size: 3rem !important; 
  --h3-h3b-size: 2rem !important; 
  --h3-h3c-size: 1.5rem !important; 
} 

/* 3. UNIVERSAL AUTOMATIC DARK MODE VALUES */ 
:root[data-theme="dark"], html[data-theme="dark"], body[data-theme="dark"] { 
  --body-bg: #121212 !important; 
  --body-text: #F0F0F0 !important; 
  --card-bg: #1e1e1e !important; 
  --link-color: #FF874D !important; 
  --h1-color: #FFFF88 !important; 
  --h1-h1a-color: #FFFF88 !important; 
  --h1-h1b-color: #91D7FC !important; 
  --h1-h1c-color: #FFFF88 !important; 
  --h1-h1d-color: #11CC11 !important; 
  --h2-color: #91D7FC !important; 
  --h2-h2a-color: #91D7FC !important; 
  --h2-h2b-color: #91D7FC !important; 
  --h2-h2c-color: #91D7FC !important; 
  --h3-color: #11CC11 !important; 
  --h3-h3a-color: #11CC11 !important; 
  --h3-h3b-color: #11CC11 !important; 
  --h3-h3c-color: #11CC11 !important;
  --orange-accent: #ff9d6e !important; 
  --h1-h1a-size: 3rem !important; 
  --h1-h1b-size: 2.15rem !important; 
  --h1-h1c-size: 2.15rem !important; 
  --h1-h1d-size: 1.5rem !important; 
  --h2-h2a-size: 3rem !important; 
  --h2-h2b-size: 2.15rem !important; 
  --h2-h2c-size: 2rem !important; 
  --h3-h3a-size: 3rem !important; 
  --h3-h3b-size: 2rem !important; 
  --h3-h3c-size: 1.5rem !important; 
} 

/* 4. GLOBAL TEXT OVERRIDES */ 
body { 
  background-color: var(--body-bg) !important; 
  color: var(--body-text) !important; 
  font-family: Arial, Helvetica, sans-serif; 
  transition: background-color 0.3s ease, color 0.3s ease; 
} 
p, td, th, span, div, font, li, b { color: var(--body-text) !important; } 

/* 5. INDIVIDUAL HEADING OVERRIDES */
h1 { color: var(--h1-color) !important; transition: color 0.3s ease; }
h2 { color: var(--h2-color) !important; transition: color 0.3s ease; }
h3 { color: var(--h3-color) !important; transition: color 0.3s ease; }

/* Fixed child tag inheritance: Allows specific header classes to bypass parent color block */
h1 :not([class*="h1"])d, h1 :not([class*="h1"])c, h1 :not([class*="h1"])b, h1 a, h1 font,
h2 :not([class*="h2"])c, h2 :not([class*="h2"])b, h2 a, h2 font,
h3 :not([class*="h3"])c, h3 :not([class*="h3"])b, h3 a, h3 font, h3 span { 
  color: inherit !important; 
}

/* 5.A LINKING YOUR HTML TO YOUR CONFIGURATION VARIABLES */
h1.h1a { color: var(--h1-h1a-color) !important; font-size: var(--h1-h1a-size) !important; font-weight: 700 !important; }
h1.h1b { color: var(--h1-h1b-color) !important; font-size: var(--h1-h1b-size) !important; font-weight: 700 !important; }
h1.h1c { color: var(--h1-h1c-color) !important; font-size: var(--h1-h1c-size) !important; font-weight: 700 !important; }
h1.h1d { color: var(--h1-h1d-color) !important; font-size: var(--h1-h1d-size) !important; font-weight: 700 !important; }

h2.h2a { color: var(--h2-h2a-color) !important; font-size: var(--h2-h2a-size) !important; font-weight: 600 !important; }
h2.h2b { color: var(--h2-h2b-color) !important; font-size: var(--h2-h2b-size) !important; font-weight: 600 !important; }
h2.h2c { color: var(--h2-h2c-color) !important; font-size: var(--h2-h2c-size) !important; font-weight: 600 !important; }

h3.h3a { color: var(--h3-h3a-color) !important; font-size: var(--h3-h3a-size) !important; font-weight: 500 !important; }
h3.h3b { color: var(--h3-h3b-color) !important; font-size: var(--h3-h3b-size) !important; font-weight: 500 !important; margin-bottom: 0.2rem !important; }
h3.h3c { color: var(--h3-h3c-color) !important; font-size: var(--h3-h3c-size) !important; font-weight: 500 !important; margin-top: 0 !important; }

/* 6. LINK MODIFICATIONS (Quick Links & Tables) */
.quick-link, .quick-link b, .quick-link font { 
  color: var(--orange-accent) !important; 
  text-decoration: none; 
} 
.quick-link:hover { 
  text-decoration: underline; 
} 

.link-divider { 
  font-size: 24px; 
  user-select: none; 
  color: transparent !important; 
} 

td a, td a b { 
  color: var(--link-color) !important; 
  text-decoration: none; 
} 
td a:hover { 
  color: #ff5809 !important; 
} 

/* 7. BULLETPROOF NAVBAR & WRAPPING ENGINE */
.navbar { 
  display: flex !important; 
  flex-wrap: wrap !important; 
  justify-content: center !important; 
  align-items: center !important; 
  height: auto !important; 
  padding: 1px 10px !important; /* Changed from 10px to 2px top/bottom */
} 

.navbar > div { 
  display: flex !important; 
  flex-wrap: wrap !important; 
  justify-content: center !important; 
  align-items: center !important; 
  gap: 15px !important; 
} 

/* 8. DROPDOWN COMPONENT LAYOUTS */
.dropbtn { 
  background-color: #0F2B5B; 
  color: white; 
  padding: 16px; 
  font-size: 16px; 
  border: none; 
  cursor: pointer; 
} 
.dropbtn:hover, .dropbtn:focus { 
  background-color: #2980B9; 
} 
.dropdown { 
  position: relative; 
  display: inline-block; 
} 
.dropdown-content { 
  display: none; 
  position: absolute; 
  background-color: #000000; 
  min-width: 160px; 
  overflow: auto; 
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
  z-index: 1; 
} 
.dropdown-content a { 
  color: white; 
  padding: 12px 16px; 
  text-decoration: none; 
  display: block; 
} 
.dropdown a:hover { background-color: #808080; } 
.show { display: block; } 

/* 9. THE SLIDER THEME TOGGLE MECHANICS */
.theme-switch-wrapper { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  border: 2px solid #ffffff; 
  border-radius: 30px; 
  padding: 5px 15px; 
  background-color: rgba(255, 255, 255, 0.05); 
  white-space: nowrap; 
  transition: all 0.3s ease; 
} 

.theme-text { 
  font-size: 14px; 
  font-family: sans-serif; 
  color: #ffffff !important; 
} 

.theme-switch { 
  display: inline-block; 
  height: 18px; 
  position: relative; 
  width: 50px; 
} 

.theme-switch input { 
  display: none !important; 
} 

.slider { 
  background-color: #ccc; 
  bottom: 0; 
  cursor: pointer; 
  left: 0; 
  position: absolute; 
  right: 0; 
  top: 0; 
  transition: .4s; 
} 

.slider:before { 
  background-color: #F5F6F5; 
  bottom: 1px; 
  content: ""; 
  height: 15px; 
  left: 4px; 
  position: absolute; 
  transition: .4s; 
  width: 15px; 
} 

/* Firefox targeting fix for the circular switch knob */
.theme-switch input:checked + .slider { 
  background-color: #000000; 
} 
.theme-switch input:checked + .slider:before { 
  transform: translateX(26px); 
} 

.slider.round { border-radius: 34px; } 
.slider.round:before { border-radius: 50%; } 

/* 10. SCREEN SIZE & ORIENTATION RESPONSIVENESS */

/* This handles your navbar adjustments for smaller screens */
@media screen and (max-width: 768px) {
  .navbar > div { gap: 8px !important; padding: 5px 0 !important; }
  .dropbtn, .navbar a { font-size: 14px !important; padding: 6px 10px !important; }
  .theme-switch-wrapper { margin-top: 4px !important; transform: scale(0.9); }
}

/* FORCES THE STACKED VERTICAL VIEW PRIMARY ON ALL PORTRAIT MOBILE DEVICES */
@media screen and (max-width: 980px) and (orientation: portrait) { 
  
  .responsive-table {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .responsive-table tbody, 
  .responsive-table tr {
    display: block !important;
    width: 100% !important;
  }

  .responsive-table td {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    border-bottom: 2px solid #ccc !important; /* Clean line between items */
    padding: 20px 10px !important;
    box-sizing: border-box !important;
    
    /* Aggressive wrapping to stop long text/URLs from pushing sideways */
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important; 
    white-space: normal !important;
  }
}

/* FORCE THE ENTIRE MOBILE VIEWPORT TO LOCK SIDES */
html, body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important; /* Physically blocks the page from sliding left/right */
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* APPLY COMPLIANCE TO ALL TEXT AND LINKS INSIDE THE TABLE */
.responsive-table a, 
.responsive-table font, 
.responsive-table p,
.responsive-table center {
  display: block !important;
  max-width: 100% !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

/* Force all elements inside headings to inherit the correct heading color */
h1 *, h2 *, h3 * {
    color: inherit !important;
}

/* Ensure the specific heading classes override any parent container variables */
h3.h3b, h3.h3c {
    color: var(--h3-color) !important;
}

:root[data-theme="dark"] h3.h3c, 
html[data-theme="dark"] h3.h3c, 
body[data-theme="dark"] h3.h3c {
    color: var(--h3-h3c-color) !important;
}