/* BLE Social Widgets Portable
 * Styles for X feed widget + Facebook-like shell wrapper.
 */

:root {
--ble-fb-widget-title-size: 16px;
--ble-fb-widget-title-line-height: 1.15;
--ble-fb-widget-bg: #18202b;
--ble-fb-widget-border: #2b3a4d;
--ble-fb-widget-shadow: 0 6px 16px rgba(8, 15, 27, 0.28);
--ble-fb-widget-heading-color: #e8eef7;
--ble-fb-widget-inner-bg: #121925;
--ble-fb-widget-iframe-filter: none;
--ble-x-widget-bg: #ffffff;
--ble-x-widget-border: #e7ebf1;
--ble-x-widget-text: #232d39;
--ble-x-widget-title-size: 16px;
--ble-x-widget-media-filter: none;
--ble-ig-widget-title-size: 16px;
--ble-ig-widget-bg: #18202b;
--ble-ig-widget-border: #2b3a4d;
--ble-ig-widget-heading-color: #e8eef7;
--ble-ig-widget-media-filter: none;
}

/* Instagram widget harmonization (g1-socials). */
.widget_g1_socials_instagram,
.widget-area .widget_g1_socials_instagram,
#secondary .widget_g1_socials_instagram {
background: var(--ble-ig-widget-bg);
border: 1px solid var(--ble-ig-widget-border);
border-radius: 12px;
padding: 14px;
box-shadow: var(--ble-fb-widget-shadow);
}

.widget_g1_socials_instagram .widget-title,
.widget_g1_socials_instagram .wp-block-heading,
.widget_g1_socials_instagram h2,
.widget_g1_socials_instagram h3,
.widget-area .widget_g1_socials_instagram .widget-title,
.widget-area .widget_g1_socials_instagram .wp-block-heading,
.widget-area .widget_g1_socials_instagram h2,
.widget-area .widget_g1_socials_instagram h3,
#secondary .widget_g1_socials_instagram .widget-title,
#secondary .widget_g1_socials_instagram .wp-block-heading,
#secondary .widget_g1_socials_instagram h2,
#secondary .widget_g1_socials_instagram h3 {
font-size: var(--ble-ig-widget-title-size) !important;
line-height: var(--ble-fb-widget-title-line-height) !important;
color: var(--ble-ig-widget-heading-color) !important;
text-transform: none;
letter-spacing: 0.01em;
}

.widget_g1_socials_instagram .g1-instagram-item > a,
.widget-area .widget_g1_socials_instagram .g1-instagram-item > a,
#secondary .widget_g1_socials_instagram .g1-instagram-item > a {
border-radius: 8px;
overflow: hidden;
background: var(--ble-ig-widget-bg);
border: 1px solid var(--ble-ig-widget-border);
}

.widget_g1_socials_instagram .g1-instagram-item > a img,
.widget-area .widget_g1_socials_instagram .g1-instagram-item > a img,
#secondary .widget_g1_socials_instagram .g1-instagram-item > a img {
border-radius: 8px;
filter: var(--ble-ig-widget-media-filter);
}

.widget_g1_socials_instagram .g1-instagram-follow,
.widget_g1_socials_instagram .g1-instagram-profile,
.widget_g1_socials_instagram .g1-instagram-follow-label,
.widget_g1_socials_instagram .g1-instagram-username {
color: var(--ble-ig-widget-heading-color);
}

/* Sidebar Facebook widget title: strong override for all heading variants. */
.widget:has(.fb-page) .widget-title,
.widget:has(.fb-page) .wp-block-heading,
.widget:has(.fb-page) h1,
.widget:has(.fb-page) h2,
.widget:has(.fb-page) h3,
.widget:has(.fb_iframe_widget) .widget-title,
.widget:has(.fb_iframe_widget) .wp-block-heading,
.widget:has(.fb_iframe_widget) h1,
.widget:has(.fb_iframe_widget) h2,
.widget:has(.fb_iframe_widget) h3,
.widget:has(iframe[src*="facebook.com/plugins/page.php"]) .widget-title,
.widget:has(iframe[src*="facebook.com/plugins/page.php"]) .wp-block-heading,
.widget:has(iframe[src*="facebook.com/plugins/page.php"]) h1,
.widget:has(iframe[src*="facebook.com/plugins/page.php"]) h2,
.widget:has(iframe[src*="facebook.com/plugins/page.php"]) h3 {
font-size: var(--ble-fb-widget-title-size) !important;
line-height: var(--ble-fb-widget-title-line-height) !important;
text-transform: none !important;
}

/* Sidebar Facebook widget dark version. */
.widget:has(.fb-page),
.widget:has(.fb_iframe_widget),
.widget:has(iframe[src*="facebook.com/plugins/page.php"]) {
background: var(--ble-fb-widget-bg);
border: 1px solid var(--ble-fb-widget-border);
border-radius: 12px;
padding: 14px;
box-shadow: var(--ble-fb-widget-shadow);
}

.widget:has(.fb-page) .widget-title,
.widget:has(.fb-page) .wp-block-heading,
.widget:has(.fb-page) h1,
.widget:has(.fb-page) h2,
.widget:has(.fb-page) h3,
.widget:has(.fb_iframe_widget) .widget-title,
.widget:has(.fb_iframe_widget) .wp-block-heading,
.widget:has(.fb_iframe_widget) h1,
.widget:has(.fb_iframe_widget) h2,
.widget:has(.fb_iframe_widget) h3,
.widget:has(iframe[src*="facebook.com/plugins/page.php"]) .widget-title,
.widget:has(iframe[src*="facebook.com/plugins/page.php"]) .wp-block-heading,
.widget:has(iframe[src*="facebook.com/plugins/page.php"]) h1,
.widget:has(iframe[src*="facebook.com/plugins/page.php"]) h2,
.widget:has(iframe[src*="facebook.com/plugins/page.php"]) h3 {
color: var(--ble-fb-widget-heading-color) !important;
letter-spacing: 0.01em;
}

.widget:has(.fb-page) .fb_iframe_widget,
.widget:has(.fb_iframe_widget) .fb_iframe_widget,
.widget:has(iframe[src*="facebook.com/plugins/page.php"]) .fb_iframe_widget {
display: block;
border-radius: 10px;
overflow: hidden;
background: var(--ble-fb-widget-inner-bg);
}

.widget:has(.fb-page) iframe[src*="facebook.com/plugins/page.php"],
.widget:has(.fb_iframe_widget) iframe[src*="facebook.com/plugins/page.php"],
.widget:has(iframe[src*="facebook.com/plugins/page.php"]) iframe[src*="facebook.com/plugins/page.php"] {
filter: var(--ble-fb-widget-iframe-filter);
}

.ble-x-feed-widget {
border: 1px solid var(--ble-x-widget-border);
border-radius: 12px;
padding: 12px;
background: var(--ble-x-widget-bg);
box-shadow: 0 6px 18px rgba(12, 24, 44, 0.06);
}

.ble-x-feed-header {
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--ble-x-widget-border);
}

.ble-x-feed-profile-card {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: inherit;
}

.ble-x-feed-profile-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}

.ble-x-feed-profile-name {
font-size: 0.98rem;
font-weight: 700;
color: var(--ble-x-widget-text);
}

.ble-x-feed-profile-handle {
font-size: 0.8rem;
color: var(--ble-x-widget-text);
opacity: 0.78;
}

.ble-x-feed-widget ul {
margin: 0;
padding: 0;
list-style: none;
}

.ble-x-feed-item {
margin: 0;
padding: 10px 0;
border-top: 1px solid var(--ble-x-widget-border);
}

.ble-x-feed-item:first-child {
padding-top: 4px;
border-top: 0;
}

.ble-x-feed-link {
display: block;
border-radius: 10px;
padding: 10px 11px;
background: var(--ble-x-widget-bg);
border: 1px solid var(--ble-x-widget-border);
color: var(--ble-x-widget-text);
text-decoration: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ble-x-feed-link:hover,
.ble-x-feed-link:focus {
border-color: var(--ble-x-widget-border);
box-shadow: 0 5px 14px rgba(17, 41, 82, 0.07);
background-color: var(--ble-x-widget-bg);
text-decoration: none;
}

.ble-x-feed-topline {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}

.ble-x-feed-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--ble-x-widget-border);
filter: var(--ble-x-widget-media-filter);
}

.ble-x-feed-author-line {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
flex-wrap: wrap;
}

.ble-x-feed-author-name {
font-size: 0.88rem;
font-weight: 700;
color: var(--ble-x-widget-text);
}

.ble-x-feed-author-handle {
font-size: 0.82rem;
color: var(--ble-x-widget-text);
opacity: 0.78;
}

.ble-x-feed-topline time {
font-size: 0.78rem;
font-weight: 500;
color: var(--ble-x-widget-text);
opacity: 0.72;
}

.ble-x-feed-brand {
margin-left: auto;
font-weight: 800;
font-size: 1.05rem;
line-height: 1;
color: var(--ble-x-widget-text);
}

.ble-x-feed-excerpt {
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
color: var(--ble-x-widget-text);
}

.ble-x-feed-media {
display: block;
width: 100%;
height: auto;
max-height: 220px;
aspect-ratio: 4 / 3;
object-fit: cover;
margin-top: 10px;
border-radius: 10px;
border: 1px solid var(--ble-x-widget-border);
filter: var(--ble-x-widget-media-filter);
}

.ble-x-feed-widget a:hover,
.ble-x-feed-widget a:focus {
color: var(--ble-x-widget-text);
text-decoration: none;
}

.ble-x-feed-widget--dark {
background: #15202b;
border-color: #2f3e4e;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
color: #e7ecf0;
}

.ble-x-feed-widget--dark .ble-x-feed-header {
border-bottom-color: #2a3a4c;
}

.ble-x-feed-widget--dark .ble-x-feed-profile-name,
.ble-x-feed-widget--dark .ble-x-feed-author-name,
.ble-x-feed-widget--dark .ble-x-feed-brand {
color: #e7ecf0;
}

.ble-x-feed-widget--dark .ble-x-feed-profile-handle,
.ble-x-feed-widget--dark .ble-x-feed-author-handle,
.ble-x-feed-widget--dark .ble-x-feed-topline time,
.ble-x-feed-widget--dark .ble-x-feed-excerpt {
color: #8b9ab1;
}

.ble-x-feed-widget--dark .ble-x-feed-item,
.ble-x-feed-widget--dark .ble-x-feed-link,
.ble-x-feed-widget--dark .ble-x-feed-avatar,
.ble-x-feed-widget--dark .ble-x-feed-media {
border-color: #2a3a4c;
}

.ble-x-feed-widget--dark .ble-x-feed-link {
background: #192734;
}

.ble-x-feed-widget--compact {
padding: 8px 10px;
box-shadow: none;
}

.ble-x-feed-widget--compact .ble-x-feed-header {
margin-bottom: 4px;
padding-bottom: 6px;
}

.ble-x-feed-widget--compact .ble-x-feed-item {
padding: 6px 0;
}

.ble-x-feed-widget--compact .ble-x-feed-link {
padding: 7px 9px;
}

.ble-x-feed-widget--compact .ble-x-feed-topline {
margin-bottom: 5px;
gap: 6px;
}

.ble-x-feed-widget--compact .ble-x-feed-avatar {
width: 26px;
height: 26px;
}

/* ── X widget inside its dark shell ── */
/* Outer shell: dark, controlled by x_shell_* settings. */
.ble-social-shell--x.ble-social-shell--facebook {
--ble-x-widget-media-filter: var(--ble-x-shell-media-filter);
--ble-x-widget-title-size: var(--ble-x-shell-title-size);
background: var(--ble-x-shell-bg) !important;
border: 1px solid var(--ble-x-shell-border) !important;
border-radius: 12px;
padding: 14px;
box-shadow: var(--ble-fb-widget-shadow);
}

.ble-social-shell--x.ble-social-shell--facebook .ble-social-shell__title {
margin: 0 0 10px;
font-size: var(--ble-x-shell-title-size);
line-height: var(--ble-fb-widget-title-line-height);
font-weight: 700;
text-transform: none !important;
letter-spacing: 0.01em;
color: var(--ble-x-shell-heading-color);
}

/* White inner panel — mirrors the white Facebook iframe. */
.ble-social-shell--x.ble-social-shell--facebook .ble-social-shell__body {
background: #ffffff !important;
border: 1px solid var(--ble-x-widget-border) !important;
border-radius: 10px;
overflow: hidden;
}

/* Inner widget: transparent, no extra border/shadow. */
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-widget,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-widget--dark,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-widget--compact {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 6px 10px !important;
color: var(--ble-x-widget-text) !important;
}

/* Profile header separator. */
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-header {
background: transparent !important;
border-bottom: 1px solid var(--ble-x-widget-border) !important;
margin-bottom: 6px !important;
padding-bottom: 10px !important;
}

/* Tweets: flat list — just a top divider, no individual card frame. */
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-item {
border-top: 1px solid var(--ble-x-widget-border) !important;
padding: 0 !important;
}

.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-item:first-child {
border-top: 0 !important;
}

.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-link {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 8px 0 !important;
color: var(--ble-x-widget-text) !important;
}

.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-link:hover,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-link:focus {
background: rgba(0, 0, 0, 0.03) !important;
box-shadow: none !important;
}

/* Hide redundant per-tweet mini-avatar (already shown in profile header). */
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-topline .ble-x-feed-avatar {
display: none !important;
}

.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-topline {
margin-bottom: 5px !important;
}

/* All text uses natural dark widget colors. */
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-profile-name,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-profile-handle,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-author-name,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-author-handle,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-topline time,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-brand,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-excerpt,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-widget a,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-widget p,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-widget time {
color: var(--ble-x-widget-text) !important;
opacity: 1 !important;
}

.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-avatar {
border-color: var(--ble-x-widget-border) !important;
}

.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-media {
border-radius: 8px !important;
border-color: var(--ble-x-widget-border) !important;
}

/* No underlines anywhere inside. */
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-link,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-link *,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-widget a,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-widget a *,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-link:hover,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-link:focus,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-widget a:hover,
.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-widget a:focus {
text-decoration: none !important;
}

.ble-social-shell--x.ble-social-shell--facebook .ble-x-feed-excerpt {
line-height: 1.55;
word-break: break-word;
}

@media (max-width: 767px) {
.ble-x-feed-widget {
padding: 10px;
border-radius: 10px;
}

.ble-x-feed-link {
padding: 9px 10px;
}

.ble-x-feed-excerpt {
font-size: 0.86rem;
}

.ble-x-feed-media {
max-height: 160px;
}

.ble-x-feed-author-line {
gap: 4px;
}
}