/* strongs-enhancements.css */

/* Styles specific to strongs.php for unified controls and layout adjustments */

/* 1. Strong's Page Header Adjustments */
.page-container--strongs .strongs-page-header__title {
    /* Global h1 styles from style.css are applied */
}
.page-container--strongs .strongs-page-header__subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin-bottom: 0;
}

/* 2. Strong's Unified Controls Section */
.strongs-controls-section {
    /* This section uses .card-style-content from the main style.css for its base appearance
       but we can override background for better differentiation of control panels. */
    background-color: var(--color-background-alt); /* Different from main surface */
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-subtle); /* More subtle shadow for control panels */
    margin-bottom: var(--space-xl);
    padding: var(--space-lg); /* Use a slightly smaller padding than main cards if desired */
    border-radius: var(--border-radius-md); /* Consistent with other interactive panels */
}
html.dark-mode .strongs-controls-section {
    background-color: var(--color-background-alt-dark);
    border-color: var(--color-border-dark);
}

.strongs-unified-form {}

.strongs-unified-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.strongs-unified-form__group {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
}

.strongs-unified-form__label {
    /* Uses global label styles from style.css */
    font-weight: 500; /* Consistent with global labels */
    display: block;
    margin-bottom: var(--space-xs);
}

.strongs-unified-form__select,
.strongs-unified-form__input {
    /* Uses global input/select styles from style.css */
    width: 100%;
    /* padding from global input/select */
}

.strongs-unified-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: flex-start;
    margin-top: var(--space-md);
}

.strongs-unified-form__submit {
    /* Uses global .button, .button--primary, .button--secondary styles */
    flex-grow: 0;
    min-width: 200px; /* Adjusted min-width slightly */
}
.strongs-unified-form__submit:hover:not(:disabled) {
    /* transform: translateY(-1px); Removed lift */
    /* Box-shadow and other hover effects from global .button */
}
.strongs-unified-form__submit:active:not(:disabled) {
    /* transform: translateY(0px) scale(0.98); Removed translateY */
    transform: scale(0.98); /* Keep scale for active feedback */
    /* Box-shadow and other active effects from global .button */
}
.strongs-unified-form__submit i {
    margin-right: var(--space-sm);
}

/* 3. Strong's Results Panel (Overrides if any) */
.page-container--strongs .strongs-results-panel .strongs-results-info {
    /* Uses global styles, typically p or small text */
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md); /* Ensure space above results list */
}

/* .strongs-results-list and its items use .card-style-content by default from PHP.
   If these need to be simpler (not full cards for each item): */
.page-container--strongs .strongs-results-list__item {
    /* background-color: var(--color-surface); /* If not using .card-style-content */
    /* padding: var(--space-lg); */
    /* border-radius: var(--border-radius-md); */
    /* margin-bottom: var(--space-lg); */
    /* border: 1px solid var(--color-border); */
    /* box-shadow: var(--shadow-xs); */
    /* transition: box-shadow var(--transition-base); */
}
.page-container--strongs .strongs-results-list__item:hover {
    /* box-shadow: var(--shadow-md); */
    /* transform: none; /* No lift */
}


/* 4. Dark Mode Overrides for Strong's Controls */
/* Global dark mode rules for form elements and .card-style-content should cover this. */
/* Specific overrides if needed: */
/* html.dark-mode .page-container--strongs .strongs-page-header__subtitle {
    color: var(--color-text-muted-dark);
} */

/* 5. Responsive Adjustments for Strong's Controls */
@media (min-width: 768px) {
    .strongs-unified-form__row {
        /* flex-wrap: nowrap; /* Consider if no-wrap is desired here */
    }
}

@media (max-width: 767px) {
    .strongs-controls-section {
        padding: var(--space-md); /* Reduced padding for the card on mobile */
    }
    .strongs-unified-form__row {
        flex-direction: column;
        gap: var(--space-md);
        margin-bottom: var(--space-md);
    }
    .strongs-unified-form__group {
        min-width: 100%;
    }
    .strongs-unified-form__actions {
        flex-direction: column;
        gap: var(--space-sm);
        align-items: stretch;
    }
    .strongs-unified-form__submit {
        width: 100%;
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .page-container--strongs .strongs-page-header__title {
        font-size: var(--font-size-xl);
    }
    .page-container--strongs .strongs-page-header__subtitle {
        font-size: var(--font-size-sm);
    }

    .strongs-unified-form__select,
    .strongs-unified-form__input {
        padding: var(--space-sm);
        font-size: var(--font-size-sm);
    }
    .strongs-unified-form__submit {
        font-size: var(--font-size-sm);
        padding: var(--space-sm) var(--space-md);
    }
}

/* 6. Print Styles for Strong's Page */
@media print {
    .strongs-controls-section {
        display: none !important;
    }
    /* Other print rules for strongs.php content are in the main style.css
       (e.g., .strongs-results-list__item) */
}

/* ADD THESE NEW STYLES FOR AI STUDY SECTION */

/* 7. AI Word Study Section Styles */
.strongs-ai-study {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border-subtle);
}

html.dark-mode .strongs-ai-study {
    border-top-color: var(--color-border-subtle-dark);
}

.strongs-ai-study__heading {
    font-size: var(--font-size-lg); /* Or h3 if your global is different */
    color: var(--color-text-heading);
    margin-bottom: var(--space-md);
    font-weight: 600; /* Or your preferred heading weight */
}

html.dark-mode .strongs-ai-study__heading {
    color: var(--color-text-heading-dark);
}

.strongs-ai-study h4 { /* Styles for the H4s generated by the AI */
    font-size: var(--font-size-md); /* Adjust as needed */
    color: var(--color-text-heading);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    font-weight: 600;
    /* border-bottom: 1px solid var(--color-border-subtle);
    padding-bottom: var(--space-xs); */
}
html.dark-mode .strongs-ai-study h4 {
    color: var(--color-text-heading-dark);
    /* border-bottom-color: var(--color-border-subtle-dark); */
}


.strongs-ai-study p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    margin-bottom: var(--space-md);
    color: var(--color-text-body);
}
html.dark-mode .strongs-ai-study p {
    color: var(--color-text-body-dark);
}

.strongs-ai-study ul,
.strongs-ai-study ol {
    margin-left: var(--space-lg);
    margin-bottom: var(--space-md);
    padding-left: var(--space-md); /* Indent list items */
}

.strongs-ai-study li {
    margin-bottom: var(--space-sm);
    color: var(--color-text-body);
}
html.dark-mode .strongs-ai-study li {
    color: var(--color-text-body-dark);
}

.strongs-ai-study a {
    color: var(--color-link);
    text-decoration: none;
}
.strongs-ai-study a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}
html.dark-mode .strongs-ai-study a {
    color: var(--color-link-dark);
}
html.dark-mode .strongs-ai-study a:hover {
    color: var(--color-link-hover-dark);
}

.strongs-ai-study strong {
    font-weight: 600; /* Or var(--font-weight-bold) if defined */
}

.strongs-ai-study em { /* If AI uses emphasis */
    font-style: italic;
}

/* If AI uses blockquotes (though not explicitly requested in prompt) */
.strongs-ai-study blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: var(--space-md);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(--space-md);
    font-style: italic;
    color: var(--color-text-muted);
}
html.dark-mode .strongs-ai-study blockquote {
    border-left-color: var(--color-primary-dark);
    color: var(--color-text-muted-dark);
}