/* ==========================================================================
   Atlas of Wales — shared "My Places" header control

   One stylesheet for the header saved-places entry on landing.html and on every
   county Atlas (anglesey / gwynedd / conwy). Extracted verbatim from landing's
   inline block in July 2026 when the control was rolled out to the Atlases, so
   the four pages cannot drift apart.

   Behaviour and count come from the shared guest store — this file is styling
   only:
       <script defer src="/assets/saved-places-store.js"></script>
       <script defer src="/assets/saved-places-nav.js"></script>

   Markup contract (see assets/saved-places-nav.js):
       <a href="/your-atlas.html" class="my-places-nav" data-mp-nav="count">
           <span class="my-places-nav__icon" aria-hidden="true"></span>
           <span class="my-places-nav__label">My Places</span>
           <span class="my-places-nav__count" data-mp-nav-text></span>
       </a>
   saved-places-nav.js writes the count text and rewrites aria-label on every
   store change — never hard-code either.

   Depends on the host page's tokens --gold, --gold-bright, --cream, which
   landing.html and all three Atlas pages define with identical values.
   ========================================================================== */

.header-nav__divider {
    display: none;
    width: 1px;
    height: 18px;
    background: rgba(216, 189, 133, 0.22);
}

.my-places-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;          /* tap target — the control is icon-only on phones */
    padding: 0 2px;
    text-decoration: none;
    color: rgba(243, 234, 210, 0.78);
}

.my-places-nav:hover .my-places-nav__label,
.my-places-nav:hover .my-places-nav__count { color: var(--gold-bright); }

/* Focus ring — keyboard users must see the control, which is otherwise chromeless. */
.my-places-nav:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 3px;
    border-radius: 6px;
}

.my-places-nav__icon {
    width: 13px;
    height: 16px;
    flex: 0 0 auto;
    background: center / contain no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d8bd85' stroke='%23d8bd85' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 3.6h12a1 1 0 0 1 1 1V21l-7-4.1L5 21V4.6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.my-places-nav__label { font-size: 0.86rem; color: var(--cream); transition: color 0.22s ease; }
.my-places-nav__count { font-size: 0.8rem; font-weight: 600; color: var(--gold); transition: color 0.22s ease; }

/* Zero saved -> saved-places-nav.js writes an empty string, and the separator
   dot collapses with it rather than leaving a dangling "·". */
.my-places-nav__count:empty { display: none; }
.my-places-nav__count::before { content: "\00b7"; margin-right: 5px; opacity: 0.7; }

@media (min-width: 760px) {
    .header-nav__divider { display: inline-block; }
}

/* Phones: drop the label, leaving the bookmark plus the live count. */
@media (max-width: 519px) {
    .my-places-nav__label { display: none; }
}

/* --- .my-places-nav--compact : county Atlas headers only ------------------
   On the Atlases the header is just brand + this control + "Open the map",
   so the control can afford a proper 44px-square tap target and reads better
   without the leading separator dot once the label is gone.

   NOT applied on landing.html: its header also carries the "The Atlas"
   dropdown, and widening the control from 17px to 44px there pushed the
   "Open the Map" CTA into wrapping at 360px. Landing therefore keeps its
   original compact geometry, which is why this is a modifier rather than a
   change to the base rule. */
@media (max-width: 519px) {
    .my-places-nav--compact {
        gap: 5px;
        min-width: 44px;
        justify-content: center;
    }
    .my-places-nav--compact .my-places-nav__count::before { content: none; }
}