/* ═══════════════════════════════════════════════════════
   INFEELING DESIGN SYSTEM
   Nervous-system-first. Depth before hacks. Warmth before performance.
   ═══════════════════════════════════════════════════════ */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--line-height-body);
  color: var(--warm-ivory);
  background: var(--midnight-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background: rgba(212, 168, 83, 0.3);
  color: var(--warm-ivory);
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--heart-glow); text-decoration: none; transition: color var(--duration-normal) var(--ease-gentle); }
a:hover { color: var(--heart-hover); }

/* ── Typography ── */
h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: 400;
  line-height: var(--line-height-headline);
  letter-spacing: 0.015em;
  color: var(--warm-ivory);
}
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }

p { margin-bottom: 1.4em; }
p:last-child { margin-bottom: 0; }

.text-muted { color: var(--text-muted); }
.text-accent { color: var(--heart-glow); }
.text-center { text-align: center; }

/* ── Layout ── */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

.container--narrow { max-width: var(--content-max); }

.section {
  padding: var(--section-pad) 0;
  position: relative;
}

.section--dark { background: var(--midnight-deep); }
.section--plum { background: linear-gradient(180deg, var(--midnight) 0%, var(--midnight-deep) 100%); }
.section--light {
  background: var(--warm-linen);
  color: var(--text-dark);
}
.section--light h1, .section--light h2, .section--light h3 { color: var(--text-dark); }
.section--light .text-muted { color: var(--text-muted); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 17px 34px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-gentle);
  text-decoration: none;
  white-space: nowrap;
}

.btn--primary {
  background: var(--heart-glow) !important;
  background-image: none !important;
  color: var(--midnight) !important;
  border: 1px solid rgba(212, 168, 83, 0.18) !important;
  box-shadow: 0 16px 40px rgba(212, 168, 83, 0.26) !important;
}
.btn--primary:hover {
  background: var(--heart-hover) !important;
  background-image: none !important;
  color: var(--midnight) !important;
  border-color: rgba(232, 200, 122, 0.34) !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(212, 168, 83, 0.32) !important;
}

.btn--ghost {
  background: rgba(245, 240, 232, 0.04);
  color: rgba(245, 240, 232, 0.88);
  border: 1px solid rgba(245, 230, 200, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--ghost:hover {
  background: rgba(212, 168, 83, 0.08);
  color: var(--warm-ivory);
  border-color: rgba(232, 200, 122, 0.42);
}

.btn--small {
  font-size: 14px;
  padding: 10px 24px;
}

/* ── Cards ── */
.card {
  background: linear-gradient(180deg, rgba(18, 32, 51, 0.94) 0%, rgba(10, 18, 32, 0.98) 100%);
  border: 1px solid rgba(245, 230, 200, 0.08);
  border-radius: var(--radius-card);
  padding: 28px;
  transition: all var(--duration-normal) var(--ease-gentle);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.card:hover {
  border-color: rgba(212, 168, 83, 0.24);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

/* ── Blockquotes ── */
blockquote {
  position: relative;
  border-left: 2px solid var(--heart-glow);
  padding: 22px 28px;
  margin: 2em 0;
  font-style: italic;
  color: rgba(245, 240, 232, 0.88);
  background: rgba(212, 168, 83, 0.06);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
}
blockquote p { margin-bottom: 0.6em; }
blockquote p:last-child { margin-bottom: 0; }

/* ── Forms ── */
.input-field {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 20px;
  border: 1px solid rgba(245, 230, 200, 0.14);
  border-radius: var(--radius-small);
  background: rgba(10, 18, 32, 0.76);
  color: var(--warm-ivory);
  outline: none;
  transition: border-color var(--duration-normal) var(--ease-gentle);
  width: 100%;
}
.input-field::placeholder { color: var(--text-muted); }
.input-field:focus { border-color: var(--heart-glow); }

/* ── Email capture ── */
.email-capture {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}
.email-capture .input-field { flex: 1; }
.email-capture .btn { flex-shrink: 0; }

@media (max-width: 600px) {
  .email-capture { flex-direction: column; }
  .email-capture .btn { width: 100%; }
}

/* ── Divider ── */
.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 168, 83, 0.42), transparent);
  margin: var(--section-pad) auto;
  max-width: 200px;
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Accessibility ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--heart-glow);
  outline-offset: 4px;
}

/* ── Skip link ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 12px 24px;
  background: var(--heart-glow);
  color: var(--midnight);
  border-radius: var(--radius-small);
  font-weight: 500;
}
.skip-link:focus { top: 16px; }

/* ── Astra Override — Ensure our brand takes full control ── */
:root {
  --ast-global-color-0: #F5F0E8 !important;
  --ast-global-color-1: #FAF6EF !important;
  --ast-global-color-2: #F5E6C8 !important;
  --ast-global-color-3: #D4A853 !important;
  --ast-global-color-4: #0F1B2D !important;
  --ast-global-color-5: #0A1220 !important;
  --ast-global-color-6: #122033 !important;
  --ast-global-color-7: #18263A !important;
  --ast-global-color-8: #D4A853 !important;
}

body.infeeling,
body.infeeling .site-content,
body.infeeling #content,
body.infeeling .ast-container {
  background: var(--midnight-deep) !important;
  color: var(--warm-ivory) !important;
}

body.infeeling .entry-content,
body.infeeling .page-content,
body.infeeling .ast-article-single,
body.infeeling .ast-separate-container .ast-article-single {
  background: transparent !important;
  padding: 0 !important;
}

body.infeeling .entry-title,
body.infeeling .page-title,
body.infeeling .ast-archive-title {
  color: var(--warm-ivory) !important;
}

body.infeeling a:not(.btn):not(.header__logo) { color: var(--heart-glow); }
body.infeeling a:not(.btn):not(.header__logo):hover { color: var(--heart-hover); }

body.infeeling .btn,
body.infeeling a.btn,
body.infeeling button.btn {
  color: var(--midnight) !important;
}

body.infeeling .btn--primary,
body.infeeling a.btn--primary,
body.infeeling button.btn--primary,
body.infeeling input[type="submit"].btn--primary {
  background: var(--heart-glow) !important;
  background-image: none !important;
  color: var(--midnight) !important;
  border: 1px solid rgba(212, 168, 83, 0.18) !important;
  box-shadow: 0 16px 40px rgba(212, 168, 83, 0.26) !important;
}

body.infeeling .btn--primary:hover,
body.infeeling a.btn--primary:hover,
body.infeeling button.btn--primary:hover,
body.infeeling input[type="submit"].btn--primary:hover {
  background: var(--heart-hover) !important;
  background-image: none !important;
  color: var(--midnight) !important;
  border-color: rgba(232, 200, 122, 0.34) !important;
  box-shadow: 0 20px 48px rgba(212, 168, 83, 0.32) !important;
}

body.infeeling .btn--ghost,
body.infeeling a.btn--ghost {
  color: rgba(245, 240, 232, 0.88) !important;
}

body.infeeling .btn--ghost:hover,
body.infeeling a.btn--ghost:hover {
  color: var(--warm-ivory) !important;
}

body.infeeling .hero__title,
body.infeeling .hero__title em,
body.infeeling .article-hero__title {
  color: var(--warm-ivory) !important;
}

body.infeeling .hero__subtitle,
body.infeeling .hero__overline {
  color: rgba(245, 240, 232, 0.76) !important;
}

body.infeeling .article-hero__category {
  color: var(--heart-glow) !important;
}

body.infeeling .article-hero__meta {
  color: rgba(245, 240, 232, 0.62) !important;
}

body.infeeling p, body.infeeling li {
  color: rgba(246, 240, 234, 0.88);
}

body.infeeling .section--light,
body.infeeling .section--light p,
body.infeeling .section--light li,
body.infeeling .section--light h1,
body.infeeling .section--light h2,
body.infeeling .section--light h3,
body.infeeling .section--light h4 {
  color: var(--text-dark) !important;
}

/* Remove Astra containers that add unwanted styles */
body.infeeling .ast-container,
body.infeeling .ast-separate-container {
  max-width: none !important;
}

body.infeeling #primary {
  padding: 0 !important;
  margin: 0 !important;
}

body.infeeling .ast-separate-container .ast-article-single,
body.infeeling .ast-separate-container .ast-article-post {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.infeeling .ast-no-sidebar #primary {
  width: 100% !important;
  max-width: none !important;
}

body.infeeling .site-main > article {
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

#main-content {
  padding-bottom: clamp(64px, 6vw, 96px);
}