/*
 * Crete map page (resources/views/pages/crete-map.blade.php).
 * Pure SVG + CSS, no JS. Solid colours only (no gradients, see .cursor/rules/no-gradients.mdc).
 * Brand colours: green #306B34, teal #1C5253, white #FFFFFF, light grey #F5F8F7.
 */

.crete-map-section {
    padding: 50px 0 80px;
}

/* ---------- The map ---------- */
.crete-map {
    margin: 0 0 50px;
}

/* overflow: visible lets labels near the edge (Kissamos, Palaikastro) stick out a bit. */
.crete-map svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Light grey island on the white page. */
.cm-island {
    fill: #F5F8F7;
    stroke: #C9D6D1;
    stroke-width: 1.5;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    animation: cm-fade 0.8s ease-out both;
}

/* ---------- Dots ---------- */
/* Pop-in: each marker grows from 0 to full size (delay set inline per dot). */
.cm-marker {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    animation: cm-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.cm-dot {
    stroke: #FFFFFF;
    stroke-width: 2.5;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 150ms ease;
}

/* Colours per type: villages green, cities teal, airports teal with a green ring. */
.cm-village .cm-dot { fill: #306B34; }
.cm-city .cm-dot    { fill: #1C5253; }
.cm-airport .cm-dot { fill: #1C5253; stroke: #306B34; stroke-width: 3; }

/* ---------- Labels ---------- */
/* The white outline (paint-order: stroke) keeps names readable over the coast line and other dots. */
.cm-label {
    font-family: Poppins, sans-serif;
    font-size: 13px;
    font-weight: 600;
    fill: #1C5253;
    stroke: #FFFFFF;
    stroke-width: 4px;
    stroke-linejoin: round;
    paint-order: stroke;
    pointer-events: none; /* the label never blocks the dot under it */
    transition: opacity 150ms ease;
}

/* Village names are hidden until hover / keyboard focus. */
.cm-village .cm-label { opacity: 0; }

.cm-city .cm-label,
.cm-airport .cm-label {
    font-size: 15px;
    font-weight: 700;
}

/* Hover or keyboard focus: bigger dot + visible name. */
.cm-town:hover .cm-dot,
.cm-town:focus-visible .cm-dot { transform: scale(1.5); }

.cm-town:hover .cm-label,
.cm-town:focus-visible .cm-label { opacity: 1; fill: #306B34; }

.cm-town:focus { outline: none; } /* the bigger dot shows the focus instead */

/* ---------- Hover line: Heraklion Airport -> town ---------- */
/* Every city and village has its own hidden arc (see the view).
   stroke-dasharray/offset = 1 hides the whole line (pathLength="1"),
   and moving the offset to 0 "draws" it from the airport to the town. */
.cm-route {
    fill: none;
    stroke: #306B34;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    vector-effect: non-scaling-stroke;
    pointer-events: none; /* the line never catches the mouse, only the dot does */
    transition: opacity 200ms ease;
}

.cm-town:hover .cm-route,
.cm-town:focus-visible .cm-route {
    opacity: 1;
    animation: cm-route-draw 700ms ease-in-out forwards;
}

/* While any line is shown, the airport dot pulses: "your trip starts here".
   :has() looks inside the map for a hovered town. Older browsers just skip the pulse. */
.crete-map svg:has(.cm-town:hover .cm-route) .cm-start .cm-dot,
.crete-map svg:has(.cm-town:focus-visible .cm-route) .cm-start .cm-dot {
    animation: cm-start-pulse 1s ease-in-out infinite;
}

/* The airport name stays readable, even on phones where it is hidden by default. */
.crete-map svg:has(.cm-town:hover .cm-route) .cm-start .cm-label {
    opacity: 1;
}

/* ---------- Legend ---------- */
.cm-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 24px;
    margin-top: 20px;
    color: #505050;
    font-size: 14px;
}

.cm-key {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-inline-end: 6px;
    border-radius: 50%;
    vertical-align: middle;
}

.cm-key-village { background: #306B34; }
.cm-key-city    { background: #1C5253; }
.cm-key-airport { background: #1C5253; box-shadow: 0 0 0 2px #306B34; }

.cm-hint {
    flex-basis: 100%;
    text-align: center;
    font-size: 13px;
}

/* ---------- Towns list (grouped by area) ---------- */
.cm-areas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 30px;
    padding-top: 40px;
    border-top: 1px solid #E1E8E5;
}

.cm-area h2 {
    font-size: 20px;
    margin-bottom: 12px;
}

.cm-area h2 a { color: #1C5253; }
.cm-area h2 a:hover { color: #306B34; }

.cm-area ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cm-area li a {
    display: block;
    padding: 5px 0;
    color: #505050;
}

.cm-area li a:hover { color: #306B34; }

/* ---------- Animations ---------- */
@keyframes cm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cm-pop  { to { transform: scale(1); } }
@keyframes cm-route-draw { to { stroke-dashoffset: 0; } }
@keyframes cm-start-pulse { 50% { transform: scale(1.4); } }

/* Visitors who turn off animations see the final map right away.
   The hover line still shows, but in full at once (no drawing, no pulse). */
@media (prefers-reduced-motion: reduce) {
    .cm-island, .cm-marker { animation: none; }
    .cm-marker { transform: scale(1); }
    .cm-dot, .cm-label, .cm-route { transition: none; }
    .cm-town:hover .cm-route,
    .cm-town:focus-visible .cm-route { animation: none; stroke-dashoffset: 0; }
    .crete-map svg .cm-start .cm-dot { animation: none !important; }
}

/* ---------- Phones ---------- */
/* The map gets small, so the labels get bigger (in map units) to stay readable. */
@media (max-width: 767px) {
    .cm-label { font-size: 22px; stroke-width: 6px; }
    .cm-city .cm-label, .cm-airport .cm-label { font-size: 24px; }
    /* Only the cities keep a name; airport names would crowd the small map. */
    .cm-airport .cm-label { opacity: 0; }
}