/* =============================================================================
   escortsriviera.com — site.css
   Dark, premium Riviera directory aesthetic.
   Palette: ink black / champagne gold / deep wine / warm off-white
============================================================================= */

:root {
    /* Color */
    --color-ink:        #0B0E14;
    --color-surface:    #16131A;
    --color-surface-2:  #1D1923;
    --color-gold:       #C9A875;
    --color-gold-dim:   #8A7252;
    --color-wine:       #8E1F3B;
    --color-wine-bright:#B23856;
    --color-text:       #E8E3D9;
    --color-text-dim:   #6B6470;
    --color-border:     #2A2530;

    /* Type */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing scale */
    --space-1: 0.4rem;
    --space-2: 0.8rem;
    --space-3: 1.6rem;
    --space-4: 2.4rem;
    --space-5: 4rem;
    --space-6: 6.4rem;

    /* Radius — soft but not rounded-default */
    --radius-sm: 3px;
    --radius-md: 6px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--color-ink);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: var(--color-text);
}

:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* -----------------------------------------------------------------------
   Signature element: the "breathing" gold hairline under section headings
----------------------------------------------------------------------- */
.heading-rule {
    display: block;
    width: 48px;
    height: 1px;
    background: var(--color-gold);
    margin: var(--space-2) 0 var(--space-3);
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.heading-rule.is-visible {
    width: 120px;
}

/* =========================================================================
   SITE HEADER
========================================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(11, 14, 20, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.site-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.site-header__logo img {
    height: 48px;
    width: auto;
    transform: translateY(-7px);
}

.site-header__nav {
    display: flex;
    gap: var(--space-4);
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    flex: 1;
    justify-content: flex-end;
    margin-right: var(--space-2);
}
.site-header__nav a {
    color: var(--color-gold);
    transition: color 0.2s ease;
    white-space: nowrap;
}
.site-header__nav a:hover { color: var(--color-text); }

/* Pill button holding flag + label, matching the language control on the
   maintenance page. The flag carries no border of its own here — the pill
   provides it, and two nested borders read as a mistake. */
.site-header__lang {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    padding: 0.3rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    transition: border-color 0.2s ease;
}
.site-header__lang img {
    display: block;
    width: 24px;
    height: 16px;
    border-radius: 2px;
}
.site-header__lang:hover,
.site-header__lang:focus-visible {
    border-color: var(--color-gold);
}

/* Account / login icon.
   Stroke-based to match the other icons on the site rather than a filled
   glyph. Sits between the language pill and the burger. */
.site-header__account {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-dim);
    transition: border-color 0.2s ease, color 0.2s ease;
}
.site-header__account:hover,
.site-header__account:focus-visible {
    border-color: var(--color-gold);
    color: var(--color-gold);
}
.site-header__account svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    overflow: visible;
}

/* Shown only when an advertiser is signed in, so the same icon reads as
   "your account" rather than "sign in" without needing a second icon. */
.site-header__account-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-gold);
    border: 1.5px solid var(--color-ink);
}

/* Mobile menu account link. Separated from site navigation by a gold
   rule because it leads somewhere different in kind. */
.site-header__menu-account {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-gold);
    /* Colour is set on the qualified selector further down, which has to
       outrank `.site-header__menu-nav a`. Nothing set here, so the two
       rules cannot disagree. */
}
.site-header__menu-account:hover {
    color: var(--color-gold);
}
.site-header__menu-account svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex-shrink: 0;
}

/* Label names the language being switched TO, matching the flag beside
   it. Deliberately dimmer than the nav links so this utility control
   does not compete with the "Get Listed" call to action. */
.site-header__lang-label {
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    color: var(--color-text-dim);
    white-space: nowrap;
    transition: color 0.2s ease;
}
.site-header__lang:hover .site-header__lang-label {
    color: var(--color-gold);
}

/* Burger toggle — hidden on desktop, shown at the mobile breakpoint */
.site-header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}
.site-header__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.site-header--open .site-header__burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.site-header--open .site-header__burger span:nth-child(2) {
    opacity: 0;
}
.site-header--open .site-header__burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile slide-down menu panel */
.site-header__menu {
    display: none;
    padding: var(--space-2) var(--space-3) var(--space-3);
    border-top: 1px solid var(--color-border);
    background: rgba(11, 14, 20, 0.98);
}
.site-header__menu-nav {
    display: flex;
    flex-direction: column;
}
.site-header__menu-nav a {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--color-text);
    padding: var(--space-2) 0;
}
/* Both selectors qualified with the element, so they beat
   `.site-header__menu-nav a` (0-1-1) above. Without the `a`, these are
   0-1-0 and lose — which silently forced every link in the mobile menu
   to --color-text, including the CTA that is meant to be gold.

   Three tiers on purpose. In a vertical stack colour is the only
   hierarchy available: if everything is gold, nothing is emphasised and
   the CTA stops reading as one. */
.site-header__menu-nav a.site-header__menu-cta {
    color: var(--color-gold);
}
.site-header__menu-nav a.site-header__menu-account {
    /* Body font at a smaller size marks this as a different KIND of
       destination. The colour deliberately stays full-strength: anyone
       opening this menu looking for the login is an advertiser trying to
       get in, so it is the primary action for the person seeking it.
       The gold rule above already does the categorising — dimming on top
       of that made the one thing a returning advertiser came to find the
       hardest thing on the panel to see. */
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
}
.site-header__menu-nav a.site-header__menu-account:hover,
.site-header__menu-nav a.site-header__menu-account:focus-visible {
    color: var(--color-gold);
}

@media (max-width: 720px) {
    .site-header__nav { display: none; }
    .site-header__inner { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
    .site-header__logo img { height: 32px; transform: translateY(-5px); }
    .site-header__burger { display: flex; }
    .site-header--open .site-header__menu { display: block; }
    /* Desktop only. Below this the pill collapses back to a bare flag
       beside the burger — exactly how the header renders today — rather
       than leaving an empty-looking pill around a 24px image. */
    .site-header__lang-label { display: none; }
    /* Moves into the dropdown menu below this width, so the bar keeps
       logo + flag + burger and nothing is crowded. */
    .site-header__account { display: none; }
    .site-header__lang {
        gap: 0;
        padding: var(--space-1);
        border-color: transparent;
    }
    .site-header__lang img {
        border: 1px solid var(--color-border);
        transition: border-color 0.2s ease;
    }
    .site-header__lang:hover { border-color: transparent; }
    .site-header__lang:hover img { border-color: var(--color-gold); }
}

/* =========================================================================
   SITE FOOTER
========================================================================= */
.site-footer {
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-6);
    background: var(--color-surface);
}

.site-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4);
}

.site-footer__disclaimer {
    color: var(--color-text-dim);
    font-size: 0.82rem;
    line-height: 1.7;
    /*max-width: 760px;*/
    margin: 0 0 var(--space-4);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    font-size: 0.85rem;
    margin-bottom: var(--space-4);
}
.site-footer__links a {
    color: var(--color-text-dim);
    transition: color 0.2s ease;
}
.site-footer__links a:hover { color: var(--color-gold); }

.site-footer__copy {
    color: var(--color-text-dim);
    font-size: 0.78rem;
    margin: 0;
}

/* =========================================================================
   BREADCRUMB
========================================================================= */
.breadcrumb {
    display: flex;
    gap: var(--space-2);
    font-size: 0.82rem;
    color: var(--color-text-dim);
    margin-bottom: var(--space-4);
}
.breadcrumb a { color: var(--color-text-dim); }
.breadcrumb a:hover { color: var(--color-gold); }
.breadcrumb span:last-child { color: var(--color-text); }

/* =========================================================================
   CITY PAGE
========================================================================= */
.city-page__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4);
}

.city-page__heading {
    font-size: clamp(2rem, 4vw, 3rem);
}

.city-page__count {
    color: var(--color-text-dim);
    font-size: 0.9rem;
    margin: 0 0 var(--space-5);
}

.city-page__empty {
    color: var(--color-text-dim);
    padding: var(--space-5) 0;
    font-style: italic;
}

.listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
}

.listing-card {
    position: relative;
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.listing-card:hover {
    border-color: var(--color-gold-dim);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px -8px rgba(201, 168, 117, 0.18);
}

.listing-card__photo {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--color-surface-2);
    overflow: hidden;
}
.listing-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.listing-card:hover .listing-card__photo img {
    transform: scale(1.04);
}

.listing-card__photo-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
}

.listing-card__badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    background: var(--color-wine);
    color: var(--color-text);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3em 0.7em;
    border-radius: var(--radius-sm);
}

.listing-card__info {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.listing-card__age,
.listing-card__nationality {
    font-size: 0.88rem;
    color: var(--color-text);
}

.listing-card__verified {
    font-size: 0.75rem;
    color: var(--color-gold);
    margin-top: var(--space-1);
}

.listing-card--premium { border-color: var(--color-gold-dim); }
.listing-card--premium::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px rgba(201, 168, 117, 0.15);
}

/* =========================================================================
   PROFILE PAGE
========================================================================= */
.profile-page__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4);
}

.profile-page__layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-5);
    align-items: start;
}

@media (max-width: 860px) {
    .profile-page__layout {
        grid-template-columns: 1fr;
    }
}

.profile-page__gallery {
    display: grid;
    gap: var(--space-2);
}

.profile-page__photo {
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.profile-page__photo-placeholder {
    aspect-ratio: 3 / 4;
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.profile-page__details {
    position: sticky;
    top: calc(var(--space-5) + 64px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.profile-page__verified-badge {
    display: inline-block;
    font-size: 0.78rem;
    color: var(--color-gold);
    border: 1px solid var(--color-gold-dim);
    border-radius: var(--radius-sm);
    padding: 0.3em 0.8em;
    margin-bottom: var(--space-3);
}

.profile-page__attributes {
    display: grid;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
}
.profile-page__attributes div { display: flex; flex-direction: column; gap: 0.2em; }
.profile-page__attributes dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-dim);
}
.profile-page__attributes dd {
    margin: 0;
    font-size: 0.98rem;
}

.profile-page__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}
.profile-page__tag {
    font-size: 0.78rem;
    color: var(--color-text-dim);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.3em 0.9em;
}

.profile-page__contact {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
}
.profile-page__contact h2 {
    font-size: 1.1rem;
    margin-bottom: var(--space-2);
}
.profile-page__contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.profile-page__contact a {
    display: inline-block;
    background: var(--color-wine);
    color: var(--color-text);
    padding: 0.6em 1.2em;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    transition: background 0.2s ease;
}
.profile-page__contact a:hover { background: var(--color-wine-bright); }

.profile-page__disclaimer {
    margin-top: var(--space-4);
    font-size: 0.76rem;
    color: var(--color-text-dim);
    line-height: 1.6;
}
/* Counsel-required notice on profile pages. Deliberately more legible than
   the generic fine print: it exists to be read, and to be demonstrably
   readable if the page is ever produced as evidence of notice. */
.profile-page__disclaimer--required {
    font-size: 0.82rem;
    color: var(--color-text);
    background: rgba(142, 31, 59, 0.10);
    border-left: 3px solid var(--color-wine, #8e1f3b);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
}
/* =========================================================================
   CITY MAP  (Browse by city — homepage & /escorts/)
   Static coastline SVG (/assets/img/riviera-map.svg) + pure-HTML marker
   overlay. No JavaScript. Marker anchor positions are % of the map box,
   computed from the same Web Mercator projection used to generate the SVG.
   On narrow screens the map keeps its minimum width and scrolls
   horizontally instead of shrinking the labels. The rtl/ltr pair below
   makes the initial scroll position rest at the RIGHT edge (Menton side)
   with no JavaScript; /assets/js/city-map.js then applies the initial
   data-scroll-offset. min-width is 900px so the map fits both host
   containers without scrolling on desktop (homepage inner: 1100px,
   /escorts/ inner: 900px); with 1rem section padding each side, both
   pages start scrolling at exactly 932px viewport width, which is also
   the swipe-hint breakpoint.
========================================================================= */
.city-map-wrap {
    position: relative;
    margin-bottom: var(--space-4);
}

.city-map-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    direction: rtl;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.city-map {
    direction: ltr;
    position: relative;
    min-width: 900px;
}

.city-map__img {
    width: 100%;
    height: auto;
    display: block;
}

/* Swipe hint pill — top-left overlay, decorative (aria-hidden in markup).
   Sits on .city-map-wrap, outside the scroll container, so it stays put
   while the map scrolls beneath it. Only shown at widths where the map
   actually overflows (min-width 900px + 2rem section padding = 932px). */
.city-map__hint {
    display: none;
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 2;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    background: rgba(11, 14, 20, 0.78);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: #9f9f9f;
    font-size: 0.78rem;
    pointer-events: none;
    animation: city-map-hint-pulse 2.2s ease-in-out infinite;
}

@media (max-width: 932px) {
    .city-map__hint { display: inline-flex; }
}

@keyframes city-map-hint-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* Marker box = the red badge itself, centered exactly on the city anchor.
   The city name hangs off it (absolutely positioned) so the badge never
   drifts from its geographic position. */
.city-map__marker {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.3rem;
    transform: translate(-50%, -50%);
    background: #d33345;
    border-radius: 999px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.city-map__marker:hover {
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 0 0 2px rgba(201, 168, 117, 0.6);
}

.city-map__count {
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

.city-map__name {
    position: absolute;
    color: #9f9f9f;
    font-size: 0.82rem;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.city-map__marker:hover .city-map__name {
    color: var(--color-gold);
}

/* Label direction per city (right / left / below the badge) */
.city-map__marker--antibes .city-map__name,
.city-map__marker--saint-raphael .city-map__name {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}

.city-map__marker--menton .city-map__name,
.city-map__marker--frejus .city-map__name {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}

.city-map__marker--monaco .city-map__name,
.city-map__marker--nice .city-map__name,
.city-map__marker--cannes .city-map__name,
.city-map__marker--saint-tropez .city-map__name {
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
}

/* Marker anchor positions (% of map box, Web Mercator projection).
   Fréjus is nudged slightly inland/NW — matches the actual town centre
   and keeps its badge clear of Saint-Raphaël's. */
.city-map__marker--menton        { left: 95.85%; top:  6.21%; }
.city-map__marker--monaco        { left: 87.99%; top: 11.75%; }
.city-map__marker--nice          { left: 72.12%; top: 17.12%; }
.city-map__marker--antibes       { left: 58.63%; top: 35.80%; }
.city-map__marker--cannes        { left: 47.63%; top: 40.39%; }
.city-map__marker--saint-raphael { left: 23.49%; top: 59.55%; }
.city-map__marker--frejus        { left: 19.90%; top: 56.90%; }
.city-map__marker--saint-tropez  { left: 10.78%; top: 82.87%; }
/* =====================================================================
   Password visibility toggle
   Append this block to BOTH /assets/css/site.css and
   /assets/css/admin.css — the toggle is used on the public portal and
   in the admin panel, and the two stylesheets are loaded independently.

   The wrapper is created by /assets/js/password-toggle.js at runtime,
   so no page markup depends on these class names being present in HTML.
   ===================================================================== */

.password-wrapper {
    position: relative;
    display: block;
}

.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
    padding-right: 2.8rem;
    width: 100%;
    box-sizing: border-box;
}

/* Revealed fields switch to type="text" and would otherwise fall back to
   the browser default styling, which looks wrong on a dark background. */
.password-wrapper input[type="text"] {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-text-dim);
    display: flex;
    align-items: center;
    line-height: 1;
    transition: color 0.2s;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: var(--color-text);
}

.password-toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}