/*
Theme Name: Twenty Twenty-Four Child
Theme URI: http://example.com/twentytwentyfour-child
Description: A child theme of Twenty Twenty-Four
Author: Takepayments Limited
Author URI: https://takepayments.com
Template: twentytwentyfour
Version: 1.0.0
*/

/* Custom CSS goes below */
:root {
    --primary-color: #e69138;
    --secondary-color: #c6782e;
    --accent1-color: #4f81bd;
    --accent2-color: #b65c18;
    --background-color: #f7f2e9;
    --text-color: #2e2e2e;
    --light-text-color: #ffffff;
}
body, .site {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}
a {
    color: var(--primary-color);
}
a:hover, a:focus {
    color: var(--secondary-color);
}
.button {
    background-color: var(--primary-color);
    color: var(--light-text-color);
}
.wp-block-button__link, .wp-block-file__button, .wp-block-search__button {
    background-color: var(--primary-color) !important;
    color: var(--text-color) !important;
}
.wp-block-button__link:hover, .wp-block-file__button:hover, .wp-block-search__button:hover {
    background-color: var(--secondary-color) !important;
}
.site-header, .site-footer, .site-branding, .site-title, .site-description, .site-info {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}
.main-navigation a {
    color: var(--primary-color) !important;
}
.main-navigation a:hover {
    color: var(--secondary-color) !important;
}
.widget, .widget-title, .widget-area {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}
.widget a {
    color: var(--primary-color) !important;
}
.widget a:hover {
    color: var(--secondary-color) !important;
}
.has-primary-color {
    color: var(--primary-color) !important;
}
.has-secondary-color {
    color: var(--secondary-color) !important;
}
.has-background-color {
    background-color: var(--background-color) !important;
}
.has-text-color {
    color: var(--light-text-color) !important;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--text-color) !important;
}
.entry-title a, .entry-title a:hover, .entry-title a:focus {
    color: var(--text-color) !important;
}
.site-footer, .site-footer a, .site-footer a:hover, .site-footer a:focus {
    color: var(--text-color) !important;
}
.wp-block-site-logo img {
    width: 100px
}