/**
 * File: assets/css/frontend/blog/header-widgets.css
 * Purpose: Premium styling for blog-native header action widgets (notifications, trending, latest, saved, favorite).
 * Style: Card SaaS — light accent header band, bordered cards.
 * Layout: every widget is exactly 20.625rem x 23.5rem (equal width + equal height),
 *          max 3 full cards visible per list with vertical scroll, no horizontal scroll,
 *          article titles clamped to 2 lines.
 * Scope: Blog header widget presentation only.
 * Related PHP: src/Frontend/Blog/BlogHeaderWidgets.php
 * Package: HyperDAF Pro
 */

/*
 * Outer dropdown shell: invisible — the inner .hdf-blog-hw panel carries all
 * visuals. This fixes the "double render" look (the shell's own white
 * background/border peeking behind the narrower panel) and removes the
 * shell's scrollbars.
 */
.hdf-header-actions--blog .hdf-header-action__widget {
    width: 20.625rem;
    max-width: calc(100vw - 2rem);
    max-height: none;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Panel: fixed equal dimensions, vertical flex */
.hdf-blog-hw {
    display: flex;
    flex-direction: column;
    width: 20.625rem;
    height: 23.625rem;
    min-width: 0;
    max-width: 20.625rem;
    margin: 0;
    padding: 0 0 1rem;
    overflow: hidden;
    border: 1px solid var(--hdf-blog-border, #e2e8ee);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 .75rem 2rem rgba(11, 31, 58, .10);
    /* Reset the inherited white-space: nowrap from .hdf-header-actions
       (header/actions.css) — without this, line-clamp rules inside the
       panel never wrap and text is clipped instead. */
    white-space: normal;
}

/* Light accent header band (never dark) */
.hdf-blog-hw > * {
    min-width: 0;
}

.hdf-blog-hw__heading {
    flex: 0 0 auto;
    margin: 0 0 .8rem;
    padding: .85rem 1.125rem;
    border-bottom: 1px solid var(--hdf-blog-border, #e2e8ee);
    background: linear-gradient(90deg, #eaf6ee, #f4faf6);
    color: var(--hdf-blog-text, var(--hdf-color-text-primary));
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hdf-blog-hw__heading::after {
    content: none;
}

/* Unread update dot */
.hdf-blog-hw-updates__dot {
    flex: 0 0 auto;
    width: .55rem;
    height: .55rem;
    margin-left: auto;
    border-radius: 999px;
    background: var(--hdf-blog-accent, #1e7a4f);
    box-shadow: 0 0 0 3px rgba(30, 122, 79, .15);
}

/* Notification list: icon left, professional title, read/unread states */
.hdf-blog-hw-notifications {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: .55rem;
}

.hdf-blog-hw-notifications__item {
    border-bottom: 1px solid var(--hdf-blog-border-subtle, #eef1f4);
}

.hdf-blog-hw-notifications__item:last-child {
    border-bottom: 0;
}

.hdf-blog-hw-notifications__link {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .65rem .1rem;
    text-decoration: none;
    color: inherit;
    min-height: 3.2rem;
}

a.hdf-blog-hw-notifications__link:hover {
    background: var(--hdf-blog-surface-hover, #f6f9f7);
}

.hdf-blog-hw-notifications__icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .65rem;
    background: linear-gradient(135deg, #eaf6ee, #f4faf6);
    border: 1px solid var(--hdf-blog-border, #e2e8ee);
    color: var(--hdf-blog-accent, #1e7a4f);
}

.hdf-blog-hw-notifications__icon .hdf-icon {
    width: 1.05rem;
    height: 1.05rem;
}

.hdf-blog-hw-notifications__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .12rem;
}

.hdf-blog-hw-notifications__title {
    font-size: .8rem;
    line-height: 1.35;
    color: var(--hdf-blog-text, #111);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Unread: bold title. Read: normal weight. */
.hdf-blog-hw-notifications__item.is-unread .hdf-blog-hw-notifications__title {
    font-weight: 800;
}

.hdf-blog-hw-notifications__item.is-read .hdf-blog-hw-notifications__title {
    font-weight: 400;
}

.hdf-blog-hw-notifications__message {
    font-size: .72rem;
    line-height: 1.35;
    color: var(--hdf-blog-text-muted, #5b6570);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hdf-blog-hw-notifications__time {
    font-size: .68rem;
    color: var(--hdf-blog-text-faint, #8a94a0);
}

.hdf-blog-hw-notifications__dot {
    flex: 0 0 auto;
    width: .5rem;
    height: .5rem;
    margin-top: .35rem;
    margin-left: auto;
    border-radius: 999px;
    background: var(--hdf-blog-accent, #1e7a4f);
}

/* Lists: max 3 FULL cards visible, vertical scroll only */
.hdf-blog-hw-posts,
.hdf-blog-hw-saved {
    flex: 0 0 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0 1.125rem;
    padding: 0 0 .1rem;
    list-style: none;
}

.hdf-blog-hw-posts,
.hdf-blog-hw-saved {
    display: grid;
    max-height: 14.2rem;
    gap: .4rem;
    padding-right: .55rem;
    scrollbar-gutter: stable;
}

.hdf-blog-hw-posts::-webkit-scrollbar,
.hdf-blog-hw-saved::-webkit-scrollbar {
    width: 5px;
}

.hdf-blog-hw-posts::-webkit-scrollbar-thumb,
.hdf-blog-hw-saved::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: #c8d4dc;
}

/* Post lists: trending, latest, saved */
.hdf-blog-hw-posts a,
.hdf-blog-hw-saved a {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    min-height: 4.35rem;
    padding: .5rem .55rem;
    border: 1px solid #edf1f5;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(11, 31, 58, .04);
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.hdf-blog-hw-posts a:hover,
.hdf-blog-hw-saved a:hover {
    border-color: var(--hdf-blog-accent, #1e7a4f);
    background: #f4faf6;
}

.hdf-blog-hw-posts__thumb,
.hdf-blog-hw-saved__thumb {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    border-radius: .6rem;
    object-fit: cover;
    box-shadow: 0 .2rem .5rem rgba(11, 31, 58, .1);
}

.hdf-blog-hw-posts__meta,
.hdf-blog-hw-saved__meta {
    display: grid;
    min-width: 0;
    gap: .18rem;
}

.hdf-blog-hw-posts__title,
.hdf-blog-hw-saved__title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--hdf-blog-text, var(--hdf-color-text-primary));
    font-size: .8rem;
    font-weight: 650;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hdf-blog-hw-posts__date,
.hdf-blog-hw-saved__date {
    color: var(--hdf-blog-muted, var(--hdf-color-text-muted));
    font-size: .7rem;
}

/* Empty states */
.hdf-blog-hw__empty {
    display: grid;
    justify-items: stretch;
    margin: 0 1.125rem;
    padding: 1rem .5rem .5rem;
    gap: .55rem;
    text-align: center;
}

.hdf-blog-hw__empty-icon {
    display: inline-grid;
    justify-self: center;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(30, 122, 79, .14), rgba(11, 31, 58, .08));
    color: var(--hdf-blog-accent, #1e7a4f);
}

.hdf-blog-hw__empty-icon .hdf-icon {
    width: 1.4rem;
    height: 1.4rem;
}

.hdf-blog-hw__empty p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--hdf-blog-muted, var(--hdf-color-text-muted));
    font-size: .8rem;
    line-height: 1.55;
    text-align: center;
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hdf-blog-hw__empty-text {
    margin: 0 1.125rem;
    color: var(--hdf-blog-muted, var(--hdf-color-text-muted));
    font-size: .8rem;
}

/* Bottom action row: left primary + right secondary, pinned to panel bottom */
.hdf-blog-hw__actions {
    display: flex;
    gap: .6rem;
    margin: auto 1.125rem 0;
    padding-top: .8rem;
}

.hdf-blog-hw__btn {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 2rem;
    box-sizing: border-box;
    padding: 0 .5rem;
    border-radius: 999px;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.hdf-blog-hw__btn--primary {
    border: 1px solid var(--hdf-color-primary-strong, #4F7A20);
    background: var(--hdf-color-primary-strong, #4F7A20);
    color: #fff;
}

.hdf-blog-hw__btn--primary:hover {
    background: var(--hdf-color-primary-hover, #466D1C);
    border-color: var(--hdf-color-primary-hover, #466D1C);
    color: #fff;
    text-decoration: none;
}

.hdf-blog-hw__btn--secondary {
    border: 1px solid var(--hdf-color-primary-strong, #4F7A20);
    background: #fff;
    color: #111;
}

.hdf-blog-hw__btn--secondary:hover {
    background: var(--hdf-color-primary-strong, #4F7A20);
    border-color: var(--hdf-color-primary-strong, #4F7A20);
    color: #fff;
    text-decoration: none;
}

.hdf-blog-hw__btn:disabled {
    opacity: .55;
    cursor: default;
}