/* --- Nothing Font (Dot Matrix) - Refactored --- */

/* Core Principles:
  1. CSS Custom Properties (--variable) for a single source of truth.
  2. No `!important` needed due to a clean, component-based structure.
  3. `calc()` for dynamic and proportional sizing (e.g., row height depends on dot size).
  4. Modular size classes (.nothing-font--small) instead of styling h1/h2 tags directly.
*/

:root {
  /* Define theme colors for easy dark/light mode switching */
  --nothing-font-color: #000;
  --nothing-focus-color: #FF4B2B;
}

body.dark-mode {
  --nothing-font-color: #fff;
}

.nothing-font {
  /* --- Control Panel using CSS Variables --- */
  /* Scale based on viewport width for responsive sizing */
  --base-scale: 1vw;
  --dot-size: calc(var(--base-scale) * 0.4);
  --dot-margin: calc(var(--base-scale) * 0.1);
  --letter-spacing: calc(var(--base-scale) * 0.8);

  /* --- Base Component Styles --- */
  font-family: 'DotMatrix', monospace; /* Fallback font */
  position: relative;
  display: block;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--nothing-font-color);
  overflow: visible !important;
  max-width: 100%;
  width: 100%;
  min-height: calc(var(--dot-size) * 7 + var(--dot-margin) * 16);
  line-height: normal !important;
  height: auto !important;
  padding: 15px 0 25px 0;
}

/* Hide original text but keep it for screen readers and SEO */
.nothing-font .original-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Base styles for the building blocks */
.dot-matrix {
  display: inline-block;
  vertical-align: top;
  contain: layout style paint; /* Performance optimization */
  min-height: calc(var(--dot-size) * 7 + var(--dot-margin) * 16);
  max-width: 100%;
  overflow: visible;
  padding-bottom: calc(var(--dot-margin) * 2);
}

.letter {
  display: inline-block;
  vertical-align: top;
  margin-right: var(--letter-spacing);
}
.letter:last-child {
  margin-right: 0;
}

.dot-row {
  display: block;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  /* Row height is calculated dynamically based on dot size and margin */
  height: calc(var(--dot-size) + (var(--dot-margin) * 2));
  line-height: calc(var(--dot-size) + (var(--dot-margin) * 2));
  overflow: visible;
}

.dot {
  display: inline-block;
  vertical-align: middle;
  background: currentColor;
  border-radius: 50%;
  opacity: 1;
  /* Sizing is now controlled by variables */
  width: var(--dot-size);
  height: var(--dot-size);
  margin: var(--dot-margin);
}

.dot.empty {
  background: transparent;
  animation: none;
  opacity: 0;
}

/* --- Size Modifier Classes --- */
/* To change the size, just apply one of these classes. */

.nothing-font--small {
  --base-scale: 0.5vw;
}

.nothing-font--medium { /* Default size */
  --base-scale: 1vw;
}

.nothing-font--large {
  --base-scale: 1.5vw;
}

.nothing-font--xl { /* For hero titles */
  --base-scale: 2vw;
}


/* --- Responsive Sizing --- */
/* Adjust base scale for different screen sizes */

@media (max-width: 768px) {
  .nothing-font {
    --base-scale: 1.2vw;
  }

  .nothing-font--large {
    --base-scale: 1.8vw;
  }

  .nothing-font--xl {
    --base-scale: 2.5vw;
  }
}

@media (max-width: 480px) {
  .nothing-font {
    --base-scale: 1.3vw;
    padding: 30px 0 40px 0;
  }

  .nothing-font--medium {
    --base-scale: 1.3vw;
  }

  .nothing-font--large {
    --base-scale: 1.8vw;
  }

  .nothing-font--xl {
    --base-scale: 2.5vw;
  }
  
  .dot-matrix {
    padding-bottom: calc(var(--dot-margin) * 6);
  }
  
  .letter {
    margin-right: calc(var(--letter-spacing) * 0.8);
  }
}

@media (max-width: 360px) {
  .nothing-font {
    --base-scale: 1.6vw;
    padding: 20px 0 30px 0;
  }

  .nothing-font--medium {
    --base-scale: 1.6vw;
  }

  .nothing-font--large {
    --base-scale: 2vw;
  }

  .nothing-font--xl {
    --base-scale: 2.8vw;
  }
  
  .letter {
    margin-right: calc(var(--letter-spacing) * 0.7);
  }
}


/* --- Hero Title Specific Styles --- */
/* Ensure hero titles wrap properly on all screen sizes */
.hero .title.nothing-font,
.hero-title.nothing-font {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: center;
  line-height: normal !important;
  overflow: visible !important;
  height: auto !important;
  min-height: fit-content !important;
}

.hero .title.nothing-font .dot-matrix,
.hero-title.nothing-font .dot-matrix {
  display: inline-block;
  max-width: 100%;
  overflow: visible !important;
  height: auto !important;
  margin: 0 auto;
}

/* Ensure proper scaling on small screens */
@media (max-width: 480px) {
  .hero .title.nothing-font .dot-matrix,
  .hero-title.nothing-font .dot-matrix {
    max-width: 95vw;
    transform-origin: center center;
  }
}

@media (max-width: 360px) {
  .hero .title.nothing-font .dot-matrix,
  .hero-title.nothing-font .dot-matrix {
    max-width: 92vw;
  }
}

/* Responsive hero title adjustments */
@media (max-width: 768px) {
  .hero .title.nothing-font,
  .hero-title.nothing-font {
    --base-scale: 1.6vw;
    padding: 20px 5px;
  }
}

@media (max-width: 480px) {
  .hero .title.nothing-font,
  .hero-title.nothing-font {
    --base-scale: 1.8vw;
    padding: 20px 5px;
  }
}

@media (max-width: 414px) {
  .hero .title.nothing-font,
  .hero-title.nothing-font {
    --base-scale: 2vw;
    padding: 20px 5px;
  }
}

@media (max-width: 375px) {
  .hero .title.nothing-font,
  .hero-title.nothing-font {
    --base-scale: 2.2vw;
    padding: 20px 5px;
  }
}

@media (max-width: 360px) {
  .hero .title.nothing-font,
  .hero-title.nothing-font {
    --base-scale: 2.3vw;
    padding: 20px 5px;
  }
}

@media (max-width: 320px) {
  .hero .title.nothing-font,
  .hero-title.nothing-font {
    --base-scale: 1.8vw;
    --dot-size: calc(var(--base-scale) * 0.35);
    --dot-margin: calc(var(--base-scale) * 0.08);
    --letter-spacing: calc(var(--base-scale) * 0.4);
    padding: 15px 2px;
    max-width: 98vw;
  }
  
  .hero .title.nothing-font .dot-matrix,
  .hero-title.nothing-font .dot-matrix {
    max-width: 95vw;
    margin: 0 auto;
  }
  
  .hero .title.nothing-font .letter,
  .hero-title.nothing-font .letter {
    margin-right: calc(var(--letter-spacing) * 0.3);
  }
  
  .hero .title.nothing-font .dot-row,
  .hero-title.nothing-font .dot-row {
    letter-spacing: -0.5px;
  }
}

/* Loading state */
.nothing-font.loading .dot {
  opacity: 0.3;
}

.nothing-font.loaded .dot {
  opacity: 1;
}

/* Focus styles for keyboard navigation */
.nothing-font:focus {
  outline: 2px solid var(--nothing-focus-color);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .dot {
    opacity: 1;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .nothing-font .dot {
    border: 1px solid currentColor;
  }
}

/* Additional fixes for dot visibility on small screens */
@media (max-width: 768px) {
  .nothing-font {
    padding: 25px 0 35px 0;
  }
  
  .dot-matrix {
    padding-bottom: calc(var(--dot-margin) * 4);
  }
  
  .letter {
    margin-right: calc(var(--letter-spacing) * 0.9);
  }
}

@media (max-width: 480px) {
  .nothing-font {
    padding: 30px 0 40px 0;
  }
  
  .dot-matrix {
    padding-bottom: calc(var(--dot-margin) * 6);
  }
}

/* Ensure dots are always visible */
.dot {
  min-width: 2px;
  min-height: 2px;
  z-index: 1;
  position: relative;
}

/* Fix for very small screens */
@media (max-width: 320px) {
  .nothing-font {
    --base-scale: 1.5vw;
    --dot-size: calc(var(--base-scale) * 0.35);
    --dot-margin: calc(var(--base-scale) * 0.08);
    --letter-spacing: calc(var(--base-scale) * 0.5);
    padding: 35px 0 45px 0;
  }
  
  .dot {
    min-width: 2px;
    min-height: 2px;
  }
  
  .letter {
    margin-right: calc(var(--letter-spacing) * 0.5);
  }
  
  /* Increase size ONLY for underlined heading sections (About Me, Websites, Projects, Contact) */
  .header h2.nothing-font,
  .about-text h2.nothing-font {
    --base-scale: 2.5vw;
    --dot-size: calc(var(--base-scale) * 0.4);
    --dot-margin: calc(var(--base-scale) * 0.1);
    --letter-spacing: calc(var(--base-scale) * 0.7);
    padding: 25px 0 35px 0 !important;
  }
  
  .header h2.nothing-font .dot,
  .about-text h2.nothing-font .dot {
    min-width: 3px;
    min-height: 3px;
  }
  
  .header h2.nothing-font .letter,
  .about-text h2.nothing-font .letter {
    margin-right: calc(var(--letter-spacing) * 0.6);
  }
}

/* Fix for 375px screens */
@media (max-width: 450px) {
  /* Increase size ONLY for underlined heading sections (About Me, Websites, Projects, Contact) */
  .header h2.nothing-font,
  .about-text h2.nothing-font {
    --base-scale: 2.4vw;
    --dot-size: calc(var(--base-scale) * 0.4);
    --dot-margin: calc(var(--base-scale) * 0.1);
    --letter-spacing: calc(var(--base-scale) * 0.7);
    padding: 25px 0 35px 0 !important;
  }
  
  .header h2.nothing-font .dot,
  .about-text h2.nothing-font .dot {
    min-width: 2.9px;
    min-height: 2.9px;
  }
  
  .header h2.nothing-font .letter,
  .about-text h2.nothing-font .letter {
    margin-right: calc(var(--letter-spacing) * 0.6);
  }
}

/* Fix for 375px screens */
@media (max-width: 375px) {
  /* Increase size ONLY for underlined heading sections (About Me, Websites, Projects, Contact) */
  .header h2.nothing-font,
  .about-text h2.nothing-font {
    --base-scale: 2.4vw;
    --dot-size: calc(var(--base-scale) * 0.4);
    --dot-margin: calc(var(--base-scale) * 0.1);
    --letter-spacing: calc(var(--base-scale) * 0.7);
    padding: 25px 0 35px 0 !important;
  }
  
  .header h2.nothing-font .dot,
  .about-text h2.nothing-font .dot {
    min-width: 2.9px;
    min-height: 2.9px;
  }
  
  .header h2.nothing-font .letter,
  .about-text h2.nothing-font .letter {
    margin-right: calc(var(--letter-spacing) * 0.6);
  }
}

/* Ensure dots are always properly sized and visible */
.dot:not(.empty) {
  background-color: var(--nothing-font-color);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
  transition: none;
}

/* Fix for container overflow issues */
.nothing-font .dot-matrix {
  overflow: visible !important;
  box-sizing: border-box;
}

.nothing-font .letter {
  overflow: visible !important;
}

.nothing-font .dot-row {
  overflow: visible !important;
  box-sizing: border-box;
}

/* Override any parent styles that might clip the content */
h1.nothing-font,
h2.nothing-font,
h3.nothing-font,
.header h2.nothing-font {
  line-height: normal !important;
  overflow: visible !important;
  height: auto !important;
  min-height: fit-content !important;
  padding: 20px 0 30px 0 !important;
  margin-bottom: 10px !important;
}

/* Ensure left text headings display properly */
.left-text h3.nothing-font {
  line-height: normal !important;
  overflow: visible !important;
  height: auto !important;
  padding: 20px 0 30px 0 !important;
  margin-bottom: 10px !important;
}