/*
 *  @author Just Wonderful Things
 *  @website justwonderfulthings.com
 *  @file /wfassets/css/theme-default.css
 *  @description This file provides the default theme styles for the WonderfulFAQs system.
 *              It defines the base CSS variables for colors, typography, spacing, and component styles.
 *  @copyright 2024 Just Wonderful Things. All rights reserved.
 *  @features
 *      - Defines default CSS variables for styling.
 *      - Provides a baseline look that can be easily customized.
 *      - Includes root level variables for primary colors, text, and background.
 *      - Sets typography, spacing and transition default settings.
 *  @license Proprietary. Unauthorized use, modification, or distribution is strictly prohibited.
 */

:root {
    /* -------------------- */
    /* Root-Level Variables */
    /* -------------------- */
    
    /* Base Colors */
    --wf-color-primary: #3498db;
    --wf-color-secondary: #2ecc71;
    --wf-color-background: #ffffff;
    --wf-color-text: #2c3e50;
    --wf-color-accent: #e74c3c;
    --wf-color-overlay: rgba(0, 0, 0, 0.7);
    --wf-color-border: #e4e4e4;
    --medium-gray: #888888;

    /* Dark Mode Colors (Placeholder - Overridden in theme-dark.css) */
    --wf-dark-color-background: #121212;
    --wf-dark-color-text: #e0e0e0;
    --wf-dark-color-primary: #4ecdc4;
    --wf-dark-color-accent: #ff6b6b;

    /* Typography */
    --wf-font-family: 'Inter', Arial, sans-serif;
    --wf-font-size-base: 16px;
    --wf-line-height: 1.6;

    /* Spacing */
    --wf-spacing-xs: 0.5rem;
    --wf-spacing-sm: 1rem;
    --wf-spacing-md: 1.5rem;
    --wf-spacing-lg: 2rem;

    /* Border Radius */
    --wf-border-radius: 8px;

    /* Transitions */
    --wf-transition-speed: 0.3s ease-in-out;

    /* ---------------------------------- */
    /* UI Customization Variables         */
    /* (Settable via JavaScript if needed)*/
    /* ---------------------------------- */

    /* Global Font Family */
    --faq-global-font-family: var(--wf-font-family);

    /* Container Customizations */
    --faq-container-max-width: 1200px;
    --faq-container-padding: 1.5rem;
    --faq-container-margin: 0 auto;
    --faq-container-background-color: #ffffff;
    --faq-container-border-radius: 8px;
    --faq-container-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    /* Search Box Customizations */
    --faq-search-border-color: #000000;
    --faq-search-border-width: 2px;
    --faq-search-border-style: solid;
    --faq-search-height: 80px;
    --faq-search-placeholder-font-size: 16px;
    --faq-search-placeholder-text-color: #888;
    --faq-search-color: #000000;
    --faq-search-font-family: var(--faq-global-font-family);
    --faq-search-padding: 8px;
    --faq-search-margin: 20px;
    --faq-search-background: #ffffff;
    --faq-search-focus-border-color: #e74c3c;
    --faq-search-focus-box-shadow: 0 0 5px rgba(231, 76, 60, 0.3);
    --faq-search-focus-border-width: 2px;

    /* Heading Customizations */
    --faq-heading-font-size: 20px;
    --faq-heading-line-height: 1.5;
    --faq-heading-font-weight: 700;
    --faq-heading-font-family: inherit;
    --faq-heading-text-align: left;
    --faq-heading-letter-spacing: normal;
    --faq-heading-text-color: inherit;

    /* FAQ Card Customizations */
    --faq-card-font-size: 20px;
    --faq-card-line-height: 1.5;
    --faq-card-font-weight: 700;
    --faq-card-font-family: var(--faq-global-font-family);
    --faq-card-text-align: left;
    --faq-card-letter-spacing: normal;
    --faq-card-text-color: inherit;
    --faq-card-border-color: #ddd;
    --faq-card-border-width: 1px;
    --faq-card-border-style: solid;
    --faq-card-border-radius: 8px;
    --faq-card-background-color: #fff;
    --faq-card-shadow: 0 4px 6px rgba(0,0,0,0.1);
    --faq-card-hover-background-color: #f9f9f9;
    --faq-card-hover-border-color: #ccc;
    --faq-card-padding: 20px;
    --faq-card-margin: 10px;
    --faq-card-shadow-hover: 0 8px 12px rgba(0, 0, 0, 0.2);
    --faq-card-transform-hover: translateY(-5px);
    --faq-card-text-color-dark: #ffffff;
    --faq-card-background-color-dark: #2c2c2c;
    --faq-card-border-color-dark: #ddd;
    --faq-card-shadow-dark: 0 4px 6px rgba(0,0,0,0.1);
    --faq-card-hover-background-color-dark: #444444;
    --faq-card-hover-border-color-dark: #ccc;
    --faq-card-shadow-hover-dark: 0 8px 12px rgba(0, 0, 0, 0.2);

    /* Modal Customizations */
     --faq-modal-content-font-family: var(--faq-global-font-family);
    --faq-typing-container-font-family: var(--faq-global-font-family);
    --faq-modal-question-font-family: var(--faq-global-font-family);
    --faq-modal-answer-font-family: var(--faq-global-font-family);
    --faq-modal-padding: 20px;
    --faq-modal-question-font-size: 20px;
    --faq-modal-answer-font-size: 18px;
     --faq-modal-answer-font-family: var(--faq-global-font-family);
    --faq-modal-line-height: 1.6;
    --faq-modal-font-weight-question: bold;
    --faq-modal-font-weight-answer: normal;
    --faq-modal-bg: #000000;
    --faq-modal-text-color: #f5f5f5;
    --faq-modal-border-color: #fff500;
    --faq-modal-border-width: 2px;
    --faq-modal-border-style: solid; /* Added border-style */
    --faq-modal-border: var(--faq-modal-border-width) var(--faq-modal-border-style) var(--faq-modal-border-color);
    --faq-modal-open-animation: modalOpen 0.4s ease;
    --faq-modal-close-animation: modalClose 0.4s ease;
    --faq-modal-close-width: 2rem;
    --faq-modal-close-height: 2rem;
    --faq-modal-close-line-height: 2rem;
    --faq-modal-close-icon-hover-color: #ff6b6b;
    --faq-modal-close-icon-background-color: #e74c3c;
     --faq-modal-close-icon-hover-background-color: #ff6b6b;
    --faq-modal-question-text-color: #f5f5f5;
    --faq-modal-answer-text-color: #f5f5f5;

    /* Layout / Grid Customizations */
    --faq-grid-gap: 20px;
    --faq-max-width: 1200px;

    /* Button Customizations */
    --faq-button-background-color: #3498db;
    --faq-button-hover-background-color: #2980b9;
    --faq-button-border-color: #2980b9;
    --faq-button-border-style: solid;
    --faq-button-border-width: 2px;
    --faq-button-border-radius: 4px;
    --faq-button-font-size: 16px;
    --faq-button-padding: 10px 20px;
    --faq-button-margin: 20px auto 0;
    --faq-button-text-color: #fff;
    --faq-button-text-transform: uppercase;
    --faq-button-border: var(--faq-button-border-width) var(--faq-button-border-style) var(--faq-button-border-color);

    /* Accessibility Customizations */
    --faq-focus-outline-color: #e74c3c;
    --faq-focus-outline-width: 2px;

    /* Theme Switch Customization */
    --faq-theme-toggle-icon-color: #ffffff;
    --faq-theme-toggle-background-color: #3498db;
    --faq-theme-toggle-hover-icon-color: #ffffff;
    --faq-theme-toggle-hover-background-color: #2980b9;
    --faq-theme-toggle-border-color: #2980b9;
    --faq-theme-toggle-border-radius: 50%;
    --faq-theme-toggle-size: 2rem;
     --faq-theme-toggle-border-color: #2980b9;

    /* Load More Button Customizations */
    --faq-load-more-text-color: #ffffff;
    --faq-load-more-background-color: #000000;
    --faq-load-more-hover-background-color: #555555;
    --faq-load-more-hover-text-color: #ffffff;
    --faq-load-more-border-radius: 4px;
    --faq-load-more-text-transform: uppercase;
    --faq-load-more-border-width: 2px;
    --faq-load-more-border-style: solid;
    --faq-load-more-border-color: #000000;
    --faq-load-more-border: var(--faq-load-more-border-width) var(--faq-load-more-border-style) var(--faq-load-more-border-color);
    --faq-load-more-spinner-color: #ffffff;
    --faq-load-more-spinner-size: 1rem;
    --faq-load-more-spinner-speed: 1s;
    --faq-load-more-delay: 500ms;
    
   /* Suggestions Box Customizations */
    --faq-suggestions-border-color: #000;
    --faq-suggestions-border-width: 2px;
    --faq-suggestions-border-style: solid;
    --faq-suggestions-border-radius: 8px;
    --faq-suggestions-background-color: #ffffff;
    --faq-suggestions-text-color: #333333;
    --faq-suggestions-font-size: 19px;
    --faq-suggestions-font-weight: normal;
     --faq-suggestions-message-text-align: center;
    --faq-suggestions-message-padding: 1rem 0;
    --faq-suggestions-message-text-color: #999999;
    --faq-suggestions-message-font-size: 14px;
    --faq-suggestions-message-font-weight: normal;
    --faq-suggestions-no-suggestions-text: 'No suggestions found.';
    --faq-suggestions-border-visible: true;

    /* Highlight Customization for Search Matches */
    --search-highlight-background-color: #ffeb3b;
    --search-highlight-text-color: #000000;
    --search-highlight-font-weight: bold;
    --search-highlight-background-color-dark: #000;
    --search-highlight-text-color-dark: #000000;
    --search-highlight-font-weight-dark: bold;

    /* Tags Customizations */
    --faq-tag-background-color: #000000;
    --faq-tag-text-color: #ffffff;
    --faq-tag-hover-background-color: #c0392b;
    --faq-tag-hover-text-color: #ffffff;
    --faq-tag-border-radius: 4px;
    --faq-tag-font-size: 0.8rem;
    --faq-tag-padding: 0.5rem 0.75rem;
    --faq-tag-margin-right: 0.3rem;
    --faq-tag-margin-bottom: 0.3rem;
     --faq-tag-font-family: var(--faq-global-font-family);
    --faq-tag-font-weight: normal;

    /* Related FAQs Customization */
    --faq-related-heading-color: #e74c3c;
    --faq-related-heading-font-size: 1.2rem;
    --faq-related-link-font-size: 17px;
     --faq-related-list-style-type: disc;
    --faq-related-list-padding-left: 1.5rem;
     --faq-related-link-color: #3498db;
     --faq-related-link-hover-color: #2980b9;
    --faq-related-max-items: 3;
    --faq-related-heading-font-family: var(--faq-global-font-family);
    --faq-related-links-font-family: var(--faq-global-font-family);
     --faq-related-heading-font-weight: 700;
    --faq-related-links-font-weight: normal;
    --faq-related-border-top-width: 1px;
    --faq-related-border-top-style: solid;
     --faq-related-border-top-color: #ddd;

     /* Select2 Customization Variables */
     /* Container */
    --select2-container-height: 48px;
    --select2-container-padding: 0.5rem 0.75rem;
    --select2-container-font-family: inherit;
    --select2-container-font-size: 16px;
     --select2-container-text-color: #333333;
    --select2-container-background-color: #f1f2f5;
    --select2-container-border-color: #000000;
    --select2-container-border-width: 2px;
    --select2-container-border-style: solid;
    --select2-container-border-radius: 4px;
    
    /* Dropdown */
    --select2-dropdown-background-color: #ffffff;
    --select2-dropdown-border-color: #000000;
    --select2-dropdown-border-width: 2px;
    --select2-dropdown-border-style: solid;
    --select2-dropdown-border-radius: 4px;
    --select2-dropdown-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --select2-dropdown-spacing: 8px;
    --select2-dropdown-z-index: 9999;

    /* Options */
     --select2-option-background-color: #ffffff;
    --select2-option-text-color: #000000;
    --select2-option-font-family: inherit;
    --select2-option-font-size: 14px;
    --select2-option-hover-background-color: #f1f1f1;
     --select2-option-hover-text-color: #000000;

    /* Selection */
    --select2-selection-text-color: #000000;
    --select2-selection-background-color: #eeeeee;
    --select2-selection-border-color: #cccccc;
    --select2-selection-border-width: 2px;
    --select2-selection-border-style: solid;
    --select2-selection-border-radius: 14px;
    --select2-selection-font-family: inherit;
    --select2-selection-font-size: 16px;
     --select2-selection-text-color-dark: #ffffff;
    --select2-selection-background-color-dark: #333333;
    --select2-selection-border-color-dark: #888888;
    --select2-selection-border-width-dark: 2px;
    --select2-selection-border-style-dark: solid;
    --select2-selection-border-radius-dark: 14px;
    --select2-selection-font-family-dark: inherit;
    --select2-selection-font-size-dark: 16px;
   
    /* Select2 clear button size */
    --select2-clear-button-size: 0.8em;
    --select2-clear-button-line-height: 1em;
    --select2-clear-button-color: #000; /* Default color */
     --select2-clear-button-hover-color: #333; /* Default hover color */
    --select2-clear-button-color-dark: #ddd; /* Added default color for dark theme */
    --select2-clear-button-hover-color-dark: #fff; /* Added default hover */

    /* Load More Button Spinner */
    --faq-load-more-spinner-color: #ffffff;
    --faq-load-more-spinner-size: 1rem;
    --faq-load-more-spinner-speed: 1s;

     /* Dark mode variables */
     --faq-suggestions-hover-background-color-dark: #444444;
    --faq-suggestions-hover-text-color-dark: #ffffff;
}