/* =====================================================================
   FAQs only. Everything here is scoped under div.faq (the FAQ component,
   resources/views/components/custom/faq.blade.php, used on FAQ pages and guides).
   Buttons and tabs reuse main.css's --primary-color / --secondary-color so
   they keep matching the site's real buttons and tabs.
   ===================================================================== */

:root {
    --faq-note-background: #1F4E9A;
    --faq-note-color: #ffffff;
    --faq-warning-background: #CC0000;
    --faq-warning-color: #ffffff;
    --faq-important-background: #ffffff;
    --faq-important-color: #CC0000;
}

/* ---------------------------------------------------------------- the FAQ box */
div.faq {
    font-family: arial;
    margin: .5em .5em;
    border: 1px solid black;
    padding: 1em;
    border-radius: .5em;
    background-color: #e8e8e8;
}
div.faq div.question {
    font-size: 1.5em;
}
div.faq div.answer {
    font-size: 1em;
    padding: .5em;
    line-height: 1.7;
}
div.faq div.sub_faqs div.faqs_header {
    background-color: var(--darkest-color);
    color: var(--lightest-color);
    border-bottom: .2em solid var(--secondary-color);
    padding: .5em;
}
div.faq div.sub_faqs div.sub_faq {
    padding: .5em;
    font-size: .9em;
}

/* ------------------------------------------------- labels inside an FAQ answer
   Written in the stored FAQ text:
     Class of X button:  <span class="faq_button">Add</span>
     Class of X tab:     <span class="faq_tab">Streams</span> tab
     Note callout:       <span class="faq_note">Note</span>
     Warning callout:    <span class="faq_warning">Warning</span>
     Important callout:  <span class="faq_important">Important</span>
   (callout badges show in capitals and take no colon)
   Other apps' buttons are plain [Button]; their tabs are "Tab". */
div.faq span.faq_button {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
    border-radius: .5em;
    padding: .05em .4em;
    white-space: nowrap;
}

div.faq span.faq_tab {
    color: var(--secondary-color);
    border: 1px solid var(--darkest-color);
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    padding: .05em .4em;
    white-space: nowrap;
}

div.faq span.faq_note,
div.faq span.faq_warning,
div.faq span.faq_important {
    border-radius: .5em;
    padding: .05em .4em;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
}

div.faq span.faq_note {
    background-color: var(--faq-note-background);
    color: var(--faq-note-color);
    border: 1px solid var(--faq-note-background);
}

div.faq span.faq_warning {
    background-color: var(--faq-warning-background);
    color: var(--faq-warning-color);
    border: 1px solid var(--faq-warning-background);
}

div.faq span.faq_important {
    background-color: var(--faq-important-background);
    color: var(--faq-important-color);
    border: 1px solid var(--faq-important-color);
}