/* Etheric Mind Design System for WordPress */
/* Lexend local (variable) */
@font-face {
  font-family: "Lexend";
  src: url("../fonts/lexend/lexend-variable.woff2") format("woff2");
  font-weight: 100 900;   /* eje wght completo */
  font-style: normal;
  font-display: swap;     /* evita texto invisible al cargar */
}

:root {
  /* Base colors - soft, peaceful palette */
  --em-background: hsl(45, 20%, 98%);
  --em-foreground: hsl(200, 15%, 25%);
  --em-card: hsl(0, 0%, 100%);
  --em-primary: hsl(150, 25%, 45%);
  --em-secondary: hsl(45, 15%, 92%);
  --em-muted: hsl(210, 15%, 95%);
  --em-muted-foreground: hsl(200, 10%, 50%);
  --em-border: hsl(210, 15%, 88%);

  /* Category colors */
  --em-mindfulness: hsl(150, 30%, 65%);
  --em-meditation: hsl(200, 40%, 70%);
  --em-yoga: hsl(35, 25%, 75%);
  --em-chakras: hsla(295, 20%, 75%, 1.00);
  --em-healing-crystals: hsla(251, 30%, 75%, 1.00);

  /* Gradients */
  --em-gradient-hero: linear-gradient(135deg, hsl(150, 20%, 95%), hsl(200, 25%, 92%));
  --em-gradient-card: linear-gradient(145deg, hsl(0, 0%, 100%), hsl(210, 15%, 98%));
  --em-gradient-mindfulness: linear-gradient(135deg, hsl(150, 30%, 95%), hsl(150, 20%, 90%));
  --em-gradient-meditation: linear-gradient(135deg, hsl(200, 40%, 95%), hsl(200, 30%, 90%));
  --em-gradient-yoga: linear-gradient(135deg, hsl(35, 25%, 95%), hsl(35, 15%, 90%));
  --em-gradient-chakras: linear-gradient(135deg, hsl(295, 20%, 95%), hsl(295, 15%, 90%));
  --em-gradient-healing-crystals: linear-gradient(135deg, hsl(251, 30%, 95%), hsl(251, 25%, 90%));


  /* Shadows */
  --em-shadow-soft: 0 4px 20px hsl(200, 15%, 85%, 0.3);
  --em-shadow-card: 0 2px 12px hsl(200, 15%, 80%, 0.2);
  --em-shadow-hover: 0 8px 30px hsl(200, 15%, 75%, 0.25);
}

/* Dark mode support */
.dark-mode {
  --em-background: hsl(210, 15%, 8%);
  --em-foreground: hsl(45, 20%, 95%);
  --em-card: hsl(210, 15%, 10%);
  --em-primary: hsl(150, 35%, 60%);
  --em-mindfulness: hsl(150, 30%, 55%);
  --em-meditation: hsl(200, 40%, 65%);
  --em-yoga: hsl(35, 25%, 70%);
  --em-chakras:     hsl(295, 20%, 70%);
  --em-healing-crystals: hsl(251, 30%, 70%);
}

/* Specific styling */ 

/* Body and typography */
body {
  background: var(--em-background);
  color: var(--em-foreground);
  font-family: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

/* Accesibilidad: estados de foco visibles */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--em-primary);
  outline-offset: 2px;
  border-radius: .5rem;
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Header styling */
.site-header, header {
  background: var(--em-gradient-hero);
  box-shadow: var(--em-shadow-soft);
}

/* Post cards and articles */
.wp-show-posts-columns .post,
.wp-show-posts-columns .hentry,
.wp-show-posts-columns article,
.wp-show-posts .post,
.wp-show-posts .hentry,
.wp-show-posts article {
  background: var(--em-gradient-card);
  border-radius: 1rem;
  box-shadow: var(--em-shadow-card);
  transition: all 0.3s ease;
}

.wp-show-posts-columns .post:hover,
.wp-show-posts-columns .hentry:hover,
.wp-show-posts .post:hover,
.wp-show-posts .hentry:hover {
  box-shadow: var(--em-shadow-hover);
  transform: translateY(-2px);
}

.post, .post:hover,
.hentry, .hentry:hover,
article,
.site-header, header {
  box-shadow: unset;
  box-shadow: none;
}

/* Category badges */

/* Contenedor de la imagen propia + badge */
.em-featured-wrap { position: relative; display: block; }
.em-featured { display: block; width: 100%; height: auto; border-radius: 1rem; box-shadow: var(--em-shadow-card); }

/* Badge superpuesto */
.category-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 5;
  padding: .25rem .75rem;
  border-radius: 9999px;
  font-size: .75rem;
  font-weight: 600;
  box-shadow: var(--em-shadow-card);
  border: 2px solid var(--em-border);
}

.category-mindfulness-cat {
  background: var(--em-mindfulness);
  color: white;
  /* padding: 0.25rem 0.75rem;
  border-radius: 9999px; */
  font-size: 0.75rem;
  font-weight: 500;
}

.category-meditation-cat {
  background: var(--em-meditation);
  color: white;
  /* padding: 0.25rem 0.75rem;
  border-radius: 9999px; */
  font-size: 0.75rem;
  font-weight: 500;
}

.category-yoga-cat {
  background: var(--em-yoga);
  color: white;
  /* padding: 0.25rem 0.75rem;
  border-radius: 9999px; */
  font-size: 0.75rem;
  font-weight: 500;
}

.category-chakras-cat {
  background: var(--em-chakras);
  color: white;
  /* padding: 0.25rem 0.75rem;
  border-radius: 9999px; */
  font-size: 0.75rem;
  font-weight: 500;
}

.category-healing-crystals-cat {
  background: var(--em-healing-crystals);
  color: white;
  /* padding: 0.25rem 0.75rem;
  border-radius: 9999px; */
  font-size: 0.75rem;
  font-weight: 500;
}

/* Buttons and links */
.btn, button, .wp-block-button__link {
  background: var(--em-primary);
  color: white;
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  transition: all 0.2s ease;
}

.btn:hover, button:hover {
  background: hsl(150, 25%, 40%);
  transform: translateY(-1px);
  box-shadow: var(--em-shadow-card);
}

/* Navigation */
.main-navigation a, .nav-menu a {
  color: var(--em-foreground);
  transition: color 0.2s ease;
}

.main-navigation a:hover, .nav-menu a:hover {
  color: var(--em-primary);
}

/* Post */
.site-content, .inside-article, .entry-header {
  background: var(--em-background);
  color: var(--em-muted-foreground);
}

.inside-article h2,
.inside-article h3,
.inside-article h4,
.entry-header h1 {
  color: var(--em-primary);
}

.inside-article a {
  color: var(--em-foreground);
}


/* Meta bar under post featured image */
.em-post-header-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem 1.25rem;
  margin: 1rem 0 1.25rem;
  align-items: center;
}
@media (min-width: 720px) {
  .em-post-header-meta { grid-template-columns: 1fr 1fr; }
}

.em-meta-left { display: flex; align-items: center; }
.em-author { display: flex; align-items: center; gap: .75rem; }
.em-avatar { border-radius: 9999px; box-shadow: var(--em-shadow-card); }
.em-author-name { font-weight: 600; line-height: 1.2; }
.em-reading-time { font-size: .875rem; color: var(--em-muted-foreground); margin-top: .125rem; }

.em-meta-right { text-align: left; }
@media (min-width: 720px) {
  .em-meta-right { text-align: right; }
}
.em-tags { margin-bottom: .25rem; }
.em-tags-list { display: inline-flex; flex-wrap: wrap; gap: .375rem .5rem; }
.em-tag {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 9999px;
  font-size: .75rem;
  background: var(--em-muted);
  color: var(--em-foreground);
  border: 1px solid var(--em-border);
  text-decoration: none;
  transition: transform .15s ease;
}
.em-tag:hover { transform: translateY(-1px); box-shadow: var(--em-shadow-card); }
.em-date { font-size: .875rem; color: var(--em-muted-foreground); }

.em-tags-none { font-size: .875rem; color: var(--em-muted-foreground); }