/* PSG Top News — Fix: underline directly under title + off-white card + refined hover
   Put: wp-content/themes/your-child-theme/css/psg-top-news.css
*/

:root{
  --psg-dark: #172a4e;
  --psg-red: #d32f63;         /* date red */
  --psg-yellow: #FFC72C;      /* newsletter yellow */
  --psg-card-bg: #f6f8fa;     /* off-white (not pure white) */
  --psg-muted: #8a8a8a;
  --psg-border: rgba(23,42,78,0.06);
  --psg-divider: rgba(23,42,78,0.10); /* navy-ish divider */
}

/* widget spacing */
.widget_psg_top_news_widget,
.psg-top-news-widget,
.widget .psg-top-news-list {
  margin-top: 30px;
}

/* box wrapper (slightly off-white now) */
.widget_psg_top_news_widget,
.psg-top-news-widget {
  background: var(--psg-card-bg);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(23,42,78,0.04);
  border: 1px solid var(--psg-border);
  overflow: visible;
}

/* Header / title: left aligned and prominent
   Use <span class="psg-title-wrap"> inside the title for precise underline placement.
*/
.widget_psg_top_news_widget .widget-title,
.psg-top-news-widget .widget-title {
  display: block;           /* block so underline goes under the text */
  margin: 0 0 12px 0;
  font-size: 28px;
  color: var(--psg-dark);
  font-weight: 900;
  letter-spacing: .2px;
  text-transform: none;
  position: relative;
  line-height: 1.05;
}

/* Ensure the span wrapper is inline-block and positioned relative */
.widget_psg_top_news_widget .widget-title .psg-title-wrap,
.psg-top-news-widget .widget-title .psg-title-wrap {
  display: inline-block;
  position: relative;
  padding-bottom: 6px;
}

/* THE UNDERLINE: placed directly under the title text */
.widget_psg_top_news_widget .widget-title .psg-title-wrap::after,
.psg-top-news-widget .widget-title .psg-title-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;              /* places the yellow bar under the text */
  width: 110px;               /* adjust length if needed */
  height: 8px;                /* thickness */
  background: linear-gradient(90deg, var(--psg-yellow), #ffd76a);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(255,199,44,0.09);
  transition: transform .28s ease, opacity .22s ease;
  transform-origin: left center;
}

/* Fallback: if no .psg-title-wrap span exists (best-effort) */
.widget_psg_top_news_widget .widget-title:not(:has(.psg-title-wrap))::after,
.psg-top-news-widget .widget-title:not(:has(.psg-title-wrap))::after {
  content: "";
  display: block;
  margin-top: 8px;
  width: 110px;
  height: 8px;
  background: linear-gradient(90deg, var(--psg-yellow), #ffd76a);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(255,199,44,0.09);
}

/* List layout (compact) */
.psg-top-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Row */
.psg-top-news-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* thumbnail compact with overlay for hover */
.psg-top-news-thumbnail {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 64px;
  background: #eef1f4;
  box-shadow: 0 6px 18px rgba(23,42,78,0.04);
  position: relative;
}
.psg-top-news-thumbnail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.14));
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.psg-top-news-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s cubic-bezier(.2,.9,.2,1), filter .35s ease;
  will-change: transform;
}

/* content */
.psg-top-news-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* title */
.psg-top-news-title {
  margin: 0;
  font-size: 17px;
  color: var(--psg-dark);
  font-weight: 700;
  line-height: 1.06;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* date: calendar icon yellow, date text red */
.psg-top-news-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--psg-red);
  font-size: 13px;
  font-weight: 600;
}
.psg-top-news-date i,
.psg-top-news-date .fa,
.psg-top-news-date .fas {
  color: var(--psg-yellow) !important; /* calendar icon yellow */
  font-size: 16px;
}

/* navy divider between posts */
.psg-top-news-item + .psg-top-news-item {
  padding-top: 12px;
  border-top: 1px solid var(--psg-divider);
  margin-top: 0;
}

/* hover effect for the row: smooth lift, deeper shadow; image zoom + overlay visible */
.psg-top-news-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease, background .18s ease;
  color: inherit;
  transform-origin: center;
}
.psg-top-news-link:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(23,42,78,0.12);
  background: rgba(23,42,78,0.02);
}
.psg-top-news-link:hover .psg-top-news-thumbnail img {
  transform: scale(1.08);
  filter: saturate(1.04) contrast(1.02);
}
.psg-top-news-link:hover .psg-top-news-thumbnail::before {
  opacity: 0.18;
}

/* accessibility */
.psg-top-news-link:focus {
  outline: 3px solid rgba(23,42,78,0.06);
  outline-offset: 3px;
}

/* responsive tweaks */
@media (max-width: 480px) {
  .widget_psg_top_news_widget,
  .psg-top-news-widget { padding: 12px; }
  .psg-top-news-thumbnail { width: 60px; height: 60px; border-radius: 10px; }
  .psg-top-news-title { font-size: 15px; }
  .widget_psg_top_news_widget .widget-title .psg-title-wrap::after,
  .psg-top-news-widget .widget-title .psg-title-wrap::after {
    width: 80px;
    bottom: -8px;
  }
}