/**
 * rc-campaign.css
 * Version: 2.0.0
 * Date: 2026-08-12
 * Generated by Claude, session RC-CHAR-S2
 *
 * Charitable campaign single-view corrections and the RC campaign template.
 *
 * Loaded only on is_singular( 'campaign' ) via rc-starter.php.
 *
 * v2.0.0: The campaign surfaces become a reusable template rather than a
 *         Whidbey-shaped patch. Sections 3 and 5 amended (row surfaces are now
 *         transparent, tab gutter tightened); NEW Sections 6-10 for the sidebar
 *         card, the Return button, the cross-campaign band and the steward
 *         grid. All new sections are driven by structural preconditions or
 *         RC-owned class names, never by a campaign id, so the sheet stays
 *         correct on every campaign.
 *
 * ON !important IN THIS FILE. Five uses, each answering a declaration that no
 * class-based selector can outrank: two inherited from v1.3.0 (an inline style
 * on the hero img, and an ID-scoped column padding), three added in v2.0.0 for
 * ID-scoped row and column declarations documented at their sections. The rule
 * for future edits is unchanged: an ID selector or an inline style in the
 * competing declaration is the ONLY accepted justification, and it is named at
 * the point of use.
 *
 * v1.3.0: Sections 4-5 corrected. Three vendor declarations outrank an ordinary
 *         class rule and needed answering individually: the column padding is
 *         set via an ID selector (#charitable-template-row-0), the hero img
 *         carries an INLINE height:auto, and the tab li border comes from a
 *         (0,5,3) selector. See the notes in each section.
 * v1.2.0: layout rhythm, full-bleed media column, tab strip (Sections 3-5).
 * v1.1.0: field headline size raised to the 20px token (Section 2).
 * v1.0.0: horizontal social-sharing row (Section 1).
 *
 * ---------------------------------------------------------------------------
 * SECTION 1: SOCIAL SHARING ROW
 *
 * Charitable's base stylesheet already lays the social-sharing icon row out
 * horizontally:
 *
 *   .charitable-campaign-field-social-sharing .charitable-field-row {
 *       display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px;
 *   }
 *
 * The per-template stylesheet generated at
 * /wp-json/charitable/v1/campaign-css/<template> overrides that for the
 * disaster-relief template with display:block, then floats
 * ".charitable-field-column". The sharing field never renders that class; it
 * renders ".charitable-social-field-column". The float therefore matches
 * nothing, the container is block, and the icons stack vertically.
 *
 * This is a vendor template defect, not a site style choice, so the fix is
 * scoped to the sharing field and is written template-agnostically: it holds
 * if the campaign is later moved off disaster-relief.
 *
 * Specificity note: the vendor rule is (0,4,0). Every rule below carries five
 * class selectors, (0,5,0), so it wins on specificity rather than on source
 * order, which is not guaranteed between two separately enqueued sheets.
 */

/* Label above, icon row below. */
.charitable-campaign-wrap .charitable-campaign-field.charitable-campaign-field-social-sharing .charitable-field-template-social-sharing {
    display: block;
}

.charitable-campaign-wrap .charitable-campaign-field.charitable-campaign-field-social-sharing .charitable-field-template-social-sharing-headline-container {
    display: block;
    float: none;
    padding: 0;
}

/* The icon row itself: horizontal, wrapping on narrow columns. */
.charitable-campaign-wrap .charitable-campaign-field.charitable-campaign-field-social-sharing .charitable-field-template-social-sharing .charitable-field-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    float: none;
    width: auto;
    margin: 0;
}

/* Each icon sizes to its content instead of filling the row. */
.charitable-campaign-wrap .charitable-campaign-field.charitable-campaign-field-social-sharing .charitable-field-template-social-sharing .charitable-social-field-column {
    float: none;
    width: auto;
    margin: 0;
}

/**
 * ---------------------------------------------------------------------------
 * SECTION 2: FIELD HEADLINE SIZE
 *
 * The generated disaster-relief stylesheet sets
 *
 *   .charitable-campaign-wrap.template-disaster-relief .charitable-campaign-row h5
 *       { font-size: 16px; line-height: 16px; font-weight: 700; }
 *
 * at specificity (0,3,1), which beats Charitable's own base rule for these
 * headlines. 16px reads small against the 17px body copy, and a line-height
 * equal to the font-size clips descenders on wrapped headings.
 *
 * Raised to --fs-900 (1.25rem / 20px), the existing token, per the token
 * hygiene protocol; no new literal is introduced. The selector carries five
 * classes plus the element, (0,5,1), so it beats the vendor rule on
 * specificity rather than on load order.
 *
 * The social-sharing "Share" label is deliberately NOT included: the vendor
 * pins it at 14px !important, and it is a utility label above the icon row
 * rather than a section heading.
 */
.charitable-campaign-wrap .charitable-campaign-container .charitable-campaign-field .charitable-campaign-field-inner h5.charitable-field-template-headline {
    font-size: var(--fs-900);
    line-height: 1.35;
}

/**
 * ---------------------------------------------------------------------------
 * SECTION 3: LAYOUT RHYTHM AND ROW SURFACES
 *
 * Two concerns, kept together because they describe the same seam.
 *
 * RHYTHM. The campaign row is already display:flex and its columns already
 * stretch to equal height, but the media column sits flush against the
 * bordered sidebar card and consecutive rows touch each other. A 15px gutter
 * separates the two columns and lifts the band and tab strip clear of the row
 * above them.
 *
 * SURFACES (v2.0.0). The disaster-relief sheet paints every campaign row
 * white, which stacks opaque white slabs on the page's warm-white background
 * and buries the seam the gutter is trying to create. The rows are made
 * transparent so the page background reads continuously behind the content,
 * and the only surfaces left are the ones that mean something: the bordered
 * sidebar card (Section 6) and the band items (Section 8).
 *
 * transparent, not a colour token, is deliberate. The row inherits whatever
 * the page background is, so this stays correct if the campaign template is
 * ever placed on a differently-coloured page, and it introduces no literal.
 *
 * On !important here. Row 0's white comes from
 *   ".charitable-campaign-wrap.template-disaster-relief .charitable-campaign-row"
 * at (0,3,0), which an ordinary class rule can outrank. Row 1's ALSO comes
 * from "#charitable-template-row-1" at (1,2,0), and an ID beats any number of
 * classes. Matching that ID would win but would pin the rule to a generated
 * row index forever, and the band added in v2.0.0 renumbers those indexes.
 * !important keeps the rule attached to "campaign rows are transparent", which
 * is the actual intent, and survives rows being added or reordered.
 */
.charitable-campaign-wrap .charitable-campaign-row {
    gap: 15px;
    margin-bottom: 15px;
}

.charitable-campaign-wrap .charitable-campaign-row:last-child {
    margin-bottom: 0;
}

.charitable-campaign-wrap .charitable-campaign-container .charitable-campaign-row {
    background-color: transparent !important; /* beats #charitable-template-row-N */
}

/**
 * ---------------------------------------------------------------------------
 * SECTION 4: FULL-BLEED MEDIA COLUMN
 *
 * Make the hero fill its column so its top and bottom edges line up with the
 * bordered sidebar card opposite, cropping via object-fit rather than
 * distorting (the vendor ships object-fit:fill on this img).
 *
 * SCOPE, and why it is written this way. This stylesheet loads on every
 * campaign single, and the campaigns do not share a layout: Whidbey has a
 * photo alone in the media column, while Whatcom and the Gorge have a photo
 * with a text field beneath it in the same column. Forcing height:100% there
 * would collapse the text. The :has() + :only-child guard states the actual
 * precondition, "this column contains nothing but a photo", so the rule
 * applies where it is correct and is inert everywhere else. That is preferred
 * over hard-coding a campaign id, which would silently stop being true the
 * next time a layout changes.
 *
 * Degradation: where :has() is unsupported the column keeps its padding and
 * the hero simply renders at its natural height, which is today's appearance.
 *
 * On !important, used twice below and not casually. Two vendor declarations
 * here cannot be outranked by any class-based selector:
 *
 *   1. The column padding comes from
 *      ".charitable-campaign-wrap.template-disaster-relief
 *       #charitable-template-row-0 .charitable-campaign-column:nth-child(1)",
 *      which carries an ID. Matching the ID would win, but it would also pin
 *      this rule to row index 0 forever; !important keeps the rule tied to the
 *      structural precondition instead of to a generated row id.
 *
 *   2. The hero img is emitted with an INLINE style="height: auto", so no
 *      stylesheet rule of any specificity can override it.
 */
.charitable-campaign-wrap .charitable-campaign-column:has(> .charitable-field-section:only-child > .charitable-campaign-field-photo:only-child) {
    padding: 0 !important;
}

.charitable-campaign-wrap .charitable-campaign-column > .charitable-field-section:only-child > .charitable-campaign-field-photo:only-child {
    height: 100%;
    margin: 0;
}

.charitable-campaign-wrap .charitable-campaign-column > .charitable-field-section:only-child:has(> .charitable-campaign-field-photo:only-child) {
    height: 100%;
}

.charitable-campaign-wrap .charitable-campaign-field-photo:only-child > .charitable-campaign-field-inner,
.charitable-campaign-wrap .charitable-campaign-field-photo:only-child .charitable-campaign-primary-image {
    height: 100%;
}

.charitable-campaign-wrap .charitable-campaign-field-photo:only-child .charitable-campaign-primary-image img {
    display: block;
    width: 100%;
    height: 100% !important; /* beats the plugin's inline style="height: auto" */
    object-fit: cover;
}

/**
 * ---------------------------------------------------------------------------
 * SECTION 5: TAB STRIP
 *
 * The tab titles render as adjacent inline-block list items with no separation,
 * and an inactive tab carries no affordance that it is a control: only the
 * active one is filled. Space them, and outline the inactive ones in the same
 * brand green the active tab is filled with.
 *
 * The border is applied to every tab, not only the inactive ones, so all three
 * keep identical box dimensions and the strip does not shift as the selection
 * moves. On the active tab the border matches its own background and is simply
 * not visible as an outline.
 *
 * Colour is var(--rc-forest) (#1A4731), the existing brand token, which is the
 * same value the template already uses for the active tab background and the
 * donate button. No new literal.
 *
 * v2.0.0: gutter 15px -> 11px. The 15px value was inherited from the column
 * gutter in Section 3; at the tab strip it reads as three detached buttons
 * rather than one control group.
 */
.charitable-campaign-wrap .charitable-campaign-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Specificity: the vendor zeroes this border from
 *   ".charitable-campaign-wrap .charitable-campaign-container
 *    .section[data-section-type='tabs'] article nav.charitable-tab-style-boxed li"
 * and sets a 1px right divider from the template sheet's equivalent, both at
 * (0,5,3); the active tab adds "li.active" at (0,6,3). The selector below
 * mirrors that structure and appends "ul li.tab_title" for (0,6,4), so it wins
 * on specificity for both states without !important.
 */
.charitable-campaign-wrap .charitable-campaign-container .section[data-section-type="tabs"] article nav.charitable-campaign-nav ul li.tab_title {
    border: 2px solid var(--rc-forest);
}

/**
 * ---------------------------------------------------------------------------
 * SECTION 6: SIDEBAR CARD (v2.0.0)
 *
 * The bordered column beside the hero. Two changes.
 *
 * BACKGROUND. Enumerating the cascade for this column returns NO
 * background-color declaration at all from any sheet: the card has always been
 * transparent and merely inherited the row's white. Section 3 removes that
 * white, so the card now states its own surface. This is the one place on the
 * page that stays white, which is what the outline is drawing a box around.
 *
 * PADDING. The vendor sets 25px from
 *   ".charitable-campaign-wrap.template-disaster-relief
 *    #charitable-template-row-0 .charitable-campaign-column:nth-child(2n)",
 * specificity (1,4,0). The ID means no class rule can outrank it, so the same
 * !important justification as Section 4 applies, and for the same reason the
 * rule is NOT written against that ID: the band added in v2.0.0 changes row
 * indexes, and a rule keyed on row 0 would silently stop applying.
 *
 * The horizontal 25px is kept; only the vertical is tightened, which is the
 * axis that was making the card taller than the hero beside it.
 *
 * PRECONDITION. Both rules are scoped by :has() to "a column containing the
 * donate button", which is what makes this column the donate card in the RC
 * campaign template; every campaign built on the template puts the button
 * there. Stated structurally rather than as a campaign id or a row index so it
 * survives reordering. The limit is worth naming: a layout that placed a
 * donate button in a full-width content column would give that column the card
 * treatment too. No campaign does, and the template does not.
 */
.charitable-campaign-wrap .charitable-campaign-container .charitable-campaign-column:has(> .charitable-field-section .charitable-campaign-field-donate-button) {
    background-color: #FFFFFF;
    padding: 14px 25px !important; /* beats #charitable-template-row-0 ...:nth-child(2n) */
}

/* Tighten the stack inside the card; the vendor ships 5px 0 on every field. */
.charitable-campaign-wrap .charitable-campaign-column:has(> .charitable-field-section .charitable-campaign-field-donate-button) .charitable-campaign-field {
    margin: 4px 0;
}

/* The donate text sits directly under the logo; drop its trailing margin. */
.charitable-campaign-wrap .charitable-campaign-field-text .charitable-campaign-field-inner p:last-child {
    margin-bottom: 0;
}

/**
 * ---------------------------------------------------------------------------
 * SECTION 7: RETURN BUTTON (v2.0.0)
 *
 * [rc_campaign_return] renders a link back to the landscape_group page bound
 * to the campaign. The brief was that it match the Donate Now button exactly.
 *
 * The values below were read off the rendered donate button rather than
 * guessed, because the button is styled by the generated per-template sheet
 * and its appearance is keyed on the builder's theme colours:
 *
 *   background #1A4731 (= var(--rc-forest), the theme_color_button)
 *   color      #FFFFFF   font-size 15px (= var(--fs-600))   line-height 25px
 *   padding    6px 0     border-radius 35px   text-transform uppercase
 *
 * The token form is used wherever one exists, so the button follows the brand
 * layer rather than a copied literal. Contrast is white on --rc-forest =
 * 10.55:1 (sRGB-linearized), the same pair already carried by the donate
 * button and the active tab.
 *
 * It is a sibling of the donate button rather than a copy of its class,
 * because .charitable-button carries vendor behaviour (modal triggers, donation
 * state) that a navigation link must not inherit.
 */
.rc-camp-return {
    margin: 4px 0;
}

.rc-camp-return__btn,
.rc-camp-return__btn:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 0;
    border: 0;
    border-radius: 35px;
    background-color: var(--rc-forest);
    color: #FFFFFF;
    font-size: var(--fs-600);
    line-height: 25px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

.rc-camp-return__btn:hover,
.rc-camp-return__btn:focus-visible {
    background-color: var(--rc-deep-forest);
    color: #FFFFFF;
    text-decoration: none;
}

.rc-camp-return__btn:focus-visible {
    outline: 2px solid var(--rc-canopy);
    outline-offset: 2px;
}

/**
 * ---------------------------------------------------------------------------
 * SECTION 8: CROSS-CAMPAIGN BAND (v2.0.0)
 *
 * [rc_campaign_band] renders the other active campaigns as a horizontally
 * scrollable strip, placed in its own builder row between the hero row and the
 * tab row so it occupies the seam Section 3 opens up.
 *
 * The strip scrolls natively via overflow-x. The arrows are progressive
 * enhancement over that, not the mechanism: with JS unavailable the region is
 * still scrollable by trackpad, touch and keyboard, which is why the viewport
 * carries tabindex and an accessible name rather than relying on the buttons.
 *
 * scroll-snap keeps a card aligned to the left edge after an arrow press so
 * the strip never rests mid-card.
 *
 * Colour: items are --rc-cream, one step off the page's warm-white, so the
 * strip reads as a distinct band without introducing a third opaque slab.
 * Title is --rc-forest on --rc-cream = 9.53:1 (sRGB-linearized). Arrow glyph
 * is #FFFFFF on --rc-forest = 10.55:1.
 */
.rc-camp-band {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
}

/*
 * The load-bearing rule for the whole band, and it is not obvious.
 *
 * The campaign column is a flex item (the row is display:flex) and therefore
 * carries the flexbox default min-width:auto, which means it CANNOT shrink
 * below its content's intrinsic width. The band's intrinsic width is the sum of
 * every card, so without this the column expands to fit all of them: measured
 * at 2071px inside a 1040px row, which pushed document.scrollWidth to 2279
 * against a 1425 client width and made the entire PAGE scroll sideways. The
 * overflow-x on the viewport never engaged, because there was nothing left to
 * overflow, and both arrows sat permanently disabled.
 *
 * min-width:0 restores the ability to shrink, which is what lets overflow-x do
 * its job. It is scoped by :has() to the column actually containing a band, so
 * no other column's sizing is touched. There is no competing declaration to
 * outrank: auto is the initial value, not something a sheet set.
 */
.charitable-campaign-wrap .charitable-campaign-column:has(.rc-camp-band) {
    min-width: 0;
}

.rc-camp-band__viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.rc-camp-band__track {
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rc-camp-band__item {
    flex: 0 0 auto;
    width: 232px;
    scroll-snap-align: start;
    margin: 0;
    list-style: none;
}

.rc-camp-band__link {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 8px;
    border-radius: 4px;
    background-color: var(--rc-cream);
    color: var(--rc-forest);
    text-decoration: none;
}

.rc-camp-band__link:hover,
.rc-camp-band__link:focus-visible {
    background-color: var(--rc-fog);
    color: var(--rc-forest);
    text-decoration: none;
}

.rc-camp-band__link:focus-visible {
    outline: 2px solid var(--rc-canopy);
    outline-offset: 2px;
}

.rc-camp-band__thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 4px;
    background-color: var(--rc-fog);
}

.rc-camp-band__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rc-camp-band__title {
    font-size: var(--fs-600);
    font-weight: 600;
    line-height: 1.3;
}

/* Arrows. Fixed size so the scrollable viewport keeps a stable width. */
.rc-camp-band__arrow {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--rc-forest);
    color: #FFFFFF;
    font-size: var(--fs-900);
    line-height: 1;
    cursor: pointer;
}

.rc-camp-band__arrow:hover:not(:disabled) {
    background-color: var(--rc-deep-forest);
}

.rc-camp-band__arrow:focus-visible {
    outline: 2px solid var(--rc-canopy);
    outline-offset: 2px;
}

/*
 * Disabled arrows stay visible rather than dropping to a low-opacity ghost:
 * an end-of-scroll arrow is still meaningful chrome, and opacity below about
 * 0.5 on this pair would take the glyph under the 3:1 non-text floor.
 */
.rc-camp-band__arrow:disabled {
    background-color: var(--rc-lichen);
    color: var(--rc-forest);
    cursor: default;
}

/**
 * ---------------------------------------------------------------------------
 * SECTION 9: STEWARD GRID (v2.0.0)
 *
 * [rc_campaign_team] renders the landscape's stewards inside the About the
 * Team tab.
 *
 * These are RC-owned class names rather than the landscape page's
 * .steward-card family, and that is a deliberate exception to the reuse rule.
 * The landscape rules live in rc-landscape.css, which is not enqueued on a
 * campaign, and two of them do not meet the contrast floor: the job title is
 * var(--rc-gold) #B8963E on var(--rc-cream) = 2.54:1 at a 9px size that is
 * below the deprecated --fs-50 floor. Reusing the class names would have
 * required either shipping that failure onto a new public surface or shipping
 * the whole landscape sheet to fix it. The visual language is matched; the
 * failing values are not.
 *
 * Verified pairs, all sRGB-linearized on the --rc-cream card:
 *   name     --rc-forest    #1A4731  9.53:1
 *   title    --rc-gold-dark #7A6223  5.27:1  (the A11Y-retuned token)
 *   location --rc-earth     #795548  5.91:1
 *
 * The landscape page's own failing rule is NOT touched here; it is logged to
 * the A11Y tracker rather than fixed out of scope.
 */
.rc-camp-team__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.rc-camp-team__card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-left: 3px solid var(--rc-gold-dark);
    border-radius: 4px;
    background-color: var(--rc-cream);
    text-align: left;
}

.rc-camp-team__avatar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border: 3px solid var(--rc-lichen);
    border-radius: 50%;
    background-color: var(--rc-fog);
}

.rc-camp-team__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rc-camp-team__initials {
    color: var(--rc-canopy);
    font-size: var(--fs-800);
    font-weight: 600;
}

.rc-camp-team__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rc-camp-team__name {
    color: var(--rc-forest);
    font-size: var(--fs-700);
    font-weight: 600;
}

.rc-camp-team__title {
    color: var(--rc-gold-dark);
    font-size: var(--fs-300);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rc-camp-team__location {
    color: var(--rc-earth);
    font-size: var(--fs-400);
}

/**
 * ---------------------------------------------------------------------------
 * SECTION 10: NARROW VIEWPORTS (v2.0.0)
 *
 * The campaign row already collapses to a single column below the vendor's
 * breakpoint. The band keeps its horizontal scroll on narrow screens, which is
 * the correct behaviour for a strip, but the arrows are dropped: on touch the
 * strip is swiped, and 32px targets sit under the 44px recommendation.
 */
@media (max-width: 600px) {
    .rc-camp-band__arrow {
        display: none;
    }

    .rc-camp-band__item {
        width: 200px;
    }

    .rc-camp-team__grid {
        grid-template-columns: 1fr;
    }
}