/*
 * Fearann Alba — map-select.css
 *
 * Styles for the Map Selection template (templates/page-map.php):
 * the intro block, the bird's-eye map, and the circular buttons
 * positioned on top of it.
 *
 * Loaded only on that template via inc/enqueue.php. Reuses the
 * brand tokens (colours, fonts, spacing) from main.css.
 */


/*
 * ============================================================
 * PAGE WRAPPER
 * ============================================================
 * Sits below the fixed-height site header. The intro is centred
 * text; the map sits beneath it.
 */
.famap {
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    /*
     * No top padding here: the site header is fixed, and the
     * theme already offsets the page with body { padding-top:70px }
     * (see nav.css) so content clears it. The only space above the
     * heading is the intro's own padding below.
     */
    padding-top: 0;
}


/*
 * ============================================================
 * INTRO BLOCK — icon, heading, lead paragraph
 * ============================================================
 */
.famap__intro {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.5rem var(--container-padding) 2rem;
    text-align: center;
}

.famap__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.75rem;
    color: var(--color-text);
}

.famap__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.famap__heading {
    font-family: var(--font-primary);
    font-weight: var(--weight-bold);
    /* Fluid size: comfortable on a phone, larger on desktop */
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.famap__lead {
    font-family: var(--font-primary);
    font-weight: var(--weight-regular);
    font-size: 1.0625rem;
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
}


/*
 * ============================================================
 * THE MAP
 * ============================================================
 * On mobile the image spans the full viewport width (as in the
 * design). On larger screens it is capped and centred so the
 * buttons don't drift unreasonably far apart.
 *
 * position:relative is the anchor for the absolutely-positioned
 * buttons; their left/top percentages are measured against this
 * figure, which is exactly as wide as the image.
 */
.famap__map {
    position: relative;
    display: block;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    /* Prevent any sub-pixel gap under the image */
    line-height: 0;
}

.famap__map-img {
    display: block;
    width: 100%;
    height: auto;
    /* Stop the browser's image drag ghost on desktop */
    user-select: none;
    -webkit-user-drag: none;
}


/*
 * ============================================================
 * BUTTONS (points)
 * ============================================================
 * Each button is an <a> centred on its (x%, y%) coordinate via
 * the translate(-50%,-50%) trick, so the percentage marks the
 * MIDDLE of the circle, not its corner.
 */
.famap__point {
    position: absolute;
    /* left/top come from the inline style attribute (per-point %) */
    transform: translate(-50%, -50%);

    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;

    color: var(--color-text);
    cursor: pointer;
    /* Smooth flip to the gold state */
    transition: color 0.25s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

/* The ring + translucent fill sitting behind the glyph */
.famap__point-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.85);
    /* Soft lift off busy imagery */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    transition: background 0.25s ease, border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.famap__point-icon {
    position: relative; /* above the ring */
    width: 30px;
    height: 30px;
}

.famap__point-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}


/*
 * --- Attention pulse ---
 * A slow gold halo that expands and fades, drawing the eye to
 * the tappable points. Built as a separate ::after ring so it
 * never affects layout. Staggered per-point in the template
 * order via nth-of-type for a gentle, non-synchronised feel.
 */
.famap__point::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--color-gold);
    opacity: 0;
    animation: famap-pulse 2.8s ease-out infinite;
    pointer-events: none;
}

.famap__point:nth-of-type(3n)::after  { animation-delay: 0.4s; }
.famap__point:nth-of-type(3n+1)::after { animation-delay: 1.1s; }
.famap__point:nth-of-type(3n+2)::after { animation-delay: 1.8s; }

@keyframes famap-pulse {
    0%   { opacity: 0.9; transform: scale(1); }
    70%  { opacity: 0;   transform: scale(1.6); }
    100% { opacity: 0;   transform: scale(1.6); }
}


/*
 * --- Active / hover / focus: gold fill ---
 * .is-pressed is added by map-select.js on touch so the gold
 * state holds for a beat on mobile before the page navigates
 * (touch devices don't keep :hover, and :active is unreliable).
 */
.famap__point:hover,
.famap__point:focus-visible,
.famap__point.is-pressed {
    color: var(--color-bg);
    transform: translate(-50%, -50%) scale(1.06);
}

.famap__point:hover .famap__point-ring,
.famap__point:focus-visible .famap__point-ring,
.famap__point.is-pressed .famap__point-ring {
    background: var(--color-gold);
    border-color: var(--color-gold);
    box-shadow: 0 0 0 4px var(--color-gold-glow);
}

/* Clear keyboard focus outline (quality floor) */
.famap__point:focus-visible {
    outline: none;
}


/*
 * ============================================================
 * PLACEHOLDER (no image set yet — editors only)
 * ============================================================
 */
.famap__placeholder {
    max-width: 560px;
    margin: 0 auto;
    padding: 2rem var(--container-padding) 4rem;
    text-align: center;
    color: var(--color-text-muted);
    line-height: var(--line-height-body);
}


/*
 * ============================================================
 * BOTTOM CTA BUTTON
 * ============================================================
 * An optional button below the map. Uses the site's standard
 * .btn class (defined in main.css); this only handles its
 * placement and spacing.
 */
.famap__cta {
    text-align: center;
    padding: 2.5rem var(--container-padding) 3.5rem;
}


/*
 * ============================================================
 * REDUCED MOTION
 * ============================================================
 * Respect visitors who ask for less movement: drop the pulse
 * and the hover scale, keep the colour change.
 */
@media (prefers-reduced-motion: reduce) {
    .famap__point::after { animation: none; }
    .famap__point,
    .famap__point:hover,
    .famap__point:focus-visible,
    .famap__point.is-pressed {
        transform: translate(-50%, -50%);
        transition: color 0.2s ease;
    }
}


/*
 * ============================================================
 * LARGER SCREENS
 * ============================================================
 * A touch more space around the intro on desktop.
 */
@media (min-width: 768px) {
    .famap {
        padding-top: 0;
    }
    .famap__intro {
        padding-top: 2rem;
        padding-bottom: 2.5rem;
    }
    .famap__point {
        width: 72px;
        height: 72px;
    }
    .famap__point-icon {
        width: 34px;
        height: 34px;
    }
}