/* ============================================
   DARK THEME WITH SMALLER TEXT
   Overall site styling with black background
   ============================================ */

:root {
  --transition-speed: 3s; /* GLOBAL TRANSITION SPEED - change this to affect all effects */
}

body {
  background-color: #000000;
  color: #ffffff;
  font-size: 0.9em; /* MAKE EVERYTHING SMALLER - adjust this number to make text bigger/smaller */
}

/* ============================================
   HEADING HIERARCHY
   Clear size and spacing differences
   ============================================ */

/* H1 - TITLE (Large, no extra spacing) */
h1, .terminal h1 {
  font-size: 3em !important; /* LARGE */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0em !important;
  line-height: 1 !important;
  color: #ffffff !important;
  display: block !important;
}

/* Hide the theme's underline (you have a custom border already) */
h1::after, 
.terminal h1::after,
article h1::after {
  display: none !important;
}

/* H1 titles on article/project pages - automatically styled larger */
article h1 {
  font-size: 3em !important; /* EXTRA LARGE for page titles */
  font-weight: 700 !important; /* BOLD - try: 300 (light), 400 (normal), 700 (bold), 900 (extra bold) */
  letter-spacing: 0.02em !important; /* LETTER SPACING - try: 0 (tight), 0.05em (loose), 0.1em (very loose) */
  margin-top: 0 !important;
  margin-bottom: 0.5em !important;
  padding-bottom: 0.3em !important;
  line-height: 1 !important;
  text-transform: none !important; /* Try: 'uppercase' for ALL CAPS */
  font-family: inherit !important;
  color: #ffffff !important;
  display: block !important;
}

/* Bold text INSIDE h1 should inherit h1 size */
h1 strong, h1 b, 
article h1 strong, article h1 b,
.terminal h1 strong, .terminal h1 b {
  font-size: inherit !important;
  display: inline !important;
}

/* ============================================
   PAGE TITLE - Special styling for main page titles
   Add class="page-title" to any h1 you want styled differently
   ============================================ */

.page-title, 
article .page-title, 
.terminal .page-title {
  font-size: 3em !important; /* EXTRA LARGE - adjust this! */
  font-weight: 700 !important; /* BOLD - try: 300 (light), 400 (normal), 700 (bold), 900 (extra bold) */
  letter-spacing: 0.02em !important; /* LETTER SPACING - try: 0 (tight), 0.05em (loose), 0.1em (very loose) */
  margin-top: 0 !important;
  margin-bottom: 0.5em !important;
  padding-bottom: 0.3em !important;
  line-height: 1 !important;
  text-transform: none !important; /* Try: 'uppercase' for ALL CAPS */
  font-family: inherit !important; /* Uses your default font - or specify a custom one */
}

/* Bold text inside page titles */
.page-title strong, .page-title b,
article .page-title strong, article .page-title b,
.terminal .page-title strong, .terminal .page-title b {
  font-size: inherit !important;
  display: inline !important;
}

/* H2 - HEADING 1 (Pretty big, with spacing) */
h2, article h2, .terminal h2 {
  font-size: 1.8em !important; /* PRETTY BIG */
  margin-top: 2em !important; /* Space above */
  margin-bottom: 1em !important; /* Space below */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  display: block !important;
}

/* Bold text INSIDE h2 should inherit h2 size */
h2 strong, h2 b,
article h2 strong, article h2 b,
.terminal h2 strong, .terminal h2 b {
  font-size: inherit !important;
  display: inline !important;
}

/* H3 - HEADING 2 (Big enough, with spacing) */
h3, article h3, .terminal h3 {
  font-size: 1.4em !important; /* BIG ENOUGH */
  margin-top: 1.5em !important; /* Space above */
  margin-bottom: 0.75em !important; /* Space below */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  display: block !important;
}

/* Bold text INSIDE h3 should inherit h3 size */
h3 strong, h3 b,
article h3 strong, article h3 b,
.terminal h3 strong, .terminal h3 b {
  font-size: inherit !important;
  display: inline !important;
}

/* H4 - HEADING 3 (Modest, no extra spacing) */
h4, article h4, .terminal h4 {
  font-size: 1.1em !important; /* MODEST - close to base text */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.4 !important;
  color: #ffffff !important;
  display: block !important;
}

/* Bold text INSIDE h4 should inherit h4 size */
h4 strong, h4 b,
article h4 strong, article h4 b,
.terminal h4 strong, .terminal h4 b {
  font-size: inherit !important;
  display: inline !important;
}

/* H5 and H6 - if you need them */
h5, article h5, .terminal h5 {
  font-size: 1em !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  color: #ffffff !important;
  display: block !important;
}

h5 strong, h5 b,
article h5 strong, article h5 b,
.terminal h5 strong, .terminal h5 b {
  font-size: inherit !important;
  display: inline !important;
}

h6, article h6, .terminal h6 {
  font-size: 0.9em !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  color: #ffffff !important;
  display: block !important;
}

h6 strong, h6 b,
article h6 strong, article h6 b,
.terminal h6 strong, .terminal h6 b {
  font-size: inherit !important;
  display: inline !important;
}

/* ============================================
   FORCE ALL TEXT TO BE WHITE
   Makes sure everything is readable on black
   ============================================ */

body, p, div, span, li, td, th {
  color: #ffffff !important;
}

em, i {
  color: #ffffff !important;
}

.terminal em, .terminal i {
  color: #ffffff !important;
}

/* ============================================
   BOLD TEXT - BASE STYLES AND MAGNETIC GLOW EFFECT
   White by default, orange with glow when mouse is near
   ============================================ */

/* Base bold text styling - before JavaScript splits into spans */
strong, b {
  color: #ffffff !important;
  display: inline-block;
  position: relative;
}

.terminal strong, .terminal b {
  color: #ffffff !important;
  display: inline-block;
  position: relative;
}



/* Character spans - created by JavaScript for magnetic effect */
strong span, b span, .terminal strong span, .terminal b span {
  display: inline-block !important;
  position: relative !important;
  color: #ffffff !important;
  text-shadow: 0 0 0px rgba(255, 102, 0, 0) !important;
  
  /* VERY SLOW transitions to make it obvious */
  transition: color 3s ease-in-out !important,
              text-shadow 3s ease-in-out !important,
              transform 3s ease-out !important;
}

/* When mouse is near - glow activates (ORANGE) */
strong.mouse-near span, b.mouse-near span, .terminal strong.mouse-near span, .terminal b.mouse-near span {
  color: #ff6600 !important;
  text-shadow: 0 0 20px rgba(255, 102, 0, 0.8) !important,
               0 0 40px rgba(255, 102, 0, 0.5) !important,
               0 0 60px rgba(255, 102, 0, 0.3) !important;
}





/* ============================================
   OVERRIDE THEME'S GRAY COLOR
   Force terminal elements to be pure white
   ============================================ */

.terminal blockquote, 
.terminal .logo,
.terminal table td {
  color: #ffffff !important;
}





/* ============================================
   NEON ORANGE HYPERLINKS
   All clickable links are bright orange
   ============================================ */

a {
  color: #ff6600 !important; /* CHANGE THIS COLOR - try #ff0000 for red, #00ff00 for green */
  text-decoration: none;
  padding: 0 0.2em; /* Add padding by default (invisible) */
  background-color: transparent; /* Transparent background by default */
  transition: color 0.2s ease, background-color 0.2s ease; /* Smooth transition */
}

a:hover {
  color: #000000 !important; /* BLACK TEXT ON HOVER */
  background-color: #ff6600 !important; /* ORANGE BACKGROUND */
  text-decoration: none;
  /* Padding stays the same - no jitter! */
}

/* Remove link hover background from project grid */
.project-item a:hover {
  background-color: transparent !important;
  padding: 0; /* Remove padding too since there's no background */
}

/* ============================================
   PROJECT METADATA TABLE STYLING
   Makes the Role/Client/Team table compact
   ============================================ */

article table,
table {
  font-size: 0.85em; /* TABLE TEXT SIZE - smaller than body text */
  line-height: 1.3; /* SPACING BETWEEN LINES - lower = tighter */
  margin-bottom: 2em; /* SPACE BELOW THE TABLE */
  border-color: #333 !important; /* DARK GRAY TABLE BORDERS */
}

article table td,
table td,
article table th,
table th {
  padding: 0.3em 0.5em !important; /* SPACE INSIDE TABLE CELLS */
  border-color: #333 !important;
  color: #ffffff !important; /* FORCE ALL TABLE CELLS TO BE WHITE */
}

/* TABLE LABELS (Role, Client, Team, etc.) - LEFT COLUMN */
article table td:first-child,
table td:first-child {
  font-weight: 600 !important; /* MAKE LABELS BOLD */
  color: #ffffff !important; /* BRIGHT WHITE FOR LABELS */
  white-space: nowrap; /* PREVENTS LABELS FROM WRAPPING TO MULTIPLE LINES */
}

/* TABLE VALUES (Your actual content) - RIGHT COLUMN */
article table td:nth-child(2),
table td:nth-child(2) {
  color: #ffffff !important; /* BRIGHT WHITE FOR VALUES TOO */
}

/* ============================================
   IMAGE CAPTIONS
   The italic text below images
   ============================================ */

article img + em,
img + em {
  display: block;
  text-align: center;
  font-size: 0.85em; /* CAPTION TEXT SIZE */
  color: #ffffff !important; /* BRIGHT WHITE FOR CAPTIONS */
  margin-top: 0.5em; /* SPACE ABOVE CAPTION */
  margin-bottom: 2em; /* SPACE BELOW CAPTION */
}

/* ============================================
   HEADER/NAVIGATION BAR
   The top menu area
   ============================================ */

.terminal-nav {
  background-color: #000000; /* BLACK BACKGROUND FOR NAV */
}

.terminal-logo, .terminal-prompt {
  color: #ffffff !important; /* WHITE TEXT IN HEADER */
}

/* ============================================
   FOOTER STYLING
   The bottom of the page
   ============================================ */

.footer {
  color: #ffffff !important; /* BRIGHT WHITE FOOTER TEXT */
  font-size: 0.85em; /* SMALLER FOOTER TEXT */
  padding: 4em 0 !important; /* EXTRA VERTICAL PADDING - adjust as needed */
  margin-top: 3em !important; /* EXTRA SPACE ABOVE FOOTER */
}

/* Footer content layout - flexbox horizontal */
.footer-content {
  display: flex;
  justify-content: space-between; /* Space nav on left, icons on right */
  align-items: center;
  width: 100%;
  padding: 2em 0; /* Increased from 0.5em */
}

/* Footer navigation - horizontal list */
.footer-nav {
  display: flex;
  gap: 1.5em;
  align-items: center;
}

.footer-nav a {
  color: #ff6600 !important;
  text-decoration: none;
  font-size: 1em;
}

.footer-nav a:hover {
  color: #000000 !important;
  background-color: #ff6600 !important;
}

/* Footer social icons - right-aligned */
.footer-social {
  display: flex;
  gap: 1.5em;
  align-items: center;
}

.footer-social a {
  color: #ff6600 !important;
  font-size: 1.2em;
  padding: 0.2em;
}

.footer-social a:hover {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* ============================================
   DOT BORDERS - Center alignment
   Centers the dotted border lines
   ============================================ */

.repel-border,
.footer-border-wrapper,
.border-wrapper,
hr {
  text-align: left !important;
  margin-left: 0em !important;
  margin-right: 0em !important;
  display: block !important;
  width: 105% !important; /* Full width */
  max-width: 110% !important; /* Override any theme limits */
  overflow: visible !important; /* Allow dots to extend */
}

/* ============================================
   CODE BLOCKS
   Any code snippets on the page
   ============================================ */

pre, code {
  background-color: #1a1a1a; /* VERY DARK GRAY FOR CODE BACKGROUND */
  border-color: #333; /* DARK BORDER AROUND CODE */
}

/* ============================================
   PROJECT GRID ON HOME PAGE
   Creates a 2x3 grid for project thumbnails
   ============================================ */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 COLUMNS */
  gap: 2em; /* SPACE BETWEEN PROJECTS */
  margin: 2em 0;
}

.project-item {
  text-align: center;
}

.project-item a {
  text-decoration: none;
  display: block;
}

.projects-grid img {
  width: 100%; /* FILL THE GRID CELL */
  max-width: 500px; /* MAX SIZE - ADJUST THIS NUMBER */
  height: auto;
  display: block;
  margin: 0 auto 0.5em auto;
  border: 2px solid #333; /* BORDER AROUND IMAGES */
  transition: border-color 0.3s ease;
}

.projects-grid img:hover {
  border-color: #ff6600; /* ORANGE BORDER ON HOVER */
}

/* PROJECT TITLES BELOW IMAGES */
.project-item strong {
  display: block;
  color: #ffffff !important;
  margin-top: 0.5em;
}

/* ============================================
   THREE-COLUMN INTRO TEXT
   Used on about page
   ============================================ */

.intro-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 COLUMNS */
  gap: 2em;
  margin: 2em 0;
}

/* ============================================
   TEXT SELECTION COLOR
   Change the blue highlight color
   ============================================ */

::selection {
  background-color: #ff6600; /* ORANGE BACKGROUND */
  color: #000000; /* BLACK TEXT */
}

::-moz-selection {
  background-color: #ff6600;
  color: #000000;
}

/* ============================================
   INTERACTIVE MOUSE EFFECTS
   Card glow, spotlight, ripples, 3D tilt, bold text glow
   ============================================ */

/* RIPPLE EFFECT ON CLICK */
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.ripple {
  position: fixed;
  border-radius: 50%;
  background: rgba(255, 102, 0, 0.6); /* ORANGE RIPPLES */
  width: 20px;
  height: 20px;
  animation: ripple 0.6s ease-out;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}

/* SPOTLIGHT EFFECT */
.spotlight-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9997;
  background: radial-gradient(
    circle 1000px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    transparent 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
  opacity: 0;
  transition: opacity var(--transition-speed) ease-in-out;
}

.spotlight-overlay.active {
  opacity: 1;
}

/* CARD GLOW EFFECT FOR PROJECT ITEMS */
.project-item::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle, 
    rgba(255, 102, 0, 0.3), /* ORANGE GLOW */
    transparent 70%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-speed) ease-in-out;
  transform: translate(-50%, -50%);
  left: var(--glow-x, 50%);
  top: var(--glow-y, 50%);
  z-index: 1;
}

.project-item:hover::before {
  opacity: 1;
}

/* Make sure content stays above glow */
.project-item > * {
  position: relative;
  z-index: 2;
}

/* 3D TILT EFFECT FOR PROJECT ITEMS */
.project-item {
  transform-style: preserve-3d;
  transition: transform var(--transition-speed) ease-out;
  position: relative;
}

/* Ensure images don't break during tilt */
.projects-grid img {
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ============================================
   CUSTOM CURSOR STYLING
   Orange block cursor with proper alignment
   ============================================ */

.terminal-prompt::after {
  content: "█" !important;
  color: #ff6600 !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  margin-left: 0.2em !important;
  bottom: 0 !important; /* Align to baseline */
  position: relative !important;
  animation: cursor-blink 1s infinite !important;
  -webkit-animation: cursor-blink 1s infinite !important;
  vertical-align: baseline !important; /* Keep aligned with text */
}

/* Custom blink animation */
@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@-webkit-keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ============================================
   MOBILE OPTIMIZATION
   Responsive adjustments for screens 768px and below
   ============================================ */

/* Desktop-only content - hidden on mobile */
.mobile-only {
  display: none;
}

.desktop-only {
  display: block;
}

.desktop-fullscreen {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers the h2 vertically */
  padding: 0em 0;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .desktop-fullscreen {
    min-height: auto;
    padding: 1em 0;
  }
  
  /* Show mobile content, hide desktop content */
  .mobile-only {
    display: block !important;
  }
  
  .desktop-only {
    display: none !important;
  }
  
  /* Slightly larger base font on mobile for readability */
  body {
    font-size: 0.95em;
  }
  
  /* Scale down headings for mobile */
  h1, .terminal h1, article h1, .page-title {
    font-size: 2em !important; /* Down from 3em */
    line-height: 1.2 !important;
    margin-top: 2em !important; /* Increased from 1em to clear border */
    margin-bottom: 0.75em !important;
    padding-bottom: 0.01em !important; /* Minimal padding */
  }
  
  h2, article h2, .terminal h2 {
    font-size: 1.5em !important; /* Down from 1.8em */
    margin-top: 1.5em !important;
  }
  
  /* Minimize space around intro paragraph on homepage */
  h1 + p,
  article h1 + p {
    margin-top: 0.5em !important;
    margin-bottom: 1em !important;
  }
  
  h3, article h3, .terminal h3 {
    font-size: 1.2em !important; /* Down from 1.4em */
    margin-top: 1.2em !important;
  }
  
  h4, article h4, .terminal h4 {
    font-size: 1.05em !important;
  }
  
  /* Keep navigation same size as links and left-aligned */
  .terminal-nav {
    padding: 0.3em 0;
    text-align: left !important;
  }
  
  .terminal-menu a,
  .terminal-nav a {
    font-size: 1em !important; /* Same size as desktop */
    padding: 0.25em 0.75em !important;
  }
  
  .terminal-logo, .terminal-prompt {
    font-size: 1em !important; /* Same size as menu links */
    text-align: left !important;
  }
  
  /* Breadcrumb navigation - smaller and wrap text */
  .breadcrumb-nav,
  .terminal-prompt {
    font-size: 0.75em;
    white-space: normal !important; /* Allow wrapping */
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  /* Tables - full width on mobile */
  article table,
  table {
    font-size: 0.75em;
    width: 100% !important; /* Full width */
    max-width: 100% !important;
    display: table !important; /* Override to table for full width */
    overflow-x: visible;
  }
  
  article table td,
  table td {
    padding: 0.4em 0.3em !important;
  }
  
  /* Code blocks */
  pre, code {
    font-size: 0.85em;
  }
  
  /* Keep project grid as 2 columns on mobile */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* Override to keep 2 columns */
    gap: 1.5em; /* Slightly tighter gap */
  }
  
  .projects-grid img {
    max-width: 100%;
  }
  
  /* Three-column intro becomes single column */
  .intro-columns {
    grid-template-columns: 1fr; /* Stack on mobile */
  }
  
  /* Disable mouse effects on mobile */
  .project-item::before {
    display: none; /* No glow effect */
  }
  
  .spotlight-overlay {
    display: none; /* No spotlight */
  }
  
  .ripple {
    display: none; /* No ripples */
  }
  
  /* Disable tilt transforms */
  .project-item {
    transform: none !important;
  }
  
  /* Simplify bold text - no transforms */
  strong, b {
    transform: none !important;
  }
  
  strong span, b span {
    transform: none !important;
  }
  
  /* Footer stays horizontal on mobile */
  .footer-content {
    flex-direction: row !important; /* Keep horizontal */
    justify-content: space-between !important; /* Space between nav and icons */
    align-items: center;
    padding-left: 0 !important; /* Remove left padding */
    padding-right: 0 !important; /* Remove right padding */
  }
  
  .footer-nav {
    flex-direction: row !important; /* Keep horizontal */
    gap: 1em;
    text-align: left; /* Left align */
    padding-left: 0 !important; /* No extra padding */
  }
  
  .footer-social {
    text-align: right; /* Right align icons */
    padding-right: 0 !important; /* No extra padding */
  }
  
  /* Add spacing to list items on mobile */
  article ul li,
  article ol li,
  ul li,
  ol li {
    margin-bottom: 2em; /* Extra space between bullets */
  }
}

/* ============================================
   CONFIGURATION OPTIONS & NOTES
   ============================================ */

/* GLOBAL TRANSITION SPEED CONTROL */
/* Change --transition-speed at the top in :root { }
   This controls ALL effect transitions:
   - Spotlight fade in/out
   - Card glow fade in/out
   - Bold text color change
   - Bold text magnetic movement
   - Bold text glow effect
   - 3D tilt speed
   
   Recommended values:
   - 0.5s = Fast/snappy
   - 1s = Quick but smooth
   - 1.5s = Slow/dramatic
   - 2s = Very slow/floaty
   - 3s = Current setting (very dramatic)
*/

/* RIPPLE CUSTOMIZATION */
/* Change ripple size: increase the 4 in scale(4) for bigger ripples */
/* Change ripple speed: increase 0.6s for slower, decrease for faster */
/* Change ripple color: modify rgba(255, 102, 0, 0.6) */

/* SPOTLIGHT CUSTOMIZATION */
/* Change spotlight size: modify 1000px in the radial-gradient */
/* Change darkness: modify 0.7 in rgba(0, 0, 0, 0.7) - higher = darker */

/* GLOW CUSTOMIZATION */
/* Change glow size: modify 300px width/height */
/* Change glow color: modify rgba(255, 102, 0, 0.3) */
/* Change glow intensity: modify the 0.3 alpha value - higher = brighter */

/* TILT CUSTOMIZATION */
/* Change tilt amount: modify tiltStrength in JavaScript */

/* BOLD TEXT GLOW CUSTOMIZATION */
/* Change glow color: modify color values in strong.mouse-near span */
/* Change glow intensity: modify the rgba values in text-shadow */
/* Change magnetic range: modify magneticRange in JavaScript (default: 175px) */
/* Change magnetic strength: modify magneticStrength in JavaScript (default: 0.1) */