/* ====================================================
   FANCY MODE OVERRIDES
   Applied when body has class "fancy-mode"
   ==================================================== */

/* Replace .theme-name with the class name */
html.fancy-mode {
 /* Backgrounds */
  --bg-page:           maroon; 
  --bg-deep:           #1e2028;
  --bg-surface:        #24252a;
  --bg-elevated:       #2a2b30;
  --bg-hover:          #383a40;

  /* Borders */
  --border-default:    gold;
  --border-blue:       goldenrod;

  /* Navy / Header Colors (Primary brand colors) */
  --navy-dark:         #2a0000;
  --navy:              #5e0505;
  --navy-light:        #a30f0f;

  /* Accent Colors */
  --accent-blue:       #c70c0c;
  --accent-blue-muted: #d13636;
  --header-border:     #c10c0c;
  --accent-hover:      #cc5200;
  --accent-visited:    #702f2f;

  /* Text Colors */
   --text-primary:      #e0e4e8;
  --text-heading:      #e8ecf0;
  --text-body:         #c8ccd0;
  --text-nav:          #b0b4b8;
  --text-label:        #a0a4a8;
  --text-muted:        #909498;
  --text-dim:          #808890;
  --text-footer:       #808488;
  --text-powered:      #606468;

  /* Gradients */
  --grad-header:       linear-gradient(to bottom, #7a0d0d 0%, #2a0000 100%);
  --grad-nav:          linear-gradient(to bottom, #333438 0%, #222226 100%);
  --grad-sidebar-h3:   linear-gradient(to bottom, #7a0d0d 0%, #410404 100%);
  --grad-footer:       linear-gradient(to bottom, #28292e 0%, #1e2028 100%);
  /* Misc Elements */
  --header-bottom:     #ffd700;
  --nav-border-bottom: gold;
  --wrapper-shadow:    2px 2px 8px rgba(0,0,0,0.4);
}

/* ====================================================
   OVERRIDES
   These are the same overrides copied over from the Light mode
   ==================================================== */

/* Background pattern */
/*
html.theme-name body {
  background-image: none;
}
*/

/* Nav link borders explicit override */
/*
html.theme-name #navigation ul li a {
  border-right-color: #3a3b40;
  border-left-color: #3a3b40;
}
*/

/* Active nav hover */
/*
html.theme-name #navigation ul li a:hover {
  color: #e0e4e8;
}
*/

/* Gold sheen effect for specific elements */
/*
html.theme-name #nav-calculator-museum {
  background: linear-gradient(135deg, #b8860b, #ffd700, #fffacd, #ffd700, #b8860b, #ffd700, #fffacd, #ffd700, #b8860b);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6));
  animation: gold-sheen 30s linear infinite;
}

html.theme-name #nav-calculator-museum:hover {
  background: linear-gradient(135deg, #b8860b, #ffd700, #fffacd, #ffd700, #b8860b);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #5a3a00;
  color: #5a3a00;
  filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.8));
}
*/

/* Content text colors that can't use variables */
/*
html.theme-name #content h3 {
  color: #6ea8da;
}

html.theme-name #content pre {
  background-color: #1e2028;
  border-color: #3a3b40;
  color: #c8ccd0;
}

html.theme-name .header-contacts a:hover {
  color: #e0e4e8;
}

html.theme-name .button-card p {
  color: #909498;
}
*/

html.fancy-mode #header {
  /* Use border-image to allow a gradient on the bottom border */
  border-image: linear-gradient(to right, gold 0%, silver 50%, gold 100%) 1;
}