/*
Theme Name: Cliften Nille
Author: NotYouAgain.ai Studio
Description: Modern narrow-column theme with petrol glass panels, rotating backgrounds, and optimized images.
Version: 1.2.2
Text Domain: cliften-nille
*/

:root{
  color-scheme: dark;
  --bg: #0c1417;
  --text: #f6f8f9;
  --muted: #b6c2c6;
  --petrol-1: #0a3a40;
  --petrol-2: #0e4f57;
  --radius: 16px;
  --shadow: 0 14px 36px rgba(0,0,0,.55);
  --column: 62ch;
  --line: 1.65;
  --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 17px/var(--line) system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  letter-spacing:.2px;
}

h1,h2,h3,h4,h5,h6{ font-weight:800; line-height:1.2; margin:1.1em 0 .55em; }
h1{ font-size:clamp(2rem,5vw,2.6rem); }
h2{ font-size:clamp(1.5rem,3.4vw,1.9rem); }
h3{ font-size:clamp(1.2rem,2.4vw,1.4rem); }
a{ color:var(--text); text-decoration:none; }
a:hover, a:focus{ text-decoration:underline; }

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

/* Header */
header.site-header{ margin-top:3rem; margin-bottom:10rem; display:flex; align-items:center; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.8rem; }
.logo-frame{ width:72px; height:72px; border-radius:50%; overflow:hidden; border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow); background:rgba(10,58,64,.24); backdrop-filter:blur(12px) saturate(1.08); -webkit-backdrop-filter:blur(12px) saturate(1.08);
}
.logo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

.site-title a{ font-weight:800; font-size:1.25rem; color:var(--text); }
.site-desc{ color:var(--muted); font-size:.95rem; }

/* Petrol glass */
.glass{
  background: linear-gradient(180deg, rgba(10,58,64,.7), rgba(14,79,87,.62));
  border:1px solid rgba(255,255,255,.08);
  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 rgba(255,255,255,.08); }

/* WIDE MENU */
nav.primary{ position:fixed; top:16px; right:16px; z-index:100; }
nav.primary input[type="checkbox"]{ display:none; }
.nav-toggle{ appearance:none; width:46px; height:46px; border-radius:12px; display:grid; place-content:center; border:1px solid rgba(255,255,255,.08);
  background: rgba(10,58,64,.45); box-shadow:var(--shadow); }
.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after{ content:""; display:block; width:24px; height:2px; background:var(--text); border-radius:3px; position:relative; }
.nav-toggle span:before{ position:absolute; top:-7px; }
.nav-toggle span:after{ position:absolute; top:7px; }
.menu-panel{ position:fixed; top:76px; right:16px; padding:.8rem; width:min(94vw, 420px); display:none; }
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:.75rem .95rem; border-radius:12px; }
.menu-panel li a:hover{ background: rgba(255,255,255,.06); }

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

/* Gallery grid */
.cn_gallery-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:.8rem; }
.cn_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); }

/* Rotating background layers */
.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); }


/* === v1.1.1 Menu fixes === */
/* Always sit above the WP admin bar and safe-area notches */
nav.primary{ z-index: 999999; top: calc(env(safe-area-inset-top) + 16px); }
.menu-panel{ z-index: 1000000; width: min(96vw, 520px); max-height: calc(100vh - 140px); overflow:auto; }

/* When the WordPress admin bar is visible, push the toggle and the panel down */
body.admin-bar nav.primary{ top: calc(env(safe-area-inset-top) + 46px + 12px); }
body.admin-bar .menu-panel{ top: calc(env(safe-area-inset-top) + 46px + 72px); max-height: calc(100vh - (46px + 120px)); }

/* WordPress switches admin bar height >= 782px */
@media (min-width: 782px){
  body.admin-bar nav.primary{ top: calc(env(safe-area-inset-top) + 32px + 12px); }
  body.admin-bar .menu-panel{ top: calc(env(safe-area-inset-top) + 32px + 72px); }
}

/* Larger, easier-to-tap toggle */
.nav-toggle{ width:52px; height:52px; }



/* === v1.2.0 Header-contained Navigation === */
nav.primary{ display:none !important; } /* retire old floating corner menu */

.header-bar{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: 1rem;
}

.header-bar .brand{ display:flex; align-items:center; gap:.8rem; }

/* Toggle inside header */
#cn-menu-toggle{ display:none; }
.header-burger{
  appearance:none; width:50px; height:50px; border-radius:12px;
  display:grid; place-content:center; border:1px solid rgba(255,255,255,.08);
  background: rgba(10,58,64,.45); box-shadow: var(--shadow);
}
.header-burger span, .header-burger span:before, .header-burger span:after{
  content:""; display:block; width:24px; height:2px; background:var(--text); border-radius:3px; position:relative;
}
.header-burger span:before{ position:absolute; top:-7px; }
.header-burger span:after{ position:absolute; top:7px; }

/* The nav inside header */
.header-nav{ grid-column: 1 / -1; margin-top:.6rem; }
.header-nav .menu{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.header-nav .menu a{
  display:block; padding:.6rem .85rem; border-radius:12px;
  background: linear-gradient(180deg, rgba(10,58,64,.7), rgba(14,79,87,.62));
  border:1px solid rgba(255,255,255,.08);
  text-decoration:none; color:var(--text);
}
.header-nav .menu a:hover{ background: rgba(255,255,255,.06); }

/* Collapsed by default on small screens */
@media (max-width: 860px){
  .header-nav{ display:none; }
  #cn-menu-toggle:checked ~ .header-nav{ display:block; }
  .header-bar{ grid-template-columns: auto 1fr auto; }
}

/* On wide screens show inline and hide burger */
@media (min-width: 861px){
  .header-burger{ display:none; }
  .header-nav{ grid-column: 2 / -1; margin-top:0; }
  .header-nav .menu{ justify-content:flex-end; gap:.6rem; }
}

/* === v1.2.2 width sync === */
*,*::before,*::after{ box-sizing: border-box; }
.container{ width: min(92vw, var(--column)); margin-inline:auto; padding: 1.1rem; }
.site-header .header-bar{ width: 100%; }
.post-card.glass.card, .entry-content.glass.card{ width: 100%; }

/* === Micro Header Override vC-3 === */
/* Aggressively compress header height to a single compact row */
header.site-header{ margin-top: .2rem; margin-bottom: .6rem; }
.site-header.container{ padding-top: 0; padding-bottom: 0; }
.header-bar{ padding: .25rem .50rem; border-radius: 12px; }
.header-bar .brand{ gap: .45rem; }
.logo-frame{ width: 32px; height: 32px; }
@media (min-width: 861px){ .logo-frame{ width: 40px; height: 40px; } }
.site-title{ margin: 0; line-height: 1; }
.site-title a{ font-size: .95rem; font-weight: 800; }
.site-desc{ display: none; }
/* Keep menu chips lean and single-line */
.header-nav .menu{ gap: .28rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.header-nav .menu::-webkit-scrollbar{ display:none; }
.header-nav .menu a{ padding: .32rem .50rem; border-radius: 10px; }
/* On small screens, the nav remains collapsed inside header until burger is tapped */
@media (max-width: 860px){
  .header-nav{ display: none; }
  #cn-menu-toggle:checked ~ .header-nav{ display: block; margin-top: .35rem; }
}