/* =========================================================
   LUMISCHEMA SIDEBAR WIDGETS (site-wide)
   Best Reviewed, Popular Articles and Related Devices widgets
   registered in functions.php.

   This is the single source for these rules. They were previously
   stacked four deep in style.css with !important on every layer.
   Values below are the final cascade that was actually rendering.
   Page-specific variants (e.g. .ls-device-sidebar in device-single.css)
   win by specificity, so no !important is needed here.
   ========================================================= */

/* Widget card shell (beats GeneratePress .widget padding/margin by specificity) */
.widget-area .widget:has(> .ls-sidebar-widget),
.widget-area .widget:has(> .ls-sidebar-heading) {
    box-sizing: border-box;
    margin-bottom: 18px;
    padding: 10px 11px;
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 5px;
    box-shadow: none;
}

.ls-sidebar-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px;
    padding: 0;
}
.ls-sidebar-heading-title {
    margin: 0;
    padding: 0;
    color: #172337;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 750;
}
.ls-sidebar-view-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #0878e8;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}
.ls-sidebar-heading .ls-sidebar-view-all {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}

.ls-sidebar-widget,
.ls-sidebar-widget * { box-sizing: border-box; }
.ls-sidebar-widget { color: #172337; font-size: 12px; }
.ls-sidebar-empty { margin: 8px 0; color: #667085; font-size: 12px; }

/* Best Reviewed */
.ls-best-reviewed-list { margin: 0; padding: 0; list-style: none; }
.ls-best-reviewed-item {
    display: grid;
    grid-template-columns: 18px 72px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e7edf4;
}
.ls-best-reviewed-rank {
    color: #34445a;
    font-size: 12px;
    font-weight: 750;
    text-align: center;
}
.ls-best-reviewed-type {
    display: block;
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
    line-height: 1.3;
}
.ls-best-reviewed-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center; /* level with the middle of the review title */
    min-width: 34px;
    min-height: 26px;
    padding: 4px 7px;
    border-radius: 5px;
    background: #16803d;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

/* Popular Articles */
.ls-popular-news-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e7edf4;
}
.ls-popular-news-meta {
    margin: 4px 0 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.35;
}

/* Shared thumbnail + title */
.ls-best-reviewed-thumb,
.ls-popular-news-thumb {
    display: block;
    flex-shrink: 0;
    width: 72px;
    height: 64px;
    overflow: hidden;
    background: #f2f5f8;
    border: 1px solid #e5ebf2;
    border-radius: 5px;
}
.ls-best-reviewed-thumb img,
.ls-popular-news-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
.ls-best-reviewed-info,
.ls-popular-news-info { min-width: 0; }
.ls-best-reviewed-title,
.ls-popular-news-title {
    display: -webkit-box;
    overflow: hidden;
    color: #172337;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.ls-best-reviewed-title:hover,
.ls-popular-news-title:hover { color: #0878e8; }

.ls-best-reviewed-item:last-child,
.ls-popular-news-item:last-child { border-bottom: 0; }

/* =========================================================
   Sidebar post links: #071D33, never underlined.
   Covers LumiSchema's widgets and plain WordPress widgets (Recent Posts,
   Categories...) in the GeneratePress sidebar and the device page sidebar.
   Two classes + element so GeneratePress's Customizer ".sidebar .widget a"
   colour does not win.
   ========================================================= */
.widget-area .widget a.ls-best-reviewed-title,
.widget-area .widget a.ls-popular-news-title,
.widget-area .widget a.ls-related-device-title,
.widget-area .widget ul li > a,
.ls-device-sidebar .widget a.ls-best-reviewed-title,
.ls-device-sidebar .widget a.ls-popular-news-title,
.ls-device-sidebar .widget a.ls-related-device-title,
.ls-device-sidebar .widget ul li > a {
    color: #071D33;
    text-decoration: none;
}
.widget-area .widget a.ls-best-reviewed-title:hover,
.widget-area .widget a.ls-popular-news-title:hover,
.widget-area .widget a.ls-related-device-title:hover,
.widget-area .widget ul li > a:hover,
.ls-device-sidebar .widget a.ls-best-reviewed-title:hover,
.ls-device-sidebar .widget a.ls-popular-news-title:hover,
.ls-device-sidebar .widget a.ls-related-device-title:hover,
.ls-device-sidebar .widget ul li > a:hover {
    color: #0878e8;
}
/* No underline on any sidebar link, in any state. */
.widget-area .widget a,
.widget-area .widget a:hover,
.widget-area .widget a:focus,
.ls-device-sidebar .widget a,
.ls-device-sidebar .widget a:hover,
.ls-device-sidebar .widget a:focus {
    text-decoration: none;
}

/* =========================================================
   Quick Tools widget (LumiSchema — Quick Tools)
   ========================================================= */
.ls-quick-tools { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.widget-area .widget .ls-quick-tools li,
.ls-device-sidebar .widget .ls-quick-tools li { margin: 0; padding: 0; border: 0; }
.ls-quick-tool {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e1e9f4;
    border-radius: 8px;
    color: #071D33 !important;
    text-decoration: none !important;
}
.ls-quick-tool:hover,
.ls-quick-tool:focus-visible { border-color: #0878e8; background: #f5f9ff; }
/* Icon: solid brand-blue circle with a white icon, a little larger. */
.ls-quick-tool-icon {
    display: flex;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0b5fd8;
    color: #fff;
    box-shadow: 0 2px 6px rgba(11, 95, 216, .25);
}
.ls-quick-tool:hover .ls-quick-tool-icon,
.ls-quick-tool:focus-visible .ls-quick-tool-icon { background: #0849a8; }
.ls-quick-tool-icon svg,
.ls-quick-tool-arrow svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ls-quick-tool-icon svg { width: 21px; height: 21px; stroke-width: 2.1; }
.ls-quick-tool-label { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; line-height: 1.4; }
.ls-quick-tool-arrow { display: flex; color: #64748b; }
.ls-quick-tool-arrow svg { width: 14px; height: 14px; stroke-width: 2.4; }

/* =========================================================
   SIDEBAR TITLES: 16px, in a box (every sidebar, every widget)
   LumiSchema widgets (.ls-sidebar-heading, with its "View All" link inside
   the box) and plain WordPress widgets (.widget-title, block headings).
   IDs in the selectors beat layout-system.css's generic .widget-title.
   ========================================================= */
.widget-area .widget .ls-sidebar-heading,
.ls-device-sidebar .widget .ls-sidebar-heading,
body #right-sidebar .widget .widget-title,
body #secondary .widget .widget-title,
body .ls-device-sidebar .widget .widget-title,
body #right-sidebar .widget > h2.wp-block-heading:first-child,
body #secondary .widget > h2.wp-block-heading:first-child,
body #right-sidebar .widget .wp-block-group__inner-container > h2.wp-block-heading:first-child,
body #secondary .widget .wp-block-group__inner-container > h2.wp-block-heading:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 9px 12px;
    background: #edf4ff;
    border: 1px solid #d6e4fb;
    border-left: 4px solid #0b5fd8;
    border-radius: 8px;
    color: #071D33;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 800;
}
.widget-area .widget .ls-sidebar-heading .ls-sidebar-heading-title,
.ls-device-sidebar .widget .ls-sidebar-heading .ls-sidebar-heading-title {
    margin: 0;
    padding: 0;
    color: #071D33;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 800;
}
.widget-area .widget .ls-sidebar-heading .ls-sidebar-view-all,
.ls-device-sidebar .widget .ls-sidebar-heading .ls-sidebar-view-all {
    color: #0b5fd8;
    font-size: 12px;
    font-weight: 700;
}
.widget-area .widget .ls-sidebar-heading .ls-sidebar-view-all:hover,
.ls-device-sidebar .widget .ls-sidebar-heading .ls-sidebar-view-all:hover { color: #0849a8; }

/* =========================================================
   RELATED DEVICES widget (LumiSchema — Related Devices)
   Picture, name, brand · price, and an arrow. Same look in every sidebar.
   ========================================================= */
.ls-related-devices-list { display: flex; flex-direction: column; }
.ls-related-device-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
    border-bottom: 1px solid #e7edf4;
}
.ls-related-device-item:last-child { border-bottom: 0; padding-bottom: 2px; }
.ls-related-device-item:first-child { padding-top: 2px; }
.ls-related-device-thumb {
    display: flex;
    flex: 0 0 56px;
    width: 56px;
    height: 64px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f2f5f8;
    border: 1px solid #e5ebf2;
    border-radius: 7px;
}
.ls-related-device-thumb img {
    display: block;
    width: auto;
    height: auto;
    max-width: 48px;
    max-height: 58px;
    object-fit: contain;
}
.ls-related-device-thumb .ls-cmp-noimg { display: flex; color: #9fb3cf; }
.ls-related-device-thumb .ls-cmp-noimg svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ls-related-device-info { flex: 1; min-width: 0; }
.widget-area .widget a.ls-related-device-title,
.ls-device-sidebar .widget a.ls-related-device-title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ls-related-device-type {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #667085;
    font-size: 12px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.widget-area .widget a.ls-related-device-go,
.ls-device-sidebar .widget a.ls-related-device-go {
    display: flex;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9e6fa;
    border-radius: 50%;
    background: #fff;
    color: #0b5fd8;
}
.ls-related-device-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.widget-area .widget .ls-related-device-item:hover a.ls-related-device-go,
.ls-device-sidebar .widget .ls-related-device-item:hover a.ls-related-device-go,
.widget-area .widget a.ls-related-device-go:focus-visible,
.ls-device-sidebar .widget a.ls-related-device-go:focus-visible { background: #0b5fd8; border-color: #0b5fd8; color: #fff; }

/* Plain WordPress list widgets (Categories, Recent Posts…) on the device page
   sidebar: same look as in the GeneratePress sidebar (layout-system.css). */
.ls-device-sidebar .widget ul:not(.ls-quick-tools):not(.ls-best-reviewed-list) { margin: 0; padding: 0; list-style: none; }
.ls-device-sidebar .widget ul:not(.ls-quick-tools):not(.ls-best-reviewed-list) > li { margin: 0; padding: 8px 0; border-bottom: 1px solid #e6edf5; }
.ls-device-sidebar .widget ul:not(.ls-quick-tools):not(.ls-best-reviewed-list) > li:last-child { border-bottom: 0; }

/* Quick Tools: multicolour icons on a soft tile instead of a solid blue circle. */
.ls-quick-tool-icon,
.ls-quick-tool:hover .ls-quick-tool-icon,
.ls-quick-tool:focus-visible .ls-quick-tool-icon { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.ls-quick-tool-icon svg.ls-ico { width: 32px; height: 32px; }
.ls-related-device-thumb .ls-cmp-noimg svg.ls-ico { width: 26px; height: 26px; }