/* ==========================================================
   nikki.css — Scoped to nikki pages
   - Nikki-only layout (no Velvet chrome)
   - Twitter-style media ratios for 2–4 images
   - FIX: single-image posts show full vertical (no crop),
          width stays fixed to the card
   - Media tab grid stays square thumbs
   - Lightbox + jump-to-page popover
   - Hellfire theme + falling particles (only in hellfire)
   ========================================================== */

/* Scope: only nikki archive + nikki tag + nikki single */
body.post-type-archive-nikki,
body.tax-nikki_tag,
body.single-nikki{
  background:#f0f0f0;
  color:#222;
  font-family:Arial, sans-serif;
  font-size:14px;
  margin:0;
  padding:0;

  background-image:url("images/wallpaperdreambbq.jpg");
  background-attachment:fixed;
  background-size:cover;
  background-position:center;
}

/* Links */
body.post-type-archive-nikki a,
body.tax-nikki_tag a,
body.single-nikki a{
  color:#0066cc;
  text-decoration:none;
}
body.post-type-archive-nikki a:hover,
body.tax-nikki_tag a:hover,
body.single-nikki a:hover{
  text-decoration:underline;
}

/* Hide Velvet theme chrome on nikki pages */
body.post-type-archive-nikki #header,
body.tax-nikki_tag #header,
body.single-nikki #header,
body.post-type-archive-nikki #footer,
body.tax-nikki_tag #footer,
body.single-nikki #footer,
body.post-type-archive-nikki .site-header,
body.tax-nikki_tag .site-header,
body.single-nikki .site-header,
body.post-type-archive-nikki .site-footer,
body.tax-nikki_tag .site-footer,
body.single-nikki .site-footer{
  display:none !important;
}

/* Kill theme layout constraints so our box can be centered cleanly */
body.post-type-archive-nikki #layout,
body.tax-nikki_tag #layout,
body.single-nikki #layout,
body.post-type-archive-nikki #content,
body.tax-nikki_tag #content,
body.single-nikki #content,
body.post-type-archive-nikki #main,
body.tax-nikki_tag #main,
body.single-nikki #main{
  max-width:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:0 !important;
}

/* ==========================================================
   Layout box
   ========================================================== */

#nikki-layout{
  max-width:680px;
  margin:20px auto;
  background:#fff;
  border:1px solid #ccc;
  box-shadow:0 0 5px rgba(0,0,0,0.1);
  padding:15px;

  display:flex;
  flex-direction:row;
  gap:15px;

  border-radius:0;
  position:relative;
  z-index:1;

  overflow:visible; /* keep sticky working */
}

/* Sidebar */
.nikki-sidebar{
  width:186px;
  flex:0 0 186px;
  font-size:13px;

  position:sticky;
  top:20px;
  align-self:flex-start;
  height:fit-content;
}

.nikki-box{
  margin-bottom:15px;
  padding:5px;
  background:#f7f7f7;
  border:1px solid #ddd;
  border-radius:0;
}

.nikki-head{
  padding:15px;
  background:#eee;
  border:1px solid #ddd;
  border-radius:0;
}

.nikki-sidebar-title{
  margin:0;
  font-size:24px;
  font-weight:bold;
  color:#333;
}

.mini-archive-subtitle{
  margin-top:6px;
  font-size:12px;
  color:#555;
}

.nikki-nav-list{
  list-style:none;
  padding:0;
  margin:0;
}
.nikki-nav-item{ margin-bottom:5px; }

/* Main column */
.nikki-main{
  flex:1;
  min-width:0;
  padding-right:0;
}

/* Post card (fill main column) */
.nikki-item .mini-inner{
  width:100%;
  box-sizing:border-box;

  border:1px solid #ddd;
  margin-bottom:12px;
  padding:12px 14px;
  background:#fafafa;
  border-radius:0;

  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Footer sits at bottom when there’s extra text */
.nikki-item .mini-footer{
  margin-top:auto;
}

/* ==========================================================
   Twitter-style media ratios (2–4) + clean wrappers
   ========================================================== */

:root{
  --tw-gap:2px;        /* seams between tiles */
  --tw-bg:#fff;        /* container bed */
  --tw-border:#ddd;    /* container border */
}

/* Media container */
.mini-media-top{
  display:grid;
  gap:var(--tw-gap);
  background:var(--tw-bg);
  border:1px solid var(--tw-border);
  padding:0;
  margin:0 0 8px;
  border-radius:0;
  overflow:hidden;

  line-height:0;
  font-size:0;
}

/* Hide empty media container so its border doesn't show on text-only posts */
.mini-media-top:empty{
  display:none !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* If whitespace/newlines prevent :empty from matching, use :has (modern browsers) */
.mini-media-top:not(:has(*)){
  display:none !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* Tile children */
.mini-media-top > *{
  position:relative;
  overflow:hidden;
  background:transparent !important;
  border-radius:0;
  min-width:0;

  margin:0 !important;
  padding:0 !important;
  line-height:0;
  font-size:0;

  /* Default tile: 1 tile used to be 16:9, but single-tile is overridden below */
  aspect-ratio:16 / 9;
}

/* If a tile is a link/wrapper, make it a true box and stretch */
.mini-media-top > a,
.mini-media-top > * > a{
  display:block;
  width:100%;
  height:100%;
  margin:0 !important;
  padding:0 !important;
  line-height:0;
}

/* Neutralize wrapper spacing */
.mini-media-top figure,
.mini-media-top p{
  margin:0 !important;
  padding:0 !important;
}

/* 2 tiles: 8:9 + 8:9 */
.mini-media-top:has(> :nth-child(2)):not(:has(> :nth-child(3))){
  grid-template-columns:repeat(2, 1fr);
}
.mini-media-top:has(> :nth-child(2)):not(:has(> :nth-child(3))) > *{
  aspect-ratio:8 / 9;
}

/* 3 tiles: left = 8:9 spanning, right = two 16:9 stacked */
.mini-media-top:has(> :nth-child(3)):not(:has(> :nth-child(4))){
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
}
.mini-media-top:has(> :nth-child(3)):not(:has(> :nth-child(4))) > :nth-child(1){
  grid-row:1 / span 2;
  aspect-ratio:8 / 9;
}
.mini-media-top:has(> :nth-child(3)):not(:has(> :nth-child(4))) > :nth-child(2),
.mini-media-top:has(> :nth-child(3)):not(:has(> :nth-child(4))) > :nth-child(3){
  aspect-ratio:16 / 9;
}

/* 4 tiles: 2x2, each 16:9 */
.mini-media-top:has(> :nth-child(4)):not(:has(> :nth-child(5))){
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:repeat(2, 1fr);
}
.mini-media-top:has(> :nth-child(4)):not(:has(> :nth-child(5))) > *{
  aspect-ratio:16 / 9;
}

/* >4 fallback */
.mini-media-top:has(> :nth-child(5)){
  grid-template-columns:repeat(3, 1fr);
}
.mini-media-top:has(> :nth-child(5)) > *{
  aspect-ratio:1 / 1;
}

/* Media fill (general: tiles are fixed boxes) */
.mini-media-top img,
.mini-media-top video,
.mini-media-top .mini-video-el,
.mini-media-top > img,
.mini-media-top > video,
.mini-media-top > a > img,
.mini-media-top > a > video,
.mini-media-top > * img,
.mini-media-top > * video{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0;
  line-height:0;
}

/* Video wrapper behaves like tile */
.mini-media-top .mini-video{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  overflow:hidden;
  background:transparent !important;
  border-radius:0;
  margin:0 !important;
  padding:0 !important;
  line-height:0;
}

/* ==========================================================
   FIX: Single-image posts show full vertical (no crop)
   - width remains fixed to card/container
   - height expands naturally
   - uses :has() (modern browsers)
   ========================================================== */

/* exactly 1 tile */
.mini-media-top:not(:has(> :nth-child(2))){
  display:block; /* stop grid enforcing a fixed tile box */
  background:var(--tw-bg);
  border:1px solid var(--tw-border);
  overflow:hidden;
}

/* remove forced 16:9 tile box */
.mini-media-top:not(:has(> :nth-child(2))) > *{
  aspect-ratio:auto !important;
}

/* make the single link behave like a normal block */
.mini-media-top:not(:has(> :nth-child(2))) > a{
  display:block;
  width:100%;
  height:auto;
}

/* critical overrides: stop cover-cropping + stop height:100% */
.mini-media-top:not(:has(> :nth-child(2))) img,
.mini-media-top:not(:has(> :nth-child(2))) video,
.mini-media-top:not(:has(> :nth-child(2))) .mini-video-el,
.mini-media-top:not(:has(> :nth-child(2))) > a > img,
.mini-media-top:not(:has(> :nth-child(2))) > a > video{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important; /* show entire image */
  object-position:center;
  display:block;
}

/* ==========================================================
   Post text
   ========================================================== */

.mini-caption{
  font-size:14px;
  line-height:1.5;
}
.mini-caption p{ margin:0 0 0.85em; }

.mini-footer{
  font-size:12px;
  color:#555;
}

.mini-tags{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.mini-tag{
  font-weight:bold;
  color:#0066cc;
}

/* ==========================================================
   Pagination
   ========================================================== */

.mini-pagination{
  text-align:center;
  font-size:12px;
  margin:10px 0 0;
}
.mini-pagination .page-numbers{
  display:inline-block;
  padding:2px 6px;
  margin:0 2px;
  border:1px solid #ccc;
  background:#fff;
  color:#0066cc;
  border-radius:0;
}
.mini-pagination .current{
  background:#cce5ff;
  border-color:#99cfff;
  color:#003d80;
}
.mini-pagination .disabled{ opacity:.5; }

/* Narrower "…" button */
.mini-pagination .page-numbers.dots{
  min-width:14px;
  padding:0 2px;
  text-align:center;
}

/* Hide empty pagination box */
.nikki-sidebar-pages:has(:empty){ display:none; }

/* ==========================================================
   Remove stubborn top line on text-only posts (hr etc.)
   ========================================================== */

.post-type-archive-miniblog .mini-inner hr,
.tax-mini_tag .mini-inner hr,
.post-type-archive-nikki .mini-inner hr,
body.tax-nikki_tag .mini-inner hr,
body.single-nikki .mini-inner hr{
  display:none !important;
  height:0 !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
}

.post-type-archive-miniblog .mini-inner::before,
.post-type-archive-miniblog .mini-inner::after,
.post-type-archive-miniblog .mini-content::before,
.post-type-archive-miniblog .mini-content::after,
.post-type-archive-miniblog .mini-caption::before,
.post-type-archive-miniblog .mini-caption::after,
.tax-mini_tag .mini-inner::before,
.tax-mini_tag .mini-inner::after,
.tax-mini_tag .mini-content::before,
.tax-mini_tag .mini-content::after,
.tax-mini_tag .mini-caption::before,
.tax-mini_tag .mini-caption::after{
  content:none !important;
  display:none !important;
}

.post-type-archive-miniblog .mini-inner,
.post-type-archive-miniblog .mini-content,
.post-type-archive-miniblog .mini-caption,
.tax-mini_tag .mini-inner,
.tax-mini_tag .mini-content,
.tax-mini_tag .mini-caption{
  border-top:0 !important;
}

.post-type-archive-miniblog .mini-inner > :first-child,
.tax-mini_tag .mini-inner > :first-child{
  border-top:0 !important;
}

/* ==========================================================
   Media tab grid (square thumbs)
   ========================================================== */

.mini-media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px;
}
.mini-media-grid .mini-img{
  border:1px solid #ddd;
  background:#fff;
  overflow:hidden;
  aspect-ratio:1 / 1;
  display:block;
  border-radius:0;
}
.mini-media-grid .mini-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:0;
}

/* ==========================================================
   Calendar compact (optional)
   ========================================================== */

.mini-calendar{
  width:100%;
  font-size:12px;
  border-collapse:collapse;
}
.mini-calendar th,
.mini-calendar td{
  border:1px solid #ccc;
  text-align:center;
  padding:2px 4px;
}
.mini-calendar .current-day{ background:#cce5ff; }
.mini-calendar .has-post a{
  font-weight:bold;
  color:#0066cc;
}

/* ==========================================================
   Lightbox (no rounding)
   ========================================================== */

.lb-ov{
  position:fixed; inset:0;
  background:rgba(0,0,0,.9);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}
.lb-ov.is-open{ display:flex; }

.lb-stage{
  max-width:92vw;
  max-height:90vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lb-stage img{
  max-width:92vw;
  max-height:90vh;
  user-select:none;
  cursor:grab;
  transition:transform .05s linear;
  border-radius:0;
}

.lb-caption{
  position:absolute; left:0; right:0; bottom:16px;
  color:#fff;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  font:14px/1.4 Arial,sans-serif;
  opacity:.9;
  padding:0 16px;
}

.lb-btn{
  position:absolute;
  top:12px;
  appearance:none;
  border:0;
  background:transparent;
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  padding:8px;
}
.lb-close{ right:12px; }
.lb-reset{ right:56px; }
.lb-prev{ left:12px; top:50%; transform:translateY(-50%); }
.lb-next{ right:12px; top:50%; transform:translateY(-50%); }

body.lb-no-scroll{ overflow:hidden; }

/* ==========================================================
   Jump-to-page popover
   ========================================================== */

.mini-jump{
  position:fixed;
  z-index:100000;
  display:none;
  left:12px;
  top:12px;

  background:#fff;
  color:#222;
  border:1px solid #ccc;
  box-shadow:0 0 10px rgba(0,0,0,.15);

  padding:10px 12px 12px;
  min-width:220px;
  font-family:Arial, sans-serif;
  border-radius:0;
}
.mini-jump.open{ display:block; }

.mini-jump .mj-title{
  font-weight:bold;
  margin:0 0 8px;
}

.mini-jump .mj-close{
  position:absolute;
  top:6px;
  right:6px;
  border:1px solid #ccc;
  background:#fff;
  width:22px;
  height:22px;
  line-height:20px;
  padding:0;
  cursor:pointer;
  border-radius:0;
}

.mini-jump .mj-row{
  display:flex;
  align-items:center;
  gap:6px;
}

.mini-jump .mj-btn,
.mini-jump .mj-go{
  border:1px solid #ccc;
  background:#fff;
  color:#0066cc;
  padding:2px 8px;
  cursor:pointer;
  border-radius:0;
}

.mini-jump .mj-input{
  width:60px;
  border:1px solid #ccc;
  height:24px;
  padding:0 6px;
  text-align:center;
  border-radius:0;
}

.mini-jump .mj-input::-webkit-outer-spin-button,
.mini-jump .mj-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.mini-jump .mj-input[type=number]{ -moz-appearance:textfield; }

/* ==========================================================
   Theme toggle — clean + fixed to corner + swing
   ========================================================== */

.theme-toggle{
  position:fixed;
  right:12px;
  bottom:12px;
  z-index:999999;

  width:88px;
  height:88px;

  padding:0;
  margin:0;

  background:transparent;
  border:0;
  outline:none;
  box-shadow:none;

  cursor:pointer;

  display:grid;
  place-items:center;

  transform-origin:50% 100%;
}
.theme-toggle:focus,
.theme-toggle:focus-visible{
  outline:none;
  box-shadow:none;
}
.theme-toggle img{
  width:88px;
  height:88px;
  display:block;
  border:0;
  outline:none;
  box-shadow:none;
}

@keyframes tt-swing{
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(12deg); }
  40%  { transform: rotate(-10deg); }
  60%  { transform: rotate(7deg); }
  80%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
.theme-toggle:hover{
  animation:tt-swing 700ms ease-in-out;
}

/* ==========================================================
   Preset theme: "hellfire"
   ========================================================== */

body.theme-hellfire{
  background-color:#050207;
  background-image:url("https://assets.velvetlori.cc/backgrounds/bg-hellfire-02.gif");
  background-repeat:no-repeat;
  background-position:center calc(100% + 150px);
  background-size:100%;
  background-attachment:fixed;
}

/* ==========================================================
   Nikki falling particles
   ========================================================== */

#nikki-particles{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

#nikki-particles .np{
  position:absolute;
  left:0;
  top:-60px;
  width:var(--s, 28px);
  height:var(--s, 28px);
  transform:translate3d(var(--x, 0px), -60px, 0) rotate(var(--r0, 0deg));
  background-image:var(--img);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  opacity:0;
  pointer-events:auto;
  cursor:pointer;

  animation:
    np-fall var(--dur, 18s) linear forwards,
    np-sway var(--swaydur, 4.5s) ease-in-out infinite;

  will-change:transform, opacity;
}

@keyframes np-fall{
  0%   { opacity:0; transform:translate3d(var(--x), -60px, 0) rotate(var(--r0)); }
  8%   { opacity:var(--op, .85); }
  65%  { opacity:var(--op, .90); }
  100% { opacity:0; transform:translate3d(calc(var(--x) + var(--dx, 0px)), calc(100vh + 80px), 0) rotate(var(--r1, 360deg)); }
}

@keyframes np-sway{
  0%   { margin-left:calc(var(--sx, 0px) * -1); }
  50%  { margin-left:var(--sx, 0px); }
  100% { margin-left:calc(var(--sx, 0px) * -1); }
}

/* Only show particles in hellfire mode */
body:not(.theme-hellfire) #nikki-particles{ display:none; }