/**
 * PI - Shortcodes: [pi_geoip_event_button]
 *
 * A primary "Find events near {city}, {state}" CTA plus a smaller "Use
 * precise location" link underneath (see pi-geoip-event-button.js for the
 * click handling). Neither element had any styling of its own before this
 * file existed - both were bare <button>/<a> tags relying entirely on
 * whatever the parent Kadence theme's own generic button/link styles
 * happened to apply, which is what the reported "hover state inheriting
 * from the theme" actually was. Colors match the same brand-red scheme
 * PI - Header Search (--pihs-primary/--pihs-primary-hover) and
 * PI - Frontend (--pif-accent/--pif-accent-dark) already use, so this reads
 * as part of the same design system instead of a one-off.
 */

/* No display/flex layout of its own, deliberately - the button and link
 * below are left as their normal inline-level boxes (a <button> is
 * inline-block by default; the link sits inside a plain <div>) so this
 * keeps responding to whatever text-align the surrounding block editor
 * content sets (left/center/right), same as before this stylesheet
 * existed. A flex row here with align-items: flex-start (an earlier
 * version of this file) pinned both children to the left unconditionally,
 * ignoring the block's own centering entirely - reported live as the
 * shortcode rendering left-aligned even with the block centered. The gap
 * between them comes from margin instead of flex's own `gap` for the same
 * reason. */
.pi-geoip-event-link-container {
    margin-top: 10px;
}

/* border/background/color (and everything else themed) repeated across the
 * base rule and every interactive state, not just set once at rest: the
 * parent Kadence theme styles bare `button` elements globally, and its own
 * `button:hover,:focus,:active{...}` rule (specificity 0,1,1) ties the
 * specificity of a plain class `:hover` rule (also 0,1,1) - a tie the
 * cascade breaks by *source order*, not which rule looks more specific to
 * this component, so depending on which stylesheet happens to load second,
 * hovering/focusing this button could flash to Kadence's own brand-button
 * fill instead of staying on this button's own colors. Same hardening
 * already applied throughout pi-frontend.css and this plugin's own
 * map.css (.pi-shortcodes__map-fullscreen-button). -webkit-appearance/
 * appearance/font-family reset native button chrome iOS/Android otherwise
 * layers on top.
 */
.pi-geoip-event-button,
.pi-geoip-event-button:hover,
.pi-geoip-event-button:focus,
.pi-geoip-event-button:active {
    display: inline-flex;
    align-items: center;
    border: 1px solid #7e3c3b;
    border-radius: 6px;
    padding: 10px 20px;
    background: #7e3c3b;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pi-geoip-event-button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* The one thing that's actually meant to change on hover/focus/active -
 * kept in its own rule, separate from the block above, so it's obvious
 * this is the deliberate state change rather than more of the same
 * defensive repetition. */
.pi-geoip-event-button:hover,
.pi-geoip-event-button:focus,
.pi-geoip-event-button:active {
    background: #9a5a59;
    border-color: #9a5a59;
}

.pi-geoip-event-button:focus-visible {
    outline: 2px solid #7e3c3b;
    outline-offset: 2px;
}

/* Plain colored text at rest, gaining only an underline on hover/focus -
 * same convention PI - Frontend's .pif-venue-link uses for its own inline
 * links, and the same re-assert-color-on-hover hardening as the button
 * above (Kadence's own `a:hover{color:...}` is the equivalent risk here). */
.pi-geoip-event-link,
.pi-geoip-event-link:hover,
.pi-geoip-event-link:focus-visible {
    color: #7e3c3b;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.pi-geoip-event-link:hover,
.pi-geoip-event-link:focus-visible {
    text-decoration: underline;
}