/* ==========================================================================
   Book of Shadows — spellbook.css (CLEAN + POLISHED)

   Load on blog templates via:
     {% block extra_css %}
       <link rel="stylesheet" href="{% static 'blog/css/spellbook.css' %}">
     {% endblock %}

   Notes:
   - Keeps the site’s dark atmosphere while rendering the “pages” as parchment.
   - Styles MarkdownX editor + preview.
   - Adds figure/caption helpers for inserted images.
   ========================================================================== */

:root{
  /* Parchment + Ink */
  --paper: hsl(42 45% 90%);    /* slightly darker for contrast */
  --paper-2: hsl(42 35% 86%);
  --paper-3: hsl(42 25% 82%);
  --ink: hsl(255 22% 16%);
  --ink-soft: hsla(255 22% 16% / .72);

  /* Cover / Leather — now deep navy to match the site */
  --leather: hsl(218 40% 14%);
  --leather-2: hsl(218 46% 9%);
  --gild: hsl(41 73% 67%);

  /* Shadows / edges */
  --soft-shadow: 0 22px 70px rgba(0,0,0,.40);

  /* Prose */
  --prose: rgba(0,0,0,.84);
  --prose-muted: rgba(0,0,0,.62);
  --prose-rule: rgba(0,0,0,.14);

  /* Buttons on parchment — cyan → violet to echo the site accents */
  --btn-primary-a: #38bdf8;
  --btn-primary-b: #6d5cf0;
}

/* --------------------------------------------------------------------------
   Navbar helper (LOGOUT is now a <button>, not an <a>)
   This file loads on blog pages, so it can patch nav consistency there.
   -------------------------------------------------------------------------- */

.navbar button.nav-link{
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.navbar button.nav-link:hover{
  text-decoration: underline; /* match your hover vibe */
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Spellbook shell (outer case)
   -------------------------------------------------------------------------- */

.spellbook{
  position: relative;
  border-radius: 22px;
  padding: 18px;
  background:
    radial-gradient(1200px 420px at 20% 0%, rgba(139,124,240,.10), transparent 60%),
    radial-gradient(900px 360px at 80% 100%, rgba(217,184,92,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
  overflow: hidden;
}

.spellbook::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px 260px at 50% 20%, transparent, rgba(0,0,0,.28));
}

.spellbook-inner{
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Cover header (title plaque)
   -------------------------------------------------------------------------- */

.spellbook-header{ margin-bottom: 18px; }

.spellbook-cover{
  position: relative;
  border-radius: 18px;
  padding: 26px 18px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), transparent),
    radial-gradient(900px 300px at 30% 0%, rgba(139,124,240,.18), transparent 60%),
    radial-gradient(700px 300px at 70% 100%, rgba(217,184,92,.12), transparent 55%),
    linear-gradient(135deg, var(--leather), var(--leather-2));
  border: 1px solid rgba(217,184,92,.22);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  overflow: hidden;
}

.spellbook-cover::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background:
    repeating-linear-gradient(12deg,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 2px,
      transparent 2px,
      transparent 7px
    );
  mix-blend-mode: overlay;
}

.cover-ornament{
  position:absolute;
  inset: 14px;
  border-radius: 14px;
  border: 1px solid rgba(217,184,92,.30);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.15);
  pointer-events:none;
}

.cover-title{
  position: relative;
  text-align: center;
}

.cover-name{
  font-family: var(--font-display);
  letter-spacing: .08em;
  font-size: clamp(22px, 2.6vw, 32px);
  margin-top: 6px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

.cover-sub{
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.70);
}

/* --------------------------------------------------------------------------
   Pages (parchment sheet)
   -------------------------------------------------------------------------- */

.spellbook-pages{
  position: relative;
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  box-shadow: var(--soft-shadow);

  /* Text should read like ink on paper */
  color: #1f1b16;
}

/* parchment */
.spellbook-pages::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 320px at 0% 0%, rgba(0,0,0,.08), transparent 60%),
    radial-gradient(700px 280px at 100% 100%, rgba(0,0,0,.07), transparent 55%),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  opacity: .97;
}

/* subtle paper grain */
.spellbook-pages::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: .35;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.018) 0px,
      rgba(0,0,0,.018) 1px,
      transparent 1px,
      transparent 6px
    ),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.012) 0px,
      rgba(0,0,0,.012) 1px,
      transparent 1px,
      transparent 7px
    );
  mix-blend-mode: multiply;
}

/* ensure content sits above ::before/::after */
.spellbook-pages > *{
  position: relative;
  z-index: 1;
}

/* Improve readability for common text elements */
.spellbook-pages p,
.spellbook-pages li,
.spellbook-pages div{
  color: #2a241e;
}

.spellbook-pages .muted{
  font-size: 13px;
  color: rgba(0,0,0,.58);
}

.spellbook-pages hr{
  border: 0;
  height: 1px;
  background: rgba(0,0,0,.12);
}

/* --------------------------------------------------------------------------
   Form styling
   -------------------------------------------------------------------------- */

.spellbook-pages form{
  max-width: 860px;
  margin: 0 auto;
}

.spellbook-pages .field{
  margin-bottom: 24px;
}

.spellbook-pages label{
  display:block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  letter-spacing: .08em;
  font-size: 13px;
  text-transform: uppercase;
  color: rgba(0,0,0,.72);
}

/* IMPORTANT: include password/email/etc so login dots are visible */
.spellbook-pages input[type="text"],
.spellbook-pages input[type="password"],
.spellbook-pages input[type="email"],
.spellbook-pages input[type="url"],
.spellbook-pages textarea,
.spellbook-pages select{
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(0,0,0,.14);
  color: rgba(0,0,0,.90); /* makes password bullets visible */
  font-size: 16px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.spellbook-pages textarea{
  min-height: 260px;
  line-height: 1.7;
  resize: vertical;
}

.spellbook-pages input:focus,
.spellbook-pages textarea:focus,
.spellbook-pages select:focus{
  outline:none;
  border-color: rgba(130,94,10,.55);
  box-shadow: 0 0 0 3px rgba(217,184,92,.24);
  background: rgba(255,255,255,.78);
}

.spellbook-pages input::placeholder,
.spellbook-pages textarea::placeholder{
  color: rgba(0,0,0,.44);
}

.spellbook-pages input[type="file"]{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.56);
  border: 1px dashed rgba(0,0,0,.18);
  font-size: 14px;
}

.spellbook-pages select{
  max-width: 260px;
  cursor: pointer;
}

.spellbook-pages .err{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(170,0,0,.88);
}

/* save action row */
.spellbook-pages .pager{
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px dashed rgba(0,0,0,.18);
}

/* Buttons on parchment */
.spellbook-pages .btn{
  font-weight: 650;
}

.spellbook-pages .btn-primary{
  padding: 14px 26px;
  border-radius: 999px;
  letter-spacing: .06em;
  background: linear-gradient(135deg, var(--btn-primary-a), var(--btn-primary-b));
  color: #fff;
  box-shadow: 0 10px 22px rgba(109, 92, 240, 0.30);
}

.spellbook-pages .btn-ghost{
  color: #2a241e;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.45);
}

.spellbook-pages .btn-ghost:hover{
  background: rgba(0, 0, 0, 0.05);
}

.spellbook-pages .btn-danger{
  background: #9e2b2b;
  color: #fff;
}

/* --------------------------------------------------------------------------
   MarkdownX editor layout
   -------------------------------------------------------------------------- */

.spellbook-pages .markdownx{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px){
  .spellbook-pages .markdownx{
    grid-template-columns: 1fr;
  }
}

.spellbook-pages .markdownx-editor textarea{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 15px;
  background: rgba(255,255,255,.74);
}

.spellbook-pages .markdownx-preview{
  border-radius: 14px;
  border: 1px dashed rgba(0,0,0,.18);
  padding: 16px;
  background: rgba(255,255,255,.74);
  color: var(--prose);
  overflow: auto;
  max-height: 560px;
}

/* --------------------------------------------------------------------------
   Insert Image toolbar (single source of truth)
   -------------------------------------------------------------------------- */

.spellbook-pages .md-toolbar{
  display:flex;
  align-items:center;
  gap: 12px;
  margin: 10px 0 12px;
}

/* Force by ID (avoids .btn overrides from site.css) */
.spellbook-pages #md-insert-image-btn{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.18);
  color: rgba(0,0,0,.78);

  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;

  cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}

.spellbook-pages #md-insert-image-btn:hover{
  background: rgba(0,0,0,.26);
  border-color: rgba(0,0,0,.24);
  transform: translateY(-1px);
}

.spellbook-pages #md-insert-image-btn:active{
  transform: translateY(0px);
}

.spellbook-pages #md-upload-status{
  font-size: 13px;
  letter-spacing: .02em;
  user-select: none;
  color: rgba(0,0,0,.62);
}

.spellbook-pages #md-upload-status[data-state="error"]{
  color: rgba(170, 0, 0, .90);
}

/* --------------------------------------------------------------------------
   Prose (rendered Markdown) — use on detail pages
   -------------------------------------------------------------------------- */

.prose,
.spellbook-prose{
  color: var(--prose);
  line-height: 1.78;
  font-size: 16px;
}

.prose p{ margin: 0 0 16px; }

.prose h1,
.prose h2,
.prose h3{
  font-family: var(--font-display);
  letter-spacing: .03em;
  margin: 28px 0 10px;
  color: rgba(0,0,0,.86);
}

.prose h1{ font-size: 30px; }
.prose h2{ font-size: 24px; }
.prose h3{ font-size: 19px; }

.prose hr{
  border: 0;
  height: 1px;
  background: var(--prose-rule);
  margin: 26px 0;
}

.prose a{
  color: rgba(79, 70, 229, .95);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.prose blockquote{
  margin: 22px 0;
  padding: 14px 16px;
  border-left: 4px solid rgba(217,184,92,.55);
  background: rgba(255,255,255,.60);
  border-radius: 12px;
  color: var(--ink-soft);
}

.prose code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.10);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: .95em;
}

.prose pre{
  background: rgba(15,12,25,.92);
  color: rgba(255,255,255,.90);
  padding: 14px 16px;
  border-radius: 14px;
  overflow: auto;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
}

.prose pre code{
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

.prose ul,
.prose ol{
  margin: 0 0 18px 22px;
}

.prose li{ margin: 8px 0; }

.prose table{
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  overflow: hidden;
}

.prose th,
.prose td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.10);
  text-align: left;
}

.prose th{
  font-family: var(--font-display);
  letter-spacing: .04em;
  font-size: 13px;
  text-transform: uppercase;
  color: rgba(0,0,0,.74);
  background: rgba(255,255,255,.45);
}

/* images in prose */
.spellbook-prose img,
.prose img{
  max-width: 100%;
  display: block;
  margin: 28px auto;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

/* Captioned figure block (HTML inserted into Markdown) */
.spell-figure{
  margin: 36px auto;
  text-align: center;
}

.spell-figure img{
  max-width: 100%;
  border-radius: 16px;
  box-shadow: 0 22px 50px rgba(0,0,0,.28);
}

.spell-figure figcaption{
  margin-top: 10px;
  font-size: 14px;
  color: rgba(0,0,0,.62);
  font-style: italic;
}

/* Optional gallery helper */
.spell-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 32px 0;
}

.spell-gallery img{
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}