/* [hpr_vote_button] — the Polling Place Locator button. Colors match the locator
   art: map gray, HPR red, ballot gold. Sizes follow the button's own width
   (container query), so it fits a sidebar, a story column or a phone. */

@font-face {
    font-family: "HPR Anton";
    src: url("anton-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.hpr-vbtn {
    --vb-gray: #2b2d31;
    --vb-red: #e31e24;
    --vb-red-dark: #a8141a;
    --vb-gold: #f4c430;
    container-type: inline-size;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    margin: 24px auto;
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--vb-gray);
    /* faint county lines, like the map in the art */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120'%3E%3Cpath d='M0 38h52v-38M52 38l6 44h-58M58 82h46v38M104 82v-50h56M104 32l-8-32M58 82l46 0M128 32v50h32M128 82l-6 38' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.5'/%3E%3C/svg%3E");
    color: #fff !important;
    text-decoration: none !important;
    font-family: "HPR Anton", Impact, "Arial Narrow", sans-serif;
    line-height: 1;
    text-align: left;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 4px 0 var(--vb-red-dark);
}
.hpr-vbtn * { box-sizing: border-box; }
a.hpr-vbtn:hover,
.hpr-vbtn--both:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 0 var(--vb-red-dark);
}

.hpr-vbtn__top {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
}

/* map pin with a ballot check mark */
.hpr-vbtn__pin {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    width: clamp(46px, 12cqi, 66px);
    height: clamp(46px, 12cqi, 66px);
    border-radius: 50% 50% 50% 0;
    background: var(--vb-red);
    transform: rotate(-45deg);
    transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.hpr-vbtn__pin svg {
    width: 58%;
    height: 58%;
    color: #fff;
    transform: rotate(45deg);
}
a.hpr-vbtn:hover .hpr-vbtn__pin,
.hpr-vbtn--both:hover .hpr-vbtn__pin {
    transform: rotate(-45deg) translate(4px, -4px);
}

.hpr-vbtn__words {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.hpr-vbtn__w1,
.hpr-vbtn__w2 {
    display: block;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: .95;
}
.hpr-vbtn__w1 {
    color: var(--vb-gold);
    font-size: 32px;
    font-size: clamp(25px, 7cqi, 38px);
}
.hpr-vbtn__w2 {
    color: #fff;
    font-size: 42px;
    font-size: clamp(34px, 9.4cqi, 50px);
    margin-top: 2px;
    text-shadow: 1px 1px 0 var(--vb-red), 2px 2px 0 var(--vb-red), 3px 3px 0 var(--vb-red), 4px 4px 0 var(--vb-red-dark);
}
.hpr-vbtn__sub {
    display: block;
    margin-top: 8px;
    color: #dcdcdc;
    font-family: Abel, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: .3px;
}

.hpr-vbtn__go {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--vb-gold);
    transition: transform .2s ease;
}
.hpr-vbtn__go svg { width: 34px; height: 34px; display: block; }
a.hpr-vbtn:hover .hpr-vbtn__go { transform: translateX(6px); }

/* the two state tabs on the "both" button */
.hpr-vbtn__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.hpr-vbtn .hpr-vbtn__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    background: var(--vb-red);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 17px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;
    transition: background-color .15s ease, color .15s ease;
}
.hpr-vbtn .hpr-vbtn__tab + .hpr-vbtn__tab { border-left: 2px solid var(--vb-gray); }
.hpr-vbtn .hpr-vbtn__tab:hover,
.hpr-vbtn .hpr-vbtn__tab:focus-visible {
    background: var(--vb-gold);
    color: var(--vb-gray) !important;
}
.hpr-vbtn__tab-go svg { width: 16px; height: 16px; display: block; }

a.hpr-vbtn:focus-visible,
.hpr-vbtn .hpr-vbtn__tab:focus-visible {
    outline: 3px solid var(--vb-gold);
    outline-offset: 3px;
}

/* narrow spots (phone, sidebar): tighter padding, tabs stack */
@container (max-width: 380px) {
    .hpr-vbtn__top { gap: 14px; padding: 16px; }
    .hpr-vbtn__go svg { width: 26px; height: 26px; }
    .hpr-vbtn__sub { font-size: 15px; }
    .hpr-vbtn__tabs { grid-template-columns: 1fr; }
    .hpr-vbtn .hpr-vbtn__tab + .hpr-vbtn__tab { border-left: 0; border-top: 2px solid var(--vb-gray); }
}

@media (prefers-reduced-motion: reduce) {
    .hpr-vbtn,
    .hpr-vbtn * { transition: none !important; }
    a.hpr-vbtn:hover,
    .hpr-vbtn--both:hover,
    a.hpr-vbtn:hover .hpr-vbtn__pin,
    .hpr-vbtn--both:hover .hpr-vbtn__pin,
    a.hpr-vbtn:hover .hpr-vbtn__go { transform: none; }
    .hpr-vbtn--both:hover .hpr-vbtn__pin,
    a.hpr-vbtn:hover .hpr-vbtn__pin { transform: rotate(-45deg); }
}