/*
Theme Name: Nocturne
Theme URI: https://ilvorn.de
Author: Martin
Description: Nocturne – ein minimalistisches, typografisch elegantes Blog-Theme im Ilvorn-Stil. Dunkel/Hell-Switcher, Fraunces + Geist, sticky Header.
Version: 1.0
License: GNU General Public License v2 or later
Tags: blog, minimal, dark, light, typography
*/

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design Tokens ───────────────────────────────────────────────────────── */
:root {
  --bg:         #0e1016;
  --surface:    #13161d;
  --border:     #1e2230;
  --border2:    #252a38;
  --text:       #c4ccd8;
  --text-dim:   #8590a2;
  --text-faint: #4e5668;
  --accent:     #7b9ea8;
  --accent-hi:  #9dbfcc;
  --sage:       #6b8f71;
  --font-ui:    'Geist', system-ui, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --max-w:      680px;
  --max-wide:   1100px;
  --header-bg:  rgba(14,16,22,.92);
}

[data-theme="light"] {
  --bg:         #f7f4ef;
  --surface:    #fffefb;
  --border:     #e2ddd6;
  --border2:    #cdc8bf;
  --text:       #1e1c18;
  --text-dim:   #6b6258;
  --text-faint: #aaa49a;
  --accent:     #4d7c87;
  --accent-hi:  #3a6470;
  --sage:       #4a7050;
  --header-bg:  rgba(247,244,239,.92);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
html  { scroll-behavior: smooth; }

body {
  background:              var(--bg);
  color:                   var(--text);
  font-family:             var(--font-serif);
  font-size:               18px;
  font-weight:             300;
  line-height:             1.75;
  -webkit-font-smoothing:  antialiased;
}

a { color: inherit; text-decoration: none; }

/* ── Theme toggle ────────────────────────────────────────────────────────── */
.theme-btn {
  background:      transparent;
  border:          1px solid var(--border2);
  border-radius:   6px;
  color:           var(--text-dim);
  cursor:          pointer;
  width:           32px;
  height:          32px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      all .15s;
  flex-shrink:     0;
}
.theme-btn:hover         { background: var(--surface); color: var(--text); }
.theme-btn .icon-sun     { display: none; }
.theme-btn .icon-moon    { display: block; }
[data-theme="light"] .theme-btn .icon-sun  { display: block; }
[data-theme="light"] .theme-btn .icon-moon { display: none; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  border-bottom:          1px solid var(--border);
  position:               sticky;
  top:                    0;
  background:             var(--header-bg);
  backdrop-filter:        blur(12px);
  -webkit-backdrop-filter:blur(12px);
  z-index:                10;
  transition:             background .2s;
}

.header-inner {
  max-width:      var(--max-wide);
  margin:         0 auto;
  padding:        0 32px;
  height:         54px;
  display:        flex;
  align-items:    center;
  justify-content:space-between;
}

.site-logo {
  font-family:   var(--font-serif);
  font-size:     22px;
  font-weight:   300;
  font-style:    italic;
  color:         var(--text);
  letter-spacing:.02em;
  display:       flex;
  align-items:   center;
  gap:           7px;
}

.logo-mark {
  width:        6px;
  height:       6px;
  border-radius:50%;
  background:   var(--accent);
  flex-shrink:  0;
}

.header-nav {
  display:    flex;
  align-items:center;
  gap:        20px;
}

.header-nav a {
  font-family:   var(--font-ui);
  font-size:     13px;
  font-weight:   400;
  color:         var(--text-dim);
  transition:    color .15s;
  letter-spacing:.01em;
}

.header-nav a:hover,
.header-nav a.current-menu-item { color: var(--text); }

/* ── Page container ──────────────────────────────────────────────────────── */
.page {
  max-width: var(--max-wide);
  margin:    0 auto;
  padding:   0 32px;
}

/* ── Post list ───────────────────────────────────────────────────────────── */
.posts-header {
  padding:       64px 0 40px;
  border-bottom: 1px solid var(--border);
}

.posts-header-label {
  font-family:   var(--font-ui);
  font-size:     10.5px;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:         var(--text-faint);
  margin-bottom: 10px;
}

.posts-header h1 {
  font-size:  clamp(28px, 4vw, 40px);
  font-weight:300;
  font-style: italic;
  color:      var(--text);
  line-height:1.2;
}

.posts-header .sub {
  margin-top: 10px;
  font-size:  15px;
  color:      var(--text-dim);
  font-weight:300;
}

.post-feed {}

.feed-item {
  display:              grid;
  grid-template-columns:90px 1fr;
  gap:                  0 32px;
  padding:              32px 0;
  border-bottom:        1px solid var(--border);
}

.feed-item:hover .feed-title { color: var(--accent-hi); }

.feed-date-col {
  padding-top:text-align: right;
  padding-top: 4px;
  text-align:  right;
}

.feed-date {
  font-family:   var(--font-ui);
  font-size:     11px;
  color:         var(--text-faint);
  line-height:   1.4;
  letter-spacing:.02em;
}

.feed-title {
  font-size:    clamp(19px, 2.2vw, 22px);
  font-weight:  400;
  color:        var(--text);
  line-height:  1.35;
  margin-bottom:10px;
  transition:   color .15s;
  display:      block;
}

.feed-excerpt {
  font-size:              15px;
  font-weight:            300;
  color:                  var(--text-dim);
  line-height:            1.7;
  margin-bottom:          14px;
  display:                -webkit-box;
  -webkit-line-clamp:     2;
  -webkit-box-orient:     vertical;
  overflow:               hidden;
}

.feed-meta {
  display:    flex;
  align-items:center;
  gap:        14px;
}

.feed-read-more {
  font-family:   var(--font-ui);
  font-size:     12px;
  color:         var(--accent);
  letter-spacing:.04em;
  display:       flex;
  align-items:   center;
  gap:           5px;
  transition:    gap .2s, color .15s;
}
.feed-read-more:hover { color: var(--accent-hi); gap: 8px; }

.feed-readtime {
  font-family:var(--font-ui);
  font-size:  11.5px;
  color:      var(--text-faint);
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         36px 0 64px;
}

.pag-link {
  font-family:var(--font-ui);
  font-size:  13px;
  color:      var(--text-dim);
  display:    flex;
  align-items:center;
  gap:        6px;
  transition: color .15s;
}
.pag-link:hover   { color: var(--text); }
.pag-link.disabled{ opacity: .3; pointer-events: none; }

.pag-info {
  font-family:var(--font-ui);
  font-size:  12px;
  color:      var(--text-faint);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-feed {
  padding:   100px 0;
  text-align:center;
  color:     var(--text-dim);
}
.empty-feed-mark { font-size: 40px; opacity: .2; margin-bottom: 20px; }
.empty-feed h2   { font-size: 20px; font-weight: 300; margin-bottom: 8px; }
.empty-feed p    { font-size: 15px; color: var(--text-faint); }

/* ── Single post ─────────────────────────────────────────────────────────── */
.post-wrap {
  max-width:var(--max-w);
  margin:   0 auto;
  padding:  60px 0 100px;
}

.post-back {
  display:      inline-flex;
  align-items:  center;
  gap:          7px;
  font-family:  var(--font-ui);
  font-size:    12.5px;
  color:        var(--text-faint);
  margin-bottom:48px;
  transition:   color .15s;
}
.post-back:hover { color: var(--text-dim); }

.post-header { margin-bottom: 48px; }

.post-kicker {
  font-family:   var(--font-ui);
  font-size:     11px;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:         var(--text-faint);
  margin-bottom: 16px;
  display:       flex;
  align-items:   center;
  gap:           14px;
}

.post-kicker-sep {
  width:           20px;
  height:          1px;
  background:      var(--border2);
  display:         inline-block;
}

.post-title {
  font-size:  clamp(28px, 4.5vw, 44px);
  font-weight:300;
  font-style: italic;
  line-height:1.2;
  color:      var(--text);
}

.post-title-rule {
  width:     40px;
  height:    1px;
  background:var(--accent);
  margin:    28px 0;
  opacity:   .6;
}

/* ── Article body ────────────────────────────────────────────────────────── */
.post-body {
  font-size:  18px;
  font-weight:300;
  line-height:1.85;
  color:      var(--text);
}

.post-body p          { margin-bottom: 1.4em; }
.post-body h1,.post-body h2,.post-body h3 {
  font-weight:400;
  font-style: normal;
  line-height:1.3;
  margin:     2em 0 .7em;
  color:      var(--text);
}
.post-body h1 { font-size: 1.6em; }
.post-body h2 { font-size: 1.3em; }
.post-body h3 { font-size: 1.1em; }

.post-body a {
  color:                 var(--accent-hi);
  text-decoration:       underline;
  text-decoration-color: rgba(157,191,204,.35);
  text-underline-offset: 3px;
  transition:            text-decoration-color .15s;
}
.post-body a:hover { text-decoration-color: var(--accent-hi); }

.post-body strong { font-weight: 500; color: var(--text); }
.post-body em     { font-style: italic; }

.post-body code {
  font-family:  'JetBrains Mono','Fira Mono',monospace;
  font-size:    .8em;
  background:   var(--surface);
  border:       1px solid var(--border2);
  padding:      2px 6px;
  border-radius:4px;
  color:        var(--accent-hi);
}

.post-body pre {
  background:   var(--surface);
  border:       1px solid var(--border);
  border-radius:8px;
  padding:      20px;
  overflow-x:   auto;
  margin:       1.6em 0;
  font-size:    .82em;
  line-height:  1.65;
}
.post-body pre code { background: none; border: none; padding: 0; color: var(--text); }

.post-body blockquote {
  border-left: 2px solid var(--accent);
  padding:     6px 0 6px 24px;
  margin:      1.8em 0;
  color:       var(--text-dim);
  font-style:  italic;
}

.post-body ul,
.post-body ol { padding-left: 1.5em; margin-bottom: 1.4em; }
.post-body li  { margin-bottom: .4em; }

.post-body hr {
  border:    none;
  border-top:1px solid var(--border);
  margin:    3em 0;
}

.post-body img {
  max-width:    100%;
  border-radius:6px;
  display:      block;
  margin:       1.6em auto;
  height:       auto;
}

/* ── Post footer ─────────────────────────────────────────────────────────── */
.post-footer {
  margin-top:      64px;
  padding-top:     32px;
  border-top:      1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.post-footer-meta {
  font-family:var(--font-ui);
  font-size:  12px;
  color:      var(--text-faint);
}

.post-footer-back {
  font-family:var(--font-ui);
  font-size:  13px;
  color:      var(--accent);
  display:    flex;
  align-items:center;
  gap:        6px;
  transition: color .15s, gap .2s;
}
.post-footer-back:hover { color: var(--accent-hi); gap: 3px; }

/* ── Page (statisch) ─────────────────────────────────────────────────────── */
.page-kicker {
  font-family:   var(--font-ui);
  font-size:     11px;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:         var(--text-faint);
  margin-bottom: 16px;
}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.not-found {
  max-width: 480px;
  margin:    0 auto;
  padding:   100px 0;
  text-align:center;
}
.not-found h1 { font-size: 80px; font-weight: 300; color: var(--border2); margin-bottom: 16px; }
.not-found p  { font-size: 16px; color: var(--text-dim); margin-bottom: 32px; }
.not-found a  {
  font-family:var(--font-ui);
  font-size:  13px;
  color:      var(--accent);
  display:    inline-flex;
  align-items:center;
  gap:        6px;
}

/* ── Site footer ─────────────────────────────────────────────────────────── */
.site-footer-wrap { border-top: 1px solid var(--border); margin-top: 0; }

.site-footer {
  max-width:       var(--max-wide);
  margin:          0 auto;
  padding:         32px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.footer-copy {
  font-family:var(--font-ui);
  font-size:  12px;
  color:      var(--text-faint);
}

.footer-admin {
  font-family:var(--font-ui);
  font-size:  12px;
  color:      var(--text-faint);
  opacity:    .4;
  transition: opacity .2s;
}
.footer-admin:hover { opacity: 1; }

/* ── Hamburger ────────────────────────────────────────────────────────────── */
.hamburger {
  display:         none;
  background:      none;
  border:          1px solid var(--border2);
  border-radius:   6px;
  color:           var(--text-dim);
  cursor:          pointer;
  width:           32px;
  height:          32px;
  align-items:     center;
  justify-content: center;
  transition:      all .15s;
  flex-shrink:     0;
}
.hamburger:hover { background: var(--surface); color: var(--text); }

/* ── Mobile Menu ─────────────────────────────────────────────────────────── */
.mobile-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.55);
  z-index:    40;
  opacity:    0;
  transition: opacity .25s ease;
}
.mobile-overlay.open {
  display: block;
  opacity: 1;
}

.mobile-menu {
  position:   fixed;
  top:        0;
  right:      0;
  height:     100%;
  width:      280px;
  background: var(--surface);
  border-left:1px solid var(--border);
  z-index:    50;
  display:    flex;
  flex-direction: column;
  transform:  translateX(100%);
  transition: transform .25s ease;
}
.mobile-menu.open { transform: translateX(0); }

.mobile-menu-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 20px 18px;
  border-bottom:   1px solid var(--border);
  flex-shrink:     0;
}

.mobile-menu-logo {
  font-family:   var(--font-serif);
  font-size:     18px;
  font-weight:   300;
  font-style:    italic;
  color:         var(--text);
  display:       flex;
  align-items:   center;
  gap:           7px;
}

.mobile-menu-close {
  background: none;
  border:     none;
  color:      var(--text-mute, var(--text-dim));
  cursor:     pointer;
  padding:    4px;
  display:    flex;
  align-items:center;
  transition: color .15s;
}
.mobile-menu-close:hover { color: var(--text); }

.mobile-menu-nav {
  flex:       1;
  padding:    24px 20px;
  display:    flex;
  flex-direction: column;
  gap:        4px;
  overflow-y: auto;
}

.mobile-menu-nav a {
  font-family:   var(--font-ui);
  font-size:     15px;
  color:         var(--text-dim);
  padding:       10px 12px;
  border-radius: 6px;
  transition:    background .12s, color .12s;
  display:       block;
}
.mobile-menu-nav a:hover,
.mobile-menu-nav a.current-menu-item {
  background: var(--border);
  color:      var(--text);
}

.mobile-menu-footer {
  padding:     20px;
  border-top:  1px solid var(--border);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .header-inner          { padding: 0 18px; }
  .header-nav a:not(.theme-btn) { display: none; }
  .hamburger             { display: flex; }
  .page                  { padding: 0 18px; }
  .site-footer           { padding: 24px 18px; flex-direction: column; gap: 12px; text-align: center; }
  .feed-item             { grid-template-columns: 1fr; gap: 6px; }
  .feed-date-col         { text-align: left; }
  .post-wrap             { padding: 36px 0 60px; }
  .post-footer           { flex-direction: column; gap: 16px; align-items: flex-start; }
}

/* ── Figures & Captions ───────────────────────────────────────────────────── */
.post-body figure,
.wp-block-embed,
.wp-block-image {
  margin: 1.8em 0;
}

.post-body figure img,
.wp-block-image img {
  margin: 0 auto;
}

.wp-element-caption,
figcaption {
  font-family:   var(--font-ui);
  font-size:     12px;
  color:         var(--text-faint);
  text-align:    center;
  margin-top:    10px;
  line-height:   1.5;
  letter-spacing:.01em;
}

.wp-element-caption a,
figcaption a {
  color:          var(--text-faint);
  text-decoration:underline;
  text-decoration-color: var(--border2);
  text-underline-offset: 2px;
  transition:     color .15s, text-decoration-color .15s;
}

.wp-element-caption a:hover,
figcaption a:hover {
  color:                 var(--text-dim);
  text-decoration-color: var(--text-faint);
}

/* ── WordPress Search Block ───────────────────────────────────────────────── */
.wp-block-search__inside-wrapper {
  display:       flex;
  max-width:     520px;
  border:        1px solid var(--border2);
  border-radius: 6px;
  overflow:      hidden;
  transition:    border-color .15s;
}

.wp-block-search__inside-wrapper:focus-within {
  border-color: var(--accent);
}

.wp-block-search .wp-block-search__input {
  flex:          1;
  background:    var(--surface);
  border:        none !important;
  border-radius: 0 !important;
  padding:       10px 16px;
  font-family:   var(--font-ui);
  font-size:     15px;
  color:         var(--text);
  outline:       none;
  box-shadow:    none !important;
  margin:        0 !important;
  width:         100%;
}

.wp-block-search .wp-block-search__input::placeholder {
  color: var(--text-faint);
}

.wp-block-search .wp-block-search__button.wp-element-button {
  background:    var(--accent) !important;
  color:         #eef2f5 !important;
  border:        none !important;
  border-radius: 0 !important;
  padding:       10px 20px !important;
  font-family:   var(--font-ui) !important;
  font-size:     13px !important;
  cursor:        pointer;
  transition:    background .15s;
  white-space:   nowrap;
  margin:        0 !important;
  box-shadow:    none !important;
}

.wp-block-search .wp-block-search__button.wp-element-button:hover {
  background: var(--accent-hi) !important;
}

/* ── Comments ────────────────────────────────────────────────────────────── */
.comments-wrap {
  max-width:  var(--max-w);
  margin:     0 auto;
  padding:    64px 0 100px;
  border-top: 1px solid var(--border);
}

.comments-header {
  margin-bottom: 40px;
}

.comments-count {
  font-family:   var(--font-ui);
  font-size:     10.5px;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:         var(--text-faint);
}

/* Comment list */
.comment-list,
.comment-list ol { list-style: none; padding: 0; margin: 0; }

.comment-item {
  display:       grid;
  grid-template-columns: 40px 1fr;
  gap:           0 16px;
  padding:       28px 0;
  border-bottom: 1px solid var(--border);
}

.comment-item .children {
  grid-column: 2;
  margin-top:  24px;
  padding-left:16px;
  border-left: 1px solid var(--border);
}

.comment-item .children .comment-item {
  border-bottom: none;
  padding:       16px 0;
}

.comment-avatar .avatar {
  width:        40px;
  height:       40px;
  border-radius:50%;
  display:      block;
  border:       1px solid var(--border2);
  filter:       grayscale(20%);
}

.comment-meta {
  display:    flex;
  align-items:center;
  gap:        10px;
  margin-bottom:10px;
  flex-wrap:  wrap;
}

.comment-author {
  font-family:var(--font-ui);
  font-size:  13px;
  font-weight:400;
  color:      var(--text);
}

.comment-author a {
  color:     var(--text);
  transition:color .15s;
}
.comment-author a:hover { color: var(--accent-hi); }

.comment-sep {
  width:     16px;
  height:    1px;
  background:var(--border2);
  display:   inline-block;
}

.comment-time {
  font-family:var(--font-ui);
  font-size:  11px;
  color:      var(--text-faint);
}

.comment-edit a {
  font-family:var(--font-ui);
  font-size:  11px;
  color:      var(--text-faint);
  transition: color .15s;
}
.comment-edit a:hover { color: var(--accent); }

.comment-text {
  font-size:  16px;
  font-weight:300;
  line-height:1.75;
  color:      var(--text);
}

.comment-text p           { margin-bottom: .8em; }
.comment-text p:last-child{ margin-bottom: 0; }

.comment-awaiting {
  font-size:12px;
  color:    var(--text-faint);
  margin-bottom:.6em !important;
}

.comment-reply {
  margin-top: 10px;
}

.comment-reply-link {
  font-family:   var(--font-ui);
  font-size:     12px;
  color:         var(--text-faint);
  letter-spacing:.02em;
  transition:    color .15s;
}
.comment-reply-link:hover { color: var(--accent); }

/* Comment form */
#respond {
  margin-top: 48px;
}

#reply-title {
  font-family:  var(--font-serif);
  font-size:    22px;
  font-weight:  300;
  font-style:   italic;
  color:        var(--text);
  margin-bottom:32px;
}

#reply-title small { margin-left: 12px; }
#reply-title small a {
  font-family:var(--font-ui);
  font-size:  12px;
  font-style: normal;
  color:      var(--text-faint);
  transition: color .15s;
}
#reply-title small a:hover { color: var(--accent); }

.comment-form-field {
  margin-bottom: 20px;
  display:       flex;
  flex-direction:column;
  gap:           7px;
}

.comment-form-field label {
  font-family:var(--font-ui);
  font-size:  11.5px;
  color:      var(--text-dim);
  display:    flex;
  align-items:center;
  gap:        6px;
}

.comment-field-note {
  font-size:  10px;
  color:      var(--text-faint);
  font-style: italic;
}

.required { color: var(--accent); }

.comment-form-field input,
.comment-form-field textarea {
  background:   var(--surface);
  border:       1px solid var(--border2);
  border-radius:6px;
  padding:      10px 14px;
  font-family:  var(--font-ui);
  font-size:    14px;
  color:        var(--text);
  width:        100%;
  transition:   border-color .15s;
  outline:      none;
  resize:       vertical;
}

.comment-form-field input:focus,
.comment-form-field textarea:focus {
  border-color: var(--accent);
}

.comment-form-field input::placeholder,
.comment-form-field textarea::placeholder {
  color: var(--text-faint);
}

.comment-form-submit {
  display:    flex;
  align-items:center;
  gap:        16px;
  margin-top: 8px;
}

.comment-submit {
  background:    var(--accent);
  color:         #0e1016;
  border:        none;
  border-radius: 6px;
  padding:       10px 22px;
  font-family:   var(--font-ui);
  font-size:     13px;
  font-weight:   400;
  cursor:        pointer;
  transition:    background .15s, color .15s;
}
.comment-submit:hover { background: var(--accent-hi); }

[data-theme="light"] .comment-submit { color: #fffefb; }

#cancel-comment-reply-link {
  font-family:var(--font-ui);
  font-size:  12px;
  color:      var(--text-faint);
  transition: color .15s;
}
#cancel-comment-reply-link:hover { color: var(--accent); }

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.feed-item { animation: fadeUp .25s ease both; }
.feed-item:nth-child(1){animation-delay:.04s}
.feed-item:nth-child(2){animation-delay:.08s}
.feed-item:nth-child(3){animation-delay:.12s}
.feed-item:nth-child(4){animation-delay:.16s}
.feed-item:nth-child(5){animation-delay:.20s}

.post-wrap { animation: fadeUp .3s ease both; }