/*
 Theme Name: TFF 2027 Child Theme
 Author: TFF
 Author URI: https://furryfiesta.org/
 Theme URI: https://furryfiesta.org/
 Template: tff-base
 Text Domain: tff2027
*/

:root {
  --grey: #6e6e6e;
  --black: #131313;
  --gold: #ffd549;
  --green: #85d888;
  --purple: #a98cd0;
  --blue: #8ac1ff;
  --navy: #304266;
  --turquoise: #40b4c8;
  --turquoise-dk: #29808f;

  --fuchsia: #cd2b81;
  --burgundy: #890049;
  --red: #b40000;
  --maroon: #6b000e;
  --midnight: #0c0103;
  --brown: #583f33;
  --olive: #496041;
  --yellow: #e5c472;

  --background: var(--maroon);
  --navigation: var(--maroon);
  --navigation-hover: var (--yellow);
  --masthead: var(--maroon);
  --callouts: var(--maroon);
  --header-1: var(--maroon);
  --header-2: var(--maroon);

  --well-heading: var(--maroon);
  --well-body: #eee;

  --accordion: var(--maroon);
  --button: var(--red);
  --button-hover: var(--maroon);
  --link: var(--red);
  --link-hover: var(--maroon);

  --header-font: "Road Rage", sans-serif;
  --header-weight: 400;
  --header-spacing: normal;
  --header-case: uppercase;
  --header-mult: 2;
}

/*
BASIC:
    0. SETUP
    1. HEADER & FOOTER
    2. MAIN
SECTIONS:
    3. #MASTHEAD
    4. #CALLOUTS
    5. #CONTENT
CONTENT:
    6. TYPOGRAPHY
    7. BUTTONS
    8. WELLS
    9. ACCORDIONS
BREAKPOINTS:
    10. SM+
    11. MD+
    12. LG+
*/

/* 0. SETUP */
body {
  background-color: var(--background);
}

/* 1. HEADER & FOOTER */
#header .navbar {
  background: none;
}
#header .navbar:before {
  background-color: var(--navigation);
  opacity: 0.9;
}
#header a:hover,
#footer a:hover {
  color: var(--navigation-hover);
}

/* 2. MAIN */
#main a {
  color: var(--link);
}
#main a:hover {
  color: var(--link-hover);
}

/* 3. MASTHEAD */
#masthead {
  background: var(--masthead);
}

/* 4. CALLOUTS */
#callouts {
  background: var(--callouts);
}

/* 5. CONTENT */

/* 6. TYPOGRAPHY */
h1,
.h1,
h2,
.h2 {
  font-family: var(--header-font);
  font-weight: var(--header-weight);
  letter-spacing: var(--header-spacing);
  text-transform: var(--header-case);
}
h1,
.h1 {
  color: var(--header-1);
}
h1,
.h1 {
  font-size: calc(2rem * var(--header-mult));
}
h2,
.h2 {
  font-size: calc(1.5rem * var(--header-mult));
}

h2,
.h2,
h3,
.h3,
h4,
.h4 {
  color: var(--header-2);
}

h1.home-title {
  font-size: 3rem;
  margin-bottom: 4rem;
}
h1.home-title * {
  display: block;
  color: white !important;
}
h1.home-title small {
  font-size: 0.4em;
  line-height: 1;
  margin-top: -0.4em;
}

/* 7. BUTTONS */
.btn-primary,
.wp-block-button__link {
  color: white !important;
  background: var(--button) !important;
  border-color: var(--button) !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.wp-block-button__link:hover,
.wp-block-button__link:active,
.wp-block-button__link:focus {
  background: var(--button-hover) !important;
  border-color: var(--button-hover) !important;
}
.btn-secondary,
.is-style-outline .wp-block-button__link {
  color: var(--button) !important;
  background: white !important;
  border-color: var(--button) !important;
}
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus,
.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:active,
.is-style-outline .wp-block-button__link:focus {
  background: #eee !important;
  border-color: var(--button) !important;
}

/* 8. WELLS */
.well,
.wp-block-group {
  background-color: var(--well-body);
}

.well > h2:first-child,
.well > .h2:first-child,
.well > h3:first-child,
.well > .h3:first-child,
.wp-block-group > h2:first-child,
.wp-block-group > .h2:first-child,
.wp-block-group > h3:first-child,
.wp-block-group > .h3:first-child {
  font-family: var(--header-font);
  font-weight: var(--header-weight);
  letter-spacing: var(--header-spacing);
  background-color: var(--well-heading);
  text-transform: var(--header-case);
  font-size: calc(1rem * var(--header-mult));
}

/* 9. ACCORDIONS */
.accordion-header,
.wp-block-accordion-heading button {
  background-color: var(--accordion);
}
.js .accordion-header:after,
.js .wp-block-accordion-heading__toggle-icon {
  color: var(--button);
}

/* 10. SM+ */
@media screen and (min-width: 500px) {
  h1.home-title {
    font-size: 5.5rem;
  }
}

/* 11. MD+ */
@media screen and (min-width: 768px) {
  /*
  #content {
    padding-bottom: 13rem;
  }
  #content:after {
    width: 20rem;
    height: 10rem;
  }
  */
}

/* 12. LG+ */
@media screen and (min-width: 992px) {
  h1.home-title {
    font-size: 10rem;
    margin-bottom: 3rem;
  }
}