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

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

  --nav-link-hover: var(--turquoise);
  --background: var(--black);
  --masthead: var(--navy);
  --callouts: var(--navy);
  --header-1: var(--turquoise-dk);
  --header-2: var(--navy);

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

  --accordion: var(--navy);
  --button: var(--turquoise);
  --button-hover: var(--turquoise-dk);
  --link: var(--turquoise);
  --link-hover: var(--turquoise-dk);

  --header-font: "Goldman", sans-serif;
  --header-weight: 700;
  --header-spacing: normal;
  --header-case: normal;
}

/*
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-color: rgba(25,35,55,.9);
}
#header a:hover,
#footer a:hover {
  color: var(--nav-link-hover) !important;
}

/* 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: none;
}
h1,
.h1 {
  color: var(--header-1);
  text-transform: var(--header-case);
}

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 {
  color: white !important;
  background: var(--button) !important;
  border-color: var(--button) !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  background: var(--button-hover) !important;
  border-color: var(--button-hover) !important;
}
.btn-secondary {
  background: white;
  border-color: var(--button);
}
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
  background: #eee;
  border-color: var(--button);
}

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

.well > h2:first-child,
.well > .h2:first-child,
.well > h3:first-child,
.well > .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);
}

/* 9. ACCORDIONS */
.accordion-header {
  background-color: var(--accordion);
}
.js .accordion-header:after {
  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;
  }
}