/* ==========================================================================
   theme.css — the magazine's brand, layered on top of Bootstrap 5.3.

   Load order on every page:  bootstrap.min.css  →  theme.css

   This file only (1) overrides Bootstrap's own CSS variables and (2) adds
   the few things Bootstrap doesn't have. Everything else — grid, navbar,
   cards, buttons, forms, spacing, utilities — is stock Bootstrap.
   Dark mode uses Bootstrap's own data-bs-theme="dark".
   ========================================================================== */

/* ---- 1. Brand variables ------------------------------------------------ */

@font-face {
  font-family: "Material Symbols Outlined";
  src: url("/assets/fonts/material-symbols-outlined-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
/* Material Symbols: only the icons search, play_arrow and swap_horiz, fixed at
   FILL 0, wght 400, GRAD 0, opsz 24. To add an icon, rebuild the subset (DESIGN.md). */

/* Fonts: hosted here, limited to what the site uses (latin, Archivo wght 400-800
   and wdth 68-100, DM Serif Display regular). Files in /assets/fonts/. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-wdth-wght.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 68% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("/assets/fonts/dm-serif-display-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,
[data-bs-theme="light"] {
  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-serif-display: "DM Serif Display", Georgia, "Times New Roman", serif;

  /* White paper, wet-bark ink. Body text uses system fonts (see DESIGN.md) */
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
  --bs-body-color: #1f2a24;
  --bs-body-color-rgb: 31, 42, 36;
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #1f2a24;
  --bs-emphasis-color-rgb: 31, 42, 36;
  --bs-secondary-color: #4f5c60;       /* muted text, 5.9:1 on paper */
  --bs-secondary-color-rgb: 79, 92, 96;
  --bs-secondary-bg: #f3f4f1;
  --bs-secondary-bg-rgb: 243, 244, 241;
  --bs-tertiary-bg: #f3f4f1;           /* very light gray: bands and sunken areas, page stays white */
  --bs-tertiary-bg-rgb: 243, 244, 241;
  --bs-border-color: #b8c0bb;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;

  /* Flagging-tape pink = primary, moss = secondary */
  --bs-primary: #d4205f;
  --bs-primary-rgb: 212, 32, 95;
  --bs-secondary: #3f5e3a;
  --bs-secondary-rgb: 63, 94, 58;
  --bs-dark: #1f2a24;
  --bs-dark-rgb: 31, 42, 36;

  /* Links use the deeper pink, which passes contrast for small text */
  --bs-link-color: #a8114a;
  --bs-link-color-rgb: 168, 17, 74;
  --bs-link-hover-color: #7d0c37;
  --bs-link-hover-color-rgb: 125, 12, 55;
}

[data-bs-theme="dark"] {
  --bs-body-color: #e6eae1;
  --bs-body-color-rgb: 230, 234, 225;
  --bs-body-bg: #141a16;
  --bs-body-bg-rgb: 20, 26, 22;
  --bs-emphasis-color: #e6eae1;
  --bs-emphasis-color-rgb: 230, 234, 225;
  --bs-secondary-color: #a3afa7;
  --bs-secondary-color-rgb: 163, 175, 167;
  --bs-secondary-bg: #1c2520;
  --bs-secondary-bg-rgb: 28, 37, 32;
  --bs-tertiary-bg: #1c2520;
  --bs-tertiary-bg-rgb: 28, 37, 32;
  --bs-border-color: #34423a;

  --bs-secondary: #96bd8c;
  --bs-secondary-rgb: 150, 189, 140;
  --bs-link-color: #ff7aa3;
  --bs-link-color-rgb: 255, 122, 163;
  --bs-link-hover-color: #ffa3c0;
  --bs-link-hover-color-rgb: 255, 163, 192;
}

/* ---- 2. Typography ----------------------------------------------------- */
/* Headlines: condensed Archivo. UI text: normal-width Archivo. Reading
   text: Newsreader (the body font above). Sentence case, never all caps.  */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-display);
  font-stretch: 68%;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1, .h1 { font-size: clamp(2.75rem, 1.8rem + 4.2vw, 5rem); line-height: 0.95; }
h2, .h2 { font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem); }
h3, .h3 { font-size: 2rem; }
h4, .h4 { font-size: 1.5rem; }
.display-1 { font-size: clamp(2.75rem, 1.1rem + 5.6vw, 5.75rem); }

/* Big headlines (page title, landing hero, article title) use DM Serif Display */
h1, .h1, .display-1 {
  font-family: var(--font-serif-display);
  font-stretch: 100%;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* DM Serif Display on any heading that should look like the logo type */
.font-serif-display {
  font-family: var(--font-serif-display);
  font-stretch: 100%;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

p { text-wrap: pretty; }

/* UI text (labels, meta, captions, nav) uses the normal-width Archivo */
.font-ui,
.navbar,
.btn,
.form-label,
.form-control,
.figure-caption,
.small-meta {
  font-family: var(--font-display);
  font-stretch: 100%;
}

.small-meta {
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}

.measure { max-width: 66ch; }

/* ---- 3. Bootstrap components, restyled via their own variables ---------- */

/* Strong 2px rule in the body-text color (works in light and dark) */
.border-strong { border-color: var(--bs-body-color) !important; }

/* Navbar */
.navbar {
  --bs-navbar-color: var(--bs-body-color);
  --bs-navbar-hover-color: var(--bs-link-color);
  --bs-navbar-active-color: var(--bs-body-color);
  --bs-navbar-brand-color: var(--bs-body-color);
  --bs-navbar-brand-hover-color: var(--bs-link-color);
  --bs-navbar-brand-font-size: 2rem;
  --bs-navbar-toggler-border-color: var(--bs-body-color);
  --bs-navbar-toggler-border-radius: 0;
}

.navbar-brand { line-height: 1; }

.navbar .nav-link {
  font-weight: 600;
  border-bottom: 2px solid transparent;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  border-bottom-color: var(--bs-primary);
}

/* Buttons: square, 2px border, bold UI font.
   One control height for every button, button group, form field and the
   navbar toggler, so they always line up (change --control-height only). */
:root { --control-height: 2.75rem; }

.btn {
  --bs-btn-font-weight: 700;
  --bs-btn-border-width: 2px;
  --bs-btn-border-radius: 0;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0;
  --bs-btn-font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height);
  line-height: 1;
  white-space: nowrap;
}

/* Small variants keep the same height; only the side padding is tighter */
.btn-sm,
.btn-group-sm > .btn {
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: 0;
}

.btn-group > .btn { padding-left: 1rem; padding-right: 1rem; }

.navbar-toggler {
  height: var(--control-height);
  display: inline-flex;
  align-items: center;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #d4205f;
  --bs-btn-border-color: #d4205f;
  --bs-btn-hover-color: var(--bs-body-bg);
  --bs-btn-hover-bg: var(--bs-body-color);
  --bs-btn-hover-border-color: var(--bs-body-color);
  --bs-btn-focus-shadow-rgb: 212, 32, 95;
  --bs-btn-active-color: var(--bs-body-bg);
  --bs-btn-active-bg: var(--bs-body-color);
  --bs-btn-active-border-color: var(--bs-body-color);
  --bs-btn-disabled-bg: #d4205f;
  --bs-btn-disabled-border-color: #d4205f;
}

/* The ghost button. Overridden so it adapts to light and dark mode. */
.btn-outline-dark {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-body-color);
  --bs-btn-hover-color: var(--bs-body-bg);
  --bs-btn-hover-bg: var(--bs-body-color);
  --bs-btn-hover-border-color: var(--bs-body-color);
  --bs-btn-focus-shadow-rgb: var(--bs-body-color-rgb);
  --bs-btn-active-color: var(--bs-body-bg);
  --bs-btn-active-bg: var(--bs-body-color);
  --bs-btn-active-border-color: var(--bs-body-color);
}

/* Icon-only button (Google Material Symbols). Square, same height as every control. */
.btn-icon { width: var(--control-height); padding: 0; }
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
}

/* Search: the magnifier button opens a text box that grows to its left.
   No animation (DESIGN.md: motion is rare). */
.search-form { display: flex; align-items: center; }
.search-input { display: none; width: 16rem; max-width: calc(100vw - 9rem); margin-right: -2px; }
.search-form.is-open .search-input { display: block; }
/* No pink glow around the search box when it opens; its 2px dark border stays. */
.search-form .search-input:focus { box-shadow: none; outline: none; }

/* Forms */
.form-label {
  font-size: 0.875rem;
  font-weight: 700;
}

.form-control {
  height: var(--control-height);
  padding-top: 0;
  padding-bottom: 0;
  border: 2px solid var(--bs-body-color);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.form-control:focus {
  border-color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.35);
}

.form-control::placeholder { color: var(--bs-secondary-color); }

/* Cards are the story cards: no border, no background, image then text */
.card {
  --bs-card-border-width: 0;
  --bs-card-bg: transparent;
  --bs-card-border-radius: 0;
  --bs-card-inner-border-radius: 2px;
  --bs-card-color: var(--bs-body-color);
}

.card-img-top { border-radius: 2px; }
.card-body { padding: 1rem 0 0; }

/* Card title links stay plain until hover */
.card-title a,
.story-title a {
  color: var(--bs-body-color);
  text-decoration: none;
}

.card:hover .card-title a,
.story-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--bs-primary);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
}

/* Featured article titles (home hero, section featured): never underlined,
   not even on hover */
.story-link,
.story-link:hover,
.story-title a.story-link,
.story-title a.story-link:hover {
  color: var(--bs-body-color);
  text-decoration: none;
}

/* ---- 4. Magazine-only additions ----------------------------------------- */

/* Tape: the signature element. A strip of flagging tape with a diagonal cut.
   Marks every section name and category. Works on h2, span or a.          */
.tape {
  display: inline-block;
  width: fit-content;
  justify-self: start;
  margin: 0;
  padding: 0.5rem 1.5rem 0.5rem 0.75rem;
  background: var(--bs-primary);
  color: #fff;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.7rem) 100%, 0 100%);
}

.tape-secondary {
  background: var(--bs-secondary);
  color: #fff;
}

[data-bs-theme="dark"] .tape-secondary { color: #141a16; }

/* Image placeholder. Replace with a real <img class="object-fit-cover"> */
.ph {
  border-radius: 2px;
  background-color: #3f5e3a;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200V128l38-30 30 22 52-60 40 40 36-26 46 52 28-20 30 28v66z' fill='%23000' fill-opacity='.28'/%3E%3Cpath d='M0 200v-48l50-18 44 24 60-34 56 30 48-22 42 20v48z' fill='%23000' fill-opacity='.28'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #3f5e3a, #1f2a24);
  background-size: 100% 100%;
}

/* Containers are 10% narrower than Bootstrap's from the lg breakpoint up, so
   cards, images and text blocks read slightly smaller. Navbar, hero and
   sections all share these widths, so their edges stay aligned.            */
@media (min-width: 992px)  { .container { max-width: 864px; } }
@media (min-width: 1200px) { .container { max-width: 1026px; } }
@media (min-width: 1400px) { .container { max-width: 1188px; } }

/* Logo: contour-line symbol + RELIEVE in the Ducados typeface, both as SVG
   outlines. It takes the text color, so it works on light and dark.        */
.wordmark { display: block; height: 2.25rem; width: auto; fill: currentColor; }
.wordmark-lg { height: 3.5rem; }

/* Phones and tablets: a slimmer logo keeps the top bar short so the content
   stays the focus. */
@media (max-width: 991.98px) { .navbar .wordmark { height: 1.75rem; } }

/* Full-bleed photos on phones: story photos inside a container run edge to edge
   (the container side padding is 0.75rem); text keeps its margins. */
@media (max-width: 767.98px) {
  main .container .ratio:is(.ph, :has(> img)) {
    width: calc(100% + 1.5rem);
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    border-radius: 0;
  }
}

/* Extra aspect ratios for Bootstrap's .ratio helper */
.ratio-3x2 { --bs-aspect-ratio: 66.6667%; }
.ratio-2x1 { --bs-aspect-ratio: 50%; }

/* Text laid over a photo. The soft dark fade at the top keeps white text
   readable on any picture. */
.hero-overlay {
  padding: 2rem 0 5rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

/* Home featured article: title, description and details sit over the photo from
   768px; on phones the photo is a thin strip, so they go under it. */
.hero-story { padding-top: 1rem; }
.hero-story .story-title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.05; }
@media (min-width: 768px) {
  .hero-story {
    position: absolute;
    inset: auto 0 0 0;
    padding: 5rem 0 1.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
    color: #fff;
  }
  .hero-story .story-title a.story-link,
  .hero-story .story-title a.story-link:hover { color: #fff; }
  .hero-story .small-meta { color: rgba(255, 255, 255, 0.85); }
}
/* Aspect ratio by width: phones 4:3, tablets 16:9, desktop 21:9 (Bootstrap's ratio-21x9) */
@media (max-width: 767.98px) {
  .hero-featured .ratio-21x9 { --bs-aspect-ratio: 75%; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-featured .ratio-21x9 { --bs-aspect-ratio: 56.25%; }
}

/* Pull quote for articles (use on <blockquote class="blockquote pullquote">) */
.pullquote {
  max-width: 22ch;
  margin-bottom: 0;
  font-family: var(--font-display);
  font-stretch: 68%;
  font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);
  font-weight: 800;
  line-height: 0.98;
  text-wrap: balance;
}

/* ---- 5. Bilingual switching --------------------------------------------
   Every translatable string is written twice: lang="es" and lang="en".   */

html[data-lang="es"] body [lang="en"],
html[data-lang="en"] body [lang="es"] {
  display: none !important;
}