/* global.css */
/* ============================================ */
/* PREVENT FLASH OF UNSTYLED CONTENT (FOUC) */
/* ============================================ */
/* Apply high contrast immediately on page load */
html.high-contrast-loading {
  background: #000000 !important;
}

html.high-contrast-loading body {
  background: #000000 !important;
  color: white !important;
}

html.high-contrast-loading *,
html.high-contrast-loading *::before,
html.high-contrast-loading *::after {
  color: white !important;
  border-color: white !important;
}

html.high-contrast-loading .wrap {
  display: none !important;
}

html.high-contrast-loading .maincontainer {
  border-color: white !important;
  box-shadow: 0 0 20px white !important;
  background-color: black !important;
}

html.high-contrast-loading nav a {
  background: black !important;
  border-color: white !important;
  color: white !important;
}

html.high-contrast-loading header marquee,
html.high-contrast-loading footer marquee {
  border-color: white !important;
  background: black !important;
}

/* Override any animations/filters during loading */
html.high-contrast-loading * {
  animation: none !important;
  filter: none !important;
}

/* ============================================ */
/* REDUCE MOTION */
/* ============================================ */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation-play-state: paused !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* stop grid background animations */
body.reduce-motion .top-plane,
body.reduce-motion .bottom-plane {
  animation: none !important;
}

/* stop css marquees */
body.reduce-motion marquee {
  animation: none !important;
}

/* EXCEPTION: allow link shake to work */
body.reduce-motion a:not(nav a):hover {
  animation: linkShake 0.3s ease-in-out !important;
  animation-play-state: running !important;
}

/* ============================================ */
/* HIGH CONTRAST MODE */
/* ============================================ */

body.high-contrast a[href^='http']::after {
    content: url('IMAGES/externalwhite.png');
}
/* ============================================ */
/* HIGH CONTRAST MODE - HOMEPAGE */
/* ============================================ */
body.high-contrast {
  /* Remove red gradient background */
  background: #000000 !important;
}

/* Hide the grid wrapper completely */
body.high-contrast .wrap {
  display: none !important;
}

/* Change all red colors to white */
body.high-contrast,
body.high-contrast * {
  color: white !important;
}

/* Borders */
body.high-contrast .maincontainer,
body.high-contrast nav a,
body.high-contrast header marquee,
body.high-contrast footer marquee,
body.high-contrast .multibox,
body.high-contrast .linksbox,
body.high-contrast .sillybox,
body.high-contrast .nextbox,
body.high-contrast .patreonbox,
body.high-contrast .performancebox,
body.high-contrast .recentblogbox,
body.high-contrast .profilepic,
body.high-contrast .mini-post {
  border-color: white !important;
}

/* Remove desktop border images and replace with solid borders */
body.high-contrast .multibox,
body.high-contrast .sillybox,
body.high-contrast .recentblogbox,
body.high-contrast .todobox {
  border-image: none !important;
  border: 2px solid white !important;
}

/* Box shadows */
body.high-contrast .maincontainer {
  box-shadow: 0 0 20px white !important;
}

/* Links */
body.high-contrast a:link,
body.high-contrast a:visited {
  color: white !important;
  text-decoration: underline !important;
}

body.high-contrast .nextbox a:link,
body.high-contrast .performancebox a:link,
body.high-contrast .recentblogbox a:link {
  color: #00d4ff !important;
  text-decoration: underline !important;
}

body.high-contrast .nextbox a:visited,
body.high-contrast .performancebox a:visited,
body.high-contrast .recentblogbox a:visited {
  color: #0099cc !important;
  text-decoration: underline !important;
}

/* Nav links have underlines */
body.high-contrast nav a {
  text-decoration: underline !important;
}

/* Photo credit link */
body.high-contrast .photo-credit a {
  text-decoration: underline !important;
}

/* Remove glow animations in high contrast */
body.high-contrast nav a:hover,
body.high-contrast nav a.active,
body.high-contrast .profilepic-link:hover {
  animation: none !important;
  filter: none !important;
}

body.high-contrast .profilepic-link:hover .profilepic {
  box-shadow: 0 0 5px white !important;
}

/* Scrollbars */
body.high-contrast .todobox ul,
body.high-contrast .introbox {
  scrollbar-color: white black !important;
}

body.high-contrast .todobox ul::-webkit-scrollbar-track,
body.high-contrast .introbox::-webkit-scrollbar-track {
  border-color: white !important;
}

body.high-contrast .todobox ul::-webkit-scrollbar-thumb,
body.high-contrast .introbox::-webkit-scrollbar-thumb {
  border-color: white !important;
}

/* Music player */
body.high-contrast .player {
  border-color: white !important;
  background: linear-gradient(0deg, rgba(40,40,40,1) 0%, rgba(60,60,60,1) 30%, rgba(80,80,80,1) 100%) !important;
}

body.high-contrast .wheel {
  background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(to top, white, #888888) border-box !important;
}

body.high-contrast #musicplayer {
  background: linear-gradient(0deg, #2a2a2a, #1a1a1a) padding-box, linear-gradient(to top, white, #888888) border-box !important;
}

body.high-contrast .songtitle,
body.high-contrast .current-time,
body.high-contrast .total-duration,
body.high-contrast .wheelcontrols {
  color: white !important;
}

body.high-contrast .player button,
body.high-contrast .wheelcontrols button,
body.high-contrast .controls button {
  color: white !important;
}

body.high-contrast .seek_slider::-webkit-slider-thumb,
body.high-contrast .seek_slider::-moz-range-thumb {
  background: white !important;
  border-color: white !important;
}

/* Increase text size */
body.high-contrast {
  font-size: 115% !important;
}

body.high-contrast p {
  font-size: 0.95rem !important;
}

body.high-contrast h1 {
  font-size: 2.3em !important;
}

body.high-contrast h2 {
  font-size: 1.9em !important;
}

body.high-contrast h3 {
  font-size: 1.6em !important;
}

body.high-contrast h4 {
  font-size: 1.3em !important;
}

/* Remove background image from recentblogbox */
body.high-contrast .recentblogbox {
  background-image: none !important;
  background-color: black !important;
}

/* Ensure introbox background is readable */
body.high-contrast .introbox {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Button contrast */
body.high-contrast nav a {
  background: black !important;
  border-color: white !important;
}

body.high-contrast nav a:hover {
  background: #1a1a1a !important;
}

/* ============================================ */
/* HIGH CONTRAST MODE - BLOG PAGE */
/* ============================================ */

/* Blog post cards */
body.high-contrast .blog-post-card {
  border-color: white !important;
}

body.high-contrast .blog-content {
  border-color: white !important;
  background: black !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

body.high-contrast .profile-pic {
  border-color: white !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Blog scrollbars */
body.high-contrast .multibox,
body.high-contrast .blog-content-text {
  scrollbar-color: white black !important;
}

body.high-contrast .multibox::-webkit-scrollbar-track,
body.high-contrast .blog-content-text::-webkit-scrollbar-track {
  border-color: white !important;
}

body.high-contrast .multibox::-webkit-scrollbar-thumb,
body.high-contrast .blog-content-text::-webkit-scrollbar-thumb {
  background: white !important;
  border-color: black !important;
}

/* Archive and links boxes */
body.high-contrast .archivebox,
body.high-contrast .linksbox {
  border-color: white !important;
}

/* Stamp marquee */
body.high-contrast .stampmarquee {
  border-color: white !important;
}

/* Blog date */
body.high-contrast .blog-date {
  color: white !important;
}

/* Remove background GIF from multibox */
body.high-contrast .multibox {
  background-image: none !important;
  background-color: black !important;
}

/* CRT frame visibility (optional - you may want to keep or hide) */
body.high-contrast .crt-overlay {
  opacity: 0.8;
}

/* Highlight animation for linked posts */
@keyframes highlightPostHighContrast {
    0%, 100% {
        box-shadow: none;
    }
    50% {
        box-shadow: 0 0 20px white, 0 0 40px white;
    }
}

body.high-contrast .blog-post-card {
  animation-name: highlightPostHighContrast !important;
}

/* ============================================ */
/* HIGH CONTRAST MODE - SCHEDULE PAGE */
/* ============================================ */

/* Studio box */
body.high-contrast .studiobox {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Next box */
body.high-contrast .nextbox {
  border-color: white !important;
}

/* Calendar container */
body.high-contrast .calendar-container {
  background-image: none !important;
  background-color: black !important;
}

body.high-contrast .calendar-header {
  border-color: white !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

body.high-contrast .calendar-header h3 {
  color: white !important;
}

body.high-contrast .calendar-nav button {
  background: black !important;
  border-color: white !important;
  color: white !important;
}

body.high-contrast .calendar-nav button:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

body.high-contrast .calendar-day-header {
  border-color: white !important;
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

body.high-contrast .calendar-cell {
  border-color: white !important;
  background: black !important;
}

body.high-contrast .calendar-cell.has-event {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: white !important;
}

body.high-contrast .calendar-cell:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 0 15px white !important;
}

body.high-contrast .cell-date {
  color: white !important;
}

body.high-contrast .cell-indicator {
  color: white !important;
}

/* Hover window */
body.high-contrast .hover-window {
  background: black !important;
  border-color: white !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5) !important;
}

body.high-contrast .hover-window h4 {
  color: white !important;
  border-bottom-color: white !important;
}

body.high-contrast .hover-window p {
  color: white !important;
}

body.high-contrast .hover-window hr {
  border-top-color: white !important;
}

body.high-contrast .event-time,
body.high-contrast .event-location {
  color: #cccccc !important;
}

body.high-contrast .event-link a {
  color: #00d4ff !important;
}

/* Class boxes */
body.high-contrast .class-box {
  border-color: white !important;
  background: black !important;
}

body.high-contrast .class-box:hover {
  border-color: white !important;
  animation: borderPulseHighContrast 2s ease-in-out infinite alternate !important;
}

@keyframes borderPulseHighContrast {
    0%, 100% {
        border-color: white;
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
    }
    50% {
        border-color: white;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 25px rgba(255, 255, 255, 0.6);
    }
}

body.high-contrast .class-name,
body.high-contrast .class-level {
  color: white !important;
}

body.high-contrast .class-location {
  color: white !important;
}

body.high-contrast .class-online {
  color: #00d4ff !important;
}

body.high-contrast .class-prerequisites {
  color: white !important;
  border-bottom-color: white !important;
}

body.high-contrast .class-tagline {
  color: white !important;
}

body.high-contrast .class-description {
  background: black !important;
  border-color: white !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5) !important;
}

body.high-contrast .class-description p {
  color: white !important;
}

/* Access box dropdowns */
body.high-contrast .access-dropdown h5 {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: white !important;
  color: white !important;
}

body.high-contrast .access-dropdown h5:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

body.high-contrast .access-dropdown h5 .arrow {
  color: white !important;
}

body.high-contrast .access-content {
  border-color: white !important;
  background: black !important;
}

body.high-contrast .access-content p,
body.high-contrast .access-content li {
  color: white !important;
}

body.high-contrast .access-content li::before {
  color: white !important;
}

body.high-contrast .access-content li strong {
  color: #00d4ff !important;
}

/* ============================================ */
/* HIGH CONTRAST MODE - ABOUT PAGE */
/* ============================================ */

/* About and site boxes */
body.high-contrast .aboutmebox,
body.high-contrast .aboutsitebox {
  background: rgba(255, 255, 255, 0.1) !important;
}

body.high-contrast .aboutmebox h3,
body.high-contrast .aboutmebox h5,
body.high-contrast .aboutmebox p,
body.high-contrast .aboutsitebox h3,
body.high-contrast .aboutsitebox h5,
body.high-contrast .aboutsitebox p {
  color: white !important;
}

/* Scrollable content scrollbars */
body.high-contrast .scrollable-content {
  scrollbar-color: white black !important;
}

body.high-contrast .scrollable-content::-webkit-scrollbar-track {
  border-color: white !important;
}

body.high-contrast .scrollable-content::-webkit-scrollbar-thumb {
  border-color: white !important;
}

/* Interest and favorites boxes */
body.high-contrast .interestbox,
body.high-contrast .favsbox {
  border-color: white !important;
  scrollbar-color: white black !important;
}

body.high-contrast .interestbox::-webkit-scrollbar-track,
body.high-contrast .favsbox::-webkit-scrollbar-track {
  border-color: white !important;
}

body.high-contrast .interestbox::-webkit-scrollbar-thumb,
body.high-contrast .favsbox::-webkit-scrollbar-thumb {
  border-color: white !important;
}

body.high-contrast .interestbox h3,
body.high-contrast .interestbox p,
body.high-contrast .interestbox ul,
body.high-contrast .interestbox li,
body.high-contrast .favsbox h3,
body.high-contrast .favsbox p,
body.high-contrast .favsbox dl,
body.high-contrast .favsbox dt,
body.high-contrast .favsbox dd {
  color: white !important;
}

/* Links in about boxes */
body.high-contrast .aboutmebox a,
body.high-contrast .aboutsitebox a,
body.high-contrast .interestbox a,
body.high-contrast .favsbox a {
  color: #00d4ff !important;
}

body.high-contrast .aboutmebox a:visited,
body.high-contrast .aboutsitebox a:visited,
body.high-contrast .interestbox a:visited,
body.high-contrast .favsbox a:visited {
  color: #0099cc !important;
}

/* Footer */
body.high-contrast footer p {
  color: white !important;
}

/* Dividers */
body.high-contrast .divtop img,
body.high-contrast .divbottom img {
  opacity: 0.3; /* Make the blood dividers less intense in high contrast */
}

/* Stamp marquee border */
body.high-contrast .stampmarquee {
  /* No border currently */
}

/* ============================================ */
/* ACCESSIBILITY TOGGLE BUTTONS */
/* ============================================ */

@font-face {
  font-family: 'Fixedsys Excelsior';
  src: url('FONTS/fixedsysexcelsior.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.accessibility-panel {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9999;
  background: #000000;
  border: 2px solid #ff0000;
  padding: 10px;
  font-family: 'Fixedsys Excelsior', 'Courier New', monospace;
  font-size: 13px; /* Increased from 12px */
  line-height: 1.4;
  color: #ff0000;
  width: 220px; /* Reduced from 225px */
  max-width: 220px;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
}

.accessibility-panel-header {
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
  border-bottom: 1px solid #ff0000;
  padding-bottom: 5px;
  font-size: 14px; /* Increased from 12px */
}

.accessibility-option {
  cursor: pointer;
  user-select: none;
  padding: 3px 5px;
  margin: 2px 0;
  display: flex;
  align-items: center;
  transition: all 0.1s ease;
}

.accessibility-option:hover {
  color: #000000;
  background: #ff0000;
}

.accessibility-checkbox {
  display: inline-block;
  width: 3ch;
  margin-right: 5px;
  flex-shrink: 0;
}

.accessibility-label {
  flex: 1;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.accessibility-collapse-btn {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #000000;
  border: 2px solid #ff0000;
  color: #ff0000;
  cursor: pointer;
  padding: 2px 8px;
  font-family: 'Fixedsys Excelsior', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1;
  user-select: none;
  transition: all 0.1s ease;
}

.accessibility-collapse-btn:hover {
  background: #ff0000;
  color: #000000;
}

/* Collapsed state - just hide options, keep everything else the same */
.accessibility-panel.collapsed .accessibility-option {
  display: none;
}

body.high-contrast .accessibility-panel {
  border-color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

body.high-contrast .accessibility-panel-header {
  border-bottom-color: #ffffff;
}

body.high-contrast .accessibility-option:hover {
  color: #000000 !important;
  background: #ffffff !important;
}

body.high-contrast .accessibility-option:hover .accessibility-checkbox,
body.high-contrast .accessibility-option:hover .accessibility-label {
  color: #000000 !important;
}

body.high-contrast .accessibility-collapse-btn {
  border-color: #ffffff;
  color: #ffffff;
}

body.high-contrast .accessibility-collapse-btn:hover {
  background: #ffffff;
  color: #000000;
}

body.accessible-text {
  font-family: 'Courier New', monospace !important;
}

body.accessible-text * {
  font-family: 'Courier New', monospace !important;
}

/* ============================================ */
/* NO IMAGES MODE - ALT TEXT DISPLAY */
/* ============================================ */

body.no-images img {
  display: none !important;
}

/* Style for the alt text replacement divs */
.alt-text-replacement {
  display: block;
  padding: 10px;
  border: 1px solid #ff0000;
  color: #ff0000;
  background: #000000;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  margin: 5px 0;
  word-wrap: break-word;
}

/* High contrast mode styling for alt text */
body.high-contrast .alt-text-replacement {
  border-color: #ffffff;
  color: #ffffff;
}

/* Hide background images */
body.no-images .recentblogbox,
body.no-images *[style*="background-image"] {
  background-image: none !important;
}

/* Keep blinkiesbox visible but images inside will be replaced with alt text */
body.no-images .blinkiesbox {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

/* Make alt text in buttonbox span both columns so it's not squished */
body.no-images .buttonbox .alt-text-replacement {
  grid-column: 1 / -1; /* Span all columns */
  max-width: 100%;
}

/* ============================================ */
/* HIGH CONTRAST MODE - MOBILE HOMEPAGE */
/* ============================================ */

@media (max-width: 768px) {
    /* Mobile background */
    body.high-contrast {
        background: #000000 !important;
    }
    
    /* Mobile container */
    body.high-contrast .maincontainer {
        border-color: white !important;
        box-shadow: none !important;
    }
    
    /* Mobile header */
    body.high-contrast header {
        border-color: white !important;
    }
    
    /* Mobile nav toggle button */
    body.high-contrast .mobile-nav-toggle {
        background: black !important;
        border-color: white !important;
    }
    
    body.high-contrast .mobile-nav-toggle span {
        background: white !important;
    }
    
    /* Mobile nav dropdown */
    body.high-contrast nav {
        background: black !important;
        border-color: white !important;
    }
    
    body.high-contrast nav a {
        border-bottom-color: white !important;
        background: black !important;
        color: white !important;
    }
    
    body.high-contrast nav a:hover,
    body.high-contrast nav a.active {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Mobile profile pic */
    body.high-contrast .profilepic-mobile {
        border-color: white !important;
    }
    
    body.high-contrast .profilepic-link-mobile:hover .profilepic-mobile {
        box-shadow: 0 0 5px white !important;
    }
    
    /* Mobile photo credit */
    body.high-contrast .photo-credit-mobile a {
        color: white !important;
        text-decoration: underline !important;
    }
    
    /* Mobile introbox */
    body.high-contrast .introbox-mobile {
        background: rgba(255, 255, 255, 0.1) !important;
        scrollbar-color: white black !important;
    }
    
    body.high-contrast .introbox-mobile::-webkit-scrollbar-track {
        border-color: white !important;
    }
    
    body.high-contrast .introbox-mobile::-webkit-scrollbar-thumb {
        border-color: white !important;
    }
    
    /* Mobile boxes */
    body.high-contrast .nextbox-mobile,
    body.high-contrast .performancebox-mobile,
    body.high-contrast .recentblogbox-mobile,
    body.high-contrast .patreonbox-mobile,
    body.high-contrast .todobox-mobile,
    body.high-contrast .linksbox-mobile {
        border-color: white !important;
        background: black !important;
    }
    
    /* Mobile recentblogbox - remove background image */
    body.high-contrast .recentblogbox-mobile {
        background-image: none !important;
    }
    
    /* Mobile blog posts */
    body.high-contrast .recentblogbox-mobile .mini-post {
        border-color: white !important;
        background: black !important;
    }
    
    body.high-contrast .recentblogbox-mobile .mini-post:hover {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) !important;
    }
    
    body.high-contrast .recentblogbox-mobile a:link {
        color: #00d4ff !important;
    }
    
    body.high-contrast .recentblogbox-mobile a:visited {
        color: #0099cc !important;
    }
    
    /* Mobile nextbox and performancebox links */
    body.high-contrast .nextbox-mobile a:link,
    body.high-contrast .performancebox-mobile a:link {
        color: #00d4ff !important;
        text-decoration: underline !important;
    }
    
    body.high-contrast .nextbox-mobile a:visited,
    body.high-contrast .performancebox-mobile a:visited {
        color: #0099cc !important;
    }
    
    /* Mobile todobox scrollbar */
    body.high-contrast .todobox-mobile {
        scrollbar-color: white black !important;
    }
    
    body.high-contrast .todobox-mobile::-webkit-scrollbar-track {
        border-color: white !important;
    }
    
    body.high-contrast .todobox-mobile::-webkit-scrollbar-thumb {
        border-color: white !important;
    }
    
    /* Mobile neighborsbox */
    body.high-contrast .neighborsbox-mobile h5 {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Mobile blinkiesbox */
    body.high-contrast .blinkiesbox-mobile {
        border-top-color: white !important;
    }
    
    /* Mobile footer */
    body.high-contrast .mobile-footer-text {
        background: black !important;
        color: white !important;
    }
    
    /* Adjust mobile text size - increase everything except header/nav */
    @media (max-width: 768px) {
        body.high-contrast {
            font-size: 110% !important; /* Slightly increase base font size on mobile */
        }
        
        /* Keep header and nav at original size */
        body.high-contrast header h1 {
            font-size: 0.9em !important;
        }
        
        body.high-contrast nav a {
            font-size: 0.9em !important;
        }
        
        /* Increase content headings */
        body.high-contrast h1 {
            font-size: 1.8em !important;
        }
        
        body.high-contrast h2 {
            font-size: 1.6em !important;
        }
        
        body.high-contrast h3 {
            font-size: 1.4em !important;
        }
        
        body.high-contrast h4 {
            font-size: 1.2em !important;
        }
        
        /* Increase body text */
        body.high-contrast p {
            font-size: 1.05rem !important;
        }
        
        body.high-contrast .introbox-mobile p {
            font-size: 1rem !important;
        }
        
        body.high-contrast .nextbox-mobile p,
        body.high-contrast .performancebox-mobile p,
        body.high-contrast .patreonbox-mobile p,
        body.high-contrast .recentblogbox-mobile p {
            font-size: 1rem !important;
        }
        
        /* Increase todo and links text */
        body.high-contrast .todobox-mobile li,
        body.high-contrast .linksbox-mobile p {
            font-size: 0.85rem !important;
        }
    }