/* Custom chevron shared by the Locatie/Dienstverband dropdown toggle buttons
   — Tailwind has no utility for arbitrary inline-SVG background icons, and
   both need the same cream stroke color since they sit on a dark pill. */
.job-listing__pill {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9E5DD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
    background-size: 1.125rem;
}

/* Google Maps InfoWindow is third-party generated markup (same exception as
   Gravity Forms elsewhere in this theme) — its default chrome (drop shadow,
   arrow tail, close button, rounded-but-not-quite corners) doesn't match the
   design's plain teal-bordered card, and none of it is reachable via classes
   on our own markup. */
.gm-style-iw-c {
    border-radius: 4px !important;
    border: 1px solid #00A6A6 !important;
    box-shadow: none !important;
    padding: 16px !important;
}
.gm-style-iw-d {
    overflow: visible !important;
}
.gm-style-iw-t::after {
    display: none;
}
.gm-ui-hover-effect {
    display: none !important;
}

.job-listing__info-window {
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    line-height: 1.4;
    color: #032B36;
}
/* @layer base, matching app.css's own layer name: app.css has a blanket
   `a { text-decoration: none !important; }` reset (for WYSIWYG/GF-rendered
   links) inside @layer base — an unlayered rule here, even with
   !important, loses to a LAYERED !important rule regardless of
   specificity (that's how cascade layers + !important interact). Joining
   the same layer puts this back on normal specificity footing, where our
   more specific selector wins without needing !important at all. Also
   beats Google Maps' own injected .gm-style .gm-iw a:link rule the same
   way, since that one isn't layered or !important either. */
@layer base {
    .job-listing__info-window a {
        color: #00A6A6;
        text-decoration: underline !important;
    }
    .job-listing__info-window a:hover {
        color: #032B36;
    }
}