/* =========================================================
   AYMESTREY PARISH DEFIBRILLATOR MAP
   ========================================================= */


/* =========================================================
   MAP CONTAINER
   ========================================================= */

#aymestrey-aed-map {
    display: block;
    width: 100%;
    height: clamp(450px, 55vw, 650px) !important;
    min-height: 450px;
    margin: 2rem 0;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    overflow: hidden;
}


/* =========================================================
   MOBILE MAP SIZE
   ========================================================= */

@media (max-width: 767px) {

    #aymestrey-aed-map {
        height: 70vh !important;
        min-height: 400px;
        max-height: 550px;
        margin-top: 0.4rem;
        margin-bottom: 1rem;
    }

}


/* =========================================================
   AED MAP MARKERS
   ========================================================= */

.aed-map-marker {
    background: transparent;
    border: 0;
    overflow: visible;
}

.aed-map-marker__wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    transform: translateX(calc(-50% + 21px));
}


/* =========================================================
   HAMLET / VILLAGE LABEL
   ========================================================= */

.aed-map-marker__label {
    display: block;
    margin-bottom: 4px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 4px;
    color: #222222;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   AED SYMBOL
   ========================================================= */

.aed-map-marker__symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: #206b23;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.aed-map-marker__symbol svg {
    display: block;
    width: 27px;
    height: 27px;
}


/* =========================================================
   AED MARKER KEYBOARD FOCUS
   ========================================================= */

.leaflet-marker-icon.aed-map-marker:focus {
    outline: 3px solid #000000;
    outline-offset: 3px;
    border-radius: 4px;
}


/* =========================================================
   AED POPUP
   ========================================================= */

#aymestrey-aed-map .aed-map-popup {
    display: block;
    min-width: 220px;
    color: #222222;
    font-size: 14px;
    line-height: 1.4;
}


/* AED location name */

#aymestrey-aed-map .aed-map-popup__title {
    display: block;
    margin: 0 0 3px 0;
    padding: 0;
    color: #222222;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}


/* Defibrillator (AED) */

#aymestrey-aed-map .aed-map-popup__type {
    display: block;
    margin: 0 0 12px 0;
    padding: 0;
    color: #444444;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}


/* =========================================================
   WHAT3WORDS
   ========================================================= */

#aymestrey-aed-map .aed-map-popup__w3w {
    display: block;
    margin: 0 0 12px 0;
    padding: 0;
    color: #222222;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

#aymestrey-aed-map .aed-map-popup__w3w strong {
    display: block;
    margin: 0 0 1px 0;
    padding: 0;
    color: #222222;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}


/* =========================================================
   GOOGLE MAPS DIRECTIONS BUTTON
   =========================================================
   Light blue secondary action with a high-opacity
   background so that it is clearly identifiable as a
   button without competing with the AED information.
   ========================================================= */

#aymestrey-aed-map .aed-map-popup__directions {
    display: inline-block;
    margin: 2px 0 0 0;
    padding: 7px 11px;

    background: rgba(219, 238, 250, 0.95);
    border: 1px solid rgba(76, 135, 170, 0.70);
    border-radius: 5px;

    color: #245a78;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;

    text-decoration: none;
    cursor: pointer;
}


/* Google Maps button hover and focus */

#aymestrey-aed-map .aed-map-popup__directions:hover,
#aymestrey-aed-map .aed-map-popup__directions:focus {
    background: #c9e5f6;
    border-color: #4c87aa;
    color: #183f56;
    text-decoration: none;
}


/* Google Maps button while being pressed */

#aymestrey-aed-map .aed-map-popup__directions:active {
    background: #b8dced;
    border-color: #3d7899;
    color: #15394e;
    text-decoration: none;
}


/* Google Maps keyboard focus */

#aymestrey-aed-map .aed-map-popup__directions:focus-visible {
    outline: 3px solid #000000;
    outline-offset: 2px;
}


/* =========================================================
   LEAFLET POPUP CONTENT
   =========================================================
   Prevent theme styling from introducing unwanted spacing
   or formatting within the Leaflet popup.
   ========================================================= */

#aymestrey-aed-map .leaflet-popup-content {
    margin: 16px 20px;
    line-height: 1.4;
}

#aymestrey-aed-map .leaflet-popup-content div,
#aymestrey-aed-map .leaflet-popup-content strong,
#aymestrey-aed-map .leaflet-popup-content a {
    box-sizing: border-box;
}


/* =========================================================
   SHOW WHOLE PARISH CONTROL
   ========================================================= */

#aymestrey-aed-map .aed-map-reset-control {
    background: transparent;
    border: 0 !important;
    box-shadow: none !important;
}

#aymestrey-aed-map .aed-map-reset-button {
    display: block;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 8px 12px;

    background: #206b23;
    border: 2px solid #206b23;
    border-radius: 5px;

    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;

    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}


/* Mouse hover */

#aymestrey-aed-map .aed-map-reset-button:hover {
    background: #ffffff;
    border-color: #206b23;
    color: #206b23;
}


/* Button while being pressed */

#aymestrey-aed-map .aed-map-reset-button:active {
    background: #174d19;
    border-color: #174d19;
    color: #ffffff;
}


/* Keyboard focus */

#aymestrey-aed-map .aed-map-reset-button:focus {
    background: #206b23;
    border-color: #206b23;
    color: #ffffff;
}

#aymestrey-aed-map .aed-map-reset-button:focus-visible {
    background: #206b23;
    border-color: #206b23;
    color: #ffffff;
    outline: 3px solid #000000;
    outline-offset: 2px;
}


/* If focused and hovered, retain the hover effect */

#aymestrey-aed-map .aed-map-reset-button:focus:hover {
    background: #ffffff;
    border-color: #206b23;
    color: #206b23;
}


/* =========================================================
   SMALL SCREEN ADJUSTMENTS
   ========================================================= */

@media (max-width: 767px) {

    .aed-map-marker__label {
        padding: 2px 5px;
        font-size: 12px;
    }

    #aymestrey-aed-map .aed-map-reset-button {
        padding: 7px 9px;
        font-size: 12px;
    }

    #aymestrey-aed-map .aed-map-popup {
        min-width: 190px;
    }

    #aymestrey-aed-map .aed-map-popup__directions {
        padding: 7px 10px;
        font-size: 13px;
    }

}

/* what3words location link */

#aymestrey-aed-map .aed-map-popup__w3w a {
    color: #13612E;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#aymestrey-aed-map .aed-map-popup__w3w a:hover,
#aymestrey-aed-map .aed-map-popup__w3w a:focus {
    color: #174d19;
}

#aymestrey-aed-map .aed-map-popup__w3w a:focus-visible {
    outline: 3px solid #000000;
    outline-offset: 2px;
}

/* AED location number */

.aed-location-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    min-width: 40px;

    margin: 0;

    background: #206b23;
    border-radius: 50%;

    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

/* Keep AED card address areas aligned */

.aed-card-address {
    min-height: 3em;
}

/* =========================================================
   WHAT3WORDS LINKS
   ========================================================= */

/*
 * Normal state
 * Green outer pill with red /// identifier
 */
.entry-content a:has(.w3w-slashes) {
    display: inline-flex;
    align-items: center;

    padding: 3px 12px 3px 4px !important;
    margin-left: -3px;
    margin-right: -3px;

    background: #13612E !important;
    border: 2px solid #13612E !important;
    border-radius: 100px;

    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: none;
}


/*
 * /// identifier
 * White slashes on what3words red
 */
.entry-content .w3w-slashes {
    display: inline-block;

    margin-right: 7px;
    padding: 1px 6px;

    background: #e11f26 !important;
    border-radius: 100px;

    color: #ffffff !important;

    text-decoration: none !important;
}


/*
 * Three-word address
 */
.entry-content .w3w-words {
    display: inline-block;

    color: #ffffff !important;

    text-decoration: none !important;
}


/* =========================================================
   HOVER
   ========================================================= */

/*
 * Transparent outer pill with green border
 */
.entry-content a:has(.w3w-slashes):hover {
    background: transparent !important;
    border-color: #206b23 !important;

    color: #206b23 !important;
    text-decoration: none !important;
}


/*
 * Keep /// white on red
 */
.entry-content a:has(.w3w-slashes):hover .w3w-slashes {
    background: #e11f26 !important;
    color: #ffffff !important;

    text-decoration: none !important;
}


/*
 * Green address with dashed underline
 */
.entry-content a:has(.w3w-slashes):hover .w3w-words {
    color: #206b23 !important;

    text-decoration-line: underline !important;
    text-decoration-style: dashed !important;
    text-decoration-color: #206b23 !important;
    text-decoration-thickness: auto;
    text-underline-offset: 2px;
}


/* =========================================================
   KEYBOARD FOCUS
   ========================================================= */

.entry-content a:has(.w3w-slashes):focus-visible {
    background: transparent !important;
    border-color: #206b23 !important;

    color: #206b23 !important;
    text-decoration: none !important;

    outline: 3px solid #000000;
    outline-offset: 2px;
}


/*
 * Keep /// white on red during keyboard focus
 */
.entry-content a:has(.w3w-slashes):focus-visible .w3w-slashes {
    background: #e11f26 !important;
    color: #ffffff !important;

    text-decoration: none !important;
}


/*
 * Green address during keyboard focus
 */
.entry-content a:has(.w3w-slashes):focus-visible .w3w-words {
    color: #206b23 !important;

    text-decoration-line: underline !important;
    text-decoration-style: dashed !important;
    text-decoration-color: #206b23 !important;
    text-underline-offset: 2px;
}

/* AED card action buttons – keyboard focus */
.entry-content a[href^="#defib-"]:focus-visible,
.entry-content a[href*="google.com/maps/dir/"]:focus-visible {
    outline: 3px solid #000000 !important;
    outline-offset: 3px !important;
}