/**
 * Solarized Color Scheme for Dialoog weet raad
 *
 * This file overrides the Monochrome theme colors with the Solarized palette.
 * Based on: https://github.com/altercation/solarized
 *
 * Solarized Base Colors:
 * - Light: warm, easy on the eyes cream background (#fdf6e3)
 * - Dark: deep blue-tinted dark background (#002b36)
 * - Accent colors designed for optimal readability
 */

/* ============================================
   SOLARIZED LIGHT MODE
   ============================================ */
html[data-theme="light"] {
  /* Background colors */
  --color-background: #fdf6e3;              /* base3 - main background */
  --color-background-card: #fdf6e3;         /* base3 - cards */
  --color-background-hover: #eee8d5;        /* base2 - hover states */
  --color-background-overlay: #eee8d5;      /* base2 - overlays */
  --color-background-inline-code: #eee8d5;  /* base2 - code backgrounds */
  --color-background-active: #586e75;       /* base01 - active elements */
  --color-background-mark: #b58900;         /* yellow - highlights */

  /* Text colors */
  --color-text: #657b83;                    /* base00 - primary text */
  --color-text-secondary: #93a1a1;          /* base1 - secondary text */
  --color-text-footer: #93a1a1;             /* base1 - footer text */
  --color-text-mark: #fdf6e3;               /* base3 - text on highlights */
  --color-text-active: #fdf6e3;             /* base3 - active text */
  --color-text-disabled: #93a1a1;           /* base1 - disabled text */

  /* Border colors */
  --color-border: #eee8d5;                  /* base2 - borders */
  --color-border-collapsible-menu: #eee8d5; /* base2 - menu borders */

  /* Interactive elements */
  --color-link: #268bd2;                    /* blue - links */
  --color-header-menu-item-inactive: #93a1a1;     /* base1 */
  --color-header-menu-item-active: #268bd2;       /* blue */
  --color-header-menu-item-in-section: #586e75;   /* base01 */
}

/* ============================================
   SOLARIZED DARK MODE
   ============================================ */
html[data-theme="dark"] {
  /* Background colors */
  --color-background: #002b36;              /* base03 - main background */
  --color-background-card: #073642;         /* base02 - cards */
  --color-background-hover: #073642;        /* base02 - hover states */
  --color-background-overlay: #073642;      /* base02 - overlays */
  --color-background-inline-code: #073642;  /* base02 - code backgrounds */
  --color-background-active: #93a1a1;       /* base1 - active elements */
  --color-background-mark: #b58900;         /* yellow - highlights */

  /* Text colors */
  --color-text: #839496;                    /* base0 - primary text */
  --color-text-secondary: #657b83;          /* base00 - secondary text */
  --color-text-footer: #586e75;             /* base01 - footer text */
  --color-text-mark: #002b36;               /* base03 - text on highlights */
  --color-text-active: #002b36;             /* base03 - active text */
  --color-text-disabled: #586e75;           /* base01 - disabled text */

  /* Border colors */
  --color-border: #073642;                  /* base02 - borders */
  --color-border-collapsible-menu: #073642; /* base02 - menu borders */

  /* Interactive elements */
  --color-link: #268bd2;                    /* blue - links */
  --color-header-menu-item-inactive: #586e75;     /* base01 */
  --color-header-menu-item-active: #268bd2;       /* blue */
  --color-header-menu-item-in-section: #93a1a1;   /* base1 */
}

/* ============================================
   SOLARIZED ACCENT COLORS (Optional)
   Available for future use:
   - Red:     #dc322f
   - Orange:  #cb4b16
   - Yellow:  #b58900 (used for highlights)
   - Green:   #859900
   - Cyan:    #2aa198
   - Blue:    #268bd2 (used for links)
   - Violet:  #6c71c4
   - Magenta: #d33682
   ============================================ */

/* Optional: Add subtle transitions for theme switching */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

html *:not(header) {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Preserve instant transitions for interactive elements */
a, button, input, select, textarea {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* ============================================
   CONTENT CARDS WITH ROUNDED CORNERS
   ============================================ */

/* Main content wrapper - ONE card for all content */
main {
  background-color: #ffffff !important;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 1200px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] main {
  background-color: #073642 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Event/post cards in grid layout */
.postcard-layout {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)) !important;
  gap: 1.5rem !important;
  margin-bottom: 2rem !important;
}

/* Individual event/post cards */
.postcard-item {
  background-color: #fdf6e3 !important;
  border-radius: 8px;
  padding: 1.5rem !important;
  margin-bottom: 0 !important;
  border: 1px solid #eee8d5 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

html[data-theme="dark"] .postcard-item {
  background-color: #002b36 !important;
  border: 1px solid #073642 !important;
}

/* Remove any nested backgrounds */
.content-margin,
article {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Header with solid background - no transition for instant theme switch */
header {
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  transition: none !important;
}

header * {
  transition: none !important;
}

html[data-theme="dark"] header {
  background-color: #073642 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Footer with rounded top corners */
footer {
  background-color: #ffffff;
  border-radius: 12px 12px 0 0;
  padding: 2rem;
  margin-top: 3rem;
}

html[data-theme="dark"] footer {
  background-color: #073642;
}

/* ============================================
   RSVP FORM STYLING
   ============================================ */

.rsvp-container {
  margin: 2rem 0;
  padding: 1.5rem;
  background-color: #fdf6e3;
  border-radius: 8px;
  border: 1px solid #eee8d5;
}

html[data-theme="dark"] .rsvp-container {
  background-color: #073642;
  border-color: #002b36;
}

.rsvp-container h3 {
  margin-top: 0;
  color: #657b83;
}

html[data-theme="dark"] .rsvp-container h3 {
  color: #839496;
}

.rsvp-container form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rsvp-container label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
  color: #657b83;
}

html[data-theme="dark"] .rsvp-container label {
  color: #839496;
}

.rsvp-container input[type="text"],
.rsvp-container input[type="email"],
.rsvp-container select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #93a1a1;
  border-radius: 4px;
  background-color: #ffffff;
  color: #657b83;
  font-family: inherit;
  font-size: 1rem;
}

html[data-theme="dark"] .rsvp-container input[type="text"],
html[data-theme="dark"] .rsvp-container input[type="email"],
html[data-theme="dark"] .rsvp-container select {
  background-color: #002b36;
  border-color: #586e75;
  color: #839496;
}

.rsvp-container input:focus,
.rsvp-container select:focus {
  outline: none;
  border-color: #268bd2;
  box-shadow: 0 0 0 2px rgba(38, 139, 210, 0.1);
}

.rsvp-container button[type="submit"] {
  background-color: #268bd2;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.rsvp-container button[type="submit"]:hover {
  background-color: #2075b4;
}

.rsvp-container button[type="submit"]:active {
  background-color: #186896;
}

.rsvp-info {
  font-size: 0.9rem;
  color: #93a1a1;
}

html[data-theme="dark"] .rsvp-info {
  color: #586e75;
}

.rsvp-info ul {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.rsvp-message {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 4px;
  display: none;
}

.rsvp-message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.rsvp-message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

html[data-theme="dark"] .rsvp-message.success {
  background-color: #1e3a2e;
  color: #9fdfb0;
  border-color: #2d5a3f;
}

html[data-theme="dark"] .rsvp-message.error {
  background-color: #3a1e1e;
  color: #dfb09f;
  border-color: #5a2d2d;
}