/*
Theme Name:   Rebuild Hot Springs Area
Theme URI:    https://rebuildhotsprings.org
Description:  The Rebuild Hot Springs Area theme.
Author:       Kevin Reese
Author URI:   http://k-reese.com
Version:      2.0.0
Text Domain:  rhsa
*/

/* The site's colors and fonts, in one place. Every stylesheet in the
   theme uses these (their own short names are aliases). Red passes
   WCAG AA with white text and on white, paper and the header grey; on
   ink and other dark backgrounds use red-on-dark instead, and
   grey-on-dark for quiet text there. */
:root {
	--rhsa-ink: rgb(18, 20, 9);
	--rhsa-red: #a60907;
	--rhsa-red-on-dark: #ffb3b3;
	--rhsa-grey-on-dark: #dddddd;
	--rhsa-body: rgb(110, 110, 110);
	--rhsa-paper: #faf8f4;
	--rhsa-tint: #fff4f4;
	--rhsa-line: #e4e0d8;
	--rhsa-cond: "Roboto Condensed", "Arial Narrow", sans-serif;
	--rhsa-sans: "Public Sans", Arial, Helvetica, sans-serif;
}

/* H1s are in capitals; H2–H6 keep the case they are written in (Kevin,
   2026-11-02). The heading rules in typography.css, masthead.css,
   initiatives.css, get-help.css and footer.css say the same. */
h1 { text-transform: uppercase; }

/* Body type is the sans token everywhere. Both fonts are served by the
   theme (assets/css/fonts.css). */
body,
button,
input,
select,
textarea {
	font-family: var(--rhsa-sans);
}

.ff_stripe_card_element{background:#fff !important;}

.entry-content{
	padding-bottom: 60px;
}

article.has-post-thumbnail{
	padding: 15px 30px !important;
}

/* Keyboard focus: links in page content get Get Help's red ring; the
   footer's newsletter button (red) gets the ink ring, like the header
   Donate. */
.entry-content a:focus-visible { outline: 3px solid var(--rhsa-red) !important; outline-offset: 2px; }
#colophon button:focus-visible { outline: 2px solid var(--rhsa-ink); outline-offset: 3px; }

/* Fluent Forms submit buttons are pills too, in the site's red and label
   type, whatever each form's own settings say (several used a brighter red
   or Fluent's default blue, which fail contrast). */
.fluentform .ff-btn-submit,
.fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	background-color: var(--rhsa-red) !important;
	border: 2px solid var(--rhsa-red) !important;
	border-radius: 999px !important;
	color: #fff !important;
	font-family: var(--rhsa-cond) !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 1.25 !important;
	padding: 14px 28px !important;
	opacity: 1;
}
.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus-visible,
.fluentform .ff-btn-submit:not(.ff_btn_no_style):hover {
	background-color: var(--rhsa-ink) !important;
	border-color: var(--rhsa-ink) !important;
	color: #fff !important;
}
.fluentform .ff-btn-submit:focus-visible { outline: 2px solid var(--rhsa-ink); outline-offset: 3px; }

/* Form fields use the body font like the rest of the site; Fluent Forms
   sets its own system font on them. */
.fluentform :is(input, select, textarea, .ff-el-form-control),
.fluentform :is(input, textarea)::placeholder {
	font-family: var(--rhsa-sans) !important;
}

/* Form headings are left out of the type scale (typography.css), but
   keep its weight. */
.fluentform :is(h1, h2, h3, h4, h5, h6) { font-weight: 700 !important; }

/* Image captions in posts (a lighter grey would fail contrast). */
.entry-content :is(figcaption, .wp-element-caption, .wp-caption-text) { color: var(--rhsa-body); }