/*
 * Org-mode custom CSS for topics.clj
 * Based on Worg's visual identity and color palette
 * https://orgmode.org  —  https://git.sr.ht/~bzg/worg
 *
 * Official color scheme (derived from worg.css):
 * - Teal:         #3d5a50  (Primary heading/accent color)
 * - Deep teal:    #2a3f38  (Darker variant for hover)
 * - Light teal:   #8fbcaa  (Secondary accent, used in dark mode headings)
 * - Warm brown:   #8a6508  (Secondary accent from org-level-2)
 * - Soft red:     #a3425e  (Constants/emphasis accent)
 * - Indigo bg:    #1a1a2e  (Dark mode background from worg)
 *
 * Includes automatic dark mode support via prefers-color-scheme.
 */

:root {
  /* ========================================
     Org-mode Brand Colors (constant)
     ======================================== */
  --org-teal: #3d5a50;
  --org-light-teal: #8fbcaa;
  --org-warm-brown: #8a6508;
  --org-soft-red: #a3425e;
  --org-purple: #a020f0;
  --org-grey: #595959;

  /* Brand gradient (left to right: teal → light-teal → warm-brown → soft-red) */
  --org-gradient: linear-gradient(
    90deg,
    #3d5a50 0%,
    #8fbcaa 40%,
    #8a6508 70%,
    #a3425e 100%
  );

  /* ========================================
     Light Mode Colors (default)
     ======================================== */
  --org-teal-hover: #2a3f38;            /* Darker teal for hover states */
  --org-teal-light: #eaf3ef;            /* Light teal tint for backgrounds */
  --org-brown-light: #faf6ee;           /* Light warm tint */
  --org-grey-light: #f5f5f5;            /* Light grey background */
  --org-grey-dark: #333333;             /* Dark grey for headings */
  --org-text: #444444;                  /* Main text color */
  --org-text-muted: #737373;            /* Muted text */
  --org-border: #dddddd;               /* Default border color */
  --org-border-hover: #bbbbbb;          /* Border on hover */
  --org-bg: #ffffff;                    /* Page background */
  --org-bg-elevated: #ffffff;           /* Card/elevated surface background */
  --org-code-bg: #f2f2f2;              /* Code block background (from worg) */
  --org-shadow: rgba(0, 0, 0, 0.08);   /* Standard shadow */
  --org-shadow-teal: rgba(61, 90, 80, 0.12); /* Brand-tinted shadow */

  /* Override Pico CSS variables */
  --pico-primary: var(--org-teal);
  --pico-primary-hover: var(--org-teal-hover);
  --pico-primary-focus: rgba(61, 90, 80, 0.2);
  --pico-primary-inverse: #ffffff;
  --pico-muted-color: var(--org-text-muted);
  --pico-muted-border-color: var(--org-border);

  /* Typography - Droid font stack matching worg, with system fallbacks */
  --org-font-family: "Droid Serif", Georgia, "Times New Roman", serif;
  --org-font-sans: "Droid Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                   Roboto, "Helvetica Neue", Arial, sans-serif;
  --org-font-mono: "Droid Sans Mono", "SFMono-Regular", Consolas,
                   "Liberation Mono", Menlo, Courier, monospace;

  /* Color scheme hint for browser UI */
  color-scheme: light dark;
}

/* ========================================
   Dark Mode Overrides
   (Indigo-tinted dark theme from worg)
   ======================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Adjusted brand colors for dark mode contrast */
    --org-teal: #8fbcaa;                /* Lighter teal for visibility */
    --org-teal-hover: #a8d4c2;          /* Even lighter for hover */
    --org-teal-light: #1e2d28;          /* Dark teal-tinted background */
    --org-brown-light: #2a2520;         /* Dark warm-tinted background */
    --org-grey-light: #252540;          /* Elevated surface (worg indigo) */
    --org-grey-dark: #e0e0e0;           /* Light text for headings */
    --org-text: #c8c8c8;               /* Main text in dark mode */
    --org-text-muted: #999999;          /* Muted text */
    --org-border: #3a3a55;             /* Border color (indigo-tinted) */
    --org-border-hover: #5a5a75;       /* Border on hover */
    --org-bg: #1a1a2e;                 /* Page background (worg indigo) */
    --org-bg-elevated: #222240;        /* Card background */
    --org-code-bg: #252540;            /* Code block background (from worg) */
    --org-shadow: rgba(0, 0, 0, 0.4);  /* Deeper shadow for dark mode */
    --org-shadow-teal: rgba(143, 188, 170, 0.15); /* Brand shadow in dark */

    /* Pico overrides for dark mode */
    --pico-primary-focus: rgba(143, 188, 170, 0.25);
    --pico-accordion-open-summary-color: #c0c0c0;

    /* Gradient adjusted for dark mode */
    --org-gradient: linear-gradient(
      90deg,
      #8fbcaa 0%,
      #a8d4c2 40%,
      #d4a76a 70%,
      #c9a0dc 100%
    );
  }
}

/* ========================================
   Base Typography & Body
   ======================================== */
body {
  font-family: var(--org-font-sans);
  color: var(--org-text);
  background-color: var(--org-bg);
  line-height: 1.65;
}

/* ========================================
   Links
   (Underline style inspired by worg's text-decoration approach)
   ======================================== */
a {
  color: var(--org-teal);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--org-teal-hover);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--org-teal);
  outline-offset: 2px;
}

/* ========================================
   Header
   ======================================== */
header.container {
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: none;
}

header h1 {
  margin-bottom: 0.5rem;
}

header h1 a {
  color: var(--org-grey-dark);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.15s ease;
}

header h1 a:hover {
  color: var(--org-teal);
  text-decoration: none;
}

header p {
  color: var(--org-text-muted);
  font-size: 1.1rem;
  margin-bottom: 0;
}

/* Signature gradient bar - Org-mode branding element */
header.container::after {
  content: '';
  display: block;
  height: 4px;
  margin-top: 1.5rem;
  background: var(--org-gradient);
  border-radius: 2px;
}

/* ========================================
   Search Input
   ======================================== */
.search-row input[type="search"] {
  border: 1px solid var(--org-border);
  border-radius: 4px;
  background-color: var(--org-bg-elevated);
  color: var(--org-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-row input[type="search"]::placeholder {
  color: var(--org-text-muted);
}

.search-row input[type="search"]:focus {
  border-color: var(--org-teal);
  box-shadow: 0 0 0 3px var(--pico-primary-focus);
  outline: none;
}

/* Clear button */
#clear-search {
  color: var(--org-text-muted);
  border-color: var(--org-border);
  background-color: var(--org-bg-elevated);
  transition: all 0.15s ease;
}

#clear-search:hover {
  color: var(--org-teal);
  border-color: var(--org-teal);
}

/* ========================================
   Headings
   (Teal heading color from worg)
   ======================================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--org-teal);
  font-weight: 600;
}

h2 {
  border-bottom: 1px solid var(--org-border);
  padding-bottom: 0.4rem;
}

/* ========================================
   Category Cards (Grid View)
   ======================================== */
.card {
  border: 1px solid var(--org-border);
  border-radius: 6px;
  background: var(--org-bg-elevated);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  border-color: var(--org-teal);
  box-shadow: 0 6px 20px var(--org-shadow-teal);
  transform: translateY(-2px);
}

.card h2 {
  color: var(--org-teal);
  font-weight: 600;
  border-bottom: none;
  padding-bottom: 0;
  transition: color 0.15s ease;
}

.card:hover h2 {
  color: var(--org-teal-hover);
}

.card p {
  color: var(--org-text-muted);
}

/* ========================================
   Back Link
   ======================================== */
.back-link {
  color: var(--org-teal);
  font-weight: 500;
}

.back-link:hover {
  color: var(--org-teal-hover);
}

/* ========================================
   View Toggle
   ======================================== */
.view-toggle {
  color: var(--org-text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.view-toggle a {
  color: var(--org-teal);
  font-weight: 500;
}

.view-toggle a:hover {
  color: var(--org-teal-hover);
  text-decoration: underline;
}

/* ========================================
   Details/Accordion Styling
   ======================================== */
details {
  border: 1px solid var(--org-border);
  border-radius: 6px;
  background-color: var(--org-bg-elevated);
  margin-bottom: 0.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  padding: .6rem;
}

details:hover {
  border-color: var(--org-border-hover);
}

details[open] {
  border-color: var(--org-teal);
  box-shadow: 0 2px 12px var(--org-shadow-teal);
}

details summary {
  color: var(--org-grey-dark);
  font-weight: 500;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  transition: color 0.15s ease;
}

details summary:hover {
  color: var(--org-teal);
}

details[open] summary {
  color: var(--org-teal);
  border-bottom: 1px solid var(--org-border);
}

/* Permalink icon */
.permalink {
  color: var(--org-grey);
  opacity: 0.5;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.permalink:hover {
  color: var(--org-teal) !important;
  opacity: 1;
}

/* Content inside details */
details > div,
details > p,
details > ul,
details > ol {
  padding: 0.625rem 0.75rem;
}

details p, details ul, details ol {
  color: var(--org-text);
}

details a {
  color: var(--org-teal);
}

details a:hover {
  color: var(--org-teal-hover);
  text-decoration: underline;
}

/* ========================================
   Code Blocks
   (Matching worg's code styling)
   ======================================== */
code {
  font-family: var(--org-font-mono);
  font-size: 0.875em;
  padding: 0.2em 0.4em;
  background-color: var(--org-code-bg);
  border: 1px solid var(--org-border);
  border-radius: 4px;
  color: var(--org-text);
}

pre {
  font-family: var(--org-font-mono);
  background-color: var(--org-code-bg);
  border: 1px solid var(--org-border);
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
}

pre code {
  padding: 0;
  background: none;
  border: none;
  font-size: 0.875rem;
  color: var(--org-grey-dark);
}

details pre,
details code {
  background-color: var(--org-code-bg);
}

/* ========================================
   Syntax Highlighting (from worg)
   ======================================== */
.builtin    { color: #8a5d2e; }
.comment,
.comment-delimiter { color: #636363; }
.constant   { color: #a3425e; }
.doc        { color: #636363; }
.function-name { color: #3a7678; }
.keyword    { color: #4682b4; }
.string     { color: #6e6a3a; }
.variable-name { color: #c0392b; }
.todo       { color: #CA0000; }
.done       { color: #006666; }

@media (prefers-color-scheme: dark) {
  .builtin    { color: #c9a0dc; }
  .comment,
  .comment-delimiter { color: #8b9dc3; }
  .constant   { color: #7ec8ca; }
  .doc        { color: #a0a0a0; }
  .function-name { color: #7ec8ca; }
  .keyword    { color: #7aa2d4; }
  .string     { color: #c9b89a; }
  .variable-name { color: #d4a76a; }
  .todo       { color: #ff6b6b; }
  .done       { color: #4ecdc4; }
}

/* ========================================
   Tables
   ======================================== */
table {
  border-collapse: collapse;
  width: 100%;
}

th {
  background-color: var(--org-teal);
  color: #ffffff;
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
}

td {
  border: 1px solid var(--org-border);
  padding: 0.625rem 1rem;
  background-color: var(--org-bg-elevated);
}

tr:nth-child(even) td {
  background-color: var(--org-grey-light);
}

tr:hover td {
  background-color: var(--org-teal-light);
}

/* Tables inside details */
details table {
  margin: 0;
}

/* ========================================
   Blockquotes
   Using warm-brown accent (secondary color)
   ======================================== */
blockquote {
  border-left: 4px solid var(--org-warm-brown);
  background-color: var(--org-brown-light);
  color: var(--org-text);
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  border-radius: 0 6px 6px 0;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* ========================================
   Footer
   ======================================== */
footer.container {
  border-top: 1px solid var(--org-border);
  padding-top: 1.5rem;
  margin-top: 3rem;
  color: var(--org-text-muted);
  font-size: 0.9rem;
}

footer a {
  color: var(--org-teal);
}

footer a:hover {
  color: var(--org-teal-hover);
}

/* ========================================
   Buttons
   ======================================== */
button,
[type="submit"],
[type="button"] {
  background-color: var(--org-teal);
  border-color: var(--org-teal);
  color: #ffffff;
  border-radius: 4px;
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease;
}

button:hover,
[type="submit"]:hover,
[type="button"]:hover {
  background-color: var(--org-teal-hover);
  border-color: var(--org-teal-hover);
}

button:focus-visible,
[type="submit"]:focus-visible,
[type="button"]:focus-visible {
  box-shadow: 0 0 0 3px var(--pico-primary-focus);
}

/* Secondary/outline buttons */
button.secondary,
button.outline {
  background-color: transparent;
  border: 1px solid var(--org-border);
  color: var(--org-text);
}

button.secondary:hover,
button.outline:hover {
  border-color: var(--org-teal);
  color: var(--org-teal);
  background-color: transparent;
}

/* ========================================
   Accessibility
   ======================================== */
.skip-link {
  background: var(--org-teal);
  color: #ffffff;
  padding: 0.5rem 1rem;
  text-decoration: none;
  font-weight: 500;
}

.skip-link:focus {
  background: var(--org-teal-hover);
}

:focus-visible {
  outline: 2px solid var(--org-teal);
  outline-offset: 2px;
}

/* Selection colors - using brand teal */
::selection {
  background-color: var(--org-teal);
  color: #ffffff;
}

/* ========================================
   Scrollbars (webkit browsers)
   ======================================== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--org-grey-light);
}

::-webkit-scrollbar-thumb {
  background: var(--org-text-muted);
  border-radius: 5px;
  border: 2px solid var(--org-grey-light);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--org-grey);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--org-text-muted) var(--org-grey-light);
}

/* ========================================
   Utility Classes
   ======================================== */

/* Brand gradient text (use sparingly) */
.org-gradient-text {
  background: var(--org-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Brand gradient border */
.org-gradient-border {
  border: none;
  background: var(--org-gradient);
  padding: 2px;
  border-radius: 6px;
}

.org-gradient-border > * {
  background: var(--org-bg-elevated);
  border-radius: 4px;
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
  :root {
    --org-text: #000000;
    --org-grey-dark: #000000;
    --org-bg: #ffffff;
    --org-bg-elevated: #ffffff;
  }

  header.container::after {
    background: #3d5a50;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  a {
    color: #000000;
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666666;
  }

  details {
    border: 1px solid #cccccc;
  }

  details[open] {
    box-shadow: none;
  }

  .card:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ========================================
   Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .card:hover {
    transform: none;
  }
}