/**
 * FTW Advanced Search — Stylesheet
 *
 * Sections:
 *  1. CSS Custom Properties (variables)
 *  2. Layout — Full
 *  3. Layout — Compact
 *  4. Search Bar
 *  5. Filter Sidebar
 *  6. Active Filter Chips
 *  7. Results Area
 *  8. Result Card
 *  9. Pagination
 * 10. Loading / States
 * 11. Tags / Badges
 * 12. Admin (Migrator page)
 * 13. Responsive / Mobile
 */

/* ── 1. CSS Custom Properties ──────────────────────────────────────────────── */
.ftw-search-wrap {
    --ftw-primary:       #C41230; /* Florida Tax Watch red */
    --ftw-primary-dark:  #9a0d23;
    --ftw-primary-light: #f9e6ea;
    --ftw-text:          #1a1a1a;
    --ftw-text-muted:    #666;
    --ftw-border:        #ddd;
    --ftw-bg:            #fff;
    --ftw-bg-alt:        #f7f7f7;
    --ftw-radius:        6px;
    --ftw-shadow:        0 2px 8px rgba(0,0,0,.08);
    --ftw-sidebar-width: 260px;
    --ftw-gap:           24px;
    --ftw-font:          inherit;
    --ftw-highlight-bg:  #fff3cd;
    --ftw-highlight-fg:  #333;

    font-family:    var(--ftw-font);
    color:          var(--ftw-text);
    box-sizing:     border-box;
}

.ftw-search-wrap *,
.ftw-search-wrap *::before,
.ftw-search-wrap *::after {
    box-sizing: inherit;
}

/* ── 2. Layout — Full ──────────────────────────────────────────────────────── */
.ftw-layout-full .ftw-content-row {
    display:  flex;
    gap:      var(--ftw-gap);
    align-items: flex-start;
    margin-top: 20px;
}

.ftw-layout-full .ftw-filter-sidebar {
    width:       var(--ftw-sidebar-width);
    flex-shrink: 0;
    position:    sticky;
    top:         80px;
    background:  var(--ftw-bg);
    border:      1px solid var(--ftw-border);
    border-radius: var(--ftw-radius);
    padding:     0;
    overflow:    visible; /* no sidebar-level scroll — lists scroll internally */
}

.ftw-layout-full .ftw-results-area {
    flex: 1;
    min-width: 0;
}

/* ── 3. Layout — Compact ───────────────────────────────────────────────────── */
.ftw-layout-compact {
    background: var(--ftw-bg-alt);
    border:     1px solid var(--ftw-border);
    border-radius: var(--ftw-radius);
    padding:    16px;
}

.ftw-compact-filters {
    margin-top: 12px;
    display:    flex;
    flex-direction: column;
    gap:        10px;
}

.ftw-compact-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ftw-compact-filter-label {
    font-size:   12px;
    font-weight: 600;
    color:       var(--ftw-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.ftw-compact-select {
    width:         100%;
    padding:       8px 10px;
    border:        1px solid var(--ftw-border);
    border-radius: var(--ftw-radius);
    font-size:     14px;
    background:    var(--ftw-bg);
    color:         var(--ftw-text);
}

.ftw-compact-search-submit {
    background:    var(--ftw-primary);
    color:         #fff;
    border:        none;
    border-radius: var(--ftw-radius);
    padding:       10px 16px;
    font-size:     14px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background .2s;
    margin-top:    4px;
}

.ftw-compact-search-submit:hover {
    background: var(--ftw-primary-dark);
}

.ftw-compact-results {
    margin-top:    16px;
    border-top:    2px solid var(--ftw-primary);
    padding-top:   16px;
}

.ftw-compact-results-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   12px;
}

.ftw-compact-close {
    background:   none;
    border:       none;
    cursor:       pointer;
    color:        var(--ftw-text-muted);
    font-size:    12px;
    padding:      4px 8px;
}

.ftw-compact-close:hover {
    color: var(--ftw-primary);
}

/* ── 4. Search Bar ─────────────────────────────────────────────────────────── */
.ftw-search-bar {
    margin-bottom: 8px;
}

.ftw-search-input-wrap {
    display:       flex;
    border:        2px solid var(--ftw-border);
    border-radius: var(--ftw-radius);
    overflow:      hidden;
    transition:    border-color .2s, box-shadow .2s;
}

.ftw-search-input-wrap:focus-within {
    border-color: var(--ftw-primary);
    box-shadow:   0 0 0 3px rgba(196,18,48,.12);
}

.ftw-compact-search-bar {
    display:       flex;
    border:        1px solid var(--ftw-border);
    border-radius: var(--ftw-radius);
    overflow:      hidden;
    background:    var(--ftw-bg);
    transition:    border-color .2s;
}

.ftw-compact-search-bar:focus-within {
    border-color: var(--ftw-primary);
}

.ftw-keyword-input {
    flex:          1;
    border:        none;
    outline:       none;
    padding:       12px 16px;
    font-size:     16px;
    background:    transparent;
    color:         var(--ftw-text);
}

.ftw-layout-compact .ftw-keyword-input {
    font-size: 14px;
    padding:   8px 12px;
}

.ftw-search-btn {
    background:  var(--ftw-primary);
    border:      none;
    color:       #fff;
    padding:     0 18px;
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  background .2s;
}

.ftw-search-btn:hover {
    background: var(--ftw-primary-dark);
}

/* ── 5. Filter Sidebar ─────────────────────────────────────────────────────── */
.ftw-filter-sidebar-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         16px 16px 12px;
    border-bottom:   1px solid var(--ftw-border);
}

.ftw-filter-title {
    margin:      0;
    font-size:   15px;
    font-weight: 700;
    color:       var(--ftw-text);
}

.ftw-clear-all {
    background:    none;
    border:        none;
    color:         var(--ftw-primary);
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
    padding:       0;
    text-decoration: underline;
}

.ftw-clear-all:hover {
    color: var(--ftw-primary-dark);
}

.ftw-filter-section {
    border-bottom: 1px solid var(--ftw-border);
}

.ftw-filter-section:last-child {
    border-bottom: none;
}

.ftw-filter-section-toggle {
    width:           100%;
    background:      none;
    border:          none;
    padding:         12px 16px;
    text-align:      left;
    font-size:       13px;
    font-weight:     700;
    color:           var(--ftw-text);
    cursor:          pointer;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    text-transform:  uppercase;
    letter-spacing:  .5px;
    transition:      background .15s;
}

.ftw-filter-section-toggle:hover {
    background: var(--ftw-bg-alt);
}

.ftw-toggle-icon {
    color: var(--ftw-text-muted);
    font-size: 11px;
}

.ftw-filter-section-body {
    padding: 4px 0 12px;
}

/* Checkbox Lists */
.ftw-checkbox-list,
.ftw-year-list {
    list-style: none;
    margin:     0;
    padding:    0;
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden; /* prevent horizontal scrollbar from long category names */
}

.ftw-checkbox-list li,
.ftw-year-item {
    padding: 0 16px;
}

.ftw-checkbox-label {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
    padding:     5px 0;
    font-size:   13px;
    cursor:      pointer;
    color:       var(--ftw-text);
    position:    relative;
    word-break:  break-word; /* wrap long names like "Transportation & Tourism" */
    min-width:   0;
}

.ftw-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.ftw-checkbox-custom {
    width:         16px;
    height:        16px;
    border:        2px solid var(--ftw-border);
    border-radius: 3px;
    flex-shrink:   0;
    transition:    all .15s;
    background:    var(--ftw-bg);
    position:      relative;
}

.ftw-checkbox-label input:checked ~ .ftw-checkbox-custom {
    background:    var(--ftw-primary);
    border-color:  var(--ftw-primary);
}

.ftw-checkbox-label input:checked ~ .ftw-checkbox-custom::after {
    content:    '';
    position:   absolute;
    left:       3px;
    top:        1px;
    width:      6px;
    height:     9px;
    border:     2px solid #fff;
    border-top: none;
    border-left: none;
    transform:  rotate(45deg);
}

.ftw-checkbox-label:hover .ftw-checkbox-custom {
    border-color: var(--ftw-primary);
}

.ftw-filter-count {
    color:     var(--ftw-text-muted);
    font-size: 11px;
    margin-left: auto;
}

/* Year items */
.ftw-year-item {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
}

.ftw-year-item .ftw-checkbox-label {
    flex: 1;
}

.ftw-year-expand {
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         var(--ftw-text-muted);
    font-size:     11px;
    padding:       4px 6px;
    border-radius: 3px;
    transition:    all .15s;
}

.ftw-year-expand:hover {
    background: var(--ftw-bg-alt);
    color:      var(--ftw-primary);
}

/* Month list */
.ftw-month-list {
    list-style: none;
    margin:     4px 0 0 24px;
    padding:    0;
    width:      100%;
}

.ftw-month-item {
    padding:       4px 8px;
    font-size:     12px;
    cursor:        pointer;
    border-radius: 3px;
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    transition:    background .15s;
    color:         var(--ftw-text-muted);
}

.ftw-month-item:hover {
    background: var(--ftw-bg-alt);
    color:      var(--ftw-primary);
}

.ftw-month-item.active {
    background: var(--ftw-primary-light);
    color:      var(--ftw-primary);
    font-weight: 600;
}

/* ── 6. Active Filter Chips ────────────────────────────────────────────────── */
.ftw-active-filters {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
    min-height: 0;
    margin-bottom: 4px;
}

.ftw-active-filters:empty {
    display: none;
}

.ftw-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    background:    var(--ftw-primary-light);
    color:         var(--ftw-primary-dark);
    border:        1px solid rgba(196,18,48,.2);
    border-radius: 100px;
    padding:       4px 10px 4px 12px;
    font-size:     12px;
    font-weight:   600;
}

.ftw-chip-remove {
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         var(--ftw-primary);
    font-size:     14px;
    line-height:   1;
    padding:       0;
    width:         16px;
    height:        16px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    border-radius: 50%;
    transition:    background .15s;
}

.ftw-chip-remove:hover {
    background: rgba(196,18,48,.15);
}

/* ── 7. Results Area ───────────────────────────────────────────────────────── */
.ftw-results-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-bottom:  12px;
    border-bottom:   2px solid var(--ftw-border);
    margin-bottom:   16px;
    flex-wrap:       wrap;
    gap:             12px;
}

.ftw-results-count {
    font-size:   14px;
    color:       var(--ftw-text-muted);
    font-weight: 500;
}

.ftw-sort-wrap {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.ftw-sort-label {
    font-size:   13px;
    color:       var(--ftw-text-muted);
    white-space: nowrap;
}

.ftw-sort-select {
    border:        1px solid var(--ftw-border);
    border-radius: var(--ftw-radius);
    padding:       6px 10px;
    font-size:     13px;
    background:    var(--ftw-bg);
    color:         var(--ftw-text);
    cursor:        pointer;
}

.ftw-results-list {
    min-height: 200px;
}

/* ── 8. Result Card ────────────────────────────────────────────────────────── */
.ftw-result-card {
    display:       flex;
    gap:           16px;
    padding:       20px 0;
    border-bottom: 1px solid var(--ftw-border);
    animation:     ftw-fade-in .25s ease;
}

.ftw-result-card:last-child {
    border-bottom: none;
}

@keyframes ftw-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ftw-card-thumb {
    width:       232px;
    flex-shrink: 0;
}

.ftw-card-thumb img {
    width:         232px;
    height:        180px;
    object-fit:    cover;
    border-radius: var(--ftw-radius);
    display:       block;
}

.ftw-card-body {
    flex: 1;
    min-width: 0;
}

.ftw-card-title {
    margin:      0 0 4px;
    font-size:   16px;
    font-weight: 700;
    line-height: 1.35;
}

.ftw-card-title a {
    color:           var(--ftw-text);
    text-decoration: none;
    transition:      color .15s;
}

.ftw-card-title a:hover {
    color: var(--ftw-primary);
}

.ftw-card-date {
    display:     block;
    font-size:   12px;
    color:       var(--ftw-text-muted);
    margin-bottom: 6px;
}

.ftw-card-excerpt {
    margin:    0 0 10px;
    font-size: 14px;
    color:     var(--ftw-text-muted);
    line-height: 1.55;
}

.ftw-card-tags {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
}

/* ── 9. Pagination ─────────────────────────────────────────────────────────── */
.ftw-pagination {
    margin-top: 28px;
}

.ftw-pagination-inner {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             4px;
    flex-wrap:       wrap;
}

.ftw-page-btn {
    background:    none;
    border:        1px solid var(--ftw-border);
    border-radius: var(--ftw-radius);
    padding:       7px 12px;
    font-size:     13px;
    font-weight:   500;
    cursor:        pointer;
    color:         var(--ftw-text);
    transition:    all .15s;
    line-height:   1;
}

.ftw-page-btn:hover:not(.disabled):not(.ftw-page-active) {
    background:   var(--ftw-primary-light);
    border-color: var(--ftw-primary);
    color:        var(--ftw-primary);
}

.ftw-page-btn.ftw-page-active {
    background:   var(--ftw-primary);
    border-color: var(--ftw-primary);
    color:        #fff;
    cursor:       default;
}

.ftw-page-btn.disabled {
    opacity: .4;
    cursor:  not-allowed;
}

.ftw-page-prev,
.ftw-page-next {
    font-weight: 600;
}

.ftw-page-ellipsis {
    padding:    7px 4px;
    color:      var(--ftw-text-muted);
    font-size:  13px;
    user-select: none;
}

/* ── 10. Loading / States ──────────────────────────────────────────────────── */
.ftw-spinner {
    display:         flex;
    justify-content: center;
    align-items:     center;
    padding:         60px 0;
}

.ftw-spinner-inner {
    width:         40px;
    height:        40px;
    border:        3px solid var(--ftw-border);
    border-top-color: var(--ftw-primary);
    border-radius: 50%;
    animation:     ftw-spin .7s linear infinite;
}

@keyframes ftw-spin {
    to { transform: rotate(360deg); }
}

.ftw-no-results,
.ftw-error-msg {
    text-align:  center;
    padding:     50px 20px;
    color:       var(--ftw-text-muted);
}

.ftw-error-msg {
    color: #b00;
}

.ftw-initial-state {
    text-align:  center;
    padding:     50px 20px;
    color:       var(--ftw-text-muted);
}

.ftw-initial-icon {
    color:         var(--ftw-border);
    margin-bottom: 16px;
}

.ftw-initial-icon svg {
    width:  48px;
    height: 48px;
}

.ftw-initial-sub {
    font-size: 12px;
    color:     var(--ftw-border);
}

/* ── 11. Tags / Badges ─────────────────────────────────────────────────────── */
.ftw-tag {
    display:       inline-block;
    font-size:     11px;
    font-weight:   600;
    padding:       2px 8px;
    border-radius: 100px;
    line-height:   1.6;
}

.ftw-tag-type {
    background: var(--ftw-primary-light);
    color:      var(--ftw-primary-dark);
}

.ftw-tag-cat {
    background: #f0f0f0;
    color:      #555;
}

/* Keyword highlight */
mark.ftw-highlight {
    background:    var(--ftw-highlight-bg);
    color:         var(--ftw-highlight-fg);
    border-radius: 2px;
    padding:       0 2px;
    font-style:    normal;
}

/* ── 12. Admin — Migrator Page ─────────────────────────────────────────────── */
.ftw-admin-migrator h2 {
    margin-top: 28px;
}

.ftw-admin-migrator .notice.inline {
    margin-bottom: 16px;
}

/* ── 13. Responsive / Mobile ───────────────────────────────────────────────── */
@media ( max-width: 768px ) {

    .ftw-layout-full .ftw-content-row {
        flex-direction: column;
    }

    .ftw-layout-full .ftw-filter-sidebar {
        width:    100%;
        position: static;
        max-height: none;
        order: 2; /* Results first on mobile */
    }

    .ftw-layout-full .ftw-results-area {
        order: 1;
    }

    /* Mobile filter toggle button */
    .ftw-mobile-filter-toggle {
        display:       flex;
        align-items:   center;
        gap:           8px;
        background:    var(--ftw-primary);
        color:         #fff;
        border:        none;
        border-radius: var(--ftw-radius);
        padding:       10px 16px;
        font-size:     14px;
        font-weight:   600;
        cursor:        pointer;
        margin-bottom: 12px;
        width:         100%;
        justify-content: center;
    }

    .ftw-filter-sidebar {
        display: none;
    }

    .ftw-filter-sidebar.ftw-sidebar-open {
        display: block;
    }

    .ftw-card-thumb {
        display: none;
    }

    .ftw-results-header {
        flex-direction: column;
        align-items:    flex-start;
    }

    .ftw-keyword-input {
        font-size: 16px; /* Prevent iOS zoom */
    }

    .ftw-pagination-inner {
        gap: 3px;
    }

    .ftw-page-btn {
        padding: 7px 9px;
        font-size: 12px;
    }
}

@media ( max-width: 480px ) {
    .ftw-chip {
        font-size: 11px;
    }

    .ftw-result-card {
        padding: 16px 0;
    }

    .ftw-card-title {
        font-size: 15px;
    }
}

/* ── 14. Search Scope Toggle ───────────────────────────────────────────────── */
.ftw-scope-toggle {
    display:       inline-flex;
    background:    var(--ftw-bg-alt);
    border:        1px solid var(--ftw-border);
    border-radius: var(--ftw-radius);
    overflow:      hidden;
    margin-bottom: 10px;
}

.ftw-scope-btn {
    background:   none;
    border:       none;
    padding:      7px 16px;
    font-size:    13px;
    font-weight:  500;
    cursor:       pointer;
    color:        var(--ftw-text-muted);
    transition:   all .15s;
    line-height:  1;
}

.ftw-scope-btn:hover {
    color: var(--ftw-text);
    background: rgba(0,0,0,.04);
}

.ftw-scope-btn.ftw-scope-active {
    background:  var(--ftw-primary);
    color:       #fff;
    font-weight: 600;
}