/* ==============================
   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);
 }

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

/* ===== 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: 0.5rem;

 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: 0.5rem !important;

 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);
}