/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@theme {
  --font-montserrat: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-raleway: "Raleway", ui-sans-serif, system-ui, sans-serif;
  --font-opensans: "Open Sans", ui-sans-serif, system-ui, sans-serif;
  --font-pathway-gothic: "Pathway Gothic One", ui-sans-serif, system-ui,
    sans-serif;
  --font-cubano: "Cubano", ui-sans-serif, system-ui, sans-serif;
}

/* Site-specific font families */

body.site-wk {
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  color: #24347e;
}

body.site-nh {
  font-family: "Raleway", ui-sans-serif, system-ui, sans-serif;
  color: #004068;
}

body.site-mi {
  font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif;
  color: #272727;
}

/* WK site header styles */
body.site-wk h1,
body.site-wk h2,
body.site-wk h3,
body.site-wk h4,
body.site-wk h5,
body.site-wk h6 {
  font-family: "Pathway Gothic One", ui-sans-serif, system-ui, sans-serif;
}
body.site-wk .primary-button {
  background-color: #24347e;
  color: white;
  padding: 0.5rem 1rem;
  display: inline-block;
  text-align: center;
  cursor: pointer;
}
body.site-wk .primary-button:hover {
  background-color: #51b7e9;
}
body.site-wk .secondary-button {
  color: #4d525b;
  padding: 0.5rem 1rem;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  border: 1px solid #a7aaae;
}
body.site-wk .secondary-button:hover {
  background-color: #a7aaae;
  color: white;
}
body.site-wk .action-button {
  color: #24347e;
  padding: 0.5rem 1rem;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  border: 1px solid #24347e;
}
body.site-wk .action-button:hover {
  background-color: #51b7e9;
  border: 1px solid #51b7e9;
  color: white;
}

/* Cubano-style font class for navigation using Oswald */
.font-cubano {
  font-family: "Oswald", "Anton", "Encode Sans Semi Condensed", ui-sans-serif,
    system-ui, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* MI site header styles */
body.site-mi h1,
body.site-mi h2,
body.site-mi h3,
body.site-mi h4,
body.site-mi h5,
body.site-mi h6 {
  color: #0073e0;
}
body.site-mi .primary-button {
  background-color: #0073e0;
  color: white;
  padding: 0.5rem 1rem;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  border-top-left-radius: 0.275rem;
  border-top-right-radius: 0.275rem;
  border-bottom-left-radius: 0.275rem;
  border-bottom-right-radius: 0.275rem;
}
body.site-mi .primary-button:hover {
  background-color: #38a169;
}
body.site-mi .secondary-button {
  color: #4d525b;
  padding: 0.5rem 1rem;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  border: 1px solid #a7aaae;
  border-top-left-radius: 0.275rem;
  border-top-right-radius: 0.275rem;
  border-bottom-left-radius: 0.275rem;
  border-bottom-right-radius: 0.275rem;
}
body.site-mi .secondary-button:hover {
  background-color: #a7aaae;
  color: white;
}
body.site-mi .action-button {
  color: #38a169;
  padding: 0.5rem 1rem;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  border: 1px solid #38a169;
  border-top-left-radius: 0.275rem;
  border-top-right-radius: 0.275rem;
  border-bottom-left-radius: 0.275rem;
  border-bottom-right-radius: 0.275rem;
}
body.site-mi .action-button:hover {
  background-color: #38a169;
  color: white;
}

/* NH site header styles */
body.site-nh h1,
body.site-nh h2,
body.site-nh h3,
body.site-nh h4,
body.site-nh h5,
body.site-nh h6 {
  color: #ee4611;
  font-weight: 700;
}
body.site-nh .primary-button {
  background-color: #ee4611;
  color: white;
  padding: 0.5rem 1rem;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
}
body.site-nh .primary-button:hover {
  text-decoration: underline;
}
body.site-nh .secondary-button {
  color: #4d525b;
  padding: 0.5rem 1rem;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  border: 1px solid #a7aaae;
}
body.site-nh .secondary-button:hover {
  text-decoration: underline;
}
body.site-nh .action-button {
  padding: 0.5rem 1rem;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  border: 1px solid #009bde;
}
body.site-nh .action-button:hover {
  background-color: #009bde;
  color: white;
  text-decoration: underline;
}

.flash-msg {
  a {
    color: white;
    text-decoration: underline;
  }
}

/* Hide invalid feedback by default */
.invalid-feedback {
  display: none;
}

/* Only show invalid feedback for actually invalid fields */
/* Direct sibling selector for most fields */
.was-validated input:invalid ~ .invalid-feedback,
.was-validated select:invalid ~ .invalid-feedback,
.was-validated textarea:invalid ~ .invalid-feedback {
  display: block;
}

/* For nested structures (like password fields with toggle button) */
.was-validated input:invalid + button + .invalid-feedback,
.was-validated div:has(input:invalid) + .invalid-feedback {
  display: block;
}

/* Hide feedback for valid fields even if they have was-validated class */
.was-validated input:valid ~ .invalid-feedback,
.was-validated select:valid ~ .invalid-feedback,
.was-validated textarea:valid ~ .invalid-feedback,
.was-validated input:valid + button + .invalid-feedback,
.was-validated div:has(input:valid) + .invalid-feedback {
  display: none !important;
}

/* Red border for invalid fields when form is validated */
.was-validated input:invalid,
.was-validated select:invalid,
.was-validated textarea:invalid {
  border-color: #dc3545 !important;
  border-width: 1px !important;
}

/* Focus styles for invalid fields */
.was-validated input:invalid:focus,
.was-validated select:invalid:focus,
.was-validated textarea:invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
  outline: none !important;
}

/* Remove Tailwind's focus styles when invalid */
.was-validated input:invalid:focus {
  --tw-ring-color: transparent !important;
}

/* Removed green border for valid fields - only show red for errors */
/*
.was-validated input:valid:not([required]),
.was-validated select:valid:not([required]),
.was-validated textarea:valid:not([required]) {
  border-color: #10b981 !important;
  border-width: 1px !important;
}

.was-validated input:valid[required],
.was-validated select:valid[required],
.was-validated textarea:valid[required] {
  border-color: #10b981 !important;
  border-width: 1px !important;
}
*/

/* Tagify Styles */

/* Custom Tagify styling to match form design */
.tagify {
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  min-height: 2.5rem;
}

.tagify:hover {
  border-color: #9ca3af;
}

.tagify.tagify--focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
  outline: none;
}

.tagify__tag {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #374151;
}

.tagify__tag:hover {
  background: #e5e7eb;
}

.tagify__tag__removeBtn {
  color: #6b7280;
}

.tagify__tag__removeBtn:hover {
  color: #ef4444;
}