/*
 Theme Name:   JFD Theme
 Theme URI:    https://justfolksdigital.com
 Description:  JFD GP Theme
 Author:       Becky Swan
 Template:     generatepress
 Version:      0.1
*/

:root {
  --general-transition: all 0.3s ease-in-out;
  --box-shadow: 0px 5px 16px -5px rgba(33, 33, 33, 0.2);
  --gp-font--headings: "bespoke serif", serif;
  --gp-font--body: "freight-sans-pro", sans-serif;
}

/* =========================
   LAYOUTS & DEFAULTS
========================= */
*:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::-moz-selection {
  background: var(--accent);
  color: var(--contrast);
  -webkit-text-fill-color: var(--contrast);
  text-shadow: none;
}

::selection {
  background: var(--accent);
  color: var(--contrast);
  -webkit-text-fill-color: var(--contrast);
  text-shadow: none;
}

ul,
ol {
  line-height: 1.2;
  margin-left: 20px;
}

ul li::marker {
  color: var(--accent);
  font-size: 1.4em;
}

ol li::marker {
  color: var(--accent);
}

a > img ~ .edac-nww-external-link-icon,
a .gb-shape + .edac-nww-external-link-icon {
  display: none;
}

/* =========================
   TYPOGRAPHY
========================= */

/* Font Family Utilities */
.ff-body {
  font-family: var(--gp-font--body);
}

.ff-heading {
  font-family: var(--gp-font--headings);
}

h1,
h2,
h3 {
  text-wrap: balance;
}

/* Heading and utility class font assignment */
h1,
h2,
h3,
h4,
h5,
h6,
[class^="fs-"] {
  font-family: var(--gp-font--headings);
}

.fs-p {
  font-family: var(--gp-font--body);
}

.scrolling-container {
  overflow: clip;
}

.scrolling-text {
  display: flex;
  padding-left: 4.8rem;
  gap: 4.8rem;
  width: max-content;
  animation: scroll-left 20s linear infinite;
}

.scrolling-text p {
  margin-bottom: 0;
}

@keyframes scroll-left {
  to {
    transform: translateX(-50%);
  }
}

/* =========================
   FLUID TYPOGRAPHY SCALE
   Source: https://theadminbar.com/simple-responsive-font-size-calculator/
========================= */

/* =========================
   FLUENT FORMS
========================= */
.ff-default .custom-form .ff_btn_style:hover {
  opacity: 1;
}

.custom-form .ff-message-success {
  box-shadow: none;
}

.custom-form .custom-btn {
  color: var(--contrast);
  border-radius: 8px;
  font-size: 1.125rem;
  font-weight: 500;
  padding: 0.75rem 2rem;
}

@media (max-width: 768px) {
  .custom-form .custom-btn {
    width: 100%;
  }
}

.cf-turnstile {
  display: none;
}

/* error styles */
.ff-default .custom-form .ff-el-is-error [aria-invalid="true"] {
  border-color: #b40629;
}

.fluentform .custom-form .ff-el-is-error .ff-el-form-check-label {
  color: #b40629;
}

.fluentform .custom-form .ff-el-is-error .ff-el-form-control {
  border-width: 2px;
}

/* Error Summary */
.error-summary {
  background-color: #fff5f5;
  border: 2px solid #b40629;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 2rem;
}

.error-summary h2,
.error-summary h3 {
  color: #b40629;
  font-size: 1.1em;
  margin-top: 0;
  margin-bottom: 1rem;
}

.error-summary ul {
  margin: 0;
  padding-left: 1.5rem;
}
.error-summary ul li::marker {
  color: #b40629;
}

.error-summary a {
  color: #b40629;
  text-decoration: underline;
}

.error-summary a:hover {
  color: #b40629;
  text-decoration: none;
}
.error-summary a:focus {
  outline-color: #b40629;
}

.error-summary:focus {
  outline: 2px solid #f75e7d;
  outline-offset: 2px;
}

/* =========================
   FOOTER
========================= */
.site-info {
  background-color: var(--contrast-2);
  color: #fff;
}
.site-info a {
  color: #fff;
}
.site-info a:hover {
  text-decoration: none;
}
.inside-site-info {
  padding: 16px 24px;
}

/* =========================
   UTILITY CLASSES
========================= */
.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.margin-auto {
  margin-left: auto;
  margin-right: auto;
}

ul.no-bullets {
  list-style: none;
  margin: 0;
  padding-left: 0;
}