/**
 * CQIP Overlay — Frontend Styles
 * Minimal, utility-focused. Designed to sit harmoniously inside any theme.
 * Uses --cqip-* custom properties so themes can override easily.
 *
 * @package CQIP_Shortcode_Overlay
 */

:root {
    --cqip-primary:       #3d517b;
    --cqip-primary-light: #eaecf2;
    --cqip-text:          #1a1a2e;
    --cqip-muted:         #64748b;
    --cqip-border:        #e2e8f0;
    --cqip-radius:        6px;
    --cqip-font-body:     inherit;
    --cqip-spacing:       1.25rem;
}

/* ─── Block Container ─────────────────────────────────────────────────────── */
.cqip-block {
    font-family: var(--cqip-font-body);
    color:        var(--cqip-text);
    margin:       var(--cqip-spacing) 0;
}

.cqip-block-heading {
    font-size:     1.3em;
    margin-bottom: 0.75rem;
    color:         var(--cqip-text);
}

/* ─── FAQ Block ───────────────────────────────────────────────────────────── */
.cqip-faq-accordion {
    border-top: 1px solid var(--cqip-border);
}

.cqip-faq-item {
    border-bottom: 1px solid var(--cqip-border);
}

.cqip-faq-question {
    display:          flex;
    justify-content:  space-between;
    align-items:      center;
    width:            100%;
    padding:          0.875rem var(--cqip-spacing);
    background:       none;
    border:           none;
    text-align:       left;
    font-size:        1rem;
    font-weight:      600;
    cursor:           pointer;
    color:            var(--cqip-text);
    transition:       background 0.15s;
}

.cqip-faq-question:hover,
.cqip-faq-question[aria-expanded="true"] {
    background: var(--cqip-primary-light);
    color:      var(--cqip-primary);
}

.cqip-faq-icon {
    font-size:   1.4em;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 1rem;
    transition:  transform 0.2s;
}

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

.cqip-faq-answer-inner {
    padding: 0.75rem var(--cqip-spacing) 1rem;
    line-height: 1.6;
}

.cqip-faq-list dt {
    font-weight:   600;
    margin-top:    1rem;
    color:         var(--cqip-primary);
}

.cqip-faq-list dd {
    margin-left: 0;
    padding-left: 1rem;
    border-left:  3px solid var(--cqip-border);
    margin-top:   0.25rem;
}

/* ─── Capabilities Block ──────────────────────────────────────────────────── */
.cqip-capabilities-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap:                   var(--cqip-spacing);
}

.cqip-capability-card {
    padding:       var(--cqip-spacing);
    border:        1px solid var(--cqip-border);
    border-radius: var(--cqip-radius);
    border-top:    3px solid var(--cqip-primary);
    transition:    box-shadow 0.2s;
}

.cqip-capability-card:hover {
    box-shadow: 0 4px 12px rgba(26, 79, 196, 0.1);
}

.cqip-capability-card .cqip-cap-name {
    font-size:     1rem;
    font-weight:   700;
    margin:        0 0 0.4rem;
    color:         var(--cqip-primary);
}

.cqip-capability-card .cqip-cap-desc {
    margin:      0;
    color:       var(--cqip-muted);
    font-size:   0.93em;
    line-height: 1.5;
}

.cqip-capabilities-list {
    list-style:  none;
    margin:      0;
    padding:     0;
}

.cqip-capabilities-list li {
    display:       flex;
    gap:           1rem;
    padding:       0.75rem 0;
    border-bottom: 1px solid var(--cqip-border);
}

.cqip-capabilities-list .cqip-cap-name {
    min-width:   200px;
    font-weight: 600;
    color:       var(--cqip-primary);
}

.cqip-capabilities-table,
.cqip-compliance-table,
.cqip-solutions-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.95em;
}

.cqip-capabilities-table th,
.cqip-compliance-table th,
.cqip-solutions-table th {
    background:    var(--cqip-primary);
    color:         #fff;
    padding:       0.6rem 0.875rem;
    text-align:    left;
    font-weight:   600;
}

.cqip-capabilities-table td,
.cqip-compliance-table td,
.cqip-solutions-table td {
    padding:       0.6rem 0.875rem;
    border-bottom: 1px solid var(--cqip-border);
    vertical-align: top;
}

.cqip-capabilities-table tr:hover td,
.cqip-compliance-table tr:hover td,
.cqip-solutions-table tr:hover td {
    background: var(--cqip-primary-light);
}

/* ─── Solutions Block ─────────────────────────────────────────────────────── */
.cqip-solutions-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap:                   var(--cqip-spacing);
}

.cqip-solution-card {
    border:        1px solid var(--cqip-border);
    border-radius: var(--cqip-radius);
    overflow:      hidden;
}

.cqip-solution-challenge,
.cqip-solution-solution,
.cqip-solution-outcome {
    padding: 0.75rem var(--cqip-spacing);
}

.cqip-solution-challenge {
    background: #fff5f5;
    border-left: 4px solid #e53e3e;
}

.cqip-solution-solution {
    background: #f0fff4;
    border-left: 4px solid #38a169;
}

.cqip-solution-outcome {
    background: #ebf8ff;
    border-left: 4px solid var(--cqip-primary);
}

.cqip-label {
    display:      block;
    font-size:    0.75em;
    font-weight:  700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
    opacity:       0.7;
}

.cqip-solution-challenge p,
.cqip-solution-solution p,
.cqip-solution-outcome p {
    margin: 0;
}

/* ─── Technical Block ─────────────────────────────────────────────────────── */
.cqip-technical-content {
    padding:       1.25rem var(--cqip-spacing);
    background:    #f8fafc;
    border-left:   4px solid var(--cqip-primary);
    border-radius: 0 var(--cqip-radius) var(--cqip-radius) 0;
    line-height:   1.7;
}

.cqip-technical-content[data-tech-level="expert"] {
    border-left-color: #6d28d9;
    background:        #f5f3ff;
}

/* ─── Author Block ────────────────────────────────────────────────────────── */
.cqip-author-card,
.cqip-author-byline {
    display:        flex;
    align-items:    flex-start;
    gap:            var(--cqip-spacing);
    padding:        var(--cqip-spacing);
    border:         1px solid var(--cqip-border);
    border-radius:  var(--cqip-radius);
    background:     #fafafa;
}

.cqip-author-avatar img {
    border-radius: 50%;
    flex-shrink:   0;
}

.cqip-author-name {
    display:     block;
    font-size:   1.05em;
    font-weight: 700;
}

.cqip-author-name a {
    color:           var(--cqip-primary);
    text-decoration: none;
}

.cqip-author-title {
    display:   block;
    color:     var(--cqip-muted);
    font-size: 0.88em;
    margin:    0.2rem 0 0.5rem;
}

.cqip-author-credentials,
.cqip-author-bio {
    font-size:   0.9em;
    margin:      0.3rem 0;
    color:       var(--cqip-muted);
}

.cqip-author-linkedin {
    display:         inline-block;
    margin-top:      0.5rem;
    font-size:       0.85em;
    color:           #0077b5;
    text-decoration: none;
}

/* ─── Admin Gutenberg Block Styles ────────────────────────────────────────── */
.cqip-gb-block {
    border:        2px solid #1a4fc4;
    border-radius: 6px;
    padding:       16px;
    background:    #f8faff;
}

.cqip-gb-block-header {
    display:         flex;
    align-items:     center;
    gap:             10px;
    margin-bottom:   12px;
}

.cqip-gb-badge {
    background:    #1a4fc4;
    color:         #fff;
    font-size:     11px;
    font-weight:   700;
    padding:       3px 8px;
    border-radius: 3px;
    white-space:   nowrap;
}

.cqip-gb-faq-pair,
.cqip-gb-capability-row,
.cqip-gb-compliance-row {
    display:       flex;
    flex-direction: column;
    gap:           8px;
    padding:       10px;
    margin-bottom: 8px;
    background:    #fff;
    border:        1px solid #e2e8f0;
    border-radius: 4px;
}

.cqip-gb-textarea {
    width:         100%;
    font-family:   inherit;
    font-size:     13px;
    padding:       8px;
    border:        1px solid #ddd;
    border-radius: 4px;
    resize:        vertical;
}

.cqip-gb-schema-notice {
    font-size:   12px;
    color:       #555;
    margin-top:  10px;
    padding:     6px 10px;
    background:  #e8effc;
    border-radius: 4px;
}

/* ─── Admin Meta Box ──────────────────────────────────────────────────────── */
.cqip-suggestions-list {
    list-style: none;
    margin:     0;
    padding:    0;
}

.cqip-suggestion {
    padding:       10px;
    margin-bottom: 8px;
    border-radius: 4px;
    border-left:   4px solid #e2e8f0;
}

.cqip-confidence-high   { border-left-color: #38a169; background: #f0fff4; }
.cqip-confidence-medium { border-left-color: #d97706; background: #fffbeb; }
.cqip-confidence-low    { border-left-color: #9ca3af; background: #f9fafb; }

.cqip-suggestion-header {
    display:     flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.cqip-confidence-badge {
    font-size:   11px;
    font-weight: 700;
    background:  #1a4fc4;
    color:       #fff;
    padding:     2px 6px;
    border-radius: 10px;
}

.cqip-suggestion-desc {
    font-size: 12px;
    color:     #555;
    margin:    4px 0 8px;
}

.cqip-migration-options select,
.cqip-migration-options input[type="checkbox"] {
    margin-bottom: 8px;
}

.cqip-migration-options label {
    display: block;
    margin-bottom: 6px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cqip-capabilities-grid,
    .cqip-solutions-grid {
        grid-template-columns: 1fr;
    }

    .cqip-author-card {
        flex-direction: column;
    }
}