@charset "UTF-8";

/* Base Tokens matching React App (Day Mode primary) */
:root {
  --color-bg-light: #fafaf9;
  --color-bg-dark: #0c0d12;
  --color-card-dark: #11131a;
  --color-amber-accent: #21d3a3;
  --color-brand-teal: #21d3a3;
  --font-serif: 'Newsreader', Georgia, Cambria, serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Editorial Serif Font class */
.font-editorial {
  font-family: var(--font-serif);
}

.font-sans-ui {
  font-family: var(--font-sans);
}

.font-mono-code {
  font-family: var(--font-mono);
}

/* Drop-cap for editorial reading */
.editorial-drop-cap::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-size: 3.75rem;
  line-height: 0.85;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  font-weight: 700;
  color: inherit;
}

/* Hide scrollbars for clean mobile touch carousels */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Smooth link focus and active states */
a:focus-visible, button:focus-visible {
  outline: 2px solid #21d3a3;
  outline-offset: 2px;
}

/* Aspect Ratio & Image Distortion Protection */
img, svg, picture {
  max-width: 100%;
  display: block;
}

img[class*="object-cover"] {
  object-fit: cover !important;
  object-position: center;
}

/* Ensure WordPress responsive images preserve aspect ratio without stretching */
img {
  height: auto;
}

.aspect-video img,
.aspect-square img,
.aspect-\[4\/3\] img,
.aspect-\[3\/4\] img,
[class*="aspect-"] img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Progressive Image Loading Blur-Up */
.lazy-image {
  filter: blur(10px);
  transition: filter 0.4s ease-out;
}
.lazy-image.loaded {
  filter: blur(0);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(160, 160, 160, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(160, 160, 160, 0.5);
}

/* ==========================================================================
   Editorial Content Typography & Generous Spacing for Articles & Pages
   ========================================================================== */
.editorial-content,
.prose.editorial-content {
  font-family: 'Newsreader', Georgia, Cambria, serif !important;
  font-size: 1.1875rem !important; /* ~19px */
  line-height: 2 !important; /* Extremely breathable line height */
  color: #1c1917 !important; /* stone-900 */
}

@media (min-width: 640px) {
  .editorial-content,
  .prose.editorial-content {
    font-size: 1.25rem !important; /* 20px */
    line-height: 2.05 !important;
  }
}

.editorial-content p,
.prose.editorial-content p {
  margin-top: 0 !important;
  margin-bottom: 2rem !important; /* Generous paragraph separation */
  color: #1c1917 !important;
  line-height: inherit !important;
}

.editorial-content p:last-child {
  margin-bottom: 0 !important;
}

.editorial-content h2,
.prose.editorial-content h2 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 900 !important;
  font-size: 1.75rem !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.025em !important;
  color: #0c0a09 !important;
  margin-top: 3.25rem !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 2px solid #0c0a09 !important;
}

.editorial-content h3,
.prose.editorial-content h3 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.375rem !important;
  line-height: 1.35 !important;
  color: #0c0a09 !important;
  margin-top: 2.75rem !important;
  margin-bottom: 1.25rem !important;
}

.editorial-content h4,
.prose.editorial-content h4 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  color: #1c1917 !important;
  margin-top: 2.25rem !important;
  margin-bottom: 1rem !important;
}

.editorial-content a,
.prose.editorial-content a {
  color: #118e6e !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 4px !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}

.editorial-content a:hover,
.prose.editorial-content a:hover {
  color: #21d3a3 !important;
}

.editorial-content blockquote,
.prose.editorial-content blockquote {
  margin: 3rem 0 !important;
  padding: 1.5rem 2rem !important;
  background: #f5f5f4 !important;
  border-left: 5px solid #21d3a3 !important;
  border-radius: 0 1rem 1rem 0 !important;
  font-style: italic !important;
  font-size: 1.25rem !important;
  line-height: 1.85 !important;
  color: #292524 !important;
}

.editorial-content blockquote p {
  margin-bottom: 0 !important;
}

.editorial-content ul, 
.editorial-content ol,
.prose.editorial-content ul,
.prose.editorial-content ol {
  margin-top: 1.25rem !important;
  margin-bottom: 2rem !important;
  padding-left: 2rem !important;
}

.editorial-content ul {
  list-style-type: disc !important;
}

.editorial-content ol {
  list-style-type: decimal !important;
}

.editorial-content li,
.prose.editorial-content li {
  margin-bottom: 0.75rem !important;
  line-height: 1.85 !important;
}

/* Images, Captions and Figures inside Articles */
.editorial-content figure,
.prose.editorial-content figure {
  margin: 3.25rem 0 !important;
  clear: both;
}

.editorial-content figure img,
.editorial-content img,
.prose.editorial-content img {
  width: 100% !important;
  border-radius: 1rem !important;
  border: 1px solid #e7e5e4 !important;
  margin: 0 0 0.85rem 0 !important;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.05) !important;
}

.editorial-content figcaption,
.prose.editorial-content figcaption {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.8125rem !important;
  color: #78716c !important;
  text-align: center !important;
  margin-top: 0.75rem !important;
  line-height: 1.5 !important;
}

/* Videos, YouTube, Spotify, Soundcloud, Instagram & Iframes Embeds */
.editorial-content iframe,
.editorial-content video,
.editorial-content .wp-block-embed,
.editorial-content .wp-block-embed-youtube,
.editorial-content .wp-block-embed-spotify,
.editorial-content .wp-block-embed-soundcloud,
.prose.editorial-content iframe,
.prose.editorial-content video,
.prose.editorial-content .wp-block-embed {
  margin-top: 3.5rem !important;
  margin-bottom: 3.5rem !important;
  width: 100% !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
  border: 1px solid #e7e5e4 !important;
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.08) !important;
  clear: both;
}

.editorial-content .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
}

/* Specific spacing for element right after embeds / iframes */
.editorial-content .wp-block-embed + p,
.editorial-content iframe + p,
.editorial-content video + p,
.editorial-content figure + p {
  margin-top: 2rem !important;
}