/*
Theme Name: Raf de Wit
Theme URI: https://example.com/raf-de-wit
Author: NotYouAgain.ai Studio
Author URI: https://www.notyouagain.ai/
Description: Romantic/gloomy iOS-first column theme with Georgia typography, smoked glass, smooth cross-fades, and gallery-first posts. Credits: Design – Alfons Scholing · Illustration – Raf de Wit · Code – ChatGPT (GPT-5 Thinking).
Version: 1.0.8
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: MIT
Text Domain: raf-de-wit
*/

:root {
  color-scheme: dark;
  --bg: #0f1216;
  --panel: rgba(14,12,16,0.82);
  --panel-border: rgba(255,255,255,0.10);
  --text: #ffffff;
  --muted: #d8d6d2;
  --crimson: #a3222a;
  --orange: #c4612a;
  --lightblue: #8fb9e3;
  --link: #ffffff;
  --accent: var(--crimson);
  --radius: 16px;
  --shadow: 0 14px 50px rgba(0,0,0,.6);
  --column-max: 62ch;
  --line: 1.7;

  --bg-fade: 2200ms;
  --bg-zoom: 16000ms;
}

html, body { height: 100%; }
body {
  margin:0;
  background: var(--bg) no-repeat center/cover;
  color: var(--text);
  font: 400 18px/var(--line) Georgia, "Times New Roman", Times, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

a { color: var(--link); text-decoration: none; }
a:hover, a:focus { color: var(--link); text-decoration: underline; }

/* Headings — defaults: H1 crimson, H2–H6 white */
h1,h2,h3,h4,h5,h6 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 700;
  letter-spacing:.2px;
  line-height: 1.25;
  margin: 1.2em 0 .6em;
}
h1 { color: var(--crimson); text-shadow: 0 1px 2px rgba(0,0,0,.55); font-size: clamp(1.9rem, 4.5vw, 2.4rem); }
h2,h3,h4,h5,h6 { color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.entry-title, .entry-title a { color: var(--crimson); text-shadow: 0 1px 2px rgba(0,0,0,.55); }

p { margin: 0.75rem 0 1.05rem; }
.small { font-size:.9rem; color: var(--muted); }

/* Layout */
.wrapper { min-height: 100%; display:flex; flex-direction:column; position: relative; z-index: 2; }
.container { width: min(92vw, var(--column-max)); margin-inline:auto; padding: 1.2rem; }

header.site-header {
  margin-top: 4em;
  margin-bottom: 12em;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}

.brand { display:flex; align-items:center; gap: .9rem; }
.logo-frame {
  width: 64px; height:64px; border-radius:50%;
  overflow:hidden;
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.logo-frame img { width:100%; height:100%; object-fit: cover; display:block; }

.site-title a { font-family: Georgia, "Times New Roman", Times, serif; font-weight:700; font-size:1.25rem; color:var(--text); }
.site-desc { color:var(--muted); font-size:1rem; margin-top:.2rem; }

/* Smoked glass (denser) */
.glass {
  background: linear-gradient( to bottom, rgba(24,20,28,.86), rgba(10,8,14,.78) );
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  color: var(--text);
}
.pad { padding: 1rem 1.15rem; }
.card { border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--panel-border); }

/* Menu (white by default) */
.nav-toggle {
  appearance:none; width:42px; height:42px; border-radius:10px;
  display:grid; place-content:center; border:1px solid var(--panel-border);
  background: var(--panel); box-shadow: var(--shadow);
}
.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {
  content:""; display:block; width:20px; height:2px; background:var(--text);
  border-radius:3px; position:relative;
}
.nav-toggle span:before { position:absolute; top:-6px; }
.nav-toggle span:after { position:absolute; top:6px; }

nav.primary { position: fixed; top:18px; right:18px; z-index: 100; }
nav.primary input[type="checkbox"] { display:none; }
.menu-panel {
  position: fixed; top:70px; right:18px; padding: .75rem;
  width: min(88vw, 320px);
  display:none;
  color: var(--text);
}
nav.primary input[type="checkbox"]:checked + label + .menu-panel { display:block; }
.menu-panel ul { list-style:none; margin:0; padding:0; }
.menu-panel li a { display:block; padding:.7rem .9rem; border-radius:12px; color: var(--text); }
.menu-panel li a:hover { background: rgba(255,255,255,.04); color: var(--text); }

/* Content */
main .post-card { margin-bottom: 2.2rem; }
.post-card .thumb img { width:100%; height:auto; border-radius: 14px; }

article .entry-header { margin-bottom: 1rem; }
article .entry-content > p { margin: .7rem 0; }
article img { max-width: 100%; height:auto; border-radius: 10px; }

.wp-caption { max-width: 100%; }

/* Gallery grid */
.rdw_gallery-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: .8rem; }
.rdw_gallery-grid a { display:block; }
.rdw_gallery-grid img { width:100%; height:160px; object-fit:cover; border-radius:12px; }

/* Footer */
.site-footer { margin-top:auto; padding: 3rem 0 5rem; color: var(--muted); }

/* Vignette */
body::before {
  content:""; position: fixed; inset:0; pointer-events:none; z-index:1;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(0,0,0,0) 20%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.45) 100%);
}

/* Background cross-fade */
.bg-stack { position: fixed; inset: 0; z-index: 0; overflow: hidden; contain: layout paint style; }
.bg-layer {
  position: absolute; inset: 0;
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04) translateZ(0);
  will-change: opacity, transform;
  backface-visibility: hidden;
  transition: opacity var(--bg-fade) ease-in-out, transform var(--bg-zoom) linear;
  filter: saturate(1.03) contrast(1.03);
}
.bg-layer.is-active { opacity: 1; transform: scale(1) translateZ(0); }

/* === Admin Bar Compatibility (v1.0.8) ===
   Ensures fixed elements and header spacing play nicely when a user is logged in and the WP toolbar is visible.
   WP toolbar heights: ~32px desktop, ~46px on small screens.
*/
body.admin-bar nav.primary { top: calc(18px + 32px); }
body.admin-bar .menu-panel { top: calc(70px + 32px); }
body.admin-bar header.site-header { margin-top: calc(4em + 32px); }

@media (max-width: 782px) {
  body.admin-bar nav.primary { top: calc(18px + 46px); }
  body.admin-bar .menu-panel { top: calc(70px + 46px); }
  body.admin-bar header.site-header { margin-top: calc(4em + 46px); }
}

/* Make sure overlays never cover the admin bar */
body.admin-bar .bg-stack,
body.admin-bar body::before {
  z-index: 0;
}

/* Defensive: keep our UI above the vignette but well below the admin bar's huge z-index */
.wrapper { z-index: 2; }
nav.primary { z-index: 100; }