/*
 * Café de Mendel — vestimenta cálida "portada de libro"
 * Hoja de anulación cargada DESPUÉS de assets/css/main.css (ver functions.php).
 * No se toca main.css: todo lo de aquí puede revertirse borrando este fichero
 * y quitando la línea wp_enqueue_style correspondiente.
 */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --mendel-paper: #EDE1C4;
  --mendel-ink: #2A1B12;
  --mendel-ink-soft: #6B5642;
  --mendel-leather: #6E1F2B;
  --mendel-leather-deep: #40121A;
  --mendel-gold: #A8752E;
  --mendel-gold-bright: #C99239;
  --mendel-gold-foil: #E4C77E;
  --mendel-rule: rgba(42, 27, 18, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --mendel-paper: #18120D;
    --mendel-ink: #EFE1C4;
    --mendel-ink-soft: #C7B49A;
    --mendel-leather: #9C3E48;
    --mendel-leather-deep: #6E1F2B;
    --mendel-gold: #D9A94E;
    --mendel-gold-bright: #F0C878;
    --mendel-gold-foil: #F0C878;
    --mendel-rule: rgba(239, 225, 196, 0.16);
  }
}

/* ---------- base ---------- */
body {
  background-color: var(--mendel-paper) !important;
  color: var(--mendel-ink) !important;
}

::selection {
  background: var(--mendel-gold-foil);
  color: var(--mendel-leather-deep);
}

hr {
  border-top-color: var(--mendel-rule) !important;
}

a {
  color: var(--mendel-leather);
}
a:hover {
  color: var(--mendel-gold);
}

h1, h2, h3, h4, h5, h6,
.title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-optical-sizing: auto;
  color: var(--mendel-ink);
}

/* ---------- cabecera: banda de cuero ---------- */
.site-header {
  background: linear-gradient(135deg, var(--mendel-leather) 0%, var(--mendel-leather-deep) 100%) !important;
  color: var(--mendel-gold-foil) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.site-header a {
  color: var(--mendel-gold-foil);
}
.site-logo img {
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--mendel-gold-foil), 0 0 0 3px rgba(64,18,26,.4);
}
.primary-menu a:hover,
.primary-menu a:focus {
  color: var(--mendel-gold-bright);
}
.primary-menu ul {
  background: var(--mendel-leather-deep);
}

/* ---------- cubierta de página: título de cada entrada/página ---------- */
.default-header {
  background: radial-gradient(140% 100% at 15% 0%, var(--mendel-leather) 0%, var(--mendel-leather-deep) 70%) !important;
  padding: 3rem 0 2.5rem !important;
  margin-bottom: 2rem;
}
.default-header .title {
  color: var(--mendel-gold-foil) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.default-header .subtitle {
  color: rgba(251,244,228,.82) !important;
}
.default-header .category {
  color: var(--mendel-gold-bright) !important;
  letter-spacing: 2px;
}

/* ---------- pie de página ---------- */
.site-footer {
  background-color: var(--mendel-leather-deep) !important;
  border-top: none !important;
  color: rgba(251,244,228,.75) !important;
}
.site-footer .widget-area,
.site-footer .widget-area ul li a {
  color: rgba(251,244,228,.75) !important;
}
.site-footer .widget-area .widget-title {
  color: var(--mendel-gold-foil) !important;
}
.site-footer a:hover {
  color: var(--mendel-gold-bright) !important;
}

/* ---------- botones ---------- */
.btn-primary {
  background-color: var(--mendel-gold) !important;
  border-color: var(--mendel-gold) !important;
  color: var(--mendel-leather-deep) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--mendel-gold-bright) !important;
  border-color: var(--mendel-gold-bright) !important;
}
.btn-outline-primary {
  color: var(--mendel-leather) !important;
  border-color: var(--mendel-leather) !important;
}
.btn-outline-primary:hover {
  background-color: var(--mendel-leather) !important;
  color: var(--mendel-gold-foil) !important;
}

/* ---------- buscadores de libros / autores en la cabecera ---------- */
.mendel-searches {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-items: center;
  margin: 0.5rem 0;
}
.mendel-search-box {
  position: relative;
  flex-shrink: 1;
  min-width: 0;
}
.mendel-search-box input {
  background: #FBF4E4;
  border: 2px solid var(--mendel-ink);
  border-radius: 999px;
  padding: 9px 38px 9px 16px;
  font-size: 0.85rem;
  color: var(--mendel-ink);
  width: 100%;
  min-width: 90px;
  max-width: 160px;
  box-sizing: border-box;
}
.mendel-search-box input::placeholder {
  color: var(--mendel-ink-soft);
}
.mendel-search-box input:focus {
  outline: none;
  border-color: var(--mendel-gold);
}
.mendel-search-box .mendel-icon {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--mendel-ink-soft);
}
.mendel-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  max-width: 90vw;
  max-height: 360px;
  overflow-y: auto;
  background: #FBF4E4;
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
  z-index: 10000;
}
.mendel-search-results.is-open {
  display: block;
}
.mendel-search-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--mendel-rule);
}
.mendel-search-result:last-child {
  border-bottom: none;
}
.mendel-search-result:hover {
  background: rgba(168, 117, 46, 0.14);
}
.mendel-result-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--mendel-ink);
  font-size: 0.92rem;
}
.mendel-result-meta {
  font-size: 0.74rem;
  color: var(--mendel-ink-soft);
}
.entry-subtitle {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--mendel-ink-soft) !important;
  margin: 0.4rem 0 0.85rem;
  min-height: 2.8em;
}

/* Hueco de anuncio vacío que un plugin inserta antes del título en una
   tarjeta del listado de episodios (sin creatividad real, solo espacio
   en blanco) y descuadraba esa tarjeta frente a sus vecinas. */
.entry-item .banner.mobile {
  display: none;
}

.interview-link {
  display: inline-block;
  margin-top: 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--mendel-leather) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.interview-link:hover {
  color: var(--mendel-gold) !important;
}
.also-in {
  display: block;
  margin-top: 6px;
  font-size: 0.76rem;
  color: var(--mendel-ink-soft);
}
.also-in a {
  color: var(--mendel-ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.also-in a:hover {
  color: var(--mendel-leather);
}

@media (max-width: 782px) {
  .mendel-search-box input {
    max-width: 110px;
    min-width: 70px;
    font-size: 0.78rem;
    padding: 8px 32px 8px 12px;
  }
  .mendel-searches {
    gap: 6px;
  }
}