/* ============================================
   ZLUINAV THEME OVERRIDE FOR PICO.CSS
   Combines: OKLCH Color Scheme + Figtree Fonts
   ============================================ */

/* 1. IMPORT FIGTREE FONT (for headings) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');

/* 2. CUSTOM COLOR VARIABLES USING OKLCH - CHOOSE ONE PALETTE ONLY! */
:root {
  /* === PALETTE 1: Cool Blue Theme (Recommended) === */
  --custom-primary: oklch(0.55 0.25 260);   /* Calmer, deeper blue */
  --custom-secondary: oklch(0.75 0.15 220); /* Softer light blue */
  --custom-muted: oklch(0.88 0.04 250);     /* Very light gray-blue */
  --custom-contrast: oklch(0.21 0.02 250);  /* Darker gray for better contrast */

  /* === ALTERNATIVE: Warm Teal Accent (Comment out above, uncomment below) === */
  /*
  --custom-primary: oklch(0.60 0.22 180);
  --custom-secondary: oklch(0.82 0.12 190);
  --custom-muted: oklch(0.92 0.02 100);
  --custom-contrast: oklch(0.25 0.02 100);
  */

  /* Font stacks */
  --custom-heading-font: 'Figtree', var(--pico-font-family-sans-serif);
  --custom-body-font: "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 3. OVERRIDE PICO'S DEFAULT VARIABLES */
:root {
  /* Apply custom font stack to Pico */
  --pico-font-family: var(--custom-body-font);
  
  /* Primary color overrides with color-mix() */
  --pico-primary: var(--custom-primary);
  --pico-primary-hover: color-mix(in oklch, var(--custom-primary), black 10%);
  --pico-primary-focus: color-mix(in oklch, var(--custom-primary), white 15%);
  --pico-primary-inverse: white;
  
  /* Secondary color overrides */
  --pico-secondary: var(--custom-secondary);
  --pico-secondary-hover: color-mix(in oklch, var(--custom-secondary), black 15%);
  --pico-secondary-focus: color-mix(in oklch, var(--custom-secondary), white 20%);
  
  /* Muted/background color overrides */
  --pico-muted: var(--custom-muted);
  --pico-muted-hover: color-mix(in oklch, var(--custom-muted), black 8%);
  --pico-muted-focus: color-mix(in oklch, var(--custom-muted), white 12%);
  
  /* Text/contrast color overrides */
  --pico-contrast: var(--custom-contrast);
  --pico-contrast-hover: color-mix(in oklch, var(--custom-contrast), black 20%);
  --pico-contrast-focus: color-mix(in oklch, var(--custom-contrast), white 15%);
  --pico-contrast-inverse: white;
  
  /* Border adjustments */
  --pico-border-color: color-mix(in oklch, var(--custom-muted), black 15%);
}

/* 4. APPLY FIGTREE TO ALL HEADINGS */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--custom-heading-font);
  font-weight: 600; /* Medium-bold weight for good readability */
}

/* Optional: Style specific heading levels differently */
h1 { font-weight: 700; } /* Extra bold for main titles */
h2 { font-weight: 650; } /* Slightly lighter for subsections */

/* 5. DARK THEME ENHANCEMENTS (since you use data-theme="dark") */
[data-theme="dark"] {
  /* Dark background with light text */
  --pico-background-color: #121826;
  --pico-color: oklch(95% 0.01 250); /* Very light gray for text */
  
  /* Adjusted colors for dark mode */
  --pico-primary: color-mix(in oklch, var(--custom-primary), white 25%);
  --pico-primary-hover: color-mix(in oklch, var(--custom-primary), white 35%);
  --pico-secondary: color-mix(in oklch, var(--custom-secondary), white 20%);
  --pico-muted: color-mix(in oklch, var(--custom-muted), black 40%);
  --pico-contrast: oklch(98% 0.005 250); /* Near-white for high contrast */
  
  /* Typography enhancements for dark mode */
  --pico-h1-color: var(--pico-contrast);
  --pico-h2-color: color-mix(in oklch, var(--pico-contrast), var(--pico-color) 15%);
  
  /* Form styling for dark mode */
  --pico-form-element-background-color: #1e293b;
  --pico-form-element-border-color: #334155;
  --pico-form-element-color: oklch(90% 0.01 250);
  
  /* Interactive element glow */
  --pico-primary-glow: 0 0 0.5rem color-mix(in oklch, var(--pico-primary), transparent 40%);
}

/* 6. COMPONENT-SPECIFIC ENHANCEMENTS */

article {
    margin-bottom: var(--pico-block-spacing-vertical);
    padding: var(--pico-block-spacing-vertical) 0px;
    border-top: 1px solid var(--pico-secondary);
    border-radius: 0px;
    background: transparent;
    box-shadow: none;
}

article>header {
    margin-top: calc(var(--pico-block-spacing-vertical));
    margin-bottom: var(--pico-block-spacing-vertical);
    border-bottom: 0px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px
}

/* Style for the tags container */
.tags {
    margin-top: 0.5em;
}

/* Combine button styles into one rule */
.tags .tag,
button:not([class]) { /* Target unstyled buttons */
    display: inline-block;
    color: var(--pico-primary-inverse);
    background: var(--pico-primary);
    border: 1px solid var(--pico-primary);
    border-radius: 0.25rem;
    padding: 0.25em 0.5em;
    margin: 0.5em 0.5em 1em 0;
    font-size: 0.8em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* Style for each individual tag */
.tags .tag {
    /* Add any tag-specific styles here */
}

/* Optional: Add a hover effect */
.tags .tag:hover,
button:not([class]):hover {
    background-color: var(--pico-primary-inverse);
    color: var(--pico-primary);
    border-color: var(--pico-primary);
}
button{
    margin: 0.5em 0.5em;
}

/* span + button{ margin-left: 20px; } */

ul {padding-left: 1em;}

/* Navigation styling */
#navigation {
  background-color: transparent;
  border-bottom: none; /* Changed from transparent to none */
}

/* Skip links styling (from your template) */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  z-index: 9999;
  background: var(--pico-primary);
  color: var(--pico-primary-inverse);
  padding: 0.5rem;
  border-radius: var(--pico-border-radius);
  text-decoration: none;
}

.skip-link:focus {
  top: 0.5rem;
}

/* Footer styling */
#zlfooter {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--pico-primary);
  background-color: color-mix(in oklch, var(--pico-background-color), black 5%);
}

/* Search container (if using lunr) */
.search-container {
  margin: 1rem 0;
}

/* 7. BROWSER SUPPORT FALLBACKS */
@supports not (color: color-mix(in oklch, red, blue)) {
  /* Fallback colors for browsers without color-mix support */
  :root {
    --pico-primary-hover: oklch(60% 0.18 210);
    --pico-secondary-hover: oklch(75% 0.07 220);
    --pico-muted-hover: oklch(70% 0.018 250);
  }
  
  [data-theme="dark"] {
    --pico-primary: oklch(70% 0.18 210);
    --pico-primary-hover: oklch(75% 0.18 210);
  }
}

/* 8. PRINT STYLES */
@media print {
  :root {
    --pico-color: #000;
    --pico-background-color: #fff;
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
  }
}