/* Integrate branding and donation into the theme's existing header row. */
#masthead .row-two .bb-bldr-row:has(.ra-header-action) {
    display: block;
    width: calc(100% - 100px);
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 0;
    box-sizing: border-box;
}
#masthead .row-two .bb-bldr-row:has(.ra-header-action) > .bb-bldr-column { width:100%; flex:0 0 100%; }
#masthead .row-two .bb-bldr-row:has(.ra-header-action) > .bb-bldr-column:not(:has(.bb-bldr-widget)) { display:none; }
#masthead .row-two .bb-bldr-widget:has(> .ra-header-action) { display:flex; width:100%; align-items:center; justify-content:space-between; gap:28px; }
#masthead .site-branding { text-align:left; }
.ra-header-action { flex-shrink:0; padding-left:30px; border-left:1px solid #e4d6c4; }
#masthead a.ra-donate { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:11px 29px; border:1px solid #82501f; border-radius:3px; background:#82501f; color:#fff; font-family:inherit; font-size:17px; font-weight:700; line-height:1.3; text-decoration:none; box-shadow:none; }
#masthead a.ra-donate:hover { background:#633b17; border-color:#633b17; color:#fff; }
.ra-donate:focus-visible { outline:3px solid #315d86; outline-offset:4px; }
/* Preserve complete photographs and cap them at their original dimensions. */
.ra-hero { position:relative; margin:0; background:#eee5d8; border-radius:5px 5px 0 0; overflow:hidden; --ra-photo-height:clamp(260px,39vw,520px); }
.ra-slides { min-width:0; }
.ra-hero .ra-slide { margin:0; }
.ra-photo-frame { height:var(--ra-photo-height); display:flex; align-items:center; justify-content:center; }
.ra-photo-frame img { display:block; width:100%; height:100%; object-fit:contain; margin:0; }
.ra-hero [hidden] { display:none !important; }
.ra-caption { margin:0 !important; padding:12px 22px; font-size:15px; line-height:1.5; color:#55422f; text-align:center; background:#f5efe6; }
.ra-hero-controls { position:absolute; inset:0 0 auto; height:var(--ra-photo-height); pointer-events:none; }
.ra-hero-controls button { display:inline-flex; align-items:center; justify-content:center; pointer-events:auto; padding:0; border:1px solid #ffffff80; border-radius:50%; color:#fff; background:#30261bba; cursor:pointer; width:44px; height:44px; min-width:44px; min-height:44px; line-height:1; font-family:inherit; box-shadow:none; }
.ra-hero-controls button:hover { background:#30261bef; }
.ra-hero-controls button:focus-visible { outline:3px solid #fff; outline-offset:3px; box-shadow:0 0 0 6px #593312; }
.ra-hero-controls svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ra-prev,.ra-next { position:absolute; top:50%; transform:translateY(-50%); }
.ra-prev { left:14px; }.ra-next { right:14px; }
.ra-photo-toolbar { position:absolute; right:14px; bottom:12px; display:flex; align-items:center; gap:4px; padding-left:12px; background:#30261bcf; border-radius:24px; color:#fff; font-size:13px; line-height:1; }
.ra-photo-toolbar [data-ra-count] { white-space:nowrap; }
.ra-photo-toolbar button { background:transparent; border-color:transparent; width:44px; height:44px; font-size:16px; }
.ra-mission { margin:0 0 30px; padding:28px 28px 26px; border:1px solid #e9dece; border-top:3px solid #9A3F3F; border-radius:0 0 5px 5px; background:#faf6ef; color:#30271e; text-align:center; }
.entry-content .ra-mission h2 { margin:0 0 16px; font-size:clamp(23px,2.1vw,28px); line-height:1.35; color:#633b17; }
.entry-content .ra-mission p { font-size:18px; line-height:1.65; margin:0 0 14px; }
.entry-content .ra-mission .ra-mission-promise { font-weight:700; color:#82501f; font-size:21px; letter-spacing:.025em; }
.entry-content .ra-mission .ra-mission-note { font-size:16px; margin:0; }
.home #primary .entry-content { padding-top:0; }
#secondary .widget { border-radius:4px; box-shadow:none; border:1px solid #e9dece; }
#secondary .widget-title { color:#633b17; }
#secondary .widget_links a { color:#4c3826; text-decoration:none; }
#secondary .widget_links a:hover { color:#82501f; text-decoration:underline; }
#secondary .widget_links a:focus-visible { outline:2px solid #315d86; outline-offset:3px; }
/* =========================================================
   Compact Desktop Branding
   Reduce header height while preserving RideAbility identity.
   ========================================================= */

@media (min-width: 1025px) {

    #masthead .row-two .bb-bldr-row:has(.ra-header-action) {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    #masthead .row-two .custom-logo {
        width: 300px;
        height: auto;
    }

    #masthead .site-branding {
        line-height: 1;
    }
}
@media(max-width:1024px) { #masthead .row-two .bb-bldr-row:has(.ra-header-action) { padding:12px 10px; } .ra-header-action { padding-left:22px; } }
@media(max-width:600px) {
 #masthead .row-two .bb-bldr-widget:has(> .ra-header-action) { gap:16px; }
 #masthead .row-two .custom-logo { width:190px; max-width:100%; }
 #masthead .site-branding { min-width:0; }
 #masthead a.ra-donate { padding:10px 18px; font-size:16px; }
 .ra-header-action { padding-left:0; border-left:0; }
 .ra-hero { --ra-photo-height:clamp(150px,calc((100vw - 104px)*.75),360px); }
 .ra-prev { left:8px; }.ra-next { right:8px; }
 .ra-photo-toolbar { right:8px; bottom:8px; }
 .ra-caption { padding:10px 16px; }
 .ra-mission { padding:24px 18px; }
}
@media(max-width:360px) { #masthead .row-two .custom-logo { width:155px; } #masthead a.ra-donate { padding-inline:13px; } }
/* =========================================================
   RideAbility Donate Page
   ========================================================= */

.ra-donate-page {
    max-width: 900px;
    margin: 0 auto;
}

.ra-donate-intro {
    margin-bottom: 32px;
}

.ra-donate-intro h1 {
    margin-bottom: 18px;
    color: #82501f;
}

.ra-donate-lead {
    font-size: 1.15rem;
    line-height: 1.7;
}

.ra-giving-section {
    margin: 30px 0;
    padding: 30px;
    background: #f7f2eb;
    border: 1px solid #e4d6c4;
    border-radius: 6px;
}

.ra-giving-section h2 {
    margin-top: 0;
    color: #82501f;
}

.ra-paypal-form {
    margin-top: 22px;
    text-align: center;
}

.ra-paypal-form select {
    display: block;
    width: 100%;
    max-width: 340px;
    margin: 12px auto 20px;
    padding: 10px 12px;
    font-size: 1rem;
    border: 1px solid #aaa;
    border-radius: 4px;
    background: #fff;
}

.ra-paypal-submit {
    margin-top: 18px;
}

.ra-support-section {
    margin: 45px 0;
}

.ra-support-section > h2 {
    text-align: center;
    color: #82501f;
    margin-bottom: 24px;
}

.ra-support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.ra-support-card {
    padding: 24px 20px;
    text-align: center;
    background: #fff;
    border: 1px solid #e4d6c4;
    border-top: 4px solid #82501f;
    border-radius: 5px;
}

.ra-support-card h3 {
    margin-top: 0;
    color: #82501f;
}

.ra-support-card p {
    margin-bottom: 0;
    line-height: 1.6;
}

.ra-donate-footer {
    margin: 40px 0 20px;
    padding: 26px;
    text-align: center;
    border-top: 3px solid #1b8415;
}

.ra-donate-footer h2 {
    color: #82501f;
}


/* Donate page responsive layout */

@media (max-width: 700px) {

    .ra-support-grid {
        grid-template-columns: 1fr;
    }

    .ra-giving-section {
        padding: 22px 18px;
    }

    .ra-donate-lead {
        font-size: 1.05rem;
    }

}
/* =========================================================
   Quick Donate / QR-code landing action
   ========================================================= */

.ra-quick-donate {
    margin: 0 0 28px;
    padding: 24px 28px;
    text-align: center;
    background: #f7f2eb;
    border: 1px solid #e4d6c4;
    border-top: 5px solid #9A3F3F;
    border-radius: 6px;
}

.ra-quick-donate h1 {
    margin: 0 0 8px;
    color: #633b17;
    font-size: clamp(26px, 3vw, 34px);
}

.ra-quick-donate p {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.5;
}

.ra-quick-donate-form {
    margin: 0;
}

.ra-paypal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    min-height: 54px;
    padding: 13px 30px;
    border: 0;
    border-radius: 4px;
    background: #82501f;
    color: #fff;
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
}

.ra-paypal-button:hover {
    background: #633b17;
    color: #fff;
}

.ra-paypal-button:focus-visible {
    outline: 3px solid #315d86;
    outline-offset: 4px;
}

@media (max-width: 600px) {

    .ra-quick-donate {
        margin-top: 0;
        padding: 18px 16px;
    }

    .ra-quick-donate h1 {
        font-size: 25px;
    }

    .ra-quick-donate p {
        margin-bottom: 14px;
        font-size: 16px;
    }

    .ra-paypal-button {
        width: 100%;
        min-width: 0;
        min-height: 56px;
        font-size: 18px;
    }

}
/* =========================================================
   RideAbility Desktop Navigation
   Give the primary menu enough room to remain on one line.
   ========================================================= */

@media (min-width: 1025px) {

    /* The bottom header row contains navigation + search.
       Give the center/menu area most of the available width. */
    #masthead .row-three .bb-bldr-row.column-3 {
        grid-template-columns: 10fr 80fr 10fr !important;
    }
}
 /* =========================================================
   RideAbility Desktop Navigation
   Full-width menu with search positioned at right.
   ========================================================= */

@media (min-width: 1025px) {

    /* Allow the navigation column to use the full header row. */
    #masthead .row-three .bb-bldr-row {
        display: block !important;
        position: relative;
    }

    #masthead .row-three .bb-bldr-column {
        width: 100% !important;
        max-width: none !important;
    }

    /* Center all primary menu items on one line. */
    #masthead .main-navigation > ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        padding-right: 55px;
        padding-left: 55px;
    }

    #masthead .main-navigation > ul > li {
        flex: 0 0 auto;
    }

    #masthead .main-navigation > ul > li > a {
        padding-left: 11px !important;
        padding-right: 11px !important;
        white-space: nowrap;
    }

    /* Keep header search at the far right instead of consuming
       a dedicated grid column. */
    #masthead .row-three .bb-bldr-column:last-child {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: auto !important;
        z-index: 5;
    }

}
/* =========================================================
   Donate Page — Mobile QR-code Experience
   ========================================================= */

@media (max-width: 768px) {

    body.page-id-158 .ra-quick-donate {
        margin: 0 0 18px;
        padding: 18px 16px 20px;
    }

    body.page-id-158 .ra-quick-donate h1 {
        margin: 0 0 10px;
        font-size: 28px;
        line-height: 1.2;
    }

    body.page-id-158 .ra-quick-donate p {
        margin: 0 0 16px;
        font-size: 16px;
        line-height: 1.45;
    }

    body.page-id-158 .ra-quick-donate-form {
        margin: 0;
    }

    body.page-id-158 .ra-paypal-button {
        display: flex;
        width: 100%;
        min-width: 0;
        min-height: 54px;
        margin: 0;
        padding: 12px 18px;
    }

}
/* =========================================================
   Donate Page — Compact Mobile QR Landing Page
   ========================================================= */

@media (max-width: 768px) {

    /* Compact the large RideAbility branding on this page only. */
    body.page-id-158 #masthead .custom-logo {
        width: 155px !important;
        max-width: 155px !important;
        height: auto !important;
    }

    body.page-id-158 #masthead .site-branding {
        line-height: 1;
    }

    body.page-id-158 #masthead .row-two .bb-bldr-row {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    /* Make the QR-code donation action compact and immediate. */
    body.page-id-158 .ra-quick-donate {
        margin-bottom: 18px;
        padding: 16px 16px 18px !important;
    }

    body.page-id-158 .ra-quick-donate h1 {
        margin: 0 0 8px !important;
        font-size: 26px !important;
        line-height: 1.2;
    }

    body.page-id-158 .ra-quick-donate p {
        margin: 0 0 12px !important;
        font-size: 16px;
        line-height: 1.4;
    }

    body.page-id-158 .ra-quick-donate-form {
        margin: 0 !important;
    }

    body.page-id-158 .ra-paypal-button {
        width: 100%;
        min-height: 54px;
        margin: 0 !important;
        padding: 12px 16px !important;
    }
}
/* Hide breadcrumb on the mobile Donate/QR landing page only. */
@media (max-width: 768px) {
    body.page-id-158 #theme-content > div > div > div {
        display: none !important;
    }
}

/* =========================================================
   Donate Button — Payment Methods
   ========================================================= */

.ra-paypal-button {
    flex-direction: column;
    gap: 4px;
}

.ra-donate-button-title {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
}

.ra-donate-button-methods {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
}

@media (max-width: 768px) {

    body.page-id-158 .ra-paypal-button {
     min-height: 68px;
    padding: 12px 14px !important;
    gap: 2px;
    }

    body.page-id-158 .ra-donate-button-title {
        font-size: 23px;
    }

    body.page-id-158 .ra-donate-button-methods {
        font-size: 13px;
    }
}
/* =========================================================
   Header Branding Balance
   Larger RideAbility identity / smaller Donate action
   ========================================================= */

@media (max-width: 600px) {

    /* Make the RideAbility brand the dominant header element. */
    body:not(.page-id-158) #masthead .row-two .custom-logo {
        width: 225px;
        max-width: 100%;
        height: auto;
    }

    /* Keep Donate prominent without competing with the logo. */
    #masthead a.ra-donate {
        min-height: 40px;
        padding: 8px 15px;
        font-size: 15px;
        line-height: 1.2;
    }
}

@media (max-width: 360px) {

    body:not(.page-id-158) #masthead .row-two .custom-logo {
        width: 200px;
        max-width: 100%;
    }

    #masthead a.ra-donate {
        min-height: 38px;
        padding: 7px 12px;
        font-size: 14px;
    }
}
/* =========================================================
   RideAbility Directions
   ========================================================= */

.ra-directions-page {
    max-width: 900px;
    margin: 0 auto;
}

.ra-directions-map {
    margin: 22px 0 12px;
}

.ra-directions-map iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 450px;
    border: 0;
    border-radius: 6px;
}

.ra-directions-map-link {
    margin: 0 0 26px;
}

.ra-gps-note,
.ra-arrival-note {
    margin: 28px 0;
    padding: 20px 22px;
    background: #f7f2eb;
    border-left: 4px solid #9A3F3F;
    border-radius: 4px;
}

.ra-directions-page h3 {
    color: #633b17;
}

@media (max-width: 600px) {
    .ra-directions-map iframe {
        height: 340px;
    }

    .ra-gps-note,
    .ra-arrival-note {
        padding: 16px;
    }
}