/**
 * Hides an area that is outside the chosen region.
 *
 * !important is load-bearing rather than lazy: control.js sets an inline
 * display on these same <li>s for the district cascade, and an inline style
 * beats a class. The two rules have to compose, not compete -- an area should
 * appear only when the district cascade allows it AND it sits in the chosen
 * region.
 */
.anan-region-hidden {
    display: none !important;
}

/**
 * Hides a dropdown's first option while it only repeats the field name already
 * printed on the button. Same reason for !important as above: the theme sets an
 * inline display on these elements, and an inline style beats a plain class.
 */
.anan-dupe-hidden {
    display: none !important;
}

/**
 * "or" between Region and District.
 *
 * The two cancel each other, and that is only discoverable by trying it. This
 * says so before the visitor has to find out.
 *
 * Hung off the Region column rather than the District one because CSS cannot
 * look backwards: anchoring it here guarantees it only ever appears where a
 * Region field actually exists, instead of stranding an "or" beside a lone
 * District dropdown on some other template. The attribute selector avoids
 * escaping the slashes in the theme's "county_/_state" class name.
 *
 * Absolutely positioned so the 4-column grid is untouched; the chip carries the
 * card's own white so it reads as sitting on the seam rather than on top of a
 * field edge.
 */
.wpestate-field-on-shortcode[class*="county_/_state"] {
    position: relative;
}

/* The default gutter leaves only 8px between the two fields, and a chip that
   size would sit on top of the Region dropdown's chevron. Widen the gap between
   these two columns only, taking ~9px off each field, which is invisible at a
   266px control but gives the word room to stand clear of both. */
@media (min-width: 768px) {
    .wpestate-field-on-shortcode[class*="county_/_state"] {
        padding-right: 13px;
    }

    .wpestate-field-on-shortcode[class*="county_/_state"] + .wpestate-field-on-shortcode {
        padding-left: 13px;
    }
}

.wpestate-field-on-shortcode[class*="county_/_state"]::after {
    content: "or";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    z-index: 2;
    padding: 0 2px;
    background: #fff;
    color: #6e6659;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
}

/* Stacked below the grid breakpoint: the seam moves from the side to the top,
   so the word follows it into the row gap. */
@media (max-width: 767px) {
    .wpestate-field-on-shortcode[class*="county_/_state"] {
        margin-bottom: 9px;
    }

    /* -9px, not 0: the extra room above is margin, and margin sits outside the
       box the chip is positioned against, so anchoring at bottom:0 would leave
       it straddling the Region field's lower edge instead of centred in the
       space below it. */
    .wpestate-field-on-shortcode[class*="county_/_state"]::after {
        top: auto;
        bottom: -9px;
        right: 50%;
        transform: translate(50%, 50%);
    }
}