/* ==============================
   DARK MATERIAL NEON THEME
============================== */
:root
{
  --app-text-color: #f7a305;
}

a.neon
{
  color: #f5c542;
  /* golden */
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

a.neon:hover
{
  color: #ffd86b;
  /* brighter gold */

  /* underline without shifting layout */
  text-decoration-line: underline;
  text-decoration-color: #776917;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;

  color: #fefefe;

  text-shadow:
    0 0 4px rgba(255, 204, 0, 0.35),
    0 0 10px rgba(255, 204, 0, 0.2);
}

.neon-time-weather
{
  color: #f5d76e;
  /* soft golden */
  letter-spacing: 0.5px;
}

/* ===== TIME ===== */
#Time
{
  font-size: 35px;
  font-weight: 900;
  margin-bottom: -3px;
  color: #f5f5f5;
  /* material white */

  text-shadow:
    0 0 4px rgba(255, 215, 0, 0.35),
    0 0 12px rgba(255, 215, 0, 0.25),
    0 0 24px rgba(255, 180, 0, 0.2);
}

/* ===== DATE ===== */
#Date
{
  font-size: 14px;
  font-weight: 600;
  color: #cfcfcf;

  text-shadow:
    0 0 3px rgba(255, 215, 0, 0.2),
    0 0 8px rgba(255, 215, 0, 0.15);
}

/* ===== WEATHER TEXT ===== */
#WeatherInformation
{
  font-size: 12px;
  margin-top: -3px;
  color: #fefefe;

  text-shadow:
    0 0 4px rgba(255, 204, 0, 0.35),
    0 0 10px rgba(255, 204, 0, 0.2);
}

/* ===== WEATHER LINK ===== */
#WeatherInformation a
{
  color: #ffdd77;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 215, 0, 0.4);
}

#WeatherInformation a:hover
{
  color: #fff2b0;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

/* ===== ICON BASE ===== */
.weather-icon
{
  font-size: 50px;
  margin-top: -10px;
  color: #ffd700;

  animation: neonPulse 2.5s ease-in-out infinite;
}

/* ===== NEON PULSE ===== */
@keyframes neonPulse
{
  0%
  {
    text-shadow:
      0 0 6px rgba(255, 215, 0, 0.4),
      0 0 14px rgba(255, 215, 0, 0.25);
    transform: scale(1);
  }

  100%
  {
    text-shadow:
      0 0 14px rgba(255, 215, 0, 0.9),
      0 0 32px rgba(255, 180, 0, 0.6);
    transform: scale(1.08);
  }
}

/* ===== SUN ROTATION ===== */
.sun
{
  display: inline-block;
  /* IMPORTANT */
  transform-origin: 50% 50%;
  /* center rotation */
  will-change: transform;

  animation:
    spin 6s linear infinite,
    neonPulse 2.5s ease-in-out infinite;
}

@keyframes spin
{
  0%
  {
    transform: rotate(0deg);
  }

  100%
  {
    transform: rotate(360deg);
  }
}

/* ===== CLOUD FLOAT ===== */
.cloud
{
  animation:
    float 4s ease-in-out infinite,
    neonPulse 2.5s ease-in-out infinite;
}

@keyframes float
{
  0%
  {
    transform: translateX(0);
  }

  50%
  {
    transform: translateX(14px);
  }

  100%
  {
    transform: translateX(0);
  }
}

/* ===== FLEX UTILITY ===== */
.neon-display-flex-end
{
  display: flex !important;
  justify-content: flex-end !important;
}

.neon-display-flex-start
{
  display: flex !important;
  justify-content: flex-start !important;
}

/* ==============================
   NEON MATERIAL NAV PROFILE
============================== */

.header-nav .nav-profile
{
  display: inline-flex;
  align-items: center;

  color: #f5c542;
  /* soft neon gold */
  padding: 0.35rem 0.65rem;
  border-radius: 4rem;

  background: rgba(0, 0, 0, 0.35);
  /* translucent glass over image */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow:
    0 0 6px rgba(236, 162, 9, 0.45),
    0 0 18px rgba(236, 162, 9, 0.25),
    inset 0 0 6px rgba(255, 215, 0, 0.25);

  transition: all 0.35s ease;
}

/* ===== PROFILE IMAGE ===== */
.header-nav .nav-profile-neon img
{
  max-height: 36px;
  border-radius: 50%;

  box-shadow:
    0 0 4px rgba(255, 215, 0, 0.6),
    0 0 10px rgba(236, 162, 9, 0.4);
}

/* ===== PROFILE NAME ===== */
.header-nav .nav-profile-neon span
{
  font-size: 14px;
  font-weight: 600;
  margin-right: 0.65rem;

  color: #ffe08a;
  text-shadow:
    0 0 4px rgba(236, 162, 9, 0.6),
    0 0 8px rgba(236, 162, 9, 0.35);
  display: grid;
  line-height: initial;
}

.neon-text-gold
{
  color: #f5c542;
  text-shadow:
    0 0 10px rgba(255, 204, 0, 0.533),
    0 0 15px rgba(255, 204, 0, 0.374);
}

.neon-text-gold:hover
{
  color: #ffffff;
  text-shadow:
    0 0 10px rgba(255, 204, 0, 0.533),
    0 0 15px rgba(255, 204, 0, 0.374);
}

.neon-text-white
{
  color: #f5f5f5;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.407),
    0 0 15px rgba(255, 217, 0, 0.473);
}

.neon-text-white:hover
{
  color: #f5c542;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.407),
    0 0 15px rgba(255, 217, 0, 0.473);
}

.neon-text-soft
{
  color: #cfcfcf;
  text-shadow:
    0 0 2px rgba(255, 215, 0, 0.15);
}

.neon-shadow-soft
{
  box-shadow:
    0 0 6px rgba(236, 162, 9, 0.35),
    0 0 14px rgba(236, 162, 9, 0.2);
}

.neon-shadow-medium
{
  box-shadow:
    0 0 8px rgba(236, 162, 9, 0.5),
    0 0 22px rgba(236, 162, 9, 0.35);
}

.neon-shadow-strong
{
  box-shadow:
    0 0 12px rgba(236, 162, 9, 0.75),
    0 0 32px rgba(236, 162, 9, 0.55);
}

.neon-glass
{
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow:
    inset 0 0 6px rgba(255, 215, 0, 0.25),
    0 0 10px rgba(236, 162, 9, 0.3);
}

.neon-raised
{
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.neon-raised:hover
{
  transform: translateY(-2px);
  box-shadow:
    0 0 12px rgba(236, 162, 9, 0.6),
    0 0 28px rgba(236, 162, 9, 0.4);
}

.neon-pulse
{
  animation: neonPulse 2.5s ease-in-out infinite;
}

@keyframes neonPulse
{
  0%
  {
    text-shadow:
      0 0 6px rgba(255, 215, 0, 0.35),
      0 0 14px rgba(255, 215, 0, 0.2);
  }

  100%
  {
    text-shadow:
      0 0 14px rgba(255, 215, 0, 0.9),
      0 0 32px rgba(255, 180, 0, 0.6);
  }
}

.neon-underline
{
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 215, 0, 0.4);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.neon-underline:hover
{
  border-bottom-color: #ffd700;
  box-shadow: 0 2px 6px rgba(255, 215, 0, 0.6);
}

.neon-icon
{
  display: inline-block;
  will-change: transform;
  color: #ffd700;
}

.neon-spin
{
  animation: spin 6s linear infinite;
}

@keyframes spin
{
  to
  {
    transform: rotate(360deg);
  }
}

.neon-float
{
  animation: float 4s ease-in-out infinite;
}

@keyframes float
{
  50%
  {
    transform: translateX(14px);
  }
}

.neon-flex-start
{
  display: flex;
  justify-content: flex-start;
}

.neon-flex-center
{
  display: flex;
  justify-content: center;
}

.neon-flex-end
{
  display: flex;
  justify-content: flex-end;
}

/* ==============================
   GLASS + NEON (DARK BG)
============================== */

.glass-neon-dark
{
  background: rgba(10, 10, 10, 0.55);
  /* darker glass */
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);

  border: 1px solid rgba(255, 215, 0, 0.18);
  border-radius: 12px;

  box-shadow:
    0 0 8px rgba(255, 215, 0, 0.25),
    0 0 22px rgba(236, 162, 9, 0.18),
    inset 0 0 10px rgba(0, 0, 0, 0.6);

  color: #eaeaea;

  transition:
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* ===== HOVER ENHANCED NEON ===== */
.glass-neon-dark:hover
{
  border-color: rgba(255, 215, 0, 0.45);

  box-shadow:
    0 0 14px rgba(255, 215, 0, 0.55),
    0 0 36px rgba(236, 162, 9, 0.35),
    inset 0 0 12px rgba(0, 0, 0, 0.75);
}

.blur-glass
{
  background: rgba(0, 0, 0, 0.122);
  /* transparent dark */
  backdrop-filter: blur(1px) saturate(250%);
  -webkit-backdrop-filter: blur(1px) saturate(250%);

  border-radius: 12px;

  box-shadow:
    inset 0 0 1px rgba(162, 162, 162, 0.322),
    0px 1px 6px rgba(208, 208, 208, 0.234);
}

.blur-glass:hover
{
  background: rgba(0, 0, 0, 0.259);
  transform: scale(1.02);
}