:root {
  --radius: 0.5rem;
  --deep-green: oklch(0.32 0.09 152);
  --brand-yellow: oklch(0.88 0.18 95);
  --spice-red: oklch(0.55 0.18 35);
  --cream: oklch(0.97 0.025 85);

  --background: oklch(1 0 0);
  --foreground: oklch(0.18 0.04 152);
  --card: oklch(1 0 0);
  --card-foreground: var(--foreground);
  --primary: var(--deep-green);
  --primary-foreground: var(--brand-yellow);
  --secondary: var(--brand-yellow);
  --secondary-foreground: var(--deep-green);
  --muted: oklch(0.94 0.02 90);
  --muted-foreground: oklch(0.45 0.04 152);
  --destructive: oklch(0.55 0.22 27);
  --border: oklch(0.88 0.04 90);
}

body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  background-color: var(--background);
  color: var(--foreground);
}

h1, h2, h3, h4, .font-display {
  font-family: Cinzel, serif;
  letter-spacing: -0.01em;
}

.bg-background { background-color: var(--background); }
.bg-foreground { background-color: var(--foreground); }
.bg-card { background-color: var(--card); }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-muted { background-color: var(--muted); }
.bg-destructive\/10 { background-color: oklch(0.55 0.22 27 / 0.1); }
.bg-primary\/40 { background-color: oklch(0.32 0.09 152 / 0.4); }
.bg-primary\/80 { background-color: oklch(0.32 0.09 152 / 0.8); }
.bg-background\/5 { background-color: oklch(1 0 0 / 0.05); }
.bg-background\/90 { background-color: var(--background); opacity: 0.9; }

.text-foreground { color: var(--foreground); }
.text-background { color: var(--background); }
.text-card-foreground { color: var(--card-foreground); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-secondary { color: var(--secondary); }
.text-secondary-foreground { color: var(--secondary-foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-destructive { color: var(--destructive); }
.text-background\/85 { color: oklch(1 0 0 / 0.85); }
.text-background\/90 { color: oklch(1 0 0 / 0.9); }
.text-secondary\/70 { color: oklch(0.88 0.18 95 / 0.7); }
.text-secondary\/80 { color: oklch(0.88 0.18 95 / 0.8); }
.text-secondary\/85 { color: oklch(0.88 0.18 95 / 0.85); }
.text-foreground\/80 { color: oklch(0.18 0.04 152 / 0.8); }
.text-foreground\/85 { color: oklch(0.18 0.04 152 / 0.85); }
.text-primary\/70 { color: oklch(0.32 0.09 152 / 0.7); }

.border-primary { border-color: var(--primary); }
.border-primary\/10 { border-color: oklch(0.32 0.09 152 / 0.1); }
.border-primary\/8  { border-color: oklch(0.32 0.09 152 / 0.08); }
.border-primary\/15 { border-color: oklch(0.32 0.09 152 / 0.15); }
.border-primary\/20 { border-color: oklch(0.32 0.09 152 / 0.2); }
.border-primary\/30 { border-color: oklch(0.32 0.09 152 / 0.3); }
.border-secondary\/20 { border-color: oklch(0.88 0.18 95 / 0.2); }
.border-secondary\/30 { border-color: oklch(0.88 0.18 95 / 0.3); }
.border-secondary\/40 { border-color: oklch(0.88 0.18 95 / 0.4); }
.border-secondary\/50 { border-color: oklch(0.88 0.18 95 / 0.5); }

.ring-secondary { --tw-ring-color: var(--secondary); }

.mix-blend-screen { mix-blend-mode: screen; }

.prayer-flag {
  background: repeating-linear-gradient(
    90deg,
    #1e6b3a 0 20%,
    #f4c81e 20% 40%,
    #b83a2a 40% 60%,
    #ffffff 60% 80%,
    #2563a8 80% 100%
  );
}

.temple-divider {
  background-image:
    radial-gradient(circle at 50% 100%, var(--brand-yellow) 0 6px, transparent 7px),
    linear-gradient(90deg, transparent, var(--brand-yellow), transparent);
  background-size: 28px 100%, 100% 1px;
  background-repeat: repeat-x, no-repeat;
  background-position: bottom, center;
}

.newari-border {
  background-image:
    repeating-linear-gradient(45deg, var(--deep-green) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, var(--brand-yellow) 0 6px, transparent 6px 12px);
  background-size: 12px 12px;
}

.sp-pattern-bg {
  background-repeat: repeat;
}

.sp-pattern-hero:not([style*="background-image"]) {
  background-image:
    radial-gradient(circle at 50% 50%, oklch(0.88 0.18 95 / 0.08) 0, transparent 45%),
    radial-gradient(circle at 20% 80%, oklch(0.88 0.18 95 / 0.06) 0, transparent 35%),
    radial-gradient(circle at 80% 20%, oklch(0.88 0.18 95 / 0.06) 0, transparent 35%);
  background-size: 520px 520px, 420px 420px, 420px 420px;
}

.sp-pattern-videos:not([style*="background-image"]),
.sp-pattern-reserve:not([style*="background-image"]) {
  background-image:
    radial-gradient(circle at 50% 50%, oklch(0.88 0.18 95 / 0.07) 0, transparent 50%);
  background-size: 320px 320px;
}

.sp-hero-gradient {
  background: linear-gradient(
    to right,
    oklch(0.32 0.09 152 / 0.9) 0%,
    oklch(0.32 0.09 152 / 0.2) 45%,
    transparent 100%
  );
}

@media (max-width: 767px) {
  .sp-hero-gradient {
    background: linear-gradient(
      to right,
      oklch(0.32 0.09 152 / 0.8) 0%,
      oklch(0.32 0.09 152 / 0.1) 50%,
      transparent 100%
    );
  }
}

.hover\:bg-secondary\/10:hover { background-color: oklch(0.88 0.18 95 / 0.1); }
.hover\:bg-secondary\/30:hover { background-color: oklch(0.88 0.18 95 / 0.3); }

.sp-field {
  width: 100%;
  border-radius: 1rem;
  border: 2px solid oklch(0.32 0.09 152 / 0.15);
  background: var(--background);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  outline: none;
}

.sp-field:focus {
  border-color: var(--primary);
}

.sp-nav-menu a,
.sp-mobile-menu a {
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: oklch(0.18 0.04 152 / 0.8);
  transition: background-color 0.2s, color 0.2s;
}

.sp-nav-menu a:hover,
.sp-mobile-menu a:hover {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.sp-hero-slide {
  opacity: 0;
}

.sp-hero-slide.is-active {
  opacity: 1;
}

.sp-hero-dot {
  width: 0.5rem;
  background: oklch(0.88 0.18 95 / 0.4);
}

.sp-hero-dot.is-active {
  width: 2rem;
  background: var(--secondary);
}

.sp-marquee-track {
  animation: sp-scroll 30s linear infinite;
}

@keyframes sp-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.sp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 0.88);
  padding: 1rem;
}

.sp-lightbox.hidden {
  display: none;
}

.sp-lightbox-img {
  max-height: 90vh;
  max-width: min(1100px, 100%);
  border-radius: 1rem;
  object-fit: contain;
}

.sp-lightbox-close,
.sp-lightbox-prev,
.sp-lightbox-next {
  position: absolute;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  padding: 0.5rem 1rem;
}

.sp-lightbox-close { top: 1rem; right: 1rem; }
.sp-lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.sp-lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ── Anchor scroll offset (sticky navbar) ── */
/* Navbar is ~80px tall (sticky top-2 + mt-4 + nav height) */
#top, #menu, #gallery, #videos, #reviews, #reserve {
  scroll-margin-top: 100px;
}

.prose p { margin-bottom: 1rem; line-height: 1.75; }

/* ═══════════════════════════════════════════════════════════
   SP-PROSE — rich content styles for single post body
   Handles all WordPress editor output: paragraphs, headings,
   lists (ol/ul), blockquotes, tables, code, images, etc.
═══════════════════════════════════════════════════════════ */

.sp-prose {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--foreground);
  max-width: 72ch;
}

/* Paragraphs */
.sp-prose p {
  margin-top: 0;
  margin-bottom: 1.4em;
}

/* Headings */
.sp-prose h1,
.sp-prose h2,
.sp-prose h3,
.sp-prose h4,
.sp-prose h5,
.sp-prose h6 {
  font-family: Cinzel, serif;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.3;
  margin-top: 2em;
  margin-bottom: 0.6em;
}
.sp-prose h1 { font-size: 2rem; }
.sp-prose h2 {
  font-size: 1.5rem;
  padding-bottom: 0.4em;
  border-bottom: 2px solid oklch(0.88 0.18 95 / 0.5);
}
.sp-prose h3 { font-size: 1.25rem; }
.sp-prose h4 { font-size: 1.1rem; }
.sp-prose h5,
.sp-prose h6 { font-size: 1rem; }

/* Links */
.sp-prose a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: oklch(0.88 0.18 95 / 0.6);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
.sp-prose a:hover {
  text-decoration-color: var(--primary);
}

/* Strong / Em */
.sp-prose strong { font-weight: 700; color: var(--foreground); }
.sp-prose em     { font-style: italic; }

/* ── Lists ────────────────────────────────────────────── */
.sp-prose ul,
.sp-prose ol {
  margin: 0 0 1.4em 0;
  padding-left: 1.6em;
}

/* Unordered list — custom bullet using brand yellow */
.sp-prose ul {
  list-style: none;
  padding-left: 1.4em;
}
.sp-prose ul > li {
  position: relative;
  margin-bottom: 0.45em;
  padding-left: 0.2em;
}
.sp-prose ul > li::before {
  content: '';
  position: absolute;
  left: -1.1em;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--secondary);
  flex-shrink: 0;
}

/* Ordered list — green numbers */
.sp-prose ol {
  list-style: none;
  counter-reset: sp-ol;
  padding-left: 2em;
}
.sp-prose ol > li {
  position: relative;
  counter-increment: sp-ol;
  margin-bottom: 0.45em;
  padding-left: 0.2em;
}
.sp-prose ol > li::before {
  content: counter(sp-ol);
  position: absolute;
  left: -1.8em;
  top: 0.05em;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--secondary);
  font-size: 0.7rem;
  font-weight: 800;
  font-family: Cinzel, serif;
  line-height: 1;
}

/* Nested lists */
.sp-prose ul ul,
.sp-prose ol ol,
.sp-prose ul ol,
.sp-prose ol ul {
  margin-top: 0.35em;
  margin-bottom: 0.35em;
}
.sp-prose ul ul > li::before {
  border-radius: 2px;
  width: 5px;
  height: 5px;
  background: oklch(0.88 0.18 95 / 0.6);
}

/* ── Blockquote ────────────────────────────────────────── */
.sp-prose blockquote {
  position: relative;
  margin: 1.8em 0;
  padding: 1.2em 1.5em 1.2em 2rem;
  border-left: 4px solid var(--secondary);
  background: oklch(0.32 0.09 152 / 0.04);
  border-radius: 0 1rem 1rem 0;
  font-style: italic;
  color: oklch(0.25 0.06 152);
}
.sp-prose blockquote::before {
  content: '"';
  position: absolute;
  left: 0.6rem;
  top: 0.4rem;
  font-family: Cinzel, serif;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--secondary);
  font-style: normal;
}
.sp-prose blockquote p { margin-bottom: 0; }
.sp-prose blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 600;
  color: var(--muted-foreground);
}

/* ── Code ──────────────────────────────────────────────── */
.sp-prose code {
  background: oklch(0.32 0.09 152 / 0.07);
  color: var(--primary);
  padding: 0.15em 0.45em;
  border-radius: 0.3rem;
  font-size: 0.875em;
  font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
}
.sp-prose pre {
  background: oklch(0.18 0.04 152);
  color: oklch(0.92 0.03 90);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin: 1.6em 0;
  font-size: 0.875rem;
  line-height: 1.7;
}
.sp-prose pre code {
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* ── Images ────────────────────────────────────────────── */
.sp-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  display: block;
  margin: 1.6em auto;
  border: 1px solid oklch(0.32 0.09 152 / 0.1);
}
.sp-prose figure {
  margin: 1.8em 0;
}
.sp-prose figcaption {
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted-foreground);
  margin-top: 0.5em;
  font-style: italic;
}

/* ── Tables ────────────────────────────────────────────── */
.sp-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 0.9rem;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid oklch(0.32 0.09 152 / 0.12);
}
.sp-prose thead {
  background: var(--primary);
  color: var(--secondary);
}
.sp-prose th {
  padding: 0.75rem 1rem;
  font-family: Cinzel, serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sp-prose td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid oklch(0.32 0.09 152 / 0.08);
}
.sp-prose tbody tr:last-child td { border-bottom: none; }
.sp-prose tbody tr:nth-child(even) {
  background: oklch(0.32 0.09 152 / 0.03);
}

/* ── HR / Separator ────────────────────────────────────── */
.sp-prose hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--secondary), transparent);
  margin: 2.5em 0;
  opacity: 0.6;
}

/* ── WordPress alignment classes ───────────────────────── */
.sp-prose .aligncenter  { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.sp-prose .alignleft    { float: left; margin-right: 1.5em; margin-bottom: 1em; }
.sp-prose .alignright   { float: right; margin-left: 1.5em; margin-bottom: 1em; }
.sp-prose .alignwide    { width: 100%; }
.sp-prose .alignfull    { width: 100%; border-radius: 0; margin-left: 0; margin-right: 0; }
@media (max-width: 640px) {
  .sp-prose .alignleft,
  .sp-prose .alignright { float: none; margin-left: 0; margin-right: 0; }
}

/* ── WP Captions ───────────────────────────────────────── */
.sp-prose .wp-caption      { max-width: 100%; margin: 1.6em auto; text-align: center; }
.sp-prose .wp-caption-text { font-size: 0.8rem; color: var(--muted-foreground); font-style: italic; margin-top: 0.4em; }

/* ── Gutenberg blocks ──────────────────────────────────── */
.sp-prose .wp-block-quote  { all: unset; display: block; }
/* Re-apply our quote style on Gutenberg quote blocks */
.sp-prose .wp-block-quote,
.sp-prose .wp-block-pullquote blockquote {
  position: relative;
  margin: 1.8em 0;
  padding: 1.2em 1.5em 1.2em 2rem;
  border-left: 4px solid var(--secondary);
  background: oklch(0.32 0.09 152 / 0.04);
  border-radius: 0 1rem 1rem 0;
  font-style: italic;
}
.sp-prose .wp-block-separator { border: none; height: 2px; background: linear-gradient(90deg, transparent, var(--secondary), transparent); margin: 2.5em 0; opacity: 0.6; }
.sp-prose .wp-block-code pre { background: oklch(0.18 0.04 152); color: oklch(0.92 0.03 90); border-radius: 1rem; padding: 1.25rem 1.5rem; }
.sp-prose .wp-block-image img { border-radius: 1rem; }
.sp-prose .wp-block-table td,
.sp-prose .wp-block-table th { border: 1px solid oklch(0.32 0.09 152 / 0.12); padding: 0.65rem 1rem; }

/* Gutenberg list blocks */
.sp-prose .wp-block-list,
.sp-prose .wp-block-list ul,
.sp-prose .wp-block-list ol {
  margin: 0 0 1.4em 0;
}
.sp-prose li > ul,
.sp-prose li > ol {
  margin-top: 0.35em;
}
.sp-prose ol ol {
  counter-reset: sp-ol;
}
.sp-prose ol ol > li::before {
  background: oklch(0.32 0.09 152 / 0.85);
  font-size: 0.65rem;
}

/* ── Blog pagination ───────────────────────────────────── */
.sp-pagination-wrap {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid oklch(0.32 0.09 152 / 0.1);
}

.sp-blog-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.sp-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 1rem;
  border-radius: 0.5rem;
  border: 1.5px solid oklch(0.32 0.09 152 / 0.15);
  background: var(--card, #fff);
  color: var(--primary, #1a3c1a);
  font-family: Cinzel, serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 1px 2px oklch(0.32 0.09 152 / 0.06), 0 0 0 0 transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}
.sp-page-btn:hover {
  background: var(--primary, #1a3c1a);
  color: var(--secondary, #c9a84c);
  border-color: var(--primary, #1a3c1a);
  box-shadow: 0 2px 8px oklch(0.32 0.09 152 / 0.18);
  transform: translateY(-1px);
}
.sp-page-btn--current {
  background: var(--primary, #1a3c1a);
  color: var(--secondary, #c9a84c);
  border-color: var(--primary, #1a3c1a);
  font-weight: 800;
  box-shadow: 0 4px 14px oklch(0.32 0.09 152 / 0.28);
  cursor: default;
  pointer-events: none;
}
.sp-page-btn--current:hover {
  transform: none;
  box-shadow: 0 4px 14px oklch(0.32 0.09 152 / 0.28);
}

/* Prev / Next arrow buttons — pill shape */
.sp-page-btn--arrow {
  padding: 0 1.25rem;
  gap: 0.375rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sp-page-btn--dots {
  border: none;
  background: transparent;
  box-shadow: none;
  min-width: 2rem;
  color: oklch(0.5 0.05 152);
  cursor: default;
  pointer-events: none;
  letter-spacing: 0.1em;
}
.sp-page-btn--dots:hover {
  background: transparent;
  color: oklch(0.5 0.05 152);
  transform: none;
}

/* ── Post navigation (single.php) prev/next cards ───────── */
.sp-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (max-width: 639px) {
  .sp-post-nav { grid-template-columns: 1fr; }
}

.sp-post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  border: 1.5px solid oklch(0.32 0.09 152 / 0.12);
  background: var(--card, #fff);
  text-decoration: none;
  box-shadow: 0 1px 3px oklch(0.32 0.09 152 / 0.06);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s, background 0.18s;
  overflow: hidden;
  position: relative;
}
.sp-post-nav__link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary, #1a3c1a);
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 0;
}
.sp-post-nav__link:hover {
  border-color: var(--primary, #1a3c1a);
  box-shadow: 0 8px 24px oklch(0.32 0.09 152 / 0.18);
  transform: translateY(-2px);
}
.sp-post-nav__link:hover::before {
  opacity: 1;
}
.sp-post-nav__link:hover .sp-post-nav__label,
.sp-post-nav__link:hover .sp-post-nav__title {
  color: var(--secondary, #c9a84c);
}
.sp-post-nav__link > * { position: relative; z-index: 1; }

.sp-post-nav__label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(0.45 0.07 152);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.sp-post-nav__label svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.sp-post-nav__title {
  font-family: Cinzel, serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--primary, #1a3c1a);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.18s;
}
.sp-post-nav__link:hover .sp-post-nav__title {
  color: var(--secondary, #c9a84c);
  text-decoration: none;
}

.sp-post-nav--single {
  grid-template-columns: 1fr;
}
.sp-post-nav--single .sp-post-nav__link--next {
  text-align: left;
}
.sp-post-nav--single .sp-post-nav__link--next .sp-post-nav__label {
  justify-content: flex-start;
}

/* ── Share bar (single.php) ────────────────────────────── */
.sp-share-bar {
  border-radius: 1rem;
  border: 1.5px solid oklch(0.32 0.09 152 / 0.12);
  background: linear-gradient(135deg, oklch(0.32 0.09 152 / 0.03), oklch(0.88 0.18 95 / 0.06));
  padding: 1.5rem;
  box-shadow: 0 2px 8px oklch(0.32 0.09 152 / 0.06);
}
.sp-share-bar__heading {
  margin: 0 0 1rem;
  font-family: Cinzel, serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary, #1a3c1a);
}
.sp-share-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.sp-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  border-radius: 9999px;
  border: none;
  font-family: Cinzel, serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.15s, box-shadow 0.18s;
  box-shadow: 0 2px 6px oklch(0 0 0 / 0.12);
}
.sp-share-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.sp-share-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px oklch(0 0 0 / 0.18);
}
.sp-share-btn--facebook { background: #1877f2; color: #fff; }
.sp-share-btn--x        { background: #111; color: #fff; }
.sp-share-btn--whatsapp { background: #25d366; color: #fff; }
.sp-share-btn--copy {
  background: var(--card, #fff);
  color: var(--primary, #1a3c1a);
  border: 1.5px solid oklch(0.32 0.09 152 / 0.2);
  box-shadow: 0 1px 3px oklch(0.32 0.09 152 / 0.08);
}
.sp-share-btn--copy:hover {
  background: var(--primary, #1a3c1a);
  color: var(--secondary, #c9a84c);
  border-color: var(--primary, #1a3c1a);
}

/* right-aligned next card */
.sp-post-nav__link--next {
  text-align: right;
}
.sp-post-nav__link--next .sp-post-nav__label {
  justify-content: flex-end;
}

/* ── Back to Blog button ─────────────────────────────────── */
.sp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  border-radius: 9999px;
  border: 1.5px solid oklch(0.32 0.09 152 / 0.2);
  background: transparent;
  color: var(--primary, #1a3c1a);
  font-family: Cinzel, serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 1px 3px oklch(0.32 0.09 152 / 0.06);
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}
.sp-back-btn:hover {
  background: var(--primary, #1a3c1a);
  color: var(--secondary, #c9a84c);
  border-color: var(--primary, #1a3c1a);
  box-shadow: 0 4px 14px oklch(0.32 0.09 152 / 0.22);
  transform: translateY(-1px);
}
.sp-back-btn svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.18s;
}
.sp-back-btn:hover svg {
  transform: translateX(-3px);
}

/* Arrow SVGs inside pagination prev/next buttons */
.sp-page-btn--arrow {
  /* already set above — just ensure SVG sizing */
}
.sp-page-btn--arrow svg.sp-page-arrow {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}
.sp-page-btn--arrow span {
  line-height: 1;
}

/* ══════════════════════════════════════════════════════════
   Privacy Policy page
   ══════════════════════════════════════════════════════════ */

/* ── Hero banner ─────────────────────────────────────────── */
.sp-privacy-hero {
  position: relative;
  overflow: hidden;
  background: var(--primary, #1a3c1a);
  text-align: center;
  padding: 4rem 0 3.5rem;   /* top/bottom only — horizontal handled by inner */
}
.sp-privacy-hero__pattern {
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
}
.sp-privacy-hero__inner {
  position: relative;
  /* matches the site's content-width container */
  width: min(900px, 94%);
  margin-inline: auto;       /* equal left & right auto margin */
  padding-inline: 0;         /* no extra offset — the 94% handles it */
}
.sp-privacy-hero__eyebrow {
  color: oklch(0.88 0.18 95 / 0.7);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}
.sp-privacy-hero__title {
  font-family: Cinzel, serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--secondary, #c9a84c);
  margin: 0 0 1rem;
  line-height: 1.2;
}
.sp-privacy-hero__date {
  color: oklch(0.88 0.18 95 / 0.75);
  font-size: 0.85rem;
  margin: 0;
}

/* ── Content wrapper — same width/padding system as rest of site ── */
.sp-privacy-wrap {
  width: min(900px, 94%);
  margin-inline: auto;   /* equal left & right */
  padding-top: 4rem;
  padding-bottom: 5rem;
}

/* ── Dark cards (intro + contact) ───────────────────────── */
.sp-privacy-card--dark {
  background: var(--primary, #1a3c1a);
  border-radius: 1rem;
  padding: 2rem;           /* equal on all four sides */
  margin-bottom: 2.5rem;
}
@media (min-width: 640px) {
  .sp-privacy-card--dark {
    padding: 2.25rem 2.5rem;  /* slightly more breathing room on wider screens */
  }
}
.sp-privacy-card--contact {
  margin-top: 3rem;
  margin-bottom: 0;
}

.sp-privacy-card__intro {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.975rem;
  line-height: 1.85;
  margin: 0;
}
.sp-privacy-link {
  color: var(--secondary, #c9a84c);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sp-privacy-card__heading {
  font-family: Cinzel, serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--secondary, #c9a84c);
  margin: 0 0 0.75rem;
}
.sp-privacy-card__body {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  line-height: 1.75;
  margin: 0 0 0.5rem;
}
.sp-privacy-card__contact {
  margin: 0;
  color: var(--secondary, #c9a84c);
  font-weight: 700;
  line-height: 1.8;
}
.sp-privacy-card__email {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sp-privacy-card__email:hover {
  color: var(--secondary, #c9a84c);
}

/* ── Section blocks ──────────────────────────────────────── */
.sp-privacy-section {
  margin-bottom: 2.25rem;
}
.sp-privacy-h2 {
  font-family: Cinzel, serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary, #1a3c1a);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid oklch(0.88 0.18 95 / 0.4);
}
.sp-privacy-h3 {
  font-family: Cinzel, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary, #1a3c1a);
  margin: 1rem 0 0.5rem;
}
.sp-privacy-content p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: oklch(0.18 0.04 152 / 0.75);
  margin: 0 0 0.9em;
}
.sp-privacy-list {
  list-style: none;
  padding: 0;
  margin: 0.625rem 0 0;
}
.sp-privacy-list li {
  position: relative;
  padding: 0.4375rem 0 0.4375rem 1.75rem;
  font-size: 0.93rem;
  line-height: 1.7;
  color: oklch(0.18 0.04 152 / 0.75);
  border-bottom: 1px solid oklch(0.32 0.09 152 / 0.07);
}
.sp-privacy-list li:last-child { border-bottom: none; }
.sp-privacy-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a3c1a' stroke-width='2'%3E%3Cpath d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.sp-privacy-list li strong { color: var(--primary, #1a3c1a); }

/* ── Back button row ─────────────────────────────────────── */
.sp-privacy-back {
  margin-top: 2.5rem;
  text-align: center;
}