/*
 * Theme Name: Code Unloved
 * Author: Ariane
 * Companion skin for coding.unloved-heart.net — shares that site's own
 * palette, type (Inter / JetBrains Mono), rounded card-and-shadow
 * language, and light/dark toggle, so a guestbook embedded there reads
 * as part of the site rather than as separate "guestbook software".
 */

/* ============================================================
   Lumora Guestbook — Code Unloved Theme
   style.css
   ============================================================ */

/* This theme doesn't load Bootstrap (unlike the default theme, which
   gets box-sizing: border-box for free from Bootstrap's reset) — without
   this, width: 100% form fields add their padding/border on top of that
   100% instead of inside it, overflowing their card. */
* {
  box-sizing: border-box;
}

/* ── Variables ────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  --lum-accent:       #d95d9f;
  --lum-accent-dark:  #c14589;
  --lum-accent-ink:       var(--lum-accent);
  --lum-accent-ink-hover: var(--lum-accent-dark);
  --lum-card-radius:  1rem;
  --lum-gap:          1rem;

  /* Colour-mode-adaptable design tokens (light defaults) */
  --lum-bg:             #fdf8f9;
  --lum-surface:        #ffffff;
  --lum-border:         rgba(90, 50, 90, 0.12);
  --lum-text:           #34263b;
  --lum-muted:          #78697d;
  --lum-head-text:      #34263b;
  --lum-footer-bg:      #fff8fc;
  --lum-footer-border:  rgba(90, 50, 90, 0.12);

  --lum-notice-bg:      rgba(217, 93, 159, .12);
  --lum-notice-text:    #a8447f;
  --lum-error-bg:       #fdecea;
  --lum-error-text:     #7a1f1f;
  --lum-private-bg:     #fff8fc;
  --lum-private-text:   #78697d;
  --lum-reply-bg:       rgba(217, 93, 159, .08);
  --lum-pending-badge:  #d95d9f;

  --lum-focus-ring: #d95d9f;

  /* Theme-local tokens (not part of the shared --lum- vocabulary, but
     kept as variables for the same reason: change the palette in one
     place). */
  --cu-bg-accent: #fff3f8;
  --cu-accent-soft: #f7b4d5;
  --cu-shadow: 0 8px 30px rgba(130, 100, 130, 0.08);
}

/* ── Dark mode overrides ──────────────────────────────────── */
html[data-bs-theme="dark"] {
  color-scheme: dark;

  --lum-bg:             #151019;
  --lum-surface:        #221928;
  --lum-border:         rgba(255, 255, 255, 0.08);
  --lum-text:           #f3edf7;
  --lum-muted:          #b8a8c1;
  --lum-head-text:      #f3edf7;
  --lum-footer-bg:      #2f2337;
  --lum-footer-border:  rgba(255, 255, 255, 0.08);

  --lum-notice-bg:      rgba(255, 141, 199, .14);
  --lum-notice-text:    #ffc4e1;
  --lum-error-bg:       #3a1f1f;
  --lum-error-text:     #f5b5b5;
  --lum-private-bg:     #2f2337;
  --lum-private-text:   #b8a8c1;
  --lum-reply-bg:       rgba(255, 141, 199, .10);
  --lum-pending-badge:  #ff8dc7;

  --lum-accent-ink:       #ff8dc7;
  --lum-accent-ink-hover: #ffc4e1;
  --lum-focus-ring:       #ff8dc7;

  --cu-bg-accent: #2c1634;
  --cu-accent-soft: #ffc4e1;
  --cu-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

html.lum-theme-transition,
html.lum-theme-transition *,
html.lum-theme-transition *::before,
html.lum-theme-transition *::after {
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease !important;
}

/* ============================================================
   Accessibility — keyboard focus visibility
   ============================================================ */
.cu-body a:focus-visible,
.cu-body button:focus-visible,
.cu-body input:focus-visible,
.cu-body textarea:focus-visible,
.cu-body select:focus-visible {
  outline: 3px solid var(--lum-focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   Base
   ============================================================ */
.cu-body {
  background:
    radial-gradient(circle at top, var(--cu-bg-accent) 0%, var(--lum-bg) 60%)
    fixed;
  color: var(--lum-text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}

/* ── Subtle texture (matches the parent site's own header/body noise) ── */
.cu-noise {
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.3) 0,
      rgba(255,255,255,.3) 1px,
      transparent 1px,
      transparent 2px
    );
  inset: 0;
  opacity: .025;
  pointer-events: none;
  position: fixed;
}

/* ── Header ───────────────────────────────────────────────── */
.cu-header {
  margin: 0 auto;
  max-width: 1100px;
  padding: 2rem;
}

.cu-header-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.cu-logo {
  align-items: center;
  color: var(--lum-text);
  display: flex;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1rem;
  font-weight: 600;
  gap: .5rem;
  text-decoration: none;
}

.cu-logo:hover {
  color: var(--lum-accent-ink);
}

.cu-logo-heart {
  color: var(--lum-accent-ink);
}

.cu-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.cu-nav a {
  color: var(--lum-muted);
  text-decoration: none;
  transition: color .2s ease;
}

.cu-nav a:hover {
  color: var(--lum-accent-ink);
}

.cu-header-actions {
  align-items: center;
  display: flex;
}

/* ── Colour mode toggle ───────────────────────────────────── */
.lum-color-mode-toggle {
  background: var(--lum-surface);
  border: 1px solid var(--lum-border);
  border-radius: 999px;
  color: var(--lum-text);
  cursor: pointer;
  font-size: 1.05rem;
  height: 2.5rem;
  transition: border-color .2s ease, transform .2s ease;
  width: 2.5rem;
}

.lum-color-mode-toggle:hover {
  border-color: var(--lum-accent-ink);
  transform: translateY(-1px);
}

/* ── Main / eyebrow ───────────────────────────────────────── */
.cu-main {
  margin: 0 auto;
  max-width: 760px;
  padding: 2rem 1.5rem 4rem;
}

.cu-eyebrow {
  color: var(--lum-accent-ink);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 2px;
  margin: 0 0 .5rem;
  text-transform: uppercase;
}

.cu-tagline {
  color: var(--lum-muted);
  font-size: 1.05rem;
  margin: 0 0 2rem;
}

/* ── Footer ───────────────────────────────────────────────── */
.cu-footer {
  color: var(--lum-muted);
  font-size: .85rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

.cu-footer-hearts {
  color: var(--cu-accent-soft);
  letter-spacing: 10px;
  margin: 0 0 1rem;
}

.lum-powered-by {
  margin: 0;
}

.lum-powered-by a {
  color: var(--lum-accent-ink);
}

/* ============================================================
   Notices & alerts
   ============================================================ */
.lum-notice {
  background: var(--lum-notice-bg);
  border-radius: var(--lum-card-radius);
  color: var(--lum-notice-text);
  font-weight: 600;
  margin-bottom: var(--lum-gap);
  padding: .75rem 1rem;
}

.lum-alert {
  border-radius: var(--lum-card-radius);
  margin-bottom: var(--lum-gap);
  padding: .75rem 1rem;
}

.lum-alert-error {
  background: var(--lum-error-bg);
  color: var(--lum-error-text);
}

.lum-alert ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* ============================================================
   Sign form — styled as a "card", matching the parent site's
   .card component (surface, border, shadow).
   ============================================================ */
.lum-sign-form {
  background: var(--lum-surface);
  border: 1px solid var(--lum-border);
  border-radius: var(--lum-card-radius);
  box-shadow: var(--cu-shadow);
  margin-bottom: 2rem;
  padding: 1.5rem;
}

.lum-form-row {
  margin-bottom: 1.1rem;
}

.lum-form-row label {
  color: var(--lum-head-text);
  display: block;
  font-weight: 600;
  margin-bottom: .35rem;
}

.lum-optional {
  color: var(--lum-muted);
  font-size: .85rem;
  font-weight: 400;
}

.lum-form-row input[type="text"],
.lum-form-row input[type="email"],
.lum-form-row input[type="url"],
.lum-form-row textarea {
  background: var(--lum-bg);
  border: 1px solid var(--lum-border);
  border-radius: .6rem;
  color: var(--lum-text);
  font: inherit;
  padding: .6rem .75rem;
  transition: border-color .2s ease;
  width: 100%;
}

.lum-form-row input:focus,
.lum-form-row textarea:focus {
  border-color: var(--lum-accent-ink);
  outline: none;
}

.lum-form-row textarea {
  min-height: 7rem;
  resize: vertical;
}

.lum-form-row-checkbox label {
  align-items: center;
  display: flex;
  font-weight: 400;
  gap: .5rem;
}

.lum-form-actions {
  margin-top: 1.4rem;
}

/* Honeypot: visually and layout-hidden from sighted visitors, but left
   reachable in the tab order and DOM for assistive tech, so this remains
   a bot trap rather than an accessibility trap. */
.lum-honeypot {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ── Buttons ──────────────────────────────────────────────── */
.lum-button {
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  font-weight: 700;
  padding: .7rem 1.5rem;
  text-decoration: none;
  transition: transform .2s ease;
}

.lum-button-primary {
  background: var(--lum-accent);
  color: #fff;
}

.lum-button-primary:hover {
  transform: translateY(-2px);
}

html[data-bs-theme="dark"] .lum-button-primary {
  color: #1a111e;
}

/* ============================================================
   Entries
   ============================================================ */
.lum-no-entries {
  color: var(--lum-muted);
  padding: 2rem 0;
  text-align: center;
}

.lum-entries {
  display: flex;
  flex-direction: column;
  gap: var(--lum-gap);
}

.lum-entry {
  background: var(--lum-surface);
  border: 1px solid var(--lum-border);
  border-radius: var(--lum-card-radius);
  box-shadow: var(--cu-shadow);
  padding: 1.25rem 1.4rem;
  transition: transform .2s ease;
}

.lum-entry:hover {
  transform: translateY(-2px);
}

.lum-entry-header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-bottom: .5rem;
}

.lum-entry-name {
  color: var(--lum-head-text);
  font-weight: 700;
}

.lum-entry-website,
.lum-entry-email {
  color: var(--lum-accent-ink);
  font-size: .9rem;
  text-decoration: none;
  word-break: break-word;
}

.lum-entry-website:hover,
.lum-entry-email:hover {
  color: var(--lum-accent-ink-hover);
}

.lum-entry-date {
  color: var(--lum-muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .8rem;
  margin-left: auto;
}

.lum-entry-message {
  margin: 0;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

/* ── Private-entry placeholder ────────────────────────────── */
.lum-entry-private {
  background: var(--lum-private-bg);
}

.lum-entry-private-notice {
  color: var(--lum-private-text);
  font-style: italic;
  margin: 0;
}

/* ── Admin reply display ──────────────────────────────────── */
.lum-entry-reply {
  background: var(--lum-reply-bg);
  border-radius: .6rem;
  font-size: .95rem;
  margin-top: .85rem;
  padding: .65rem .85rem;
}

.lum-entry-reply-label {
  color: var(--lum-accent-ink);
  font-weight: 700;
  margin-right: .3rem;
}

/* ============================================================
   Pagination
   ============================================================ */
.lum-pagination {
  margin-top: 2rem;
}

.lum-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lum-pagination a,
.lum-pagination .lum-page-current {
  border: 1px solid var(--lum-border);
  border-radius: 999px;
  color: var(--lum-text);
  display: inline-block;
  min-width: 2.4rem;
  padding: .4rem .6rem;
  text-align: center;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}

.lum-pagination a:hover {
  border-color: var(--lum-accent-ink);
  color: var(--lum-accent-ink);
  transform: translateY(-1px);
}

.lum-pagination .lum-page-current {
  background: var(--lum-accent);
  border-color: var(--lum-accent);
  color: #fff;
  font-weight: 700;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 800px) {
  .cu-header-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .cu-nav {
    gap: 1rem;
  }
}

@media (max-width: 576px) {
  .cu-header {
    padding-top: 1.5rem;
  }

  .cu-main {
    padding-top: 1.5rem;
  }

  .lum-entry-date {
    flex-basis: 100%;
    margin-left: 0;
  }

  .lum-sign-form,
  .lum-entry {
    padding: 1.1rem;
  }
}

@media (max-width: 500px) {
  .cu-nav {
    flex-direction: column;
    gap: .5rem;
  }
}