/* Custom CSS for Alpine Theme */

/* Import Atkinson Hyperlegible font */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* Define color variables for the theme */
  --accent-color: #FF4F00;
  --text-color: #333333;
  --background-color: #F5F3F0;
  --hover-background: #FAFAF8;
  --link-underline: #DEDEDE;
  --link-hover-background: #FFE7D7;
  --gradient-1: #F5F3F0;
  --gradient-2: #F9DA8B;
  --gradient-3: #F7B75D;
  --gradient-4: #F0904D;
  --gradient-5: #E66445;
  --gradient-6: #D13B3B;
  --gradient-7: #B42A33;
  --gradient-8: #911A2C;
  --gradient-9: #661226;
  --gradient-10: #3D0A20;

  /* Dark mode colors - improved to complement the palette */
  --dark-background: #36322E;
  --dark-text: #E8E5E0;
  --dark-secondary: #F7B75D;
  --dark-hover: #4A443F;
  --dark-surface: #42382D;
}

/* Apply fonts to all elements */
body {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  margin: 0;
  padding: 0;
}

/* Remove white bar at top */
html {
  background-color: var(--background-color);
}

/* Style the navigation to match the theme */
nav.main-nav {
  background: var(--background-color);
  background: rgba(245, 243, 240, 0.95);
  padding: 12px 20px 0 !important;
  margin-top: 0 !important;
  position: relative;
  z-index: 100;
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Fix avatar display */
.site-title {
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;
}

.site-image {
  margin-right: 8px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.site-title a {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 500;
}

/* Style links with accent color */
a {
  color: var(--accent-color);
}

/* Update box-shadow for links to use accent color */
nav.main-nav a, #footer a, #post-nav a, p a {
  box-shadow: inset 0 -2px 0 var(--link-underline);
}

nav.main-nav a:hover, #footer a:hover, #post-nav a:hover, p a:hover {
  box-shadow: inset 0 -25px 0 var(--link-hover-background);
}

/* Update CTA buttons with accent color */
nav.main-nav a.cta {
  background: white;
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
}

nav.main-nav a.cta:hover {
  background: var(--hover-background);
  color: var(--accent-color);
}

/* Make H2 headers slightly smaller and semi-bold */
h2 {
  font-size: 1.4em;
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.7em;
  color: var(--text-color);
}

/* Ensure all list items and text elements inherit text color */
li, p, span, div, article, section, label, time, blockquote, figcaption {
  color: inherit;
}

/* Redesigned Dark Mode Toggle - Simple Slider */
.dark-mode-toggle {
  position: relative;
  width: 42px;
  height: 22px;
  margin-left: 15px;
  display: inline-block;
  vertical-align: middle;
}

.dark-mode-toggle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e0e0e0;
  border-radius: 11px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.dark-mode-toggle::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  cursor: pointer;
}

html.dark-theme .dark-mode-toggle::before {
  background-color: var(--accent-color);
}

html.dark-theme .dark-mode-toggle::after {
  transform: translateX(20px) translateY(-50%);
  background-color: white;
}

/* Hide the original SVG icons */
.dark-mode-toggle svg {
  display: none;
}

/* Ensure proper spacing in the nav menu */
.site-menus {
  display: flex;
  align-items: center;
}

/* Dark mode support - both for class and media query */
@media (prefers-color-scheme: dark) {
  :root:not(.light-theme) {
    --text-color: var(--dark-text);
    --background-color: var(--dark-background);
    --hover-background: var(--dark-hover);
    --link-underline: rgba(255, 79, 0, 0.3);
    --link-hover-background: rgba(255, 79, 0, 0.15);
  }
  
  :root:not(.light-theme) body,
  :root:not(.light-theme) html {
    background-color: var(--background-color);
    color: var(--text-color);
  }
  
  :root:not(.light-theme) nav.main-nav {
    background: var(--dark-background);
    background: rgba(54, 50, 46, 0.95);
  }
  
  :root:not(.light-theme) nav.main-nav a {
    color: var(--text-color);
  }

  :root:not(.light-theme) nav.main-nav a.cta {
    background: transparent;
    color: var(--accent-color);
  }
  
  :root:not(.light-theme) h1,
  :root:not(.light-theme) h2,
  :root:not(.light-theme) h3,
  :root:not(.light-theme) h4,
  :root:not(.light-theme) h5 {
    color: var(--dark-secondary);
  }
  
  :root:not(.light-theme) a {
    color: var(--accent-color);
  }
  
  /* Force all text to use dark mode colors */
  :root:not(.light-theme) .post-body,
  :root:not(.light-theme) article,
  :root:not(.light-theme) .post,
  :root:not(.light-theme) .post p,
  :root:not(.light-theme) .post li,
  :root:not(.light-theme) #wrapper {
    color: var(--dark-text) !important;
  }
  
  /* Invert images slightly to be easier on the eyes */
  :root:not(.light-theme) img:not(.site-image):not(.microblog_avatar):not(.avatar) {
    filter: brightness(0.9) contrast(1.1);
  }
}

/* Class-based dark theme (for the toggle button) */
html.dark-theme {
  --text-color: var(--dark-text);
  --background-color: var(--dark-background);
  --hover-background: var(--dark-hover);
  --link-underline: rgba(255, 79, 0, 0.3);
  --link-hover-background: rgba(255, 79, 0, 0.15);
}

html.dark-theme body,
html.dark-theme {
  background-color: var(--background-color);
  color: var(--text-color);
}

html.dark-theme nav.main-nav {
  background: var(--dark-background);
  background: rgba(54, 50, 46, 0.95);
}

html.dark-theme nav.main-nav a {
  color: var(--text-color);
}

html.dark-theme nav.main-nav a.cta {
  background: transparent;
  color: var(--accent-color);
}

html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5 {
  color: var(--dark-secondary);
}

html.dark-theme a {
  color: var(--accent-color);
}

/* Force all text to use dark mode colors */
html.dark-theme .post-body,
html.dark-theme article,
html.dark-theme .post,
html.dark-theme .post p,
html.dark-theme .post li,
html.dark-theme time,
html.dark-theme span,
html.dark-theme li,
html.dark-theme #wrapper {
  color: var(--dark-text) !important;
}

html.dark-theme img:not(.site-image):not(.microblog_avatar):not(.avatar) {
  filter: brightness(0.9) contrast(1.1);
}

/* Custom gradient header */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(to right, 
    var(--gradient-1), 
    var(--gradient-2), 
    var(--gradient-3), 
    var(--gradient-4), 
    var(--gradient-5), 
    var(--gradient-6), 
    var(--gradient-7), 
    var(--gradient-8), 
    var(--gradient-9), 
    var(--gradient-10)
  );
  z-index: 1000;
}