/*
Theme Name: VelvetMap
Theme URI: https://velvetmap.com
Description: VelvetMap's look (deep velvet purple, gold, Lora and Inter) on top of the Escort Lite theme. Every Escort Lite update still applies: this child theme only changes colours, fonts and the logo.
Author: VelvetMap
Template: escort-lite
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: velvetmap
*/

/* ------------------------------------------------------------------------
 * Fonts (self-hosted: no request to Google). Lora for headings, Inter for
 * text. Both SIL Open Font License 1.1, see fonts/OFL.txt.
 * --------------------------------------------------------------------- */
@font-face {
  font-family: "Lora";
  src: url("fonts/lora-variable.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-regular-latin.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-semibold-latin.woff") format("woff");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-bold-latin.woff") format("woff");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------------
 * Colours: velvet purple and gold. Escort Lite reads all of these.
 * --------------------------------------------------------------------- */
:root {
  --color-primary: #1f0a26;      /* header, footer, start of the hero */
  --color-accent: #5b1a5e;       /* end of the hero, links */
  --color-secondary: #e2b26e;    /* gold: hovers on dark backgrounds */
  --color-action: #b0175c;       /* buttons */
  --color-action-hover: #8e0f4a;
  --color-bg: #faf7fb;
  --color-surface: #ffffff;
  --color-text: #24142b;
  --color-text-muted: #6b5d71;
  --color-border: #ece3ef;
  --vm-gold: #d9a55b;
  --vm-gold-light: #f3d9a4;
  --vm-gold-text: #8c5d1f;       /* gold that reads on white */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --shadow: 0 2px 14px rgba(42, 15, 51, 0.08);
  --shadow-hover: 0 10px 28px rgba(42, 15, 51, 0.16);
}

/* Headings in Lora */
h1, h2, h3,
.home-hero h1,
.page-header h1,
.home-section-title,
.escort-card-title,
.plan-section-title,
.site-branding a {
  font-family: var(--font-serif);
  letter-spacing: -0.005em;
}

.home-hero h1 {
  font-weight: 700;
}

/* ------------------------------------------------------------------------
 * Header: a gold hairline under it, and the gold pin before the site name
 * (when no logo is uploaded; the logo replaces both).
 * --------------------------------------------------------------------- */
.site-header {
  box-shadow: 0 1px 0 rgba(217, 165, 91, 0.35), 0 2px 10px rgba(0, 0, 0, 0.25);
}

.site-branding > a:not(.custom-logo-link) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.site-branding > a:not(.custom-logo-link)::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 30px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 54'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f3d9a4'/%3E%3Cstop offset='.55' stop-color='%23d9a55b'/%3E%3Cstop offset='1' stop-color='%23b9813a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M20 0C8.95 0 0 8.95 0 20c0 14.2 17.1 31.3 18.6 32.8a2 2 0 0 0 2.8 0C22.9 51.3 40 34.2 40 20 40 8.95 31.05 0 20 0Z' fill='url(%23g)'/%3E%3Cpath d='M20 29.5c-.4 0-.8-.15-1.1-.42C14.6 25.2 11 22 11 18.2 11 15.3 13.2 13 16 13c1.6 0 3 .75 4 1.95C21 13.75 22.4 13 24 13c2.8 0 5 2.3 5 5.2 0 3.8-3.6 7-7.9 10.88-.3.27-.7.42-1.1.42Z' fill='%232a0f33'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------------
 * Hero and page headers: velvet gradient with a soft gold glow.
 * --------------------------------------------------------------------- */
.home-hero,
.page-header {
  background:
    radial-gradient(900px 360px at 85% -20%, rgba(217, 165, 91, 0.20), transparent 60%),
    radial-gradient(700px 300px at 0% 120%, rgba(176, 23, 92, 0.22), transparent 60%),
    linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

.home-hero-links a {
  color: var(--vm-gold-light);
}

.home-hero-links a:hover,
.home-hero-links a:focus-visible {
  color: #fff;
}

/* A thin gold rule under section titles */
.home-section-title {
  position: relative;
  padding-bottom: 0.35rem;
}

.home-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5rem;
  height: 2px;
  background: linear-gradient(90deg, var(--vm-gold), var(--vm-gold-light));
}

/* City and country buttons: gold edge on hover */
.city-chip:hover,
.city-chip:focus-visible {
  border-color: var(--vm-gold);
}

.city-chip-all {
  color: var(--vm-gold-text);
  border-color: var(--vm-gold);
}

/* Readable hovers on white */
.service-tags a:hover,
.service-tags a:focus-visible {
  border-color: var(--color-action);
  color: var(--color-action);
}

/* Footer */
.site-footer {
  border-top: 1px solid rgba(217, 165, 91, 0.35);
}

/* ------------------------------------------------------------------------
 * Directory home page: a gold panel with velvet text and button.
 * --------------------------------------------------------------------- */
.home-dir-strip {
  background:
    radial-gradient(700px 160px at 85% -40%, rgba(217, 165, 91, 0.22), transparent 70%),
    var(--color-primary);
  border-top-color: rgba(217, 165, 91, 0.25);
}

.home-dir-intro a {
  color: var(--vm-gold-light);
}

.home-dir-spotlight {
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(255, 255, 255, 0.35), transparent 70%),
    linear-gradient(135deg, var(--vm-gold-light), var(--vm-gold) 55%, #c18a43);
  color: var(--color-primary);
}

.home-dir-spot-title {
  font-family: var(--font-serif);
}

.home-dir-spot-btn,
.home-dir-spot-btn:visited {
  background: var(--color-primary);
}

.home-dir-spot-btn:hover,
.home-dir-spot-btn:focus-visible {
  background: var(--color-accent);
}

.home-dir-spot-label {
  border-top-color: rgba(31, 10, 38, 0.18);
}

.home-dir-pills a {
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-primary);
}

.home-dir-pills a:hover,
.home-dir-pills a:focus-visible {
  background: var(--color-primary);
  color: var(--vm-gold-light);
}

.home-dir-country h3 {
  font-family: var(--font-serif);
}