/*
Theme Name: LinkedIn Console
Author: You
Version: 1.0
Text Domain: linkedin-console
*/

:root{
  --bg:#f3f2ef;
  --card:#ffffff;
  --text:#1f2328;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow: 0 1px 2px rgba(0,0,0,.06);
  --radius: 12px;
  --max: 1120px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.header-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  gap: 12px;
}
.brand{
  font-weight: 700;
  letter-spacing: .2px;
}
.site-header .search{
  flex:1;
  display:flex;
}
.site-header .search input{
  width:100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background:#f9fafb;
  outline:none;
}

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 16px;
}

.layout{
  display:grid;
  grid-template-columns: 260px 1fr 320px;
  gap: 18px;
  align-items:start;
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.pad{ padding: 14px; }

.sticky{
  position: sticky;
  top: 72px; /* below header */
}

.nav-title{
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing:.08em;
}

.cat-list, .widget-list{ list-style:none; padding:0; margin:0; }
.cat-list li a{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
}
.cat-list li a:hover{
  background:#f3f4f6;
  text-decoration:none;
}
.recent-posts li{
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.recent-posts a{
  display: block;
  font-weight: 600;
}
.recent-meta{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.feed-card{
  padding: 14px;
}
.post-thumb{
  display: block;
  margin: 12px 0 6px;
  border-radius: 10px;
  overflow: hidden;
}
.post-thumb img{
  width: 100%;
  height: auto;
  display: block;
}
.post-meta{
  font-size: 13px;
  color: var(--muted);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.post-title{
  margin: 8px 0 8px;
  font-size: 20px;
  line-height: 1.25;
}
.post-excerpt{
  margin: 0;
  color:#374151;
  line-height:1.6;
}
.entry-excerpt p{
  margin: 0;
  color:#374151;
  line-height:1.6;
}
.view-more{
  margin-top: 6px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--text);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.view-more:hover{
  text-decoration: none;
}
.entry-full{
  margin-top: 10px;
}
.post-tags{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.post-tag{
  font-size: 13px;
  color: var(--muted);
}
.post-tag:hover{
  color: var(--text);
  text-decoration: none;
}
.post-actions{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display:flex;
  gap: 14px;
  color: var(--muted);
  font-size: 14px;
}
.post-actions a:hover{ text-decoration:none; color: var(--text); }

.single-content{
  padding: 16px;
}
.single-content h1{
  margin: 0 0 10px;
  font-size: 28px;
}
.single-content .entry-content{
  line-height: 1.75;
  color:#111827;
}
.single-content img{
  max-width:100%;
  height:auto;
  border-radius: 10px;
}
.single-thumb{
  margin: 0 0 14px;
}
.single-thumb img{
  width: 100%;
  height: auto;
  display: block;
}

.site-footer{
  max-width: var(--max);
  margin: 22px auto 40px;
  padding: 0 16px;
  color: var(--muted);
  font-size: 13px;
}
/* Reactions + share row */
.reaction-row{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.reactions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.react-btn, .share-btn{
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--muted);
  display:inline-flex;
  align-items:center;
  gap: 8px;
  cursor: pointer;
  user-select:none;
}
.react-btn:hover, .share-btn:hover{
  color: var(--text);
  border-color: #d1d5db;
  text-decoration:none;
}

.share-actions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Highlight current category in left list */
.cat-list .current-cat > a,
.cat-list .current-cat-parent > a{
  background:#eef2ff;
  border: 1px solid #dbeafe;
  text-decoration:none;
  color: var(--text);
  font-weight: 600;
}
.cat-list .current-cat a:hover,
.cat-list .current-cat-parent a:hover{
  background:#e0e7ff;
}

/* Icon buttons (LinkedIn-like) */
.reaction-row{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.btn-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* icon pill */
.icon-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background:#fff;
  border-radius: 999px;
  color: var(--muted);
  cursor:pointer;
  text-decoration:none;
  line-height: 1;
  font-size: 14px;
}
.icon-btn:hover{
  color: var(--text);
  border-color:#d1d5db;
  text-decoration:none;
}

.icon-btn svg{
  width: 18px;
  height: 18px;
  display:block;
  fill: currentColor;
}

/* if you want TRUE icon-only (no text) */
.icon-only{
  padding: 10px;
  gap: 0;
}
.icon-only .btn-label{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
/* CATEGORY BADGE (LinkedIn-style) */
.cat-list li a{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  text-decoration:none;
}

.cat-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-count{
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1;
}

/* Active category */
.cat-list .current-cat > a{
  background:#eef2ff;
  border: 1px solid #dbeafe;
  font-weight:600;
}

.cat-list .current-cat .cat-count{
  background:#e0e7ff;
  border-color:#c7d2fe;
}

/* Hover polish */
.cat-list li a:hover{
  background:#f9fafb;
}

/* One-line icon rows that scroll horizontally (no scrollbar shown) */
.reaction-row{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.btn-row{
  display:flex;
  flex-wrap: nowrap;           /* single line */
  align-items:center;
  justify-content:flex-start;  /* left align */
  gap: 10px;

  overflow-x: auto;            /* scroll if overflow */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;

  padding-bottom: 2px;         /* slight room for iOS bounce */
}

/* hide scrollbar but keep scrolling */
.btn-row::-webkit-scrollbar{ height: 0; width: 0; }
.btn-row{ scrollbar-width: none; } /* Firefox */
.btn-row::-webkit-scrollbar-thumb{ background: transparent; }

.icon-btn{
  flex: 0 0 auto;              /* prevent shrinking/wrapping */
}

/* optional: nicer “pill” circles already in your UI */
.icon-btn.icon-only{
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
}
.single-share-inline .reaction-row{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  align-items: flex-start;
}
.single-share-inline .btn-row{
  padding-bottom: 0;
  justify-content: flex-start;
  margin-bottom: 4px;
}
.single-share-inline{
  margin: 6px 0 2px;
}

/* Prevent center column from shrinking/collapsing in edge cases (search, empty states) */
.center-col{
  min-width: 0;
}
.header-inner{
  flex-wrap: nowrap;
}
.site-header .search{
  min-width: 220px;
}

/* HARDEN THE GRID: prevent overflow from breaking layout */
.container{ max-width: var(--max); margin: 0 auto; padding: 18px 16px; }

.layout{
  display: grid;
  grid-template-columns: 260px 1fr 320px;
  gap: 18px;
  align-items: start;

  /* critical */
  width: 100%;
  max-width: 100%;
}

.left-col, .center-col, .right-col{
  min-width: 0;     /* critical for grid overflow */
}

.center-col{
  min-width: 0;     /* ensures long content doesn't expand grid */
}

.card, .feed-card, .single-content{
  min-width: 0;
}

/* If any long strings/URLs appear in excerpts, stop them from stretching layout */
.post-excerpt, .entry-content, .widget, .widget *{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.header-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  gap: 12px;

  /* critical */
  width: 100%;
  min-width: 0;
}

.site-header .search{ flex: 1; min-width: 220px; }
.site-header .search input{ min-width: 0; }
.site-header nav{ flex: 0 0 auto; }

/* Responsive */
@media (max-width: 1024px){
  .layout{ grid-template-columns: 240px 1fr; }
  .right-col{ display:none; }
}
@media (max-width: 760px){
  .layout{ grid-template-columns: 1fr; }
  .left-col{ display:none; }
  .sticky{ position: static; }
  .header-inner{ gap: 10px; }
}

/* ====== CRITICAL GRID FIX (prevents search layout break) ====== */

/* Stop any horizontal overflow from shifting header/footer visually */
html, body{
  width: 100%;
  overflow-x: hidden;
}

/* Make header/footer span full width consistently */
.site-header, .site-footer{
  width: 100%;
  max-width: none;
}

/* Keep the footer text centered like before */
.site-footer > div{
  max-width: var(--max);
  margin: 22px auto 40px;
  padding: 0 16px;
  color: var(--muted);
  font-size: 13px;
}

/* IMPORTANT: use minmax(0, 1fr) instead of 1fr to prevent grid blowouts */
.layout{
  grid-template-columns: 260px minmax(0, 1fr) 320px !important;
  width: 100%;
  max-width: 100%;
}
.layout.layout-single{
  grid-template-columns: 260px minmax(0, 1fr) !important;
}

/* Ensure children are allowed to shrink inside grid */
.left-col, .center-col, .right-col{
  min-width: 0;
}

/* On medium screens */
@media (max-width: 1024px){
  .layout{
    grid-template-columns: 240px minmax(0, 1fr) !important;
  }
  .layout.layout-single{
    grid-template-columns: 240px minmax(0, 1fr) !important;
  }
}
@media (max-width: 760px){
  .layout.layout-single{
    grid-template-columns: 1fr !important;
  }
}