/* ── Night Kitchen overrides for the public layout ─────────────────── */
/* Loaded alongside landing.css + application.css                      */
/* All public pages use the NK dark theme.                             */
/*   1. Dark base + nav for all .pub pages                             */
/*   2. Tailwind light→dark class overrides                            */
/*   3. Footer (dark on dark)                                          */

/* ── 1. Dark base ──────────────────────────────────────────────────── */
.pub {
  background: #0b0f0c;
  color: var(--cream);
  min-height: 100vh;
}

/* Nav — NK dark transparent */
.pub .nav {
  background: transparent;
  border-bottom: none;
}
.pub .logo { color: var(--cream); }
.pub .logo-mark { background: var(--cream); color: var(--ink); }
.pub .nav-links a { color: rgba(246,241,228,0.75); }
.pub .nav-links a:hover { color: var(--cream); opacity: 1; }
.pub .nav-cta a:first-child { color: rgba(246,241,228,0.7) !important; }
.pub .nav-cta .btn-primary { background: var(--cream); color: var(--ink); }
.pub .nav-cta .btn-primary:hover { background: #fff; }
.pub .nav-burger svg { stroke: var(--cream); }

/* ── 2. Tailwind light→dark overrides ──────────────────────────────── */

/* Backgrounds */
.pub .bg-white { background: #0b0f0c !important; }
.pub .bg-slate-50 { background: rgba(246,241,228,0.03) !important; }
.pub .bg-slate-100 { background: rgba(246,241,228,0.05) !important; }

/* Text */
.pub .text-slate-900 { color: var(--cream) !important; }
.pub .text-slate-800 { color: rgba(246,241,228,0.9) !important; }
.pub .text-slate-700 { color: rgba(246,241,228,0.75) !important; }
.pub .text-slate-600 { color: rgba(246,241,228,0.68) !important; }
.pub .text-slate-500 { color: rgba(246,241,228,0.55) !important; }
.pub .text-slate-400 { color: rgba(246,241,228,0.45) !important; }
.pub .text-slate-300 { color: rgba(246,241,228,0.35) !important; }
.pub .text-gray-900 { color: var(--cream) !important; }
.pub .text-gray-700 { color: rgba(246,241,228,0.75) !important; }
.pub .text-gray-600 { color: rgba(246,241,228,0.68) !important; }
.pub .text-gray-500 { color: rgba(246,241,228,0.55) !important; }

/* Borders */
.pub .border-slate-200 { border-color: rgba(246,241,228,0.1) !important; }
.pub .border-slate-300 { border-color: rgba(246,241,228,0.15) !important; }
.pub .border-gray-200 { border-color: rgba(246,241,228,0.1) !important; }
.pub .divide-slate-200 > * + * { border-color: rgba(246,241,228,0.1) !important; }

/* Accent backgrounds — dark-friendly */
.pub .bg-emerald-50 { background: rgba(4,120,87,0.12) !important; }
.pub .bg-emerald-100 { background: rgba(4,120,87,0.18) !important; }
.pub .bg-blue-50 { background: rgba(59,130,246,0.12) !important; }
.pub .bg-amber-50 { background: rgba(245,158,11,0.12) !important; }
.pub .bg-amber-100 { background: rgba(245,158,11,0.15) !important; }
.pub .bg-red-50 { background: rgba(239,68,68,0.12) !important; }

/* Accent borders — dark-friendly */
.pub .border-emerald-200 { border-color: rgba(16,185,129,0.25) !important; }
.pub .border-blue-200 { border-color: rgba(59,130,246,0.25) !important; }
.pub .border-amber-200 { border-color: rgba(245,158,11,0.25) !important; }

/* Accent text — brighter for dark backgrounds */
.pub .text-emerald-700 { color: var(--accent-2) !important; }
.pub .text-emerald-600 { color: var(--accent-2) !important; }
.pub .text-blue-600 { color: #60a5fa !important; }
.pub .text-amber-700 { color: #fbbf24 !important; }

/* Shadows — deeper for dark surfaces */
.pub .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; }
.pub .shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,0.5) !important; }
.pub .shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.6) !important; }
.pub .shadow-emerald-100 { --tw-shadow-color: rgba(16,185,129,0.08) !important; }

/* Hover states */
.pub .hover\:bg-white:hover { background: rgba(246,241,228,0.05) !important; }
.pub .hover\:bg-slate-50:hover { background: rgba(246,241,228,0.05) !important; }
.pub .hover\:bg-slate-100:hover { background: rgba(246,241,228,0.08) !important; }
.pub .hover\:shadow-md:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important; }
.pub .hover\:text-slate-700:hover { color: var(--cream) !important; }
.pub .hover\:text-slate-900:hover { color: var(--cream) !important; }
.pub .hover\:text-emerald-800:hover { color: #e9c88b !important; }

/* Ring utilities */
.pub .ring-slate-200 { --tw-ring-color: rgba(246,241,228,0.1) !important; }

/* ── 3. Cards & avatars — NK dark with gold accents ────────────────── */

/* Cards: lift off the dark background with a visible border + subtle fill */
.pub article.bg-white,
.pub .rounded-2xl.bg-white,
.pub .rounded-2xl.bg-slate-50 {
  background: rgba(246,241,228,0.03) !important;
  border-color: rgba(233,200,139,0.15) !important;
}
.pub article.bg-white:hover,
.pub .rounded-2xl.bg-white:hover {
  border-color: rgba(233,200,139,0.3) !important;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.5) !important;
}

/* Avatar circles — gold accent instead of invisible slate */
.pub .bg-slate-200 {
  background: rgba(233,200,139,0.15) !important;
  border: 1px solid rgba(233,200,139,0.25);
}
.pub .bg-slate-200 .text-slate-600,
.pub .bg-slate-200 span {
  color: #e9c88b !important;
}

/* Author name links — gold on cards */
.pub .text-emerald-700.font-medium,
.pub a.text-emerald-700 { color: #e9c88b !important; }
.pub a.text-emerald-700:hover { color: var(--cream) !important; }

/* Excerpt text — slightly brighter for readability */
.pub .text-sm.text-slate-500,
.pub .text-sm.leading-relaxed.text-slate-500 { color: rgba(246,241,228,0.6) !important; }

/* Search input — dark-friendly */
.pub input[type="search"],
.pub input[type="text"] {
  background: rgba(246,241,228,0.05) !important;
  border-color: rgba(246,241,228,0.12) !important;
  color: var(--cream) !important;
}
.pub input::placeholder { color: rgba(246,241,228,0.35) !important; }
.pub input:focus {
  border-color: rgba(233,200,139,0.4) !important;
  box-shadow: 0 0 0 2px rgba(233,200,139,0.12) !important;
}

/* Prose (blog article content) */
.pub .prose { color: rgba(246,241,228,0.75) !important; }
.pub .prose :where(h1,h2,h3,h4,h5,h6,strong,th) { color: var(--cream) !important; }
.pub .prose :where(blockquote) { color: rgba(246,241,228,0.6); border-color: rgba(16,185,129,0.25); }
.pub .prose :where(code) { color: var(--accent-2) !important; background: rgba(4,120,87,0.12) !important; }
.pub .prose :where(hr) { border-color: rgba(246,241,228,0.1); }
.pub .prose :where(a) { color: var(--accent-2); }
.pub .prose :where(ol > li, ul > li)::marker { color: rgba(246,241,228,0.45); }
.pub .prose :where(pre) { background: rgba(246,241,228,0.05) !important; border: 1px solid rgba(246,241,228,0.08); }
.pub .prose :where(td, th) { border-color: rgba(246,241,228,0.1); }
.pub .prose :where(figcaption) { color: rgba(246,241,228,0.45); }

/* Footer — cream/paper theme (not dark) */
.pub-footer {
  background: var(--ink);
  color: rgba(246,241,228,0.55);
  font-family: var(--sans);
  padding: 64px 0 28px;
  font-size: 13.5px;
}
.pub-footer a { color: rgba(246,241,228,0.55); text-decoration: none; transition: color .15s; }
.pub-footer a:hover { color: var(--cream); }

.pub-foot-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(246,241,228,0.08);
}
@media (max-width: 900px) { .pub-foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }

.pub-foot-brand { max-width: 300px; }
.pub-foot-brand .logo { margin-bottom: 14px; color: var(--cream); }
.pub-foot-brand .logo-mark { background: var(--cream); color: var(--ink); }
.pub-foot-brand p { color: rgba(246,241,228,0.5); line-height: 1.55; font-size: 13.5px; }
.pub-foot-brand .email-link { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }

.pub-foot-h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,241,228,0.85);
  margin-bottom: 16px;
}
.pub-foot-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pub-foot-list a { font-size: 14px; }

.pub-foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(246,241,228,0.4);
}
.pub-foot-bottom a { color: rgba(246,241,228,0.55); margin-left: 18px; }
.pub-foot-bottom a:hover { color: var(--cream); }

/* ── 4. FAQ accordion — NK dark with gold accents ─────────────────── */
.pub [data-controller="faq"] .bg-white[data-faq-target="item"] {
  background: rgba(246,241,228,0.03) !important;
  border-color: rgba(233,200,139,0.15) !important;
}
.pub [data-controller="faq"] .bg-white[data-faq-target="item"]:hover {
  border-color: rgba(233,200,139,0.3) !important;
}
.pub [data-controller="faq"] button[data-action] {
  color: var(--cream) !important;
}
.pub [data-controller="faq"] button[data-action]:hover {
  background: rgba(246,241,228,0.05) !important;
}
.pub [data-controller="faq"] .landing-faq__answer p {
  color: rgba(246,241,228,0.65) !important;
}
.pub [data-controller="faq"] button svg {
  color: rgba(233,200,139,0.6) !important;
}
.pub [data-controller="faq"] button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ── Ensure Tailwind sections blend with dark body ───────────────── */
.pub main section.bg-white { background: #0b0f0c !important; }
.pub main section.bg-slate-50 { background: rgba(246,241,228,0.03) !important; }

/* ── Mobile CTA bar — NK theme ──────────────────────────────────── */
.pub .mobile-cta-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: var(--ink);
  border-top: 1px solid rgba(246,241,228,0.1);
  padding: 12px 16px;
  display: none;
}
@media (max-width: 1023px) { .pub .mobile-cta-bar { display: flex; gap: 10px; } }
.pub .mobile-cta-bar .btn { flex: 1; text-align: center; justify-content: center; }

/* ── Nav responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pub .nav-links, .pub .nav-cta { display: none; }
  .pub .nav-burger { display: flex; }
}
@media (min-width: 901px) {
  .pub .nav-burger { display: none; }
}