/*
 * app.css — hand-written layout styles (replacing the old Jetpack layout-grid).
 * Reproduces the original grids exactly; see git history for the derivation.
 */

/* Home: text + media side by side (50/50) from 600px, stacked below. 24px gap. */
.split {
  display: grid;
  gap: 24px;
  align-items: start;
}
@media (min-width: 600px) {
  .split { grid-template-columns: 1fr 1fr; }
}

/* Full-width content block — a formatting context so child margins behave
   exactly as they did inside the old single-column grid. */
.block { display: flow-root; }

/* Book page CTA: three text links + the "buy" button, centered as one block
   with even spacing. The button wraps to its own line on small screens. */
.book-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.3em 1.6em;   /* wider row-gap so the wrapped "Comprar" button clears
                         the links on mobile; no effect on desktop (no wrap) */
  margin: 2em 0 2.2em;
}
.book-cta__link {
  font-family: var(--font-ui);
  font-weight: 400;
  text-decoration: none;
}
/* Only the first link ("Leer un fragmento") is emphasised. */
.book-cta__link:first-child { font-weight: 600; }
/* Terracotta in every state. The :visited selector (0,2,0) must out-specify the
   global `a:visited` (0,1,1) — otherwise visited links flip color on iOS. */
.book-cta__link,
.book-cta__link:visited { color: var(--accent); }
.book-cta__link:hover,
.book-cta__link:active { color: var(--accent-dark); }

/* Country availability lists: a tidy responsive grid of ink links (so a dozen
   red links don't overwhelm the page); accent only on hover. */
.country-grid {
  list-style: none;
  columns: 11rem;        /* items flow DOWN each column, so A-Z reads by column */
  column-gap: 1.4rem;
  margin: 0.7em 0 0.4em;
  padding: 0;
}
.country-grid li { margin: 0 0 0.35em; break-inside: avoid; }
.entry-content .country-grid a {
  color: var(--ink);
  text-decoration: underline dotted;
  text-decoration-color: #bdb5ab;
  text-underline-offset: 0.2em;
}
.entry-content .country-grid a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ============================================================
   Typography & color refresh — "warm editorial"
   Fraunces (headings) + Lora (body); one terracotta accent.
   ============================================================ */
:root {
  --accent: #c0453f;
  --accent-dark: #97332e;
  --ink: #2b2b2b;
  --bg: #faf8f5;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  --quote-indent: 2.4rem;
}

body {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  color: var(--ink);
  background-color: var(--bg);
}

/* Body copy a touch smaller than the theme default (was 20px on desktop). */
.entry-content { font-size: 18px; }
/* Body copy in Source Serif 4 (overrides the theme's .entry-content p/li Lora). */
.entry-content p, .entry-content li { font-family: 'Source Serif 4', Georgia, serif; }

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title, .site-title a, .site-title a:visited {
  font-family: 'Lora', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* Site title as a condensed uppercase logotype. */
.site-title,
.site-title a,
.site-title a:visited {
  font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Links: accent everywhere, with a refined underline offset in body copy. */
a, a:visited { color: var(--accent); }
a:hover, a:active { color: var(--accent-dark); }
.entry-content a {
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
}

/* Nav + site title rest in ink; nav turns accent on hover / when active. */
.main-navigation a,
.site-title a, .site-title a:visited { color: var(--ink); }
.main-navigation a:hover,
.main-navigation > div > ul > li.current-menu-item > a,
.main-navigation > div > ul > li.current_page_item > a { color: var(--accent); }

/* Buttons: one accent for all of them (contact submit, "Comprar el libro"…),
   always in the UI sans font and never underlined — even when the button is a
   link inside .entry-content. */
.wp-block-button__link,
.wp-element-button,
button.wp-block-button__link {
  background-color: var(--accent) !important;
  color: #fff;
  font-family: var(--font-ui);
  text-decoration: none;
}
.wp-block-button__link:hover,
.wp-block-button__link:active,
.wp-element-button:hover { background-color: var(--accent-dark) !important; }
/* Book "buy" button is an <a> in .entry-content: keep it white & un-underlined
   in every link state (default/visited/hover/active/focus). */
.entry-content a.wp-block-button__link,
.entry-content a.wp-block-button__link:visited,
.entry-content a.wp-block-button__link:hover,
.entry-content a.wp-block-button__link:active,
.entry-content a.wp-block-button__link:focus { color: #fff; text-decoration: none; }

/* Blockquotes: a large red opening quote mark hanging outside the top-left
   corner, with the quote text indented past it. */
blockquote, .wp-block-quote {
  position: relative;
  border: 0;
  margin: 1.5em 0 0.5em;
  padding-left: var(--quote-indent);
}
blockquote::before, .wp-block-quote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.12em;
  color: var(--accent);
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  font-size: 3em;
  line-height: 1;
}
/* Quote text set in italic to distinguish it from the upright body copy (same
   Source Serif 4 face); inner titles (<em>) flip upright so they still stand out. */
.entry-content blockquote p,
.entry-content .wp-block-quote p {
  font-style: italic;
}
.entry-content blockquote em,
.entry-content .wp-block-quote em { font-style: normal; }

/* Attribution: only for quotes that carry an author (blockquote.has-source).
   The paragraph immediately after such a quote is its source line — set smaller
   in the UI font with a leading em-dash, aligned with the indented quote text. */
.entry-content .has-source + p {
  margin-top: 0;
  margin-bottom: 1.6em;
  padding-left: var(--quote-indent);
  font-family: var(--font-ui);
  font-size: 0.85em;
  color: #5f5f5f;
}
.entry-content .has-source + p::before { content: "— "; }

/* Focus-visible ring (a11y + polish). */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Language switcher in the nav ---- */
.menu-item--lang .lang-icon {
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.35em;
  vertical-align: -0.16em;
  opacity: 0.9;
}
@media (min-width: 840px) {
  /* Set the language item apart from the section links on the horizontal menu. */
  .main-navigation .menu-item--lang { border-left: 1px solid #d9d1c6; }
}

/* ---- Contact form fields in the UI sans (matching the labels) ---- */
.contact-form input,
.contact-form textarea { font-family: var(--font-ui); }

/* ============================================================
   Book page hero — portrait 3D render (807×1181) beside the pitch text
   (capped at 360px). The CTA (links + buy button) spans full width below the
   cover+text row.

   Cover (320) + gap (2.4rem) + text (360) ≈ 718px, which fits the 740px
   content column with a little room to spare. Below ~774px viewport the column
   is too narrow for that, so the grid restacks to ONE column in the order
   cover → CTA → text: the text drops below the links and button.
   ============================================================ */
.book-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 360px);
  grid-template-areas:
    "cover text"
    "cta   cta";
  column-gap: 2.4rem;
  align-items: center;
  margin: 0.5em 0 0;
}
.book-hero__media { grid-area: cover; margin: 0; }
.book-hero__media img {
  display: block;
  width: 100%;
  max-width: 320px !important;   /* ≈468px tall at the render's 2:3 ratio */
  height: auto;
}
.book-hero__body { grid-area: text; min-width: 0; }
.book-hero .book-cta { grid-area: cta; }

/* Not enough room for the cover + 360px text side by side → single column,
   text last (below the CTA). Threshold derived from the 740px content width.
   The cover cell spans the full content width (1fr); the image centers within
   it, capped at 500px. */
@media (max-width: 773.98px) {
  .book-hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "cover"
      "cta"
      "text";
  }
  /* Full-width cell; center the image via flex (auto-margins misbehave with
     width:100% + max-width in Chromium, so don't rely on them). */
  .book-hero__media { justify-self: stretch; display: flex; justify-content: center; }
  .book-hero__media img { max-width: 500px !important; }
  /* Even out the vertical space above and below the three links: shift 0.35em
     from the gap-to-image (2em → 1.65em) onto the gap-to-button (1.3em row-gap
     → 1.65em), so the links sit centred between the cover and the wrapped
     "Comprar" button. */
  .book-hero .book-cta { margin-top: 1.65em; row-gap: 1.65em; }
}

/* ============================================================
   Book ratings strip — aggregate scores from external sites, shown between
   the hero and the testimonials. Each `.rating` sets `--rating` (0–5); the
   filled terracotta stars are a clipped overlay over grey stars. Update the
   scores AND the "actualizadas" date together whenever you refresh them.
   ============================================================ */
.book-ratings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em 2.4em;
  /* Bottom margin matched to the space above the block (CTA→stars ≈ 68px) so
     the strip sits symmetrically between its neighbours. */
  margin: 1.6em 0 3.8em;
}
.book-ratings .rating {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-ui);
  color: var(--ink);
  text-decoration: none;
}
/* Out-specify the theme's `.entry-content a:hover { text-decoration: underline }`
   (0-2-2) so the rating links never underline. */
.book-ratings .rating:hover,
.book-ratings .rating:focus { text-decoration: none; }
.rating__stars {
  --rating: 5;
  position: relative;
  display: inline-block;
  font-size: 1.15em;
  line-height: 1;
  color: #d9d1c6;            /* empty stars (warm grey) */
}
.rating__stars::before { content: "★★★★★"; }
.rating__stars::after {
  content: "★★★★★";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--rating) / 5 * 100%);
  overflow: hidden;
  white-space: nowrap;
  color: var(--accent);      /* filled stars (terracotta) */
}
.rating__score { font-weight: 700; }
.book-ratings .rating:hover .rating__source { color: var(--accent); }
.book-ratings__updated {
  flex-basis: 100%;
  margin: 0.1em 0 0;
  font-family: var(--font-ui);
  font-size: 0.82em;
  color: #8a8178;            /* muted */
  text-align: center;
}