/* ==========================================================================
   Farmacia Parque Yamaguchi - Diseno de la ficha de una entrada
   --------------------------------------------------------------------------
   AMBITO: solo la entrada que se esta viendo (body.single-post). La hoja se
   carga unicamente ahi, desde fpy_web_entrada_assets().

   POR QUE EXISTE (medido sobre la web publicada el 30-09-2026):
   La ficha de la entrada era lo unico del sitio que seguia con el aspecto por
   defecto del tema. No llevaba ninguna clase del plugin, asi que:
     - los titulos salian a 35 px y en el verde del tema (#326d22), no en el
       verde de la marca;
     - el texto iba a 16 px con el interlineado del tema;
     - y habia un fallo de verdad en el movil: la tabla comparativa del articulo
       del TDAH mide 439 px en una pantalla de 390 y, como el plugin bloquea el
       desplazamiento lateral (html,body{overflow-x:clip}), las columnas de la
       derecha NO se podian ver de ninguna manera desde el telefono.

   El <h1> de la entrada lo antepone el plugin (inc/titulos.php), con la clase
   .fpy-titulo-entrada; aqui solo se le da el tamano y el color.
   ========================================================================== */

/* ---- El texto, a medida de lectura ---------------------------------------- */
body.single-post .entry-content p,
body.single-post .entry-content li {
  font-size: 17px;
  line-height: 1.8;
  color: #3d423e;
}

body.single-post .entry-content > p:first-of-type {
  font-size: 19.5px;
  line-height: 1.7;
}

body.single-post .entry-content strong {
  color: #292d2a;
}

/* ---- Titulos ---------------------------------------------------------------
   El h1 es el titulo de la entrada (lo pone el plugin). Los h2 y h3 del texto
   pasan al verde de la marca, en vez del verde del tema. */
body.single-post .entry-content h1,
body.single-post .entry-content .fpy-titulo-entrada {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.12;
  letter-spacing: -.03em;
  color: #292d2a;
  margin: 0 0 26px;
}

body.single-post .entry-content h2 {
  font-size: clamp(25px, 2.8vw, 32px);
  line-height: 1.25;
  color: #294a38;
  margin: 44px 0 16px;
}

body.single-post .entry-content h3 {
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.3;
  color: #294a38;
  margin: 34px 0 12px;
}

body.single-post .entry-content h4 {
  font-size: 19.5px;
  line-height: 1.35;
  color: #292d2a;
  margin: 26px 0 10px;
}

/* ---- Enlaces, listas y citas ---------------------------------------------- */
body.single-post .entry-content a {
  color: #294a38;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.single-post .entry-content ul,
body.single-post .entry-content ol {
  margin: 0 0 22px;
  padding-left: 24px;
}

body.single-post .entry-content li {
  margin-bottom: 8px;
}

body.single-post .entry-content blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 4px solid #cad2c5;
  color: #4a554d;
  font-style: italic;
}

/* ---- Imagenes -------------------------------------------------------------- */
body.single-post .entry-content img {
  border-radius: 14px;
  height: auto;
}

body.single-post .ct-featured-image {
  /* Blocksy limita la imagen destacada con una cadena de :not()
     (.ct-featured-image:not(.alignwide):not(.alignfull){max-width:...}, que gana
     en prioridad a cualquier selector sencillo), asi que aqui hace falta
     !important. A 750 px el cartel ocupaba una pantalla entera de alto. */
  max-width: 560px !important;
  margin: 0 auto 30px;
}

body.single-post .ct-featured-image img {
  border-radius: 18px;
}

/* ---- Tablas ----------------------------------------------------------------
   El arreglo del movil: la tabla se convierte en su propia zona desplazable.
   `display:block` + `overflow-x:auto` es el mismo recurso que ya usa el plugin
   en las paginas legales (.fpy-reading table). Sin esto, en un movil las
   columnas de la derecha quedaban cortadas y eran inalcanzables.

   OJO: aqui NO se pone width:100%. La tabla es hija directa de .entry-content,
   y el limite de 750 px de las paginas interiores lo pone el nucleo de
   WordPress con un selector :where() (prioridad minima) sobre los hijos. Al
   ponerle un ancho propio, la tabla se saltaba ese limite y se estiraba a los
   1438 px de la ventana: se midio. Con display:block y sin ancho, la tabla
   conserva su limite natural y, si no cabe, se desplaza dentro de su caja. */
body.single-post .entry-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: 0 0 26px;
  font-size: 15.5px;
}

body.single-post .entry-content th,
body.single-post .entry-content td {
  padding: 12px 14px;
  border: 1px solid #dce4de;
  text-align: left;
  vertical-align: top;
}

body.single-post .entry-content th {
  background: #e7f0ea;
  color: #294a38;
  font-weight: 700;
}

body.single-post .entry-content caption {
  caption-side: top;
  text-align: left;
  font-size: 14px;
  color: #6b726c;
  padding-bottom: 8px;
}

/* ---- Pantallas pequenas ---------------------------------------------------- */
@media (max-width: 600px) {
  body.single-post .entry-content p,
  body.single-post .entry-content li {
    font-size: 17px;
    line-height: 1.72;
  }

  body.single-post .entry-content > p:first-of-type {
    font-size: 17px;
  }

  body.single-post .entry-content h2 {
    margin-top: 36px;
  }

  body.single-post .ct-featured-image {
    max-width: 100%;
    margin-bottom: 22px;
  }
}