/*
Theme Name: Kare for Kids
Theme URI: https://kare4kidspaducah.com/
Description: Kadence child theme for the Kare for Kids nonprofit website.
Author: Kare for Kids
Template: kadence
Version: 1.0.0
Text Domain: kare-for-kids
*/

/*
 * Global design tokens. These intentionally override Kadence's palette
 * variables so the colors remain consistent throughout the site.
 */
html:root {
  --global-palette1: #a92f35;
  --global-palette2: #174c3c;
  --global-palette3: #252a2e;
  --global-palette4: #687076;
  --global-palette5: #c6922e;
  --global-palette6: #ded8cc;
  --global-palette7: #f7f1e6;
  --global-palette8: #fff9f0;
  --global-palette9: #ffffff;
  --global-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --global-heading-font-family: Georgia, "Times New Roman", serif;
  --global-content-width: 1200px;
  --global-content-edge-padding: 1.5rem;
}

body {
  background: var(--global-palette9);
  color: var(--global-palette3);
  font-family: var(--global-body-font-family);
  font-size: 18px;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--global-palette3);
  font-family: var(--global-heading-font-family);
  font-weight: 700;
  line-height: 1.2;
}

a {
  color: var(--global-palette2);
}

a:hover,
a:focus {
  color: var(--global-palette1);
}

button,
.button,
.wp-block-button__link,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  background: var(--global-palette1);
  border: 2px solid var(--global-palette1);
  border-radius: 0.45rem;
  color: var(--global-palette9);
  font-weight: 700;
  padding: 0.8em 1.3em;
}

button:hover,
button:focus,
.button:hover,
.button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  background: #85252a;
  border-color: #85252a;
  color: var(--global-palette9);
}

.is-style-outline > .wp-block-button__link {
  background: transparent;
  border-color: var(--global-palette2);
  color: var(--global-palette2);
}

.is-style-outline > .wp-block-button__link:hover,
.is-style-outline > .wp-block-button__link:focus {
  background: var(--global-palette2);
  border-color: var(--global-palette2);
  color: var(--global-palette9);
}

::selection {
  background: var(--global-palette5);
  color: var(--global-palette3);
}

/* Visible keyboard focus for accessibility. */
:focus-visible {
  outline: 3px solid var(--global-palette5);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  body {
    font-size: 17px;
  }
}