/***********************************************/
/* screen.css - Refactored for 2026 Standards  */
/***********************************************/

:root {
  --banner-color: #557799;
  --text-color: #000000;
  --bg-color: #ffffff;
  --link-color: #0000aa;
  --link-hover-color: #00aa00;
  --heading-dark: #334d55;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
}

/* Reset and Base Layout */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
}

body {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--text-color);
  background-color: var(--bg-color);
  padding: 0;
  margin: 0 auto;
  min-width: 350px;
  max-width: 1300px;
  min-height: 100vh; /* Modern standard replacing min-height px */
  direction: ltr;
}

/* Structural Layouts */
div {
  line-height: 1.5;
  text-align: left;
  padding-block-start: 5px; /* Logical properties */
}

div#main {
  padding: 5px 10px 0 10px;
}

p {
  padding: 0;
  margin-block-end: 1em; /* Ensures standardized vertical spacing */
}

/* Typography & Lists */
br {
  display: block;
  content: "";
  margin-block-start: 0.6em; /* Clean alternative to line-height on br */
}

ol, ul {
  padding-block: 2px;
  padding-inline: 40px 10px; /* Logical padding */
}

ul {
  list-style-image: url('../images/note.png');
}

ul.foot {
  list-style: none;
  line-height: 1;
  padding: 0;
  margin: 0;
}

/* Interactive Elements */
a {
  color: var(--link-color);
  text-decoration: none;
  cursor: pointer;
}

a:link {
  color: var(--link-color);
}

a:hover, a:focus-visible {
  color: var(--link-hover-color);
  text-decoration: underline;
  outline: 2px solid currentColor; /* modern a11y focus */
  outline-offset: 2px;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  margin: 0;
  padding: 0;
  text-shadow: 1px 1px 0px #cccccc;
}

h1 { font-size: 1.25rem; color: var(--text-color); }
h2 { font-size: 1.15rem; color: var(--text-color); }
h3 { font-size: 1.1rem; color: var(--heading-dark); }
h4 { font-size: 1.05rem; color: #333333; }
h5 { font-size: 1.02rem; color: var(--heading-dark); }

pre {
  font-size: 1.05rem;
  font-family: monospace, monospace; /* Fixes 2015-era browser scaling bugs */
}

label {
  font-family: var(--font-sans);
  font-weight: bold;
  color: #663300;
}

img {
  max-width: 100%;
  height: auto; /* Modern responsive images default */
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Layout Components */
#masthead {
  position: -webkit-sticky; /* Support for older Safari */
  position: sticky;
  top: 0;
  z-index: 25;
  background-color: var(--banner-color);
  text-align: center;
  font-size: 1.3rem;
  border: 1px solid var(--text-color);
  padding: 5px;
}

#masthead a {
  font-family: "Arial Black", Gadget, sans-serif;
  letter-spacing: 1px;
  font-size: 1.25rem;
  font-weight: bold;
  color: #fffffb;
}

#masthead a:hover, #masthead a:focus-visible {
  color: #33cc33;
}

/* Utility Utilities */
.left, .lt   { text-align: left; }
.right, .rt  { text-align: right; }
.center, .ct { text-align: center; }

p#logos {
  display: flex; /* Modern flexible clearing replacing float-clears */
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

p#logos img {
  padding: 0; /* Handled by gap on the wrapper */
}

#siteInfo {
  background-color: var(--banner-color);
  text-align: center;
  font-size: 0.86rem;
  color: #fffffb;
  border: 1px solid var(--text-color);
  padding: 10px;
}

#siteInfo img {
  vertical-align: middle;
}

#siteInfo a {
  color: #fffffb;
  padding: 3px;
  display: inline-block;
}

#siteInfo a:hover, #siteInfo a:focus-visible {
  color: #33cc33;
}

/* States & Elements */
.alert { color: #ff3333; }
.name  { width: 22%; }

.bolder {
  font-size: 1.1rem;
  font-weight: bold;
  font-style: italic;
  cursor: pointer;
  transition: background-color 0.2s ease; /* Smooth visual feedback */
}

.bolder:hover {
  text-decoration: underline;
  color: #0066ff;
  background-color: #ffff99;
}

.mouseOver {
  cursor: pointer;
  color: #0000cc;
}

.mouseOver:hover {
  color: #00cc00;
  text-decoration: underline;
}

.copystate {
  font-size: 0.65rem;
  line-height: 1;
}

/* Modern Visibility Management */
.notdisplay { display: none !important; }
.display    { display: inline !important; }
.hidden     { visibility: hidden; }
.unhidden   { visibility: visible; }

#spinner {
  position: fixed;
  top: 1%;
  left: 1%;
  z-index: 100;
  width: 24px;
  height: 24px;
  background-color: var(--bg-color);
  border: 1px solid #cccccc;
  display: none;
}

/* Responsive Styles via Modern Media Queries */
@media (max-width: 768px) {
  body {
    font-size: 1.2rem;
  }
  
  p#logos {
    gap: 3px;
  }
}