/* ISU Network Search — frontend search widget.
   Customizable via CSS custom properties (set by shortcode attributes or theme):
   --ins-accent (color), --ins-radius (px), --ins-spacing (px). */

.ins-error-msg { color: #c00; }

/* mode="form" — input only */
.ins-form-only input[type="text"] { width: 100%; padding: 10px 14px; border: 2px solid #ddd; border-radius: var(--ins-radius, 6px); font-size: 16px; box-sizing: border-box; }
.ins-form-only input[type="text"]:focus { border-color: var(--ins-accent, #0073aa); outline: none; }

/* full widget */
.ins-search-wrap { max-width: 800px; margin: 0 auto; }
.ins-search-form { display: flex; gap: 8px; margin-bottom: var(--ins-spacing, 15px); }
.ins-autocomplete { position: relative; flex: 1; display: flex; }
.ins-search-form input[type="text"] { flex: 1; width: 100%; padding: 10px 14px; border: 2px solid #ddd; border-radius: var(--ins-radius, 6px); font-size: 16px; }
#ins-suggestions { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 100; margin-top: 2px; background: #fff; border: 1px solid #ddd; border-radius: var(--ins-radius, 6px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden; }
.ins-suggestion { padding: 8px 14px; cursor: pointer; font-size: 14px; color: #333; }
.ins-suggestion:hover { background: #f0f6fa; color: var(--ins-accent, #0073aa); }
.ins-search-form input[type="text"]:focus { border-color: var(--ins-accent, #0073aa); outline: none; }
.ins-search-form button { padding: 10px 20px; background: var(--ins-accent, #0073aa); color: #fff; border: none; border-radius: var(--ins-radius, 6px); cursor: pointer; font-size: 16px; }
.ins-search-form button:hover { filter: brightness(0.85); }
.ins-filters { display: none; gap: 8px; margin-bottom: var(--ins-spacing, 15px); flex-wrap: wrap; }
.ins-filters select { padding: 6px 10px; border: 1px solid #ddd; border-radius: var(--ins-radius, 4px); }
#ins-date-custom { display: none; align-items: center; gap: 4px; color: #666; }
#ins-date-custom input[type="date"] { padding: 5px 8px; border: 1px solid #ddd; border-radius: var(--ins-radius, 4px); }
.ins-result-card { display: flex; gap: var(--ins-spacing, 15px); padding: var(--ins-spacing, 15px); margin-bottom: 12px; border: 1px solid #e8e8e8; border-radius: var(--ins-radius, 8px); background: #fff; }
.ins-result-card:hover { border-color: var(--ins-accent, #0073aa); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.ins-result-card:focus-within { border-color: var(--ins-accent, #0073aa); box-shadow: 0 0 0 2px var(--ins-accent, #0073aa); }
.ins-result-title:focus { outline: none; text-decoration: underline; }
.ins-result-thumb { width: 120px; height: 80px; object-fit: cover; border-radius: var(--ins-radius, 4px); flex-shrink: 0; }
.ins-result-content { flex: 1; min-width: 0; }
.ins-result-title { font-size: 17px; font-weight: 600; color: var(--ins-accent, #0073aa); text-decoration: none; display: block; margin-bottom: 4px; }
.ins-result-title:hover { text-decoration: underline; }
.ins-result-excerpt { color: #555; font-size: 14px; margin-bottom: 6px; }
.ins-result-meta { color: #999; font-size: 12px; }
.ins-type-icon.dashicons { font-size: 14px; width: 14px; height: 14px; vertical-align: text-bottom; margin-right: 4px; color: #999; }
.ins-site-favicon { width: 14px; height: 14px; vertical-align: text-bottom; margin-right: 4px; border-radius: 2px; }
.ins-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid #ddd; border-top-color: var(--ins-accent, #0073aa); border-radius: 50%; animation: ins-spin 0.8s linear infinite; }
@keyframes ins-spin { to { transform: rotate(360deg); } }
.ins-spinner-wrap { text-align: center; padding: 20px; }
.ins-result-count { display: none; color: #666; margin-bottom: 10px; font-size: 14px; }
.ins-load-more { display: none; width: 100%; padding: 12px; background: #f7f7f7; border: 1px solid #ddd; border-radius: var(--ins-radius, 6px); cursor: pointer; font-size: 14px; text-align: center; margin-top: 10px; }
.ins-load-more:hover { background: #e8e8e8; }
.ins-message { padding: 10px; color: #666; text-align: center; }
.ins-no-results-tips { display: inline-block; margin: 8px auto 0; padding-left: 20px; text-align: left; list-style: disc; color: #888; font-size: 13px; }
.ins-message-error { color: #c00; }
.ins-search-wrap mark { background: #fff2a8; color: inherit; padding: 0 1px; border-radius: 2px; }

/* mode="popup" — full-screen search overlay (frosted glass style) */
.ins-popup-wrap { display: block; }
.ins-popup-wrap.ins-align-left { text-align: left; }
.ins-popup-wrap.ins-align-center { text-align: center; }
.ins-popup-wrap.ins-align-right { text-align: right; }
.ins-popup-trigger { display: inline-flex; align-items: center; gap: 10px; padding: 0; color: var(--ins-accent, #0073aa); cursor: pointer; font-size: var(--ins-trigger-size, 17px); font-weight: 700; }
/* High-specificity state resets so theme button:hover/focus styles can't bleed in */
.ins-popup-wrap .ins-popup-trigger,
.ins-popup-wrap .ins-popup-trigger:hover,
.ins-popup-wrap .ins-popup-trigger:focus,
.ins-popup-wrap .ins-popup-trigger:active {
    background: none;
    border: none;
    box-shadow: none;
    text-decoration: none;
    outline: none;
    transform: none;
    color: var(--ins-accent, #0073aa);
    opacity: 1;
}
.ins-popup-wrap .ins-popup-trigger .dashicons { color: inherit; }
.ins-popup-wrap .ins-popup-trigger:hover {
    color: var(--ins-trigger-hover, var(--ins-accent, #0073aa));
    opacity: var(--ins-trigger-hover-opacity, 0.75);
}
.ins-popup-wrap .ins-popup-trigger:focus-visible { outline: 2px solid var(--ins-accent, #0073aa); outline-offset: 2px; }
.ins-popup-trigger .dashicons { font-size: var(--ins-trigger-icon-size, 24px); width: var(--ins-trigger-icon-size, 24px); height: var(--ins-trigger-icon-size, 24px); }
.ins-popup-overlay { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); align-items: center; justify-content: center; }
.ins-popup-overlay.ins-popup-open { display: flex; }
body.ins-popup-active { overflow: hidden; }
.ins-popup-inner { width: min(900px, 85vw); }
/* High-specificity resets so theme input styles (borders, backgrounds,
   shadows) can't override the underline-only design */
.ins-popup-overlay .ins-popup-input,
.ins-popup-overlay .ins-popup-input:hover,
.ins-popup-overlay .ins-popup-input:focus,
.ins-popup-overlay .ins-popup-input:active {
    width: 100%;
    box-sizing: border-box;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: var(--ins-accent, #0073aa);
    padding: 8px 4px;
    margin: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ins-accent, #0073aa);
    border-radius: 0;
    box-shadow: none;
    outline: none;
    height: auto;
}
.ins-popup-overlay .ins-popup-input:focus { border-bottom-width: 2px; }
.ins-popup-overlay .ins-popup-input::placeholder { color: var(--ins-accent, #0073aa); opacity: 0.85; }
.ins-popup-hint { margin-top: 14px; text-align: center; color: rgba(0, 0, 0, 0.35); font-size: 13px; }
.ins-popup-close { position: absolute; top: 18px; right: 26px; background: none; border: none; color: var(--ins-accent, #0073aa); font-size: 44px; line-height: 1; cursor: pointer; padding: 4px; }
.ins-popup-close:hover { opacity: 0.7; }
@media (max-width: 600px) { .ins-popup-overlay .ins-popup-input, .ins-popup-overlay .ins-popup-input:focus { font-size: 26px; } }

/* layout="grid" */
.ins-layout-grid { max-width: none; }
.ins-layout-grid #ins-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--ins-spacing, 15px); }
.ins-layout-grid .ins-result-card { flex-direction: column; margin-bottom: 0; }
.ins-layout-grid .ins-result-thumb { width: 100%; height: 140px; }