/*
Theme name: Activate Perspective
Author: Mediocre Creative
Author URI: http://mediocre.team/
Description: Custom theme created (and probably maintained) by Mediocre Creative. Contact shawn@mediocrecreative.com for details
Version: 1.0
Tags: mediocre, creative
*/

/*
	Source post-css styles are located in resources/css/
	The compiled bundle is saved to `dist/css/bundle-${fingerprint}.css`
	(dist/manifest.json provides the exact path mapping).

	DEVELOPMENT.md file contains instructions how to get the compilation
	process up & running.

	If you need to make a quick fix, feel free to add CSS
	below this comment -- it's loaded after the compiled bundle.
*/

/* Hero Block - Remove Fade-in Animation */
.hero-block h1,
.hero-block p {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Newsletter content styling */
.newsletter-content .prose {
  color: rgb(0 0 20) !important;
}

.newsletter-content .prose h1,
.newsletter-content .prose h2,
.newsletter-content .prose h3,
.newsletter-content .prose h4,
.newsletter-content .prose h5,
.newsletter-content .prose h6,
.newsletter-content h1,
.newsletter-content h2,
.newsletter-content h3,
.newsletter-content h4,
.newsletter-content h5,
.newsletter-content h6 {
  font-family: indivisible, sans-serif !important;
  color: #000014 !important;
  font-weight: 600 !important;

  /* letter-spacing: 1px !important; */
}

.newsletter-content .prose h1,
.newsletter-content h1 {
  font-size: 48px !important;
  line-height: 1 !important;
}

.newsletter-content .prose h2,
.newsletter-content h2 {
  font-size: 24px !important;
  line-height: 1 !important;
  margin-bottom: 0.75rem !important;
  /* font-weight: 600 !important; */
  /* text-transform: uppercase !important; */
}
.newsletter-content .prose h2,
.newsletter-content h2 .wp-block-heading .h2-big {
  font-size: 32px !important;
  line-height: 150% !important;
}
.wp-block-file {
  width: 100%;
  padding: 2rem;
  background: #c1e3f0;
  border-radius: 7px;
  align-items: center;
}

@media (min-width: 768px) {
  .wp-block-file {
    width: 50%;
  }
}

.newsletter-content .prose h3,
.newsletter-content h3 {
  color: #000014 !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  margin-top: 4rem !important;
  text-transform: uppercase !important;
}
.newsletter-content .prose h4,
.newsletter-content h4 {
  color: #000014 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}

.newsletter-content .prose p {
  color: rgb(0 0 20) !important;
  line-height: 1.625 !important;
  margin-bottom: 1rem !important;
  font-size: 1rem;
}
.newsletter-content .prose p.big-big,
.newsletter-content .prose p .big-big,
.newsletter-content .prose span .big-big {
  font-weight: 400 !important;
  font-size: 24px !important;
  font-style: italic;
}
.newsletter-content .prose hr {
  background-color: #1abef5 !important;
  width: 100% !important;
  height: 6px !important;
  margin-bottom: 1.5rem !important;
}

.newsletter-content .prose hr.gradient-hr,
.newsletter-content .gradient-hr {
  background: linear-gradient(
    90deg,
    #30bcee 0%,
    #6f44cf 50%,
    #ee2b4f 100%
  ) !important;
  width: 100% !important;
  height: 8px !important;
  margin: 1.5rem 0px !important;
  border: none !important;
}

.newsletter-content hr .black {
  background-color: #000014 !important;
  height: 4px !important;
}
.newsletter-content .prose .wp-block-button a {
  margin-top: 1rem;
  display: inline-block !important;
  background-color: #1abef5 !important;
  color: #000014 !important;
  padding: 1rem 2.5rem !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  font-weight: 600 !important;
  font-family: indivisible, sans-serif !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
  border-radius: 0 !important;
  border: none !important;
}

.wp-block-file {
  display: flex !important;
  flex-direction: row !important;
  gap: 1rem !important;
}

.wp-block-file a {
  color: #000014 !important;
  background-color: transparent !important;
  /* padding: 1rem 2.5rem; */
  text-decoration: none;
  text-transform: capitalize;
  letter-spacing: 1.4px;
  font-weight: 600 !important;
  font-size: 1rem;
  /* margin-top: 1rem !important; */
  border-radius: 0 !important;
}

/* Replace download button text with SVG icon */
.wp-block-file__button {
  font-size: 0 !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  /* margin-top: 1rem !important; */
  margin-left: 1rem !important;
  width: 30px !important;
  height: 24px !important;
  position: relative !important;
}

.wp-block-file__button::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 30px !important;
  height: 24px !important;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="24" viewBox="0 0 30 24" fill="none"><path d="M14.2929 18.7071C14.6834 19.0976 15.3166 19.0976 15.7071 18.7071L22.0711 12.3431C22.4616 11.9526 22.4616 11.3195 22.0711 10.9289C21.6805 10.5384 21.0474 10.5384 20.6569 10.9289L15 16.5858L9.34315 10.9289C8.95262 10.5384 8.31946 10.5384 7.92893 10.9289C7.53841 11.3195 7.53841 11.9526 7.92893 12.3431L14.2929 18.7071ZM15 0.5L14 0.5L14 18L15 18L16 18L16 0.5L15 0.5Z" fill="%23000014"/><line y1="23" x2="30" y2="23" stroke="%23000014" stroke-width="2"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.newsletter-content .prose a:hover {
  /* color: rgb(47 188 237) !important; */
}

.newsletter-content .prose strong {
  color: rgb(0 0 20) !important;
  font-weight: 700 !important;
}

/* Newsletter Table Styling - Match Brand Design */
.newsletter-content .prose table,
.newsletter-content .wp-block-table table,
.newsletter-content table {
  border-collapse: collapse !important;
  border: 0px 5px 5px 5px solid #1abef5 !important;
  width: 100% !important;
  margin: 1.5rem 0 !important;
}

.newsletter-content .prose th,
.newsletter-content .prose td,
.newsletter-content .wp-block-table th,
.newsletter-content .wp-block-table td,
.newsletter-content table th,
.newsletter-content table td {
  border: 2px solid #1abef5 !important;

  text-align: center !important;
}

.newsletter-content .prose th,
.newsletter-content .wp-block-table th,
.newsletter-content table th {
  font-family: indivisible, sans-serif !important;
  background-color: #1abef5 !important;
  color: #000014 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 1.44px !important;
  border-right: 2px solid #e2e8fd !important;
}

.newsletter-content .prose th:last-child,
.newsletter-content .wp-block-table th:last-child,
.newsletter-content table th:last-child {
  border-right: 2px solid #1abef5 !important;
  border-bottom: 0 !important;
}

.newsletter-content .prose td,
.newsletter-content .wp-block-table td,
.newsletter-content table td {
  background-color: transparent !important;
  color: #000014 !important;
}

.newsletter-content .prose tbody tr:nth-child(even) td,
.newsletter-content .wp-block-table tbody tr:nth-child(even) td,
.newsletter-content table tbody tr:nth-child(even) td {
  background-color: transparent !important;
}
.wp-block-table thead {
  border-bottom: 0 !important;
}

/* Newsletter Circular Numbers for Ordered Lists */
.newsletter-content .prose ol {
  counter-reset: list-counter !important;
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.newsletter-content .prose ol li {
  counter-increment: list-counter !important;
  position: relative !important;
  padding-left: 3rem !important;
  margin-bottom: 1rem !important;
}

.newsletter-content .prose ol li::before {
  content: counter(list-counter) !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 2rem !important;
  height: 2rem !important;
  background-color: transparent !important;
  color: #000014 !important;
  border: 1px solid #000014 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
  font-family: indivisible, sans-serif !important;
}

/* Responsive sizing for larger screens */
@media (min-width: 768px) {
  .newsletter-content .prose ol li::before {
    width: 2.25rem !important;
    height: 2.25rem !important;
    font-size: 1rem !important;
  }

  .newsletter-content .prose ol li {
    padding-left: 3.5rem !important;
  }
}

input::placeholder,
textarea::placeholder,
select::placeholder,
.nf-form-content input::placeholder,
.nf-form-content textarea::placeholder,
.nf-form-content select::placeholder,
.nf-field-element input::placeholder,
.nf-field-element textarea::placeholder {
  color: #245a8a !important;
  font-family: "Indivisible Variable", "indivisible", sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 171.523% !important; /* 27.444px */
}
.form-theme-white {
  --form-input-border: #000014;
  --form-input-bg: #ffffff;
  --form-input-text: #000014;
  --form-input-focus-border: #000014;
  --form-label-text: #000014;
  --form-button-bg: #2fbced;
  --form-button-text: #000014;
}

.form-theme-blue {
  --form-input-border: #2fbced;
  --form-input-bg: transparent;
  --form-input-text: #e2e8fd;
  --form-input-focus-border: #2fbced;
  --form-label-text: #e2e8fd;
  --form-button-bg: #2fbced;
  --form-button-text: #000014;
}

.nf-form-fields-required,
.ninja-forms-req-symbol,
.nf-pass.field-wrap .nf-field-element:after {
  display: none;
}

/* Checkbox and Radio Styles */
.checkbox-container.label-right label {
  color: #e2e8fd !important;
  text-transform: capitalize !important;
  font-family: "indivisible", sans-serif !important;
}

.checkbox-container.label-right label:after {
  border: 1px solid var(--form-input-border, #2fbced) !important;
  background-color: transparent !important;
}

.checkbox-container.label-right label:before {
  font-size: 14px !important;
  /* top: 15px !important; */
  color: #2fbced !important;
}

.nf-form-content {
  padding: 0px !important;
  margin: 0 auto;
}
.nf-multi-cell .nf-cell {
  padding: 0px !important;
}
.nf-error.field-wrap .nf-field-element:after {
  display: none;
}

.nf-error-msg .nf-error-required-error,
.nf-error .nf-error-msg,
.nf-error-msg.nf-error-field-errors {
  color: #e2e8fd !important;
}

.form-theme-white .nf-error-msg .nf-error-required-error,
.form-theme-white .nf-error .nf-error-msg,
.form-theme-white .nf-error-msg.nf-error-field-errors {
  color: #e80000 !important;
}

.form-theme-white .ninja-forms-field.nf-element::placeholder {
  color: #6b7280 !important;
}

.nf-error-msg .nf-error-required-error::before,
.nf-error .nf-error-msg::before,
.nf-error-msg.nf-error-field-errors::before {
  content: url("resources/images/form-error-icon.svg") " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: top;
}

.submit-container {
  display: flex !important;
  justify-content: flex-start !important;
}

@media (min-width: 601px) {
  .submit-container {
    justify-content: flex-end !important;
  }
}

.ninja-forms-field.nf-element:not([type="submit"]) {
  color: #e2e8fd !important;
}
.form-theme-white .ninja-forms-field.nf-element {
  color: #002f59 !important;
}

/* WYSIWYG Content Styling - Global */
.position-content,
.faq-answer,
.wysiwyg-content,
.wp-block-group {
  color: #000014 !important;
}

/* Headings */
.position-content h1,
.position-content h2,
.position-content h3,
.position-content h4,
.position-content h5,
.position-content h6,
.faq-answer h1,
.faq-answer h2,
.faq-answer h3,
.faq-answer h4,
.faq-answer h5,
.faq-answer h6,
.wysiwyg-content h1,
.wysiwyg-content h2,
.wysiwyg-content h3,
.wysiwyg-content h4,
.wysiwyg-content h5,
.wysiwyg-content h6,
.wp-block-group h1,
.wp-block-group h2,
.wp-block-group h3,
.wp-block-group h4,
.wp-block-group h5,
.wp-block-group h6 {
  font-family: indivisible, sans-serif !important;
  color: #000014 !important;
  font-weight: 600 !important;
}

.position-content h1,
.faq-answer h1,
.wysiwyg-content h1,
.wp-block-group h1 {
  font-size: 48px !important;
  line-height: 1 !important;
}

.position-content h2,
.faq-answer h2,
.wysiwyg-content h2,
.wp-block-group h2 {
  font-size: 24px !important;
  line-height: 1 !important;
  margin-bottom: 0.75rem !important;
}

.position-content h3,
.faq-answer h3,
.wysiwyg-content h3,
.wp-block-group h3 {
  font-size: 20px !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5rem !important;
}

.position-content h4,
.faq-answer h4,
.wysiwyg-content h4,
.wp-block-group h4 {
  font-size: 18px !important;
  line-height: 1.3 !important;
  margin-bottom: 0.5rem !important;
}

/* Paragraphs */
.position-content p,
.faq-answer p,
.wysiwyg-content p,
.wp-block-group p {
  margin-bottom: 1rem !important;
  line-height: 1.6 !important;
}

/* Lists */
.position-content ul,
.faq-answer ul,
.wysiwyg-content ul,
.wp-block-group ul {
  list-style-type: disc !important;
  margin-left: 1.5rem !important;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.position-content ul li,
.faq-answer ul li,
.faq-answer-content ul li,
.wysiwyg-content ul li,
.wp-block-group ul li {
  list-style-type: disc !important;
  margin-bottom: 0.5rem !important;
  display: list-item !important;
  color: #000014 !important;
}

/* Specific targeting for prose bullets */
.faq-answer-content.prose {
  --tw-prose-bullets: #000014;
}

.faq-answer-content.prose ul li {
  color: #000014 !important;
}

.position-content ol,
.faq-answer ol,
.wysiwyg-content ol,
.wp-block-group ol {
  list-style-type: decimal !important;
  margin-left: 1.5rem !important;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.position-content ol li,
.faq-answer ol li,
.wysiwyg-content ol li,
.wp-block-group ol li {
  list-style-type: decimal !important;
  margin-bottom: 0.5rem !important;
  display: list-item !important;
}

/* Links */
.position-content a,
.faq-answer a,
.wysiwyg-content a,
.wp-block-group a {
  color: #1abef5 !important;
  text-decoration: underline !important;
}

.position-content a:hover,
.faq-answer a:hover,
.wysiwyg-content a:hover,
.wp-block-group a:hover {
  opacity: 0.8;
}

/* Strong/Bold text */
.position-content strong,
.faq-answer strong,
.wysiwyg-content strong,
.wp-block-group strong {
  font-weight: 700 !important;
}

/* Tables */
.position-content table,
.faq-answer table,
.wysiwyg-content table,
.wp-block-group table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1rem 0 !important;
}

.position-content th,
.position-content td,
.faq-answer th,
.faq-answer td,
.wysiwyg-content th,
.wysiwyg-content td,
.wp-block-group th,
.wp-block-group td {
  border: 1px solid #ddd !important;
  padding: 0.5rem !important;
  text-align: left !important;
}

.position-content th,
.faq-answer th,
.wysiwyg-content th,
.wp-block-group th {
  background-color: #f5f5f5 !important;
  font-weight: 600 !important;
}

.nf-form-content .list-select-wrap .nf-field-element > div:focus,
.nf-form-content input:not([type="button"]):focus,
.nf-form-content textarea:focus {
  background-color: #1abef5 !important;
  border-color: #1abef5 !important;
  outline: none !important;
  box-shadow: none !important;
}

.checkbox-container.label-right label:before {
  left: -26px !important;
  opacity: 1;
  transition: all 0s !important;
}

/* White theme form adjustments */
.form-theme-white .nf-form-content input[type="text"],
.form-theme-white .nf-form-content input[type="email"],
.form-theme-white .nf-form-content input[type="tel"],
.form-theme-white .nf-form-content input[type="number"],
.form-theme-white .nf-form-content textarea,
.form-theme-white .nf-form-content select {
  border: 1px solid var(--form-input-border) !important;
}

.form-theme-white .nf-form-content input:focus,
.form-theme-white .nf-form-content textarea:focus,
.form-theme-white .nf-form-content select:focus {
  border-color: var(--form-input-focus-border) !important;
}

.form-theme-white .nf-form-content .nf-field-label label {
  color: var(--form-label-text) !important;
}

.form-theme-white .nf-form-content input::placeholder,
.form-theme-white .nf-form-content textarea::placeholder,
.form-theme-white .nf-form-content select::placeholder,
.form-theme-white .nf-field-element input::placeholder,
.form-theme-white .nf-field-element textarea::placeholder {
  color: #245a8a !important;
}

/* Search form input focus state */
.search-hero input[type="text"]:focus {
  border-color: #2fbced !important;
  outline: none !important;
}

/* Search form placeholder color */
.search-hero input[type="text"]::placeholder {
  color: #e2e8fd !important;
  font-size: 24px !important;
}

.nf-field-container .submit-container .label-above .textbox-container {
  margin-bottom: 0px !important;
}
.nf-form-cont .nf-field-element input[type="submit"] {
  background: #1abef5;
  background-image: linear-gradient(90deg, #21bff3, #21bff3 51%, #fd1e4c);
  background-size: 200%;
  background-position: 0 0;
  transition: all 0.3s ease-in-out;
  border: 1px solid transparent;
}

.nf-form-cont .nf-field-element input[type="submit"]:hover {
  background: #1abef5;
  background-image: linear-gradient(90deg, #21bff3, #21bff3 51%, #fd1e4c);
  background-size: 200%;
  background-position: 100% 0;
  transition: all 0.3s ease-in-out;
  color: #ffffff !important;
  border: 1px solid transparent;
  border-right: 1px solid #fd1e4c;
  transform: scale(1.05);
}
