/* ==========================================================================
   Light cinematic theme overlay
   Visual only — does not change layout structure or destinations.
   Loaded after style.css so existing components stay intact.
   ========================================================================== */

:root {
  --ivory: #fffdfb;
  --cream: #fff6ef;
  --warm-beige: #f3e4d6;
  --soft-clay: #f0b7a0;
  --terracotta: #e07a5f;
  --terracotta-l: #ef9377;
  --charcoal: #2f2a27;
  --charcoal-m: #4d4540;
  --charcoal-l: #7a716a;
  --champagne: #e0b86a;
  --gold-light: #f3deaa;
  --gold-muted: rgba(224, 184, 106, 0.22);

  --sand-50: #fffdfb;
  --sand-100: #fff6ef;
  --sand-200: #f5e6d8;
  --sand-300: #ead6c4;
  --ink-900: #2f2a27;
  --ink-700: #4d4540;
  --ink-500: #7a716a;
  --clay-600: #e07a5f;
  --clay-500: #ef9377;
  --clay-100: #ffe8e0;
  --sage-600: #5fa98a;
  --sage-100: #e4f6ee;
  --sky: #7eb8c9;
  --sky-100: #e7f6fb;
  --blush: #f7c7bc;
  --lilac: #d8c6ea;

  --shadow-soft: 0 10px 30px rgba(224, 122, 95, 0.08), 0 2px 8px rgba(47, 42, 39, 0.04);
  --shadow-lift: 0 24px 50px -16px rgba(224, 122, 95, 0.28);
  --shadow-gold: 0 12px 28px rgba(224, 184, 106, 0.35);

  --bs-body-bg: transparent;
  --bs-body-color: var(--charcoal);
  --bs-link-color: var(--terracotta);
  --bs-link-hover-color: var(--terracotta-l);
  --bs-primary: #e07a5f;
}

html { background: #fff8f2; }

body {
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(247, 199, 188, 0.45), transparent 55%),
    radial-gradient(900px 600px at 92% 8%, rgba(126, 184, 201, 0.28), transparent 50%),
    radial-gradient(800px 500px at 70% 100%, rgba(224, 184, 106, 0.18), transparent 45%),
    #fff8f2;
  color: var(--charcoal);
}

::selection {
  background: rgba(224, 122, 95, 0.22);
  color: var(--charcoal);
}

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

a:hover { color: var(--terracotta-l); }

.page-offset,
.site-footer {
  position: relative;
  z-index: 1;
}

/* ---------- Site-wide cinematic stage ---------- */
.site-cinematic {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.site-cinematic__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.site-cinematic__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  mix-blend-mode: normal;
  animation: cinematicFloat 18s ease-in-out infinite;
}

.site-cinematic__orb--1 {
  width: 42vw;
  height: 42vw;
  max-width: 520px;
  max-height: 520px;
  left: -8%;
  top: 8%;
  background: radial-gradient(circle, rgba(247, 199, 188, 0.9), rgba(224, 122, 95, 0.12) 70%);
}

.site-cinematic__orb--2 {
  width: 36vw;
  height: 36vw;
  max-width: 460px;
  max-height: 460px;
  right: -6%;
  top: 18%;
  background: radial-gradient(circle, rgba(126, 184, 201, 0.85), rgba(95, 169, 138, 0.12) 72%);
  animation-duration: 22s;
  animation-delay: -4s;
}

.site-cinematic__orb--3 {
  width: 28vw;
  height: 28vw;
  max-width: 360px;
  max-height: 360px;
  left: 38%;
  bottom: -8%;
  background: radial-gradient(circle, rgba(243, 222, 170, 0.9), rgba(216, 198, 234, 0.2) 70%);
  animation-duration: 26s;
  animation-delay: -8s;
}

.site-cinematic__spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px rgba(224, 184, 106, 0.9);
  animation: sparkDrift 14s linear infinite;
  opacity: 0.7;
}

.site-cinematic__spark:nth-child(5) { left: 12%; top: 70%; animation-duration: 16s; }
.site-cinematic__spark:nth-child(6) { left: 68%; top: 22%; animation-duration: 19s; animation-delay: -5s; }
.site-cinematic__spark:nth-child(7) { left: 82%; top: 64%; animation-duration: 13s; animation-delay: -2s; }
.site-cinematic__spark:nth-child(8) { left: 28%; top: 18%; animation-duration: 21s; animation-delay: -9s; }

@keyframes cinematicFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(4%, -6%, 0) scale(1.08); }
  66% { transform: translate3d(-5%, 5%, 0) scale(0.96); }
}

@keyframes sparkDrift {
  0% { transform: translate3d(0, 0, 0); opacity: 0.15; }
  20% { opacity: 0.9; }
  100% { transform: translate3d(40px, -180px, 0); opacity: 0; }
}

/* ---------- Buttons & clickables ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-shadow: 0 6px 18px rgba(224, 122, 95, 0.08);
}

.btn-clay {
  background: linear-gradient(135deg, #ef9377 0%, #e07a5f 45%, #d4688a 100%);
  color: #fff;
  border: 0;
  box-shadow: 0 10px 24px rgba(224, 122, 95, 0.32);
}

.btn-clay:hover {
  background: linear-gradient(135deg, #f3a58d, #e07a5f 50%, #c75c82);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(224, 122, 95, 0.4);
}

.btn-gold {
  background: #fff;
  color: var(--charcoal);
  border: 1.5px solid rgba(224, 184, 106, 0.75);
  box-shadow: 0 8px 20px rgba(224, 184, 106, 0.18);
}

.btn-gold:hover {
  background: linear-gradient(135deg, #fff8e8, #ffe9d6);
  border-color: var(--champagne);
  color: var(--charcoal);
  transform: translateY(-3px);
}

.btn-ink,
.btn-luxury {
  background: linear-gradient(135deg, #5fa98a, #7eb8c9);
  color: #fff !important;
  border: 0;
  box-shadow: 0 10px 22px rgba(95, 169, 138, 0.28);
}

.btn-ink:hover,
.btn-luxury:hover {
  background: linear-gradient(135deg, #6fba9a, #8ec6d4);
  color: #fff !important;
  transform: translateY(-3px);
}

.btn-outline-ink {
  background: rgba(255, 255, 255, 0.72);
  border: 1.5px solid rgba(224, 122, 95, 0.28);
  color: var(--terracotta);
}

.btn-outline-ink:hover {
  background: var(--clay-100);
  border-color: var(--terracotta);
  color: var(--terracotta);
  transform: translateY(-2px);
}

.pager__btn,
.share-btn,
.chip,
.category-bar__link,
.dropdown-item,
.footer-list a,
.admin-nav a {
  transition: transform 0.22s var(--ease-luxury), box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.pager__btn {
  background: #fff;
  border-color: rgba(224, 122, 95, 0.25);
  color: var(--terracotta);
  box-shadow: var(--shadow-soft);
}

.pager__btn:hover {
  background: var(--clay-100);
  border-color: var(--terracotta);
  color: var(--terracotta);
  transform: translateY(-2px);
}

/* ---------- Header / nav ---------- */
.site-header {
  background: rgba(255, 253, 251, 0.78);
  border-bottom: 1px solid rgba(224, 122, 95, 0.12);
}

body.is-nav-scrolled .site-header {
  background: rgba(255, 253, 251, 0.96);
  box-shadow: 0 10px 30px rgba(224, 122, 95, 0.1);
}

.brand-mark {
  background: linear-gradient(145deg, #ffe8e0, #e7f6fb);
  color: var(--terracotta);
  border-color: rgba(224, 122, 95, 0.22);
  box-shadow: 0 6px 16px rgba(224, 122, 95, 0.16);
}

.navbar .nav-link,
.premium-link {
  color: var(--ink-700) !important;
}

.navbar .nav-link i,
.premium-link i {
  color: var(--terracotta);
  font-size: 0.95rem;
}

.premium-link:hover,
.premium-link.active {
  color: var(--terracotta) !important;
  background: rgba(224, 122, 95, 0.08);
}

.premium-link::after { background: var(--terracotta); }

.search-form {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(224, 122, 95, 0.16);
}

.search-form:focus-within {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 4px rgba(224, 122, 95, 0.12);
}

.search-form:focus-within .search-icon,
.search-form:focus-within .bi-search { color: var(--terracotta); }

.dropdown-item:hover {
  background: rgba(224, 122, 95, 0.1);
  color: var(--terracotta);
}

/* ---------- Category bar ---------- */
.category-bar {
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(224, 122, 95, 0.1);
}

.category-bar__link {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(224, 122, 95, 0.12);
  color: var(--ink-700);
}

.category-bar__link i { color: var(--sky); }

.category-bar__link:hover {
  background: #fff;
  color: var(--terracotta);
  border-color: rgba(224, 122, 95, 0.35);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.category-bar__link.is-active {
  background: linear-gradient(135deg, #ef9377, #e07a5f);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(224, 122, 95, 0.28);
}

.category-bar__link.is-active i { color: #fff; }

.category-bar--rail {
  background: rgba(255, 253, 251, 0.92);
  border-right: 1px solid rgba(224, 122, 95, 0.12);
}

/* ---------- Cards / surfaces ---------- */
.post-card,
.side-card,
.article,
.auth-card,
.panel,
.stat-card,
.contact-card,
.contact-form,
.featured-magazine__card,
.category-card,
.empty-state,
.shop-card {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-soft);
}

.side-card--accent,
.shop-block,
.home-section--cream {
  background: linear-gradient(160deg, rgba(255, 232, 224, 0.65), rgba(231, 246, 251, 0.55));
}

.home-section--ivory { background: transparent; }

.home-section--dark,
.home-section--cinematic {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(247, 199, 188, 0.45), transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(126, 184, 201, 0.35), transparent 50%),
    linear-gradient(180deg, rgba(255, 246, 239, 0.9), rgba(255, 255, 255, 0.7));
  color: var(--charcoal);
}

.home-section--dark .section-title,
.home-section--cinematic .section-title { color: var(--charcoal); }

.home-section--dark .section-lead,
.home-section--cinematic .section-lead { color: var(--ink-500); }

.home-section--dark .eyebrow,
.home-section--cinematic .eyebrow { color: var(--terracotta); }

.badge-cat {
  background: linear-gradient(135deg, rgba(224, 122, 95, 0.14), rgba(126, 184, 201, 0.16));
  color: var(--terracotta);
}

.chip {
  background: #fff;
  border: 1px solid rgba(224, 122, 95, 0.16);
}

.chip:hover {
  background: var(--clay-100);
  color: var(--terracotta);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.category-card__icon {
  background: linear-gradient(145deg, var(--clay-100), var(--sky-100));
  color: var(--terracotta);
  box-shadow: 0 8px 18px rgba(224, 122, 95, 0.16);
}

.category-card:hover {
  border-color: rgba(224, 122, 95, 0.28);
}

.stat-card i,
.contact-card i,
.empty-state i {
  color: var(--terracotta);
}

.form-check-input:checked {
  background-color: var(--terracotta);
  border-color: var(--terracotta);
}

.form-control:focus,
.form-select:focus,
.search-block input:focus,
.contact-form__field:focus {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 4px rgba(224, 122, 95, 0.14);
}

.contact-form__button {
  background: linear-gradient(135deg, #ef9377, #e07a5f 50%, #d4688a);
  box-shadow: 0 10px 22px rgba(224, 122, 95, 0.28);
}

/* ---------- Hero ---------- */
.cinematic-hero {
  background: transparent;
}

.cinematic-hero__overlay {
  background: linear-gradient(
    180deg,
    rgba(255, 248, 242, 0.18) 0%,
    rgba(255, 248, 242, 0.42) 55%,
    rgba(255, 248, 242, 0.88) 100%
  );
}

.cinematic-hero__layer--1 {
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(224, 122, 95, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(126, 184, 201, 0.16), transparent 55%),
    linear-gradient(165deg, rgba(255, 246, 239, 0.5) 0%, rgba(255, 253, 251, 0.2) 45%, rgba(231, 246, 251, 0.35) 100%);
}

.cinematic-hero__title em {
  color: var(--terracotta);
}

.hero__card-body {
  background: linear-gradient(transparent, rgba(47, 42, 39, 0.72));
}

/* ---------- Footer (light, colourful) ---------- */
.site-footer {
  background:
    linear-gradient(180deg, rgba(255, 246, 239, 0.55), rgba(255, 255, 255, 0.92)),
    #fff;
  color: var(--charcoal);
  border-top: 1px solid rgba(224, 122, 95, 0.12);
  position: relative;
  z-index: 1;
}

.footer-brand { color: var(--charcoal); }

.footer-title { color: var(--terracotta); }

.footer-list a { color: var(--ink-700); }
.footer-list a:hover { color: var(--terracotta); }

.site-footer .text-muted-soft { color: var(--ink-500); }

.footer-social a {
  background: #fff;
  border: 1px solid rgba(224, 122, 95, 0.2);
  color: var(--terracotta);
  box-shadow: var(--shadow-soft);
}

.footer-social a:hover {
  background: linear-gradient(135deg, #ef9377, #e07a5f);
  border-color: transparent;
  color: #fff;
}

.footer-newsletter__form input {
  border: 1px solid rgba(224, 122, 95, 0.22);
  background: #fff;
  color: var(--charcoal);
}

.footer-newsletter__form input::placeholder { color: #a39c94; }
.footer-newsletter__form input:focus { border-color: var(--terracotta); }

.footer-newsletter__form button {
  background: linear-gradient(135deg, #ef9377, #e07a5f);
  color: #fff;
  box-shadow: 0 8px 18px rgba(224, 122, 95, 0.28);
}

.footer-newsletter__form button:hover {
  background: linear-gradient(135deg, #f3a58d, #e07a5f);
  transform: translateY(-2px);
}

.footer-bottom {
  border-top: 1px solid rgba(224, 122, 95, 0.12);
}

/* ---------- Admin remains usable, just lighter ---------- */
.admin-shell {
  background: transparent;
}

.admin-shell .admin-nav {
  background: rgba(255, 253, 251, 0.92);
}

.admin-shell .admin-nav a.active {
  background: linear-gradient(135deg, #ef9377, #e07a5f);
  color: #fff;
  box-shadow: 0 8px 18px rgba(224, 122, 95, 0.28);
}

.admin-shell .admin-nav a.active i { color: #fff; }

.admin-shell .stat-card {
  background: rgba(255, 255, 255, 0.88);
}

.cg-page {
  --cg-ivory: #fffdfb;
  --cg-cream: #fff6ef;
  --cg-gold: #e0b86a;
  --cg-terra: #e07a5f;
  --cg-terra-dark: #c45f48;
}

.cg-btn--solid {
  background: linear-gradient(135deg, #ef9377, #e07a5f 50%, #d4688a);
  box-shadow: 0 10px 24px rgba(224, 122, 95, 0.32);
}

.cg-btn--solid:hover {
  background: linear-gradient(135deg, #f3a58d, #e07a5f);
  transform: translateY(-3px);
}

.cg-btn--small {
  background: linear-gradient(135deg, #5fa98a, #7eb8c9);
  box-shadow: 0 8px 18px rgba(95, 169, 138, 0.28);
}

.cg-btn--ghost {
  background: #fff;
  border-color: rgba(224, 122, 95, 0.35);
  color: var(--terracotta);
}

@media (max-width: 991.98px) {
  .category-bar,
  .category-bar--rail {
    background: rgba(255, 255, 255, 0.96) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-cinematic__orb,
  .site-cinematic__spark {
    animation: none !important;
  }
}
/* ==========================================================================
   Additions — keep the newer components inside the cinematic theme
   Appended after the theme so these win on public pages.
   ========================================================================== */

/* "Visual story" gallery now uses the SAME panel gradient as "Shop this look",
   so the two sections read as a deliberate matched pair. Border, radius and
   padding already matched; only the background differed. */
.gallery {
  background: linear-gradient(160deg, rgba(255, 232, 224, 0.65), rgba(231, 246, 251, 0.55));
}

/* Draft preview banner + Draft badge, in the lighter palette. */
.draft-notice,
.draft-badge {
  background: var(--cream);
  border-color: var(--terracotta);
  color: var(--charcoal);
}
.draft-notice i,
.draft-badge { color: var(--terracotta); }

/* Curated Guide rows in search results. */
.search-guide { border-left-color: var(--champagne); }
.search-guide:hover { border-left-color: var(--terracotta); }
.search-guide__ph { background: var(--clay-100); color: var(--terracotta); }
.search-guide__go { color: var(--terracotta); }