/* Task #935: one FAQ component for public and authenticated learner shells. */
.faq-page {
    float: none !important;
    clear: both;
    width: 100%;
    color: #292c30;
}

.faq-heading {
    margin: 0 0 22px;
}

.faq-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #4f9134;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.faq-heading h1 {
    margin: 0;
    color: #292c30;
    font: 700 30px/1.2 Sanchez, Georgia, serif;
}

.faq-heading p {
    margin: 7px 0 0;
    color: #586773;
    font-size: 15px;
    line-height: 1.55;
}

.faq-overview {
    margin: 0 0 18px;
    padding: 15px 18px;
    border-left: 4px solid #a6ce39;
    background: #f2f7fa;
    color: #4f5f6a;
}

.faq-overview p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
}

.faq-overview a {
    color: #4f9134;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.faq-card {
    padding: 26px 34px 34px;
    border: 1px solid #dce4e8;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(29, 43, 54, .06);
}

.faq-group {
    max-width: 900px;
    margin: 34px auto 0;
}

.faq-group:first-child {
    margin-top: 0;
}

.faq-group > h2 {
    margin: 0 0 8px;
    color: #292c30;
    font: 700 18px/1.4 Sanchez, Georgia, serif;
}

.faq-item h3 {
    margin: 0;
}

.faq-question {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 10px 12px 0;
    border: 0;
    border-bottom: 1px solid #dce4e8;
    border-radius: 0;
    background: #fff;
    color: #292c30;
    font: 700 15px/1.45 Arial, Helvetica, sans-serif;
    text-align: left;
    cursor: pointer;
}

/* The public theme has broad button state rules. Lock every FAQ interaction
   state to an opaque surface and visible text, including WebKit text fill,
   without changing buttons elsewhere on the public site. */
.faq-page button.faq-question {
    background: #fff !important;
    color: #292c30 !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-text-fill-color: currentColor;
}

.faq-page button.faq-question:hover,
.faq-page button.faq-question:focus-visible,
.faq-page button.faq-question:active,
.faq-page button.faq-question[aria-expanded="true"] {
    background: #fff !important;
    color: #4f9134 !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-text-fill-color: currentColor;
}

.faq-page button.faq-question > span {
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-text-fill-color: currentColor;
}

.faq-question:focus-visible {
    outline: 3px solid rgba(79, 145, 52, .35);
    outline-offset: 2px;
}

.faq-icon {
    position: relative;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

.faq-icon::before,
.faq-icon::after {
    position: absolute;
    top: 7px;
    left: 3px;
    width: 10px;
    height: 2px;
    background: currentColor;
    content: '';
}

.faq-icon::after {
    transform: rotate(90deg);
    transition: transform .18s ease;
}

.faq-question[aria-expanded="true"] .faq-icon::after {
    transform: rotate(0deg);
}

.faq-answer {
    padding: 14px 16px;
    background: #f7fafb;
    color: #4f5f6a;
    font-size: 14px;
    line-height: 1.7;
}

.faq-answer[hidden] {
    display: none !important;
}

.faq-answer p,
.faq-answer ol,
.faq-answer ul {
    margin: 0 0 9px;
}

.faq-answer > :last-child {
    margin-bottom: 0;
}

.faq-answer a {
    color: #4f9134;
    overflow-wrap: anywhere;
}

/* The public page retains discovery content but moves it after every FAQ. */
.faq-public-resources {
    float: none !important;
    clear: both;
    width: 100%;
    margin-top: 42px;
    padding-top: 30px;
    border-top: 1px solid #dce4e8;
}

.faq-public-resources > h2 {
    margin: 0;
    color: #292c30;
    font: 700 24px/1.3 Sanchez, Georgia, serif;
}

.faq-resources-intro {
    margin: 7px 0 24px;
    color: #586773;
}

.faq-public-resources #sidebar {
    float: none;
    width: 100%;
    padding: 0;
}

.faq-public-resources #sidebar .widget {
    margin-bottom: 28px;
}

.faq-public-resources #sidebar .widget-title {
    margin-bottom: 16px;
}

.faq-public-resources #course-categories-2 ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 18px;
    margin: 0;
    padding: 0;
}

.faq-public-resources #course-categories-2 li {
    margin: 0;
    list-style: none;
}

.faq-public-resources #course-categories-2 a {
    display: flex;
    min-height: 44px;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #dce4e8;
    border-radius: 4px;
    background: #fff;
}

.faq-public-resources .thim-course-list-sidebar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.faq-public-resources .thim-course-list-sidebar > h5 {
    grid-column: 1 / -1;
    margin: 12px 0 -6px;
}

.faq-public-resources .thim-course-list-sidebar .lpr_course {
    margin: 0;
}

.faq-public-resources .course-thumbnail img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.faq-portal-page {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 42px;
}

@media (prefers-reduced-motion: reduce) {
    .faq-icon::after { transition: none; }
}

@media (max-width: 767px) {
    .faq-heading { margin-bottom: 18px; }
    .faq-heading h1 { font-size: 28px; }
    .faq-heading p { font-size: 15px; }
    .faq-overview { padding: 13px 14px; }
    .faq-card { padding: 20px 16px 24px; }
    .faq-group { margin-top: 28px; }
    .faq-group > h2 { font-size: 17px; }
    .faq-question { min-height: 52px; padding-right: 4px; font-size: 14px; }
    .faq-answer { padding: 13px 12px; }
    .faq-public-resources { margin-top: 32px; padding-top: 24px; }
    .faq-public-resources #course-categories-2 ul,
    .faq-public-resources .thim-course-list-sidebar { grid-template-columns: 1fr; }
    .faq-public-resources .course-thumbnail img { height: auto; }
    .faq-portal-page { padding-top: 24px; padding-bottom: 32px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .faq-public-resources #course-categories-2 ul,
    .faq-public-resources .thim-course-list-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}