@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

#faq-accordion-container {
   width: 90%;
   max-width: 900px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   height: auto;
   padding-bottom: 40px;
   padding-top: 10px;
}

#faq-accordion-container > ul > li {
   float: left;
   width: 100%;
   text-align: left;
   margin-bottom: 0;
}

.faq-category-header {
   font-family: "Inter", sans-serif;
   font-size: 26px;
   font-weight: 700;
   color: #1f4e79;
   padding: 0 0 8px 0;
   margin-top: 36px;
   margin-bottom: 6px;
   padding-bottom: 10px;
   border-left: none;
   border-bottom: 2px solid #1f4e79;
   background: transparent;
   border-radius: 0;
   text-align: left;
   list-style: none;
}
.faq-category-header:first-child {
   margin-top: 10px;
}

/* Add space between category header underline and the first question card */
.faq-category-header + li {
   margin-top: 14px;
}

#faq-accordion-container > ul > li:last-child {
   padding-bottom: 10px;
}

.accordion {
   list-style-type: none;
   position: relative;
   padding: 0;
}

.inner-accordion {
   border: 1px solid #e5e7eb;
   padding: 12px 16px;
   background-color: #ffffff;
   border-radius: 10px;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
   margin-bottom: 12px;
   cursor: pointer;
}

.inner-accordion:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   border-color: #d1d5db;
}

/* The answer area - starts fully collapsed with NO space taken */
.accordion-content {
   font-family: "Inter", sans-serif;
   font-weight: 400;
   font-size: 16px;
   line-height: 1.7;
   background-color: #f9fafb;
   border-radius: 8px;
   border: 1px solid #e5e7eb;
   color: #4b5563;
   overflow: hidden;
   transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.3s ease, margin 0.3s ease;
   /* Collapsed defaults - JS also sets these, but this ensures no flash */
   max-height: 0;
   opacity: 0;
   padding: 0 16px;
   margin: 0;
   pointer-events: none;
   border-color: transparent;
}

/* When expanded (JS adds this) */
.accordion-content.expanded {
   padding: 14px 16px;
   margin: 10px 0 2px 0;
   border-color: #e5e7eb;
   pointer-events: auto;
}

#faq-accordion-container > ul > li > div > div > div > a {
   color: #1f2937;
   font-family: "Inter", sans-serif;
   font-size: 18px;
   font-weight: 500;
   text-decoration: none;
   line-height: 1.4;
   pointer-events: none;
}

#faq-accordion-container > ul > li > div > div > div > a:hover {
   cursor: pointer;
   color: #1f4e79;
}

.questionline {
   display: flex;
   align-items: center;
   gap: 12px;
}

.accordion-container {
   padding: 0;
   padding-right: 10px;
   color: #1f2937;
   font-family: "Inter", sans-serif;
   font-weight: 500;
   font-size: 18px;
   flex: 1 1 auto;
}

a.linkincontent {
   font-size: 16px;
   color: #1f4e79;
   font-weight: 500;
}

#faq-accordion-container > ul > li > div > div > div > a {
   font-size: 18px;
}

[role="button"] {
   cursor: pointer;
}

/* Blue plus/minus toggle button */
.accordion-toggle-btn {
   color: #ffffff;
   background: #1f4e79;
   width: 24px;
   height: 24px;
   min-width: 24px;
   position: relative;
   font-size: 13px;
   border-radius: 50%;
   cursor: pointer;
   border: 0;
   outline: 0;
   padding: 0;
   transition: all 0.3s ease;
   flex-shrink: 0;
}

.accordion-toggle-btn:hover {
   background: #2b6aa3;
}

.accordion-toggle-btn.active {
   background: #16324f;
}

.plus,
.minus {
   color: #ffffff;
   padding-top: 2px;
   width: 24px;
   height: 24px;
   line-height: 20px;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   text-align: center;
   transition: 0.4s all ease-in-out;
}

.plus {
   opacity: 1;
   transform: rotate(0deg);
}

#faq-accordion-container > ul > li > div > div > button.active .plus {
   opacity: 0;
   transform: rotate(90deg);
}

.minus {
   opacity: 0;
   transform: rotate(-90deg);
}

#faq-accordion-container > ul > li > div > div > button.active .minus {
   opacity: 1;
   transform: rotate(0deg);
}

/* ============================================= */
/* FAQ Search Box                                */
/* ============================================= */
#faq-search-wrap {
   width: 90%;
   max-width: 900px;
   margin: 20px auto 6px auto;
   position: relative;
}

#faq-search {
   width: 100%;
   padding: 14px 18px 14px 46px;
   font-family: "Inter", sans-serif;
   font-size: 17px;
   font-weight: 400;
   color: #1f2937;
   border: 1px solid #d1d5db;
   border-radius: 10px;
   background-color: #ffffff;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
   outline: none;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
   box-sizing: border-box;
}

#faq-search:focus {
   border-color: #1f4e79;
   box-shadow: 0 2px 10px rgba(31, 78, 121, 0.15);
}

#faq-search::placeholder {
   color: #9ca3af;
   font-weight: 400;
}

/* Search icon (magnifying glass via CSS) */
#faq-search-icon {
   position: absolute;
   left: 16px;
   top: 50%;
   transform: translateY(-50%);
   width: 18px;
   height: 18px;
   border: 2px solid #9ca3af;
   border-radius: 50%;
   pointer-events: none;
}

#faq-search-icon::after {
   content: "";
   position: absolute;
   width: 2px;
   height: 7px;
   background: #9ca3af;
   bottom: -6px;
   right: -2px;
   transform: rotate(-45deg);
   border-radius: 1px;
}

/* Clear button */
#faq-search-clear {
   position: absolute;
   right: 14px;
   top: 50%;
   transform: translateY(-50%);
   width: 22px;
   height: 22px;
   border: none;
   background: #d1d5db;
   color: #fff;
   border-radius: 50%;
   font-size: 14px;
   line-height: 22px;
   text-align: center;
   cursor: pointer;
   display: none;
   padding: 0;
   font-family: Arial, sans-serif;
}

#faq-search-clear:hover {
   background: #9ca3af;
}

/* No results message */
#faq-no-results {
   display: none;
   width: 90%;
   max-width: 900px;
   margin: 20px auto;
   text-align: center;
   font-family: "Inter", sans-serif;
   font-size: 16px;
   color: #6b7280;
   padding: 24px 16px;
   background: #ffffff;
   border: 1px solid #e5e7eb;
   border-radius: 10px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Search result count */
#faq-result-count {
   display: none;
   width: 90%;
   max-width: 900px;
   margin: 0 auto 4px auto;
   text-align: right;
   font-family: "Inter", sans-serif;
   font-size: 13px;
   color: #9ca3af;
   padding: 0 4px;
}

/* Highlighted matching text */
mark.faq-highlight {
   background-color: #fef08a;
   color: inherit;
   padding: 1px 2px;
   border-radius: 3px;
   font-weight: inherit;
   font-style: inherit;
}

/* Hidden FAQ items during search */
#faq-accordion-container > ul > li.faq-hidden {
   display: none !important;
}

@media only screen and (max-width: 960px) {
   body > main {
      padding-top: 135px;
   }
   #faq-accordion-container {
      width: 94%;
   }
   #faq-search-wrap, #faq-no-results, #faq-result-count {
      width: 94%;
   }
}

@media only screen and (max-width: 490px) {
   body > main {
      padding-top: 55px;
   }
   #faq-accordion-container {
      width: 96%;
   }
   #faq-search-wrap, #faq-no-results, #faq-result-count {
      width: 96%;
   }
   .accordion {
      padding: 0 0.3em;
   }
   .inner-accordion {
      padding: 10px 10px;
   }
   #faq-accordion-container > ul > li > div > div > div > a,
   .accordion-container {
      font-size: 16px;
   }
   .faq-category-header {
      font-size: 22px;
   }
   .accordion-content.expanded {
      font-size: 15px;
      padding: 12px 14px;
   }
   #faq-search {
      font-size: 16px;
      padding: 12px 16px 12px 42px;
   }
}

@media only screen and (max-height: 500px) {
   body > main {
      padding-top: 23px;
   }
}