/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ---------------------------------------------------------------------------
 * Savings calculator ([nimbus_savings_calculator], see nimbus-shortcodes.php).
 * Styled here rather than as Bricks global classes: the markup is rendered by
 * the child theme, so Bricks never sees these classes on an element and would
 * not emit their CSS.
 * ------------------------------------------------------------------------ */

.savings__form { width: 35rem; max-width: 100%; margin: 3rem auto 0; text-align: left; }
.savings__row { display: flex; flex-direction: row; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.savings__input { width: 10rem; padding: 1rem; border: 0; border-radius: 0; color: var(--primary); font-family: inherit; font-size: 1.5rem; }
.savings__label { font-weight: 700; color: #2c333b; font-size: 1.5rem; margin: 0; }
.savings__result { text-align: center; margin-top: 2rem; font-size: 3rem; font-weight: 700; color: var(--white); line-height: 1.2; }
.savings__result-heading { display: block; font-family: var(--font-heading); color: #2c333b; font-weight: 700; font-size: 3rem; margin: 0; }

/* ---------------------------------------------------------------------------
 * Visible keyboard focus. Backstop for interactive elements the frameworks do
 * not give a focus style (calculator inputs have border:0, nav and prose links
 * rely on colour alone). Scoped to the site so the WP admin bar is untouched.
 * :focus-visible only, so mouse users see no change.
 * ------------------------------------------------------------------------ */

#brx-header :focus-visible,
#brx-content :focus-visible,
#brx-footer :focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color, currentColor);
  outline-offset: var(--focus-offset, 2px);
}

.savings__input:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}