/**
Theme Name: DOVE USA
Author: STRYV Creative
Author URI: https://www.stryvcreative.com/
Description: Custom child theme built for DOVE USA
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dove-usa
Template: hello-elementor
*/

/* ==========================================================================
   Prayer Requests List
   ========================================================================== */

.prayer-requests-title {
    margin: 0 0 12px;
}

.prayer-requests-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.prayer-request-item {
    display: flex;
    align-items: flex-start;
    font-size: 18px;
}

.prayer-request-item i {
    margin-right: 10px;
    margin-top: 5px;
    flex-shrink: 0;
    font-size: 16px;
    color: var(--e-global-color-primary);
}

.prayer-request-item:not(:last-child) {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #00000024;
}

.prayer-request-item span {
    flex: 1;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Church single pages

   Rendered by [church_details] and [church_elders] in includes/church-single.php.
   Colours come from the Elementor kit so these blocks track the global palette
   rather than pinning hexes that would drift the first time it is edited.
   --------------------------------------------------------------------------- */

.dove-church-elders {
    margin: 0;
}

.dove-church-elders__name {
    margin: 0;
    font-size: 20px;
    line-height: 1.4;
    color: var(--e-global-color-text);
}

/* Flex rather than a fixed grid: groups are only rendered when they have
   content, so a church with an address and nothing else would leave two empty
   tracks behind. Wrapping columns of a set basis pack left whether there are
   one, two or three of them. */
.dove-church-details {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.dove-church-detail {
    flex: 0 1 260px;
}

@media (max-width: 767px) {
    .dove-church-details {
        gap: 28px;
    }

    .dove-church-detail {
        flex-basis: 100%;
    }
}

/* One rule for all four labels - Lead elders, Location, Contact, Follow along.
   The first is rendered by [church_elders] and so sits outside
   .dove-church-details, which is why this is not scoped to that wrapper: it
   was, and that is how the elders label ended up styled by a separate rule
   that had to be kept in sync by hand.

   Type is the kit's h5 and nothing else. This block used to restate size,
   weight, case, letter-spacing and colour, which meant the labels stopped
   tracking the global scale the moment anyone edited it. The only thing left
   here is the spacing to the body beneath, which is layout rather than type.
   `.elementor` is specificity, not decoration - the kit sets heading margins
   through a selector a bare class cannot beat. */
.elementor .dove-church-detail__title {
    margin: 0 0 10px;
}

.dove-church-detail__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.dove-church-detail__address {
    margin: 0;
    font-style: normal;
    line-height: 1.6;
    color: var(--e-global-color-text);
}

/* `.elementor` is specificity, not decoration. Elementor's own link colour
   beats a single class and renders these accent green - 4.12:1 on cream -
   which is the same trap the mission recap link fell into. */
.elementor a.dove-church-detail__link,
.dove-church-detail__link {
    color: var(--e-global-color-09f943e, #14549A);
    text-decoration: none;
    /* long URLs and addresses must not push the grid wider than its column */
    overflow-wrap: anywhere;
}

.elementor a.dove-church-detail__link:hover,
.elementor a.dove-church-detail__link:focus,
.dove-church-detail__link:hover,
.dove-church-detail__link:focus {
    color: var(--e-global-color-d263c44);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Giving

   Rendered by [give_button], [how_to_give] and [missionary_giving] in
   includes/giving.php. Colours come from the Elementor kit so these blocks
   track the global palette.
   --------------------------------------------------------------------------- */

.dove-give-block {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.dove-give {
    margin: 0;
}

/* Two classes, because the Elementor kit colours links with `.elementor-kit-N a`
   (0,1,1), which outranks a bare class and painted this button's label the same
   green as its own background - invisible, at full opacity, in the right place. */
.dove-give .dove-give__button {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 4px;
    background: var(--e-global-color-accent);
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.dove-give .dove-give__button:hover,
.dove-give .dove-give__button:focus {
    background: var(--e-global-color-1666851);
    color: #FFFFFF;
}

.dove-give .dove-give__button:focus-visible {
    outline: 2px solid var(--e-global-color-d263c44);
    outline-offset: 2px;
}

/* Type is the kit's h3 and nothing else. This restated size, weight, case,
   letter-spacing and colour on top of the heading level, which meant the block
   stopped tracking the global scale the moment anyone edited it. Only the
   spacing to the list beneath is left, which is layout rather than type. */
.dove-give-how__title {
    margin: 0 0 10px;
}

.dove-give-how__routes {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dove-give__route {
    color: var(--e-global-color-text);
    line-height: 1.6;
}

/* The earmark is the one thing a giver has to copy exactly onto a check, so
   it is the only emphasised text in the block. */
.dove-give__earmark {
    color: var(--e-global-color-d263c44);
    font-weight: 700;
}

.dove-give__route a {
    color: var(--e-global-color-09f943e);
    text-decoration: none;
}

.dove-give__route a:hover,
.dove-give__route a:focus {
    color: var(--e-global-color-d263c44);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Missions

   Rendered by [mission_status] and [mission_facts] in includes/missions.php.
   --------------------------------------------------------------------------- */

.dove-mission-status {
    display: inline-block;
    margin: 0;
    padding: 6px 14px;
    border-radius: 3px;
    font-size: 15px;
    font-weight: 700;
}

.dove-mission-status--open {
    background: var(--e-global-color-60dce04);
    /* Accent on the pale green tint is 4.22:1 at this size; forest is 10.7:1. */
    color: var(--e-global-color-primary);
}

/* A closed team is still worth reading, so this reads as quiet information
   rather than an error. */
.dove-mission-status--closed {
    background: var(--e-global-color-dove_cream);
    /* Secondary on cream is 4.37:1; text is 11.65:1 and still reads quiet. */
    color: var(--e-global-color-text);
}

.dove-mission-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 24px;
    margin: 0;
}

.dove-mission-fact {
    display: contents;
}

.dove-mission-facts .dove-mission-fact__label {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--e-global-color-primary);
    white-space: nowrap;
}

.dove-mission-facts .dove-mission-fact__value {
    margin: 0;
    color: var(--e-global-color-text);
}

@media (max-width: 500px) {
    .dove-mission-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .dove-mission-fact {
        display: block;
        margin-bottom: 12px;
    }
}

/* ---------------------------------------------------------------------------
   Events

   Rendered by the shortcodes in includes/events.php: [events_list],
   [events_calendar], [event_details], [event_register], [event_status].
   --------------------------------------------------------------------------- */

.dove-events {
    display: flex;
    flex-direction: column;
}

.dove-event {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 0 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--e-global-color-dove_cream);
    align-items: start;
}

.dove-event:first-child {
    border-top: 1px solid var(--e-global-color-dove_cream);
}

/* The date block is what people scan a list of twenty for, so it reads as one
   object rather than three stacked lines. */
.dove-event__when {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    border-radius: 4px;
    background: var(--e-global-color-dove_sage);
    line-height: 1.1;
}

/* Forest, not accent green. The chip sits on sage, where Accent Green is
   3.56:1 at 13px - under the 4.5:1 this size needs. Forest is 9.04:1, and it
   is the same "eyebrow takes its ground" rule applied everywhere else. */
.dove-event__month {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--e-global-color-primary);
}

.dove-event__day {
    font-size: 30px;
    font-weight: 700;
    color: var(--e-global-color-d263c44);
}

/* Secondary grey is 3.77:1 on sage at 12px. Text is 10.08:1. */
.dove-event__year {
    font-size: 12px;
    color: var(--e-global-color-text);
}

.dove-event__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dove-event__type {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--e-global-color-accent);
}

.dove-event__title {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
}

.dove-events .dove-event__title a {
    color: var(--e-global-color-d263c44);
    text-decoration: none;
}

.dove-events .dove-event__title a:hover,
.dove-events .dove-event__title a:focus {
    color: var(--e-global-color-09f943e);
    text-decoration: underline;
}

.dove-event__meta,
.dove-event__excerpt {
    margin: 0;
    color: var(--e-global-color-text);
}

.dove-event__meta {
    font-size: 15px;
    color: var(--e-global-color-secondary);
}

.dove-events-empty {
    margin: 0;
    color: var(--e-global-color-secondary);
}

@media (max-width: 560px) {
    .dove-event {
        grid-template-columns: 60px 1fr;
        gap: 0 16px;
    }

    .dove-event__day { font-size: 24px; }
    .dove-event__title { font-size: 19px; }
}

/* ── calendar ──────────────────────────────────────────────────────────── */

.dove-calendar__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.dove-calendar__month {
    margin: 0;
    font-size: 26px;
    color: var(--e-global-color-d263c44);
}

.dove-calendar .dove-calendar__nav {
    color: var(--e-global-color-09f943e);
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap;
}

.dove-calendar .dove-calendar__nav:hover,
.dove-calendar .dove-calendar__nav:focus {
    color: var(--e-global-color-d263c44);
    text-decoration: underline;
}

.dove-calendar__head,
.dove-calendar__week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

/* The weeks stack; each week is the seven-column grid. Cells sit inside a
   role="row" now, which ARIA requires and which the flat grid could not
   express. */
.dove-calendar__days {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dove-calendar__head { margin-bottom: 4px; }

.dove-calendar__weekday {
    padding: 6px 4px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--e-global-color-secondary);
}

/* One letter on narrow screens, the short name once there is room. */
.dove-calendar__weekday abbr { text-decoration: none; border: 0; }
.dove-calendar__weekday-full { display: none; }

.dove-calendar__cell {
    min-height: 96px;
    padding: 6px;
    border: 1px solid var(--e-global-color-dove_cream);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dove-calendar__cell--empty {
    border-color: transparent;
    min-height: 0;
}

.dove-calendar__cell.has-events {
    background: var(--e-global-color-fb8b7af);
}

.dove-calendar__cell.is-today {
    border-color: var(--e-global-color-accent);
    box-shadow: inset 0 0 0 1px var(--e-global-color-accent);
}

.dove-calendar__date {
    font-size: 13px;
    font-weight: 700;
    color: var(--e-global-color-secondary);
}

.dove-calendar .dove-calendar__event {
    display: block;
    padding: 4px 6px;
    border-radius: 3px;
    background: var(--e-global-color-dove_sage);
    color: var(--e-global-color-d263c44);
    font-size: 12px;
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.dove-calendar .dove-calendar__event:hover,
.dove-calendar .dove-calendar__event:focus {
    background: var(--e-global-color-accent);
    color: #FFFFFF;
}

@media (min-width: 768px) {
    .dove-calendar__weekday abbr { display: none; }
    .dove-calendar__weekday-full { display: inline; }
}

/* A seven-column grid does not survive a phone. Below 640 the calendar
   becomes a stack of days, and days with nothing on them are dropped -
   scrolling past twenty empty cells to find the one with an event in it is
   worse than no calendar. */
@media (max-width: 639px) {
    .dove-calendar__head { display: none; }

    .dove-calendar__week {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .dove-calendar__days { gap: 6px; }

    .dove-calendar__none { display: block; }

    .dove-calendar__cell--empty { display: none; }

    /* Days with something on them, and only those.
       Today used to be kept visible here too, which in an agenda rendered an
       empty bordered box announcing a date the reader already knows. When
       today does have events it still shows, and still carries its highlight. */
    .dove-calendar__cell:not(.has-events) { display: none; }

    .dove-calendar__cell {
        min-height: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .dove-calendar__date {
        flex: 0 0 auto;
        min-width: 2ch;
        font-size: 15px;
    }
}

/* ── single event ──────────────────────────────────────────────────────── */

.dove-event-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 24px;
    margin: 0;
}

.dove-event-fact { display: contents; }

.dove-event-facts .dove-event-fact__label {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--e-global-color-accent);
    white-space: nowrap;
}

.dove-event-facts .dove-event-fact__value {
    margin: 0;
    color: var(--e-global-color-text);
    line-height: 1.6;
}

.dove-event-facts .dove-event-fact__value a {
    color: var(--e-global-color-09f943e);
    text-decoration: none;
}

.dove-event-facts .dove-event-fact__value a:hover,
.dove-event-facts .dove-event-fact__value a:focus {
    color: var(--e-global-color-d263c44);
    text-decoration: underline;
}

.dove-event-register { margin: 0; }

.dove-event-register .dove-event-register__button {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 4px;
    background: var(--e-global-color-accent);
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
}

.dove-event-register .dove-event-register__button:hover,
.dove-event-register .dove-event-register__button:focus {
    background: var(--e-global-color-1666851);
    color: #FFFFFF;
}

.dove-event-past {
    display: inline-block;
    margin: 0;
    padding: 6px 14px;
    border-radius: 3px;
    background: var(--e-global-color-dove_cream);
    color: var(--e-global-color-text);
    font-size: 15px;
    font-weight: 700;
}

/* Between years, or once a form has been deactivated. This replaces a button
   or a whole form, so it sits where they sat rather than reading as a warning
   banner. */
.dove-event-closed {
    margin: 0;
    padding: 14px 18px;
    border-left: 3px solid var(--e-global-color-accent);
    background: var(--e-global-color-dove_cream);
    color: var(--e-global-color-secondary);
    font-size: 16px;
    font-weight: 600;
}

.dove-event-closed a {
    color: var(--e-global-color-accent);
    text-decoration: underline;
}

.dove-event-closed__more {
    margin: 12px 0 0;
    font-size: 15px;
}

@media (max-width: 500px) {
    .dove-event-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .dove-event-fact { display: block; margin-bottom: 14px; }
}

/* An embedded registration form sits in the event's sidebar card, so it needs
   to survive a narrow column. */
.dove-event-form__title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--e-global-color-accent);
}

.dove-event-form .gform_wrapper {
    margin: 0;
}

/* The registration band renders nothing when an event is not taking
   registrations, and an Elementor container keeps its padding and its sage
   background either way - a tall empty stripe on the twenty-odd events that
   never take any. Collapsing on :has() is the only way to remove it, because
   the emptiness is decided in PHP long after the layout is built.

   Targeted by id, not class: Elementor stores a container's _css_classes but
   does not print them on the container element, while _element_id does render.
   The content band needs no rule of its own - it carries no padding and no
   background, so an empty one already has no height. */
#register:not(:has(.dove-event-form)) {
    display: none;
}

/* ── Events: view toggle ─────────────────────────────────────────────────────
   Calendar or list over the same query. Two real links rather than a script,
   so each view is bookmarkable and the back button behaves. */
.dove-view-toggle {
    display: inline-flex;
    padding: 4px;
    border: 1px solid var(--e-global-color-dove_border, #E4E8EB);
    border-radius: 999px;
    background: var(--e-global-color-dove_cream);
}

.dove-view-toggle .dove-view-toggle__option {
    padding: 8px 22px;
    border-radius: 999px;
    /* 4.37:1 on cream; text is 11.65 */
    color: var(--e-global-color-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.dove-view-toggle .dove-view-toggle__option:hover,
.dove-view-toggle .dove-view-toggle__option:focus {
    color: var(--e-global-color-accent);
}

.dove-view-toggle .dove-view-toggle__option.is-active {
    background: var(--e-global-color-accent);
    color: #FFFFFF;
}

/* ── Events: the loop card ───────────────────────────────────────────────────
   The card is an Elementor loop item, so its structure is editable. Only the
   date range is rendered here, because collapsing "24 to 28 July" is not
   something a dynamic tag can do. */
.dove-event-card__dates {
    margin: 0;
    color: var(--e-global-color-accent);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Events: the filter row ──────────────────────────────────────────────────
   Type on the left, the view switcher on the right, one row. */
.dove-events-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    align-items: center;
    justify-content: space-between;
}

.dove-events-filters__left {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
}

.dove-events-filters__right {
    margin-left: auto;
}

/* The type multiselect. <details> gives an open/close control that works with
   no script at all; the script only removes the extra click on Apply. */
.dove-type-filter {
    margin: 0;
}

.dove-type-filter__details {
    position: relative;
}

.dove-type-filter__summary {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--e-global-color-dove_border, #E4E8EB);
    border-radius: 999px;
    background: #FFFFFF;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    line-height: 1.3;
}

/* Safari draws its own triangle through the ::marker pseudo-element. */
.dove-type-filter__summary::-webkit-details-marker { display: none; }
.dove-type-filter__summary::marker { content: ''; }

.dove-type-filter__summary:hover,
.dove-type-filter__details[open] .dove-type-filter__summary {
    border-color: var(--e-global-color-accent);
}

.dove-type-filter__summary:focus-visible {
    outline: 2px solid var(--e-global-color-accent);
    outline-offset: 2px;
}

.dove-type-filter__label {
    color: var(--e-global-color-secondary);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.dove-type-filter__value {
    color: var(--e-global-color-text);
    font-weight: 600;
}

/* A caret that turns, rather than a glyph in the markup. */
.dove-type-filter__value::after {
    content: '';
    display: inline-block;
    margin-left: 8px;
    border: 4px solid transparent;
    border-top-color: currentColor;
    transform: translateY(2px);
}

.dove-type-filter__details[open] .dove-type-filter__value::after {
    transform: translateY(-2px) rotate(180deg);
}

.dove-type-filter__panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    max-height: 340px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--e-global-color-dove_border, #E4E8EB);
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 8px 28px rgba(8, 46, 89, .12);
}

.dove-type-filter__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 4px;
    color: var(--e-global-color-text);
    font-size: 15px;
    cursor: pointer;
}

.dove-type-filter__option:hover {
    background: var(--e-global-color-dove_cream);
}

.dove-type-filter__option.is-child {
    padding-left: 26px;
    font-size: 14px;
}

.dove-type-filter__option input {
    accent-color: var(--e-global-color-accent);
    width: 15px;
    height: 15px;
    margin: 0;
}

.dove-type-filter__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--e-global-color-dove_border, #E4E8EB);
}

.dove-type-filter__apply {
    padding: 7px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--e-global-color-accent);
    color: #FFFFFF;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.dove-type-filter__clear {
    color: var(--e-global-color-secondary);
    font-size: 14px;
    text-decoration: underline;
}

/* Upcoming / past */
.dove-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.dove-filter .dove-filter__option {
    padding: 7px 16px;
    border: 1px solid var(--e-global-color-dove_border, #E4E8EB);
    border-radius: 999px;
    color: var(--e-global-color-secondary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.dove-filter .dove-filter__option:hover,
.dove-filter .dove-filter__option:focus {
    border-color: var(--e-global-color-accent);
    color: var(--e-global-color-accent);
}

.dove-filter .dove-filter__option.is-active {
    border-color: var(--e-global-color-accent);
    background: var(--e-global-color-accent);
    color: #FFFFFF;
}

.dove-events-intro {
    margin: 0;
    max-width: 60ch;
}

@media (max-width: 700px) {
    .dove-events-filters { flex-direction: column; align-items: stretch; }
    .dove-events-filters__right { margin-left: 0; }
    .dove-type-filter__panel { min-width: 0; width: 100%; }
}

/* ── Events: the feed pager ──────────────────────────────────────────────────
   Real links carrying every filter in play, so a page of a filtered feed is
   bookmarkable and the back button behaves. */
.dove-pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 36px;
}

.dove-pager__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dove-pager__item {
    margin: 0;
}

.dove-pager .page-numbers {
    display: inline-block;
    min-width: 40px;
    padding: 8px 12px;
    border: 1px solid var(--e-global-color-dove_border, #E4E8EB);
    border-radius: 4px;
    color: var(--e-global-color-secondary);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.dove-pager a.page-numbers:hover,
.dove-pager a.page-numbers:focus {
    border-color: var(--e-global-color-accent);
    color: var(--e-global-color-accent);
}

.dove-pager .page-numbers.current {
    border-color: var(--e-global-color-accent);
    background: var(--e-global-color-accent);
    color: #FFFFFF;
}

.dove-pager .page-numbers.dots {
    border-color: transparent;
    min-width: 0;
    padding: 8px 4px;
}

.dove-pager .prev.page-numbers,
.dove-pager .next.page-numbers {
    padding: 8px 18px;
}

.dove-pager__count {
    margin: 0;
    color: var(--e-global-color-secondary);
    font-size: 14px;
}

@media (max-width: 500px) {
    /* Numbers wrap badly on a narrow screen; prev/next carry the load. */
    .dove-pager .page-numbers:not(.prev):not(.next):not(.current) { display: none; }
}

/* ── Events: the description ─────────────────────────────────────────────────
   Rendered by [event_content] from the ACF field, directly under the header.
   Plain prose, so it gets a readable measure rather than the full band width. */
.dove-event-description {
    max-width: 68ch;
}

.dove-event-description > :first-child { margin-top: 0; }
.dove-event-description > :last-child { margin-bottom: 0; }

.dove-event-description p {
    margin: 0 0 1em;
}

.dove-event-description a {
    color: var(--e-global-color-09f943e);
    text-decoration: underline;
}

/* ── Events: when/where beside the description ───────────────────────────────
   The stacked variant sits in a narrow column, so the label goes above its
   value rather than beside it - "Where" is three lines of venue, address and
   a directions link, and two columns of that leaves nothing but wrapping. */
.dove-event-facts--stacked {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.dove-event-facts--stacked .dove-event-fact {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dove-event-facts--stacked .dove-event-fact__label {
    font-size: 13px;
    letter-spacing: .06em;
}

/* The card the stacked list sits in. Elementor does not print a container's
   _css_classes, so this is keyed on the element id the template sets. */
#event-when-where {
    align-self: flex-start;
}

@media (max-width: 767px) {
    /* Stacked back to two columns on mobile, where the column is full width
       again and the compact form reads better than a tall list. */
    .dove-event-facts--stacked {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px 24px;
    }

    .dove-event-facts--stacked .dove-event-fact {
        display: contents;
    }
}

/* ── Leadership cards ────────────────────────────────────────────────────────
   The photographs are a mix: most were cut to a transparent circle before
   upload, two are opaque squares. On a navy card that reads as two different
   card shapes in the same row.

   Rounding here rather than curating the assets means a photo dropped in later
   looks right without anyone knowing it had to be pre-cut. Every source is
   already square, so a circle crops nothing.

   Scoped to the loop item, so band images on the same page are untouched. */
.page-id-5258 .e-loop-item img {
    border-radius: 50%;
}

/* The leader biography, rendered by [leader_content] beside the portrait. */
.dove-leader-bio > :first-child { margin-top: 0; }
.dove-leader-bio > :last-child { margin-bottom: 0; }

/* ── Leaders: the role under the name, and a link to their writing ───────────
   The subtitle is the sub_heading field, which three leaders have set and
   none of them ever showed: the template's slot for it still held Elementor's
   default heading text with nothing bound to it. */
.dove-leader-subtitle {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    /* Accent Hover, not Primary Green: this sits on cream, where the lighter
       green measures 3.9:1 and fails AA at this size. */
    color: #3E6620;
}

.dove-leader-blog {
    margin: 1.5rem 0 0;
}

.elementor a.dove-leader-blog__link,
.dove-leader-blog__link {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    font-weight: 600;
    color: var(--e-global-color-09f943e, #14549A);
    text-decoration: none;
}

.dove-leader-blog__link::after {
    content: "\2192";
    transition: transform .18s ease;
}

.dove-leader-blog__link:hover { color: var(--e-global-color-d263c44, #082E59); }
.dove-leader-blog__link:hover::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .dove-leader-blog__link::after { transition: none; }
}

.dove-leader-bio p {
    margin: 0 0 1em;
}

.dove-leader-bio a {
    color: var(--e-global-color-09f943e);
    text-decoration: underline;
}

/* ── Form pages ──────────────────────────────────────────────────────────────
   Gravity Forms ships its own layout; this only sets the measure and the
   rhythm so a form sits inside a band like everything else does. */
.dove-form-band .gform_wrapper {
    margin: 0;
}

.dove-form-band .gform_wrapper .gform_title {
    margin-top: 0;
}

.dove-form-intro {
    max-width: 68ch;
}

.dove-form-intro > :first-child { margin-top: 0; }
.dove-form-intro > :last-child { margin-bottom: 0; }

.dove-form-intro p {
    margin: 0 0 1em;
}

.dove-form-intro a {
    color: var(--e-global-color-09f943e);
    text-decoration: underline;
}

/* The tax status line, under the giving routes. A fact about the
   organization rather than another way to give, so it sits apart from the
   list and reads quieter. */
.dove-give-how__status,
.dove-give-how__nolig {
    /* Manrope ligates "(c)" into a copyright sign; the tax line must read 501(c)(3). */
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
}

.dove-give-how__status {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--e-global-color-dove_border, #E4E8EB);
    /* 3.77:1 on sage; text is 10.06 */
    color: var(--e-global-color-text);
    font-size: 14px;
    line-height: 1.5;
}

/* ── The legal strip clears the accessibility widget ─────────────────────────
   The a11y launcher is fixed to the bottom right of the viewport, and the
   legal links sit in exactly that corner - it covered "Contact" outright.
   Padding the strip on the right moves the links clear of it.

   Desktop only: on mobile the strip stacks, so the links are no longer in the
   corner and the extra padding would just look like a misalignment. */
@media (min-width: 768px) {
    #dove-footer-legal {
        padding-right: 96px !important;
    }
}

/* ── a mission's recap link ─────────────────────────────────────────────
   Lives here rather than in church-map.css: that stylesheet is only
   enqueued on pages carrying a map, and mission pages carry none. */
/* `a.` and `.elementor` are specificity, not decoration: Elementor's own link
   colour otherwise wins and the link renders accent green, where this one has
   always been the blue that "All missions" above it uses. */
.elementor a.dove-mission-recap,
a.dove-mission-recap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var( --e-global-color-09f943e, #14549A );
	font-weight: 600;
	text-decoration: none;
}

.elementor a.dove-mission-recap:hover,
.elementor a.dove-mission-recap:focus,
a.dove-mission-recap:hover,
a.dove-mission-recap:focus {
	color: var( --e-global-color-d263c44, #082E59 );
	text-decoration: underline;
}

/* ── post navigation stacks on a phone ───────────────────────────────────
   Elementor's post navigation keeps prev and next side by side at every
   width. At 390px that leaves each title about 125px - a post called
   "Brian & Kim Zimmerman share their church planting story" wraps to six
   lines against its neighbour. There is no control for this in the widget,
   so it is CSS. Applies to the blog post and article templates alike. */
@media (max-width: 767px) {
	.elementor-post-navigation {
		flex-direction: column;
		gap: 22px;
	}

	/* Two classes, because Elementor sets width:50% on these at one class and
	   loads after this file. `flex-direction: column` won on the parent only
	   because Elementor never sets it; the widths had to be fought for. */
	.elementor-post-navigation .elementor-post-navigation__prev,
	.elementor-post-navigation .elementor-post-navigation__next {
		width: 100%;
		max-width: 100%;
	}

	/* Both links now read left to right; the "next" side no longer needs to
	   mirror itself to sit against the right edge. */
	.elementor-post-navigation__next.elementor-post-navigation__link {
		text-align: left;
	}

	.elementor-post-navigation__next .post-navigation__arrow-wrapper {
		order: -1;
	}

	/* The divider separated two columns that no longer exist. */
	.elementor-post-navigation__separator {
		display: none;
	}
}


/* ── links in prose carry an underline ──────────────────────────────────
   axe flags a link inside a block of text that is distinguished from the
   surrounding words only by colour - a phone number or an email in a
   paragraph. Buttons and the arrow links are excluded: they are already
   distinguishable by shape and position. */
.elementor-widget-text-editor p a:not(.elementor-button),
.elementor-widget-theme-post-content p a:not(.elementor-button),
.elementor-widget-theme-post-excerpt p a:not(.elementor-button),
.dove-church-detail__body a,
.dove-mission-recap {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

/* The recap link earns its underline on hover instead - it sits alone, not
   inside a sentence, so it is not the case the rule is about. */
.elementor-widget-text-editor p a.elementor-button,
a.dove-mission-recap {
	text-decoration: none;
}

a.dove-mission-recap:hover,
a.dove-mission-recap:focus {
	text-decoration: underline;
}


/* A phone number or an email inside a sentence is a link by nature and needs
   more than colour to say so. These carry no class - they come from theme
   shortcodes, not from a text-editor widget - so they are matched on href. */
a[href^="tel:"]:not(.elementor-button),
a[href^="mailto:"]:not(.elementor-button) {
	text-decoration: underline;
	text-underline-offset: 2px;
}


/* ── plugin and widget colours we do not own ────────────────────────────
   Gravity Forms' required marker is #c02b0a, which is 4.47:1 on sage - three
   hundredths short at this size. Elementor Pro's author box button uses the
   accent, 4.45:1 on off-white. Neither is ours to change at source, so both
   are overridden here rather than left failing. */
/* The required marker, at 4.47:1 on sage where its size needs 4.5.
   Three hundredths short, but it is the only failing thing left that we can
   reach. The form is rendered by UAEL's Gravity Form Styler, which sets this
   colour with a specificity a theme rule cannot beat, and neither Gravity
   Forms nor UAEL is ours to change at source - so this is the one place an
   !important is the honest tool rather than a shortcut. */
.gfield_required,
.gfield_required_text,
span.gfield_required span.gfield_required_text,
.uael-gf-styler .gfield_required,
.uael-gf-styler .gfield_required_text {
	color: #8C1F07 !important;
}

/* Scripture links carried in from the old site: they sit inside sentences and
   are distinguished only by colour, which is what axe's link-in-text-block
   rule is about. */
a[class^="esv"],
a[class*=" esv"] {
	text-decoration: underline;
	text-underline-offset: 2px;
}


/* The empty-month line is for the phone agenda; the desktop grid shows a bare
   month perfectly well on its own. */
.dove-calendar__none {
	display: none;
	margin: 4px 0 0;
	padding: 18px 2px;
	color: var(--e-global-color-text);
}

/* ── Scripture cross-references ──────────────────────────────────────────
   The esv-crossref plugin rewrites any scripture reference in the page into
   a link to esv.org, carrying an inline colour of its own. Two things follow,
   and both are wrong.

   Its inline colour loses to the kit's link colour, so every reference renders
   accent green whatever it sits on: 2.54:1 on the Deep Forest verse band.

   This is *not* the whole of the /about/our-vision/ contrast failure, and it
   would be convenient to claim it was. That band's reference is forest on
   sage at 3.30:1 in the stored data, before any link is injected, so it needs
   a colour decision of its own. What the plugin added was a second, worse
   problem on top of it.

   The reference is also set as an eyebrow beneath a verse, so a link in a
   different colour reads as a mistake rather than as a link.

   Inheriting the band's own colour fixes every ground at once and keeps the
   underline, which is what actually says "link". `!important` is required
   because the plugin writes the colour inline. */
.esv-crossref-link,
.esv-crossref-link:link,
.esv-crossref-link:visited,
.esv-crossref-link:hover,
.esv-crossref-link:focus {
    color: inherit !important;
    text-decoration-color: currentColor;
    text-underline-offset: 0.18em;
}

/* ── Section headings inside a form ──────────────────────────────────────────
   Long applications break themselves into sections with a Gravity Forms HTML
   field. Every form did that in a different colour typed inline: magenta on
   the short-term application, cyan on the internship one, pure red on the golf
   forms. None of them was a DOVE USA colour, and the effect was that two forms
   on neighbouring pages looked like two different websites.

   The colours are gone from the form content now, replaced by one class, so
   this rule is the only place a section heading is described - and it reaches
   every form whatever renders it, since `[dove_form]`, `[gravityform]` and
   UAEL's styler all emit the same wrapper.

   Navy rather than accent green: these sit directly above field labels, and a
   green heading over a green submit button made the form read as two competing
   calls to action. */
.gform_wrapper .dove-form-section {
    display: block;
    margin: 2.5rem 0 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(23, 63, 39, 0.16);
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--e-global-color-d263c44);
}

/* The first one opens the form, so it needs no rule above it. */
.gform_wrapper .gform_fields > .gfield:first-child .dove-form-section {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* ── The measure on a form page ──────────────────────────────────────────────
   The application pages put the form in a full-width container, so inputs ran
   the whole 1340px band while the same fields on /contact/ sat in a column and
   looked considered. A form is a column of questions; past about 70 characters
   the eye loses the label it is answering.

   The wrapper is a child of `.elementor-shortcode`, not of
   `.elementor-widget-container` as the rest of Elementor's widgets are, so the
   obvious selector misses. Constrain the wrapper and nothing inside it: an
   earlier attempt here also carried `.gfield--type-html + .gfield`, which
   narrowed only the field following a section heading and left Name at 46rem
   beside Address at full width. */
.dove-form-band .gform_wrapper,
.elementor-widget-shortcode .gform_wrapper {
    max-width: 46rem;
}

/* ── Taxonomy filters ────────────────────────────────────────────────────
   Elementor's loop filter renders its choices centred, 20px apart, in its own
   grey. Down the side of an archive that reads as stray text rather than a set
   of choices: nothing lines up with the heading above it, and the only thing
   marking the current filter is a slightly darker grey.

   So: left aligned under its heading, tight enough to read as one list, and
   the active choice marked the way the rest of the site marks a current thing
   - navy, heavier, with an accent rule down its edge. The hairline tint is the
   same one the hairline index and the form sections use.

   Specificity matches Elementor's own `.elementor-widget-taxonomy-filter
   .e-filter-item`, which is why the widget class is repeated here rather than
   styling `.e-filter-item` alone. */
.elementor-widget-taxonomy-filter .e-filter {
    align-items: stretch;
    gap: 2px;
}

.elementor-widget-taxonomy-filter .e-filter-item {
    justify-content: flex-start;
    text-align: left;
    padding: 9px 14px;
    border-left: 2px solid transparent;
    border-radius: 0 3px 3px 0;
    color: var(--e-global-color-text);
    font-size: 16px;
    line-height: 1.4;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.elementor-widget-taxonomy-filter .e-filter-item:hover:not([aria-pressed="true"]) {
    color: var(--e-global-color-accent);
    background-color: rgba(23, 63, 39, 0.05);
}

.elementor-widget-taxonomy-filter .e-filter-item[aria-pressed="true"] {
    color: var(--e-global-color-d263c44);
    font-weight: 600;
    border-left-color: var(--e-global-color-accent);
    background-color: rgba(23, 63, 39, 0.06);
}

/* The filter sits directly under its own heading; Elementor's widget margin
   opens a gap that makes the two look unrelated. */
.elementor-widget-taxonomy-filter {
    margin-top: -4px;
    margin-bottom: 28px;
}

/* On a phone the sidebar stacks above the grid, and seven stacked rows push
   the results off the screen. Pills wrap instead, which is the shape people
   already expect a filter to take on a phone. */
@media (max-width: 767px) {
    .elementor-widget-taxonomy-filter .e-filter {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
    }

    .elementor-widget-taxonomy-filter .e-filter-item {
        border: 1px solid rgba(23, 63, 39, 0.16);
        border-radius: 3px;
        padding: 8px 14px;
    }

    .elementor-widget-taxonomy-filter .e-filter-item[aria-pressed="true"] {
        border-color: var(--e-global-color-accent);
    }

    .elementor-widget-taxonomy-filter {
        margin-bottom: 20px;
    }
}

/* ── Inline taxonomy filter ──────────────────────────────────────────────
   The rules above shape the filter as a vertical list, which is what the
   missions sidebar wants. Above a grid the same widget wants to be a row,
   so `filter-inline` takes the pill treatment the sidebar only uses on a
   phone: bordered, wrapping, no accent rule on the leading edge.

   Three classes deep so it outranks the two-class sidebar rules without
   !important, and it holds at every width rather than only under 768. */
.elementor-widget-taxonomy-filter.filter-inline .e-filter {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.elementor-widget-taxonomy-filter.filter-inline .e-filter-item {
    border: 1px solid rgba(23, 63, 39, 0.16);
    border-radius: 3px;
    padding: 8px 16px;
    background-color: transparent;
}

.elementor-widget-taxonomy-filter.filter-inline .e-filter-item:hover:not([aria-pressed="true"]) {
    border-color: var(--e-global-color-accent);
    background-color: rgba(23, 63, 39, 0.05);
}

.elementor-widget-taxonomy-filter.filter-inline .e-filter-item[aria-pressed="true"] {
    border-color: var(--e-global-color-accent);
    background-color: rgba(23, 63, 39, 0.06);
}

/* It sits directly above the grid, so it needs the gap the sidebar's
   stacked groups did not. */
.elementor-widget-taxonomy-filter.filter-inline {
    margin-top: 0;
    margin-bottom: 36px;
}

/* ── Type filter: let [hidden] actually hide ─────────────────────────────
   The disclosure script hides the Apply button once it is running, because
   submitting on change makes the extra press redundant. It does that by
   setting the `hidden` attribute - but `.dove-type-filter__actions` and the
   button itself declare `display`, and any `display` beats the browser's
   default `[hidden] { display: none }`. So Apply stayed visible whenever the
   panel was open, on the events calendar as well as here.

   Two classes deep so it outranks the single-class rules that set display. */
.dove-type-filter [hidden] {
    display: none;
}

/* ---------------------------------------------------------------------------
   Equipping ministers

   Rendered by [minister_resources] in includes/ministers.php. The heading
   comes from the field, so the only thing needed here is the spacing between
   it and what follows - the same 10px the church labels use, for the same
   reason.
   --------------------------------------------------------------------------- */

.elementor .dove-minister-resources h5 {
    margin: 0 0 10px;
}

.dove-minister-resources p:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Minister focuses

   The mission and vision page sets its long-term vision as an Elementor icon
   list: a green check-circle against each line. `dove-checklist` is the same
   mark for any <ul> that wants it - a list written in a text editor rather
   than built as an icon list widget. A minister's focuses are one
   stored field of HTML, so they cannot be an icon list widget - there is no
   repeater to bind, just a <ul> the record supplies.

   This gives that <ul> the same treatment. The mark is Font Awesome's
   check-circle as a mask rather than a fill, so the colour comes from the
   accent token and tracks the palette; and as a mask rather than an icon font,
   so it does not depend on a webfont this page may never load - Elementor
   renders its own icons as inline SVG for the same reason.
   --------------------------------------------------------------------------- */

.dove-minister-focuses ul,
.dove-checklist ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dove-minister-focuses ul li,
.dove-checklist ul li {
    position: relative;
    padding-left: 30px;
    line-height: 1.5;
}

.dove-minister-focuses ul li::before,
.dove-checklist ul li::before {
    content: "";
    position: absolute;
    left: 0;
    /* nudged to sit on the first line's optical centre, not its box */
    top: 0.22em;
    width: 18px;
    height: 18px;
    background-color: var(--e-global-color-accent);
    -webkit-mask: var(--dove-check) no-repeat center / contain;
    mask: var(--dove-check) no-repeat center / contain;
}

:root {
    --dove-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Trips sidebar: the long-term note

   Sits under the filters and points at the thing the filters cannot offer.
   Long-term service is not a trip you pick a length for, so it has no term to
   click here - and a reader who wants it would otherwise work through every
   filter finding nothing that fits.

   A pale blue panel rather than a hairline: the filters above it are plain text
   on the page, so a tinted block reads as a different kind of thing - something
   to read rather than another control to click.
   --------------------------------------------------------------------------- */

/* `.dove-callout` is the same panel used as a pull-out inside prose - a
   sentence the surrounding copy is built around, set apart so it is read
   rather than skimmed past. Same treatment, different job, so it shares the
   rules rather than repeating them. */

.dove-trips-note,
.dove-callout {
    margin-top: 28px;
    padding: 20px;
    border-radius: 6px;
    background-color: #EEF4FA;
}

.dove-trips-note p,
.dove-callout p {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--e-global-color-text);
}

.dove-trips-note p:last-child,
.dove-callout p:last-child {
    margin-bottom: 0;
}

.elementor .dove-trips-note a,
.elementor .dove-callout a {
    color: var(--e-global-color-09f943e, #14549A);
    text-decoration: none;
    font-weight: 600;
}

.elementor .dove-trips-note a:hover,
.elementor .dove-trips-note a:focus,
.elementor .dove-callout a:hover,
.elementor .dove-callout a:focus {
    color: var(--e-global-color-d263c44);
    text-decoration: underline;
}

@media (max-width: 767px) {
    .dove-trips-note,
    .dove-callout {
        margin-top: 20px;
        padding-top: 20px;
    }
}

/* ---------------------------------------------------------------------------
   DISC profile test
   ---------------------------------------------------------------------------
   The plugin ships a 2017 stylesheet written for a different theme: it paints
   the five answers in that theme's palette and leans on `.btn`, `heading-v10`
   and a Visual Composer `vc_btn3` class, none of which exist here. So the
   answers rendered as five coloured word-shapes with no padding, and every
   button on the test read as plain body text.

   That stylesheet no longer loads - includes/disc.php points the plugin's
   injected <link> at this file instead - so nothing below is fighting it and
   no rule here needs `!important` or an id-beating selector. Everything the
   old sheet did that was actually needed is restated here deliberately.

   Ids are the plugin's markup and the only handles it gives us; there is no
   wrapper class to hook.
   --------------------------------------------------------------------------- */

#disc-form,
#disc-intro,
#question,
#getting_results,
#results {
    max-width: 800px;
    margin-inline: auto;
}

/* The opening sentence is a lede, not a second title. includes/disc.php turns
   the plugin's <h2> into this paragraph before the page is printed; the h2
   selector is kept beside it so the styling holds if that ever fails to
   match. Body size, bold - a paragraph that is emphasised, not a heading. */
.dove-disc__lede,
#disc-form h2 {
    margin: 0 0 12px;
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
    font-weight: 700;
    color: var(--e-global-color-text);
}

#disc-form p {
    margin: 0 0 20px;
}

#disc-form input[type="text"],
#disc-form input[type="email"] {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 0 12px;
    padding: 13px 14px;
    border: 1px solid #C6CDD2;
    border-radius: 4px;
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--e-global-color-text);
    background: #FFFFFF;
}

#disc-form input::placeholder {
    color: var(--e-global-color-secondary);
    opacity: 1;
}

#disc-form input:focus {
    outline: 2px solid var(--e-global-color-accent);
    outline-offset: 1px;
    border-color: var(--e-global-color-accent);
}

/* ── The three buttons ───────────────────────────────────────────────────────
   Get Started, Begin The Assessment and Finish Assessment are <a> and <span>
   elements carrying class names from two dead themes. They are given the kit's
   button treatment here so they match every other button on the site. */

#loadTest,
#begin,
#disc-finish {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 4px;
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: var(--e-global-color-ca254a7, #FFFFFF);
    background-color: var(--e-global-color-accent);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#loadTest:hover,
#loadTest:focus,
#begin:hover,
#begin:focus,
#disc-finish:hover,
#disc-finish:focus {
    color: var(--e-global-color-ca254a7, #FFFFFF);
    background-color: var(--e-global-color-1666851);
}

#disc-finish .vc_btn3-icon {
    margin-left: 8px;
}

/* ── The guidelines ──────────────────────────────────────────────────────── */

#disc-intro h2 {
    margin: 0 0 20px;
    font-size: 32px;
    line-height: 1.25;
}

#disc-intro ul {
    margin: 0 0 20px;
    padding-left: 22px;
}

#disc-intro li {
    margin-bottom: 8px;
}

#disc-intro p {
    margin: 0 0 16px;
}

#disc-intro .message:empty {
    display: none;
}

#begin {
    margin-top: 12px;
}

/* ── A question ──────────────────────────────────────────────────────────────
   "Question 14 of 92" is an <h2> in the markup but it is a progress reading,
   not a heading - it is the same words 92 times and the question underneath is
   what a person is here to read. Set as a small label so the question leads. */

#question {
    text-align: center;
}

#question .heading h2 {
    margin: 0 0 14px;
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--e-global-color-secondary);
}

/* The min-height keeps the answers from jumping up and down between a short
   question and one that wraps to two lines - 92 times in a row. */
#question h3 {
    max-width: 640px;
    min-height: 74px;
    margin: 0 auto 22px;
    font-size: 30px;
    line-height: 1.35;
    color: var(--e-global-color-d263c44);
}

/* ── The five answers ────────────────────────────────────────────────────────
   A five-step scale, so the buttons are one colour getting stronger rather
   than five unrelated colours. The text stays the same dark grey throughout -
   every step is between 6.4:1 and 11.9:1 against it - and the accent border
   is what says "control" on the palest step, which is nearly the page colour.

   Hover thickens the border rather than repainting the fill, so the step a
   person is about to choose still reads as its place on the scale. */

#question .answer {
    display: block;
    width: 100%;
    padding: 14px 10px;
    border: 1px solid var(--e-global-color-accent);
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--e-global-color-text);
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

#question .answer:hover,
#question .answer:focus {
    box-shadow: inset 0 0 0 2px var(--e-global-color-1666851);
}

#question .answer[data-answer="1"] { background-color: #F1F5EC; }
#question .answer[data-answer="2"] { background-color: #E1EBD6; }
#question .answer[data-answer="3"] { background-color: #CDDDBB; }
#question .answer[data-answer="4"] { background-color: #B7CE9C; }
#question .answer[data-answer="5"] { background-color: #A0C07E; }

/* The spans are siblings with no wrapper, so the row is a grid on the parent.
   `.heading` and `h3` are told to span it, or they would each take a column. */
@media (min-width: 641px) {
    #question {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
        align-items: stretch;
    }

    #question .heading,
    #question h3 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    #question .answer {
        margin-bottom: 10px;
    }

    #question h3 {
        min-height: 0;
        font-size: 24px;
        margin-bottom: 22px;
    }
}

/* ── Waiting, and finishing ──────────────────────────────────────────────── */

#getting_results {
    padding: 40px 0;
    text-align: center;
}

#getting_results h3 {
    margin: 0;
    font-size: 24px;
}

#finishTest {
    padding: 20px 0;
    text-align: center;
}

/* ── The results ─────────────────────────────────────────────────────────────
   The heading levels here do not describe the hierarchy: the personality
   advice is an <h4> and each spiritual gift under it is an <h3>, so left alone
   the section head reads smaller than the items inside it. The sizes below
   restate the real order - results title, then section, then each gift - and
   leave the tags alone. */

#results .heading h2 {
    margin: 0 0 24px;
    font-size: 36px;
    line-height: 1.2;
}

#disc-container h2 {
    margin: 36px 0 12px;
    font-size: 28px;
    line-height: 1.25;
    color: var(--e-global-color-d263c44);
}

#disc-container h4 {
    margin: 32px 0 10px;
    font-size: 22px;
    line-height: 1.3;
}

/* The gift names arrive lowercase from the plugin's table - "pastor /
   shepherd" - and they are headings, not running text. */
#disc-container h3 {
    margin: 28px 0 8px;
    font-size: 20px;
    line-height: 1.3;
    text-transform: capitalize;
}

#disc-container p {
    margin: 0 0 14px;
}

#disc-container hr {
    margin: 24px 0;
    border: 0;
    border-top: 1px solid #E4E8EB;
}

#profile_id {
    color: var(--e-global-color-accent);
}

/* ---------------------------------------------------------------------------
   Leader portraits: reserve the square before the file arrives
   ---------------------------------------------------------------------------
   The loop items on /about/leadership/ are built from two saved templates,
   15575 (the council and staff cards) and 16290 (the regional lists), and in
   both the portrait comes from an Elementor custom image size. Elementor emits
   that tag as

       <img src="..." loading="lazy" />

   with no width and no height attribute. Nothing in the CSS gives it a height
   either - only a width - so until the file has actually downloaded the image
   has no box, and the row it sits in is measured from the name beside it.

   The row is then shorter than the portrait that lands in it. With the row set
   to centre its children the portrait overflows equally above and below, and
   the grey card, whose height is the sum of its rows, does not account for any
   of it - so the first and last portraits in each card hang outside the grey.
   Measured at 390: rows 62px, portraits 72px, four rows to a card, forty
   pixels of overhang. Safari shows it worst because it does not re-lay-out the
   card after the images load; Chrome mostly hides it.

   An aspect ratio fixes that at the root. These sources are square, so the box
   resolves from the width alone, before and without the file - which is what
   `loading="lazy"` needs in order to be safe.
   --------------------------------------------------------------------------- */

.elementor-15575 .elementor-widget-image img,
.elementor-16290 .elementor-widget-image img {
    aspect-ratio: 1;
    height: auto;
}

/* ---------------------------------------------------------------------------
   ...and give the regional portraits a real size, not a percentage
   ---------------------------------------------------------------------------
   An aspect ratio is only as definite as the width it is measured against, and
   template 16290 never gives its portrait a width a browser can rely on. On a
   phone it asks for `30%` of the row. Above that it asks for 100px, but the
   row is nowrap and the portrait is the thing that gives way, so it is shrunk
   to whatever is left - 59px at 1100, 78px at 1024.

   Either way the width is not known while the browser is working out how tall
   the row wants to be, so the portrait contributed nothing to that answer. The
   row reported the height of the name alone, the loop grid was laid out to
   that, and then the portraits arrived at their real size and pushed through
   the bottom of the grey card.

   It scaled with the viewport, which is why it looked fine on a small phone
   and bad on a large one: the loop overhung its card by 0px at 320, 15px at
   390, 39px at 430 and 103px at 767, because a percentage of a wider card is a
   bigger portrait against a name that is always the same height. Between about
   850 and 1024 the same thing cost the East Coast card its bottom padding.

   So the portrait is told to be 72px and to stop negotiating. `flex` rather
   than a width alone because a fixed width still gets shrunk in a nowrap row,
   and a shrunk square is an egg. The name takes what is left instead of a
   second percentage. 72px is what a 390-wide phone renders today; on a desktop
   it replaces a portrait that was already swinging between 59 and 78px
   depending on the window.

   The council and staff template does not need this - its portrait is declared
   in pixels and its row wraps.
   --------------------------------------------------------------------------- */

.elementor.elementor-16290 .elementor-element.elementor-widget-image {
    flex: 0 0 72px;
    width: 72px;
    max-width: 72px;
    --container-widget-width: 72px;
}

.elementor.elementor-16290 .elementor-element.elementor-widget-image img {
    width: 72px;
    height: 72px;
}

.elementor.elementor-16290 .e-con .e-con {
    --width: auto;
    --flex-grow: 1;
    --flex-shrink: 1;
}

/* ---------------------------------------------------------------------------
   A stressed word in a heading, on a light band
   ---------------------------------------------------------------------------
   The kit's `.highlight` is #8FBF6A, picked for the navy and dark green hero
   bands where it reads at 6.4:1. It is the wrong green anywhere else: 2.1:1 on
   white, 1.9:1 on cream, 1.6:1 on sage, all under the 3:1 a heading needs at
   any size.

   So a heading on a light band stresses its word with the accent instead -
   4.7:1 on white, 4.1:1 on cream, 3.6:1 on sage. Separate class rather than an
   override, so neither rule has to out-specify the other and the markup says
   which band it is on.
   --------------------------------------------------------------------------- */

.highlight-on-light {
    color: var(--e-global-color-accent, #4F8129);
}

/* ---------------------------------------------------------------------------
   The header logo on a phone is the size the header says it is
   ---------------------------------------------------------------------------
   The header template asks for a 180px logo under 767px. It never got one: the
   logo sits in a nowrap flex row beside the menu button, keeps the default
   `flex-shrink: 1`, and is the thing that gives way - so the declared 180px
   rendered as 99px at 320, 109px at 390 and 114px at 430, and the mark read as
   an afterthought next to the burger.

   Nothing here sets a size. It stops the negotiation, and the number in the
   template becomes the number on the screen.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .elementor-location-header .elementor-widget-theme-site-logo {
        flex: 0 0 auto;
    }
}

/* ---------------------------------------------------------------------------
   DISC on a dark band: [disc-profile theme="light"]
   ---------------------------------------------------------------------------
   Everything above is drawn for a white page. On the navy, dark green or dark
   background bands the question is navy on navy and the progress line is
   #66727A at 2.8:1. This is the same test with light type.

   Only the things that would fail are changed. Measured against all three dark
   grounds the site uses (#082E59, #173F27, #0E2117):

       white body and headings        11.8 - 16.8:1
       Meta #9AA4AB progress label     4.7 - 6.6:1
       #8FBF6A personality type        5.5 - 7.9:1

   The five answers keep their fills and their dark text. The scale still reads
   left to right, the dark type on it is untouched at 6.5 - 11.9:1, and each
   fill sits at 5.8 - 15.2:1 against the ground behind it - which is what the
   accent border was there to provide on a white page, so on a dark one the
   border goes.
   --------------------------------------------------------------------------- */

.dove-disc--light .dove-disc__lede,
.dove-disc--light #disc-form h2,
.dove-disc--light #disc-form p,
.dove-disc--light #disc-intro,
.dove-disc--light #disc-intro h2,
.dove-disc--light #question h3,
.dove-disc--light #getting_results h3,
.dove-disc--light #results,
.dove-disc--light #results .heading h2,
.dove-disc--light #disc-container h2,
.dove-disc--light #disc-container h3,
.dove-disc--light #disc-container h4,
.dove-disc--light #disc-container p {
    color: var(--e-global-color-ca254a7, #FFFFFF);
}

.dove-disc--light #question .heading h2 {
    color: var(--e-global-color-747d924, #9AA4AB);
}

.dove-disc--light #profile_id {
    color: #8FBF6A;
}

.dove-disc--light #question .answer {
    border-color: transparent;
}

.dove-disc--light #disc-container hr {
    border-top-color: rgba(255, 255, 255, 0.22);
}

/* The input keeps its white field - dark type in a white box is the readable
   half of this - but its placeholder was picked to sit on a white page. */
.dove-disc--light #disc-form input::placeholder {
    color: #6B7680;
}

/* ---------------------------------------------------------------------------
   A trip that has stopped taking applications
   ---------------------------------------------------------------------------
   Where the form would have been. Deliberately quiet - it is the absence of
   something, and the link out is the useful half.
   --------------------------------------------------------------------------- */

.dove-mission-closed {
    margin: 0;
    padding: 20px;
    border-radius: 6px;
    background-color: var(--e-global-color-3f04ba3, #EEF4FA);
    font-size: 15px;
    line-height: 1.55;
    color: var(--e-global-color-text);
}

.elementor .dove-mission-closed a {
    color: var(--e-global-color-09f943e, #14549A);
    font-weight: 600;
    text-decoration: none;
}

.elementor .dove-mission-closed a:hover,
.elementor .dove-mission-closed a:focus {
    color: var(--e-global-color-d263c44);
    text-decoration: underline;
}

/* On a closed trip the apply button would scroll to "applications have
   closed" - a button that promises what the page cannot do. */
.dove-trip-closed .dove-apply-button {
    display: none;
}

/* ---------------------------------------------------------------------------
   A trip with no picture takes the whole width
   ---------------------------------------------------------------------------
   The header is image left, content right, the shape a church single uses. One
   trip in nine has a featured image, so on the other eight the media column
   would be an empty third of the row with the copy squeezed into the rest.
   It is removed there instead, and comes back on its own the day a picture is
   added.
   --------------------------------------------------------------------------- */

.dove-trip-no-image .dove-trip-media {
    display: none;
}

.dove-trip-no-image .dove-trip-body {
    width: 100%;
}


/* An event with no featured image: drop the empty column rather than leave a
   hole where a picture should be. */
.dove-event-no-image .dove-event-media {
    display: none;
}

.dove-event-no-image .dove-event-body {
    width: 100%;
}

/* Promo events own the whole viewport (Elementor canvas, no site header or
   footer). Their page menu is usually sticky, so anchored sections stop
   short of it instead of sliding underneath. */
.dove-event-promo [id] {
    scroll-margin-top: 96px;
}


/* Articles: the author box, switched off per article.
   The widget is already dropped by a UAE display condition on the ACF field;
   this takes the rule above it with it, which the condition does not cover,
   and covers the widget too if that condition is ever removed. */
body.hide_author_box .elementor-widget-author-box,
body.hide_author_box .elementor-element-67c8610 {
    display: none;
}

/* [missionary_portrait] on the Where We Serve cards: the couple or family
   photo, round, overlapping the bottom of the action photo above it. */
.dove-missionary-portrait {
    width: 112px;
    height: 112px;
    margin: -76px 0 4px;
    position: relative;
    z-index: 2;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(8, 46, 89, .18);
    overflow: hidden;
}
.dove-missionary-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* reCAPTCHA v3: hide the floating badge (it covered content on phones).
   Each form carries the required notice instead, see dove_recaptcha_notice(). */
.grecaptcha-badge {
    visibility: hidden !important;
}

.dove-recaptcha-note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    opacity: 0.75;
}

.dove-recaptcha-note a {
    color: inherit;
    text-decoration: underline;
}