/* ── Legacy templates on the dark ground ──────────────────────────────────────
   The site background is now the redesign's dark purple everywhere, but the
   legacy Bootstrap templates (index.php, single-escort.php, the taxonomy and
   search pages, footer.php) were written for a white page: their text is
   Bootstrap's near-black default and several panels are explicitly white,
   beige or light grey.

   This sheet re-points those surfaces at the design tokens. It is deliberately
   a TRANSLATION LAYER, not a redesign — each rule exists to keep an existing
   component readable until that component is rebuilt properly. Expect to delete
   chunks of this file as sections get migrated.

   `!important` appears only where the legacy markup carries an inline style
   attribute, which cannot be overridden any other way.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Base text ────────────────────────────────────────────────────────────── */

body {
    color: var(--brand-text);
}

/* Bootstrap leaves headings at the body colour; on the dark ground they need to
   be explicitly light. .articulo-content headings are already handled by
   theme.css, and the navbar sets its own colours through utilities. */
h1, h2, h3, h4, h5, h6 {
    color: #fff;
}

/* The legacy templates lean on #666 / gray / grey for secondary text, which is
   below 4.5:1 against the dark page. */
address,
.single-escort-link a,
.escort-info-header-left {
    color: var(--brand-muted);
}

/* ── Escort cards (index, taxonomy, search) ───────────────────────────────── */

/* The white strip under each thumbnail that slides up on hover. */
.escort-item .escort-item-internal .escort-info-container {
    background-color: var(--brand-card);
}

.escort-item .escort-item-internal {
    border-color: var(--purple-border);
}

/* escort-list.php hardcodes `style="color: #000000"` on the name link. */
.escort-info-header-link,
.escort-info-header-link strong {
    color: var(--brand-text) !important;
}

.escort-info-header-link:hover,
.escort-info-header-link:hover strong {
    color: var(--brand-purpleL) !important;
}

/* The divider pip between name and heart button was drawn in white. */
.escort-item .escort-item-internal .escort-info-container .escort-info-header .escort-info-header-left:before {
    background: var(--purple-border);
}

/* ── Single escort ────────────────────────────────────────────────────────── */

/* Gallery wrapper — `style="background-color: beige"` in single-escort.php. */
.single-escort-container .row > div[style*="beige"] {
    background-color: var(--brand-card) !important;
    border-radius: 12px;
}

/* Info / services / rates panels. */
.single-escort-info-card {
    background-color: var(--brand-card);
    border-bottom-color: var(--purple-border);
}

/* Pink-on-light-grey header; the pink stays, the ground darkens with the card. */
.single-escort-info-card-header {
    border-bottom-color: var(--brand-purpleL);
    color: var(--brand-purpleL);
}

.single-escort-info-card ul li {
    color: var(--brand-text);
}

.single-escort-info-card ul li span {
    color: var(--brand-muted);
}

/* Service chips were mid-grey (#BFBFBF) with white text. */
.single-escort-service-tag {
    background-color: var(--surface-chip);
    border: 1px solid var(--purple-border);
}

.single-escort-service-tag a {
    color: var(--brand-text);
}

.single-escort-service-tag:hover {
    background-color: var(--brand-purpleD);
}

/* The phone number chip sat on a white pill. */
.single-escort-phone span {
    background-color: var(--surface-chip);
    color: var(--brand-purpleL);
}

/* 5px light-grey rule used as a section break. */
.single-escort-container div[style*="#EDEDED"] {
    background: linear-gradient(90deg,
        rgb(var(--brand-purpleL-rgb) / 0) 0%,
        rgb(var(--brand-purpleL-rgb) / .35) 50%,
        rgb(var(--brand-purpleL-rgb) / 0) 100%) !important;
    height: 1px !important;
}

/* ── Banner tables ────────────────────────────────────────────────────────── */

/* footer.php and single-escort.php wrap promo banners in tables with an inline
   white background. The banners are images, so the panel can simply drop away. */
table[style*="background-color:#fff"],
table[style*="background-color: #fff"] {
    background-color: transparent !important;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

/* Most footer copy inherits the body colour, and the zone directory is wrapped
   in a <font color=#808080> tag — both too dim on #0a0a1a. */
footer,
footer p,
footer td,
footer strong,
footer font {
    color: var(--brand-muted);
}

footer h2 {
    color: #fff;
}

/* ── Comments / experiencias ──────────────────────────────────────────────── */

.experiencia-box,
.row-form-comments {
    color: var(--brand-text);
}

.experiencia-box {
    background-color: var(--brand-card);
    border-color: var(--purple-border);
}

/* ── Forms on legacy pages ────────────────────────────────────────────────── */

/* The search/filter bar selects keep a light field so the native dropdown stays
   legible, but the label text around them follows the page. */
.filterbar-container {
    color: var(--brand-text);
}