/* PSG Categories Widget - menu-only card style (updated: no internal scrollbar, end-message and active state)
   Modified: larger yellow underline under .psg-filter-title to match Top News style.
*/
.psg-filter-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 6px 18px rgba(18,32,63,0.06);
    border: 1px solid #eef1f6;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #16304a;
}

/* Title (only shows when widget title is set) */
.psg-filter-title {
    font-size: 20px;
    margin: 0 0 12px 0;
    font-weight: 700;
    color: #123153;
    position: relative;
    padding-bottom: 16px; /* increased to make room for thicker underline */
}

/* ENLARGED YELLOW UNDERLINE (matched to Top News style) */
.psg-filter-title:after {
    content: "";
    display: block;
    width: 110px;       /* increased length */
    height: 8px;        /* increased thickness */
    background: linear-gradient(90deg, #FFC72C, #ffd76a);
    margin-top: 8px;    /* keep a small gap between text and bar */
    border-radius: 6px; /* rounded ends like Top News */
    box-shadow: 0 6px 18px rgba(255,199,44,0.09);
}

/* Search */
.psg-search-wrap { margin-bottom: 14px; }
.psg-search-field {
    display:flex;
    gap:8px;
    align-items:center;
    background:#fafbfc;
    border:1px solid #e6edf6;
    padding:8px 10px;
    border-radius:10px;
}
.psg-cat-search {
    flex:1;
    border:0;
    outline:none;
    background:transparent;
    font-size:14px;
    color:#223046;
    padding:6px 4px;
}

/* Search button: red background with white SVG icon; icon becomes yellow on hover */
.psg-search-btn {
    background: #d83b3b; /* red button */
    border: none;
    color: #ffffff; /* sets SVG (currentColor) to white */
    width: 42px;
    height: 38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    padding:0;
    cursor:pointer;
    transition: background .14s ease, color .14s ease, transform .06s ease;
}

/* hover: icon turns yellow, button slightly darker red */
.psg-search-btn:hover {
    background: #c42828;
    color: #FFC72C; /* SVG stroke becomes yellow */
    transform: translateY(-1px);
}

/* Focus states for accessibility */
.psg-search-btn:focus {
    outline: 3px solid rgba(255,199,44,0.15);
    outline-offset: 2px;
}

/* Divider */
.psg-divider {
    border:0;
    height:1px;
    background:#f0f3f7;
    margin:12px 0;
}

/* Category menu
   Removed internal scrollbar: the list will grow with page height.
*/
.psg-cat-list {
    list-style:none;
    margin:0;
    padding:0;
    /* removed max-height and overflow so the list expands naturally */
    /* max-height:360px; */
    /* overflow:auto; */
}
.psg-cat-row {
    padding:8px 0;
}
.psg-cat-link {
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:#123153;
    padding:8px;
    border-radius:8px;
    transition: background .18s ease, color .18s ease, transform .06s ease;
}
.psg-cat-link .psg-cat-name { font-weight:600; font-size:15px; }
.psg-cat-link .psg-cat-count-pill {
    margin-left:auto;
    background:#f3f5f8;
    color:#6b778b;
    padding:4px 8px;
    border-radius:12px;
    font-weight:600;
    font-size:13px;
}
.psg-cat-link:hover {
    background: rgba(255,199,44,0.08); /* light yellow tint */
    color: #0f2340;
    transform: translateY(-1px);
}

/* Active category style — darker yellow than hover */
.psg-cat-link.active {
    background: rgba(255,199,44,0.14); /* a bit darker than hover (0.08) */
    color: #0f2340;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(23,42,78,0.04);
}

/* If the active is the first "Toutes les publications", give slightly stronger highlight */
.psg-first-row .psg-cat-link.active {
    background: rgba(255,199,44,0.18);
}

/* Fade classes applied to posts container by JS */
.psg-fade-out {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .28s ease, transform .28s ease;
    opacity: 0;
    transform: translateY(6px);
}
.psg-fade-in {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .32s ease, transform .28s ease;
    opacity: 1;
    transform: translateY(0);
}

/* small adjustment to count pill spacing to keep visual balance */
.psg-cat-count-pill { margin-left: 12px; }

/* End message (matches provided visual) */
.psg-end-wrapper {
    grid-column: 1 / -1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 40px 24px;
}
.psg-end-message {
    text-align:center;
    background:#fff;
    border-radius:12px;
    padding:40px 30px;
    box-shadow: 0 6px 18px rgba(18,32,63,0.04);
    border:1px solid #f1f4f8;
    width:100%;
    max-width:940px;
}
.psg-end-flag { font-size:32px; color:#d83b3b; margin-bottom:8px; }
.psg-end-title { font-size:28px; color:#123153; margin:8px 0; font-weight:800; }
.psg-end-text { color:#4b5b6b; font-size:16px; line-height:1.6; margin:0 auto; max-width:760px; }

/* small loader (bottom) */
.psg-loader {
    grid-column: 1 / -1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 0;
}
.psg-loader .dot { width:10px; height:10px; background:#172a4e; border-radius:50%; margin:0 6px; opacity:0.2; animation:psg-bounce .9s infinite; }
.psg-loader .dot:nth-child(2){ animation-delay:.12s; }
.psg-loader .dot:nth-child(3){ animation-delay:.24s; }
@keyframes psg-bounce { 0%{ transform:translateY(0); opacity:.2 } 50%{ transform:translateY(-6px); opacity:1 } 100%{ transform:translateY(0); opacity:.2 } }

/* Responsive grid overrides (if you included psg-grid-3-overrides.css) */
@media (max-width:1000px) {
    .psg-grid-3 { grid-template-columns: repeat(2,1fr); gap:20px; }
}
@media (max-width:640px) {
    .psg-grid-3 { grid-template-columns: 1fr; gap:14px; }
    .psg-end-message { padding:28px 18px; }
}



/* Fix: make H3 use the same visual size/weight as the Top News H4
   Place this file in your child theme: /wp-content/themes/your-child-theme/css/psg-typography-fixes.css
   Then enqueue it (or paste into your existing psg-top-news.css / psg-categories.css).
*/

/* Ensure variables exist (fallback if not defined elsewhere) */
:root {
  --psg-dark: #172a4e;
}

/* Make H3 match the Top News widget H4 look — FORCE with !important as requested */
.psg-filter-card h3,
.psg-filter-title h3,
.widget .psg-top-news-list h3,
h3.psg-title {
  font-size: 26px !important;      /* same size as Top News H4 */
  font-weight: 600 !important;     /* same heavy weight */
  line-height: 1.05 !important;
  color: var(--psg-dark) !important;
  letter-spacing: 0.2px !important;
  margin: 0 0 12px 0 !important;
  display: block !important;
}

/* If you want specifically the semantic H3 inside the categories card */
.psg-filter-card .psg-filter-title + h3,
.psg-filter-card h3.psg-filter-heading {
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  color: var(--psg-dark) !important;
}