/**
 * RSBlog! Blog Pack (InfiNet) — portable blog display styles.
 * Loaded site-wide on the front-end by plg_system_rsblogblog. All selectors are
 * scoped under .rsblog-* so they are inert on non-blog pages.
 */

/* ── RSBlog blog toolbar — polished header card with logged-in user info,
 *    branded icon buttons, and the login/logout as the filled "head" action. ── */
.rsblog-main-container .card.mb-5 {
    border: 1px solid #e9ecef !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .07) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important;
    overflow: hidden;
}
.rsblog-main-container .card.mb-5 > .card-body { padding: .85rem 1.25rem !important; }

/* Logged-in user info (avatar + greeting) / logged-out blog tag */
.rsblog-main-container .rsb-userbar { display: flex; align-items: center; gap: .65rem; }
.rsblog-main-container .rsb-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #00bbff, #0067ff); color: #fff;
    font-weight: 700; font-size: 1.05rem; box-shadow: 0 3px 8px rgba(0, 103, 255, .35);
}
.rsblog-main-container .rsb-greeting { color: #333; font-size: 1rem; }
.rsblog-main-container .rsb-greeting strong { color: #0067ff; }
.rsblog-main-container .rsb-blogtag {
    color: #8a93a0; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; font-size: .85rem;
}

/* Icon toolbar — circular branded buttons that lift on hover */
.rsblog-main-container .card.mb-5 ul.list-inline {
    margin: 0; display: flex; justify-content: flex-end; align-items: center;
}
.rsblog-main-container .card.mb-5 .list-inline-item { margin: 0 4px; }
.rsblog-main-container .card.mb-5 .list-inline-item > a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    color: #5a6573; background: #eef1f4; text-decoration: none;
    transition: all .18s ease;
}
.rsblog-main-container .card.mb-5 .list-inline-item > a:hover {
    color: #fff; background: linear-gradient(135deg, #00bbff, #0067ff);
    transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0, 103, 255, .35);
}
/* (Login/logout previously got a filled brand-blue "head action" button; removed so
   every toolbar icon shares the same gray pill + blue-on-hover treatment — uniform.) */

/* Breathing room at the top of the blog content (between the banner and the toolbar) */
.rsblog-main-container { padding-top: 1.5rem; }
.rsblog-main-post-container { padding-top: 1.5rem; }

/* Post titles render as <h1> — dial them down a touch on the list */
.rsblog-main-container .rsblog-entry-title { font-size: 1.8rem !important; line-height: 1.25 !important; }

/* ── Consistent blog title treatment everywhere (listing, single post, sidebar):
 *    same heading font, same brand-navy colour, same weight; only the size scales
 *    by context. Hover goes to the brand blue. ── */
.rsblog-main-container .rsblog-entry-title,
.rsblog-main-container .rsblog-entry-title a,
.rsblog-main-container .rsblog-entry-title a span,
.rsblog-main-post-container .rsblog-entry-title,
.rsblog-main-post-container .rsblog-entry-title a,
.rsblog-main-post-container .rsblog-entry-title a span,
.rsblog-recent .rsblog-recent-title {
    font-family: 'Arial', sans-serif;
    color: #2b3a67;
    font-weight: 700;
    text-decoration: none;
}
.rsblog-main-container .rsblog-entry-title a:hover,
.rsblog-main-container .rsblog-entry-title a:hover span,
.rsblog-main-post-container .rsblog-entry-title a:hover,
.rsblog-recent .rsblog-recent-title:hover {
    color: #0067ff;
    text-decoration: none;
}

/* ── Category navigation: pill links under the toolbar so visitors can browse
 *    posts by category (All / blog tag / category names …). ── */
.rsblog-catnav {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin: 0 0 1.75rem; padding: 0;
}
.rsblog-catnav .rsblog-cat {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .9rem; border-radius: 999px;
    background: #eef1f4; color: #44505f; text-decoration: none;
    font-size: .9rem; font-weight: 600; transition: all .15s ease;
}
.rsblog-catnav .rsblog-cat:hover { background: #dfe6ee; color: #0067ff; }
.rsblog-catnav .rsblog-cat.active {
    background: linear-gradient(135deg, #00bbff, #0067ff); color: #fff;
    box-shadow: 0 3px 8px rgba(0, 103, 255, .3);
}
.rsblog-catnav .rsblog-cat-count {
    font-size: .75rem; background: rgba(0, 0, 0, .08); color: inherit;
    border-radius: 999px; padding: 0 .45rem; line-height: 1.6;
}
.rsblog-catnav .rsblog-cat.active .rsblog-cat-count { background: rgba(255, 255, 255, .25); }

/* Category nav placed INSIDE the toolbar card — centered, with a divider above */
.rsblog-catnav-toolbar {
    justify-content: center;
    margin: .85rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid #e9ecef;
}

/* ── Recent Posts sidebar (mod_rsblog_recent): compact, single-spaced list of the
 *    latest posts — title + date + short preview, each linking to its post page. ── */
.rsblog-recent { margin: 0; padding: 0; list-style: none; }
.rsblog-recent .rsblog-recent-item {
    padding: .55rem 0;
    border-bottom: 1px solid #e9ecef;
}
.rsblog-recent .rsblog-recent-item:first-child { padding-top: 0; }
.rsblog-recent .rsblog-recent-item:last-child { padding-bottom: 0; border-bottom: 0; }
.rsblog-recent .rsblog-recent-title {
    display: block;
    padding: 0;
    color: #2b3a67;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.25;
    text-decoration: none;
}
.rsblog-recent .rsblog-recent-title:hover { color: #0067ff; text-decoration: underline; }
.rsblog-recent .rsblog-recent-date {
    display: block;
    margin-top: .1rem;
    font-size: .7rem;
    color: #98a2b3;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.rsblog-recent .rsblog-recent-preview {
    margin: .2rem 0 0;
    font-size: .8rem;
    line-height: 1.3;
    color: #6c757d;
}

/* Back-to-blog link on single post pages */
.rsblog-back { margin: 1.75rem 0 1rem; font-size: .9rem; font-weight: 600; }
.rsblog-back a { color: #0067ff; text-decoration: none; }
.rsblog-back a:hover { text-decoration: underline; }
.rsblog-back .fa { margin-right: .35rem; }

/* Offset the smooth-scroll target so a post isn't hidden under an overlay header. */
article.rsblog-post[id^="rsblog-post-"] { scroll-margin-top: 130px; }
html { scroll-behavior: smooth; }

/* ── Variant: Compact list (rsblog-variant-list) ───────────────────────────── */
.rsblog-compact-list { display: flex; flex-direction: column; gap: 1rem; }
.rsblog-compact-item {
    display: flex; gap: 1rem; align-items: flex-start;
    padding-bottom: 1rem; border-bottom: 1px solid #e9ecef;
}
.rsblog-compact-item:last-child { border-bottom: 0; }
.rsblog-compact-thumb { flex: 0 0 140px; }
.rsblog-compact-thumb img { width: 140px; height: 94px; object-fit: cover; border-radius: 10px; }
.rsblog-compact-body { flex: 1 1 auto; min-width: 0; }
.rsblog-compact-body .rsblog-entry-title { font-size: 1.25rem !important; margin: 0 0 .25rem; }
.rsblog-compact-meta { font-size: .8rem; color: #6c757d; margin-bottom: .35rem; }
.rsblog-compact-meta a { color: #0067ff; text-decoration: none; }
.rsblog-compact-excerpt { margin: 0 0 .35rem; color: #44505f; font-size: .92rem; line-height: 1.45; }
.rsblog-compact-more { font-size: .85rem; font-weight: 600; color: #0067ff; text-decoration: none; }
.rsblog-compact-more:hover { text-decoration: underline; }
@media (max-width: 575px) {
    .rsblog-compact-item { flex-direction: column; }
    .rsblog-compact-thumb, .rsblog-compact-thumb img { width: 100%; flex-basis: auto; height: auto; }
}

/* ── Variant: Magazine (rsblog-variant-mag) ────────────────────────────────── */
.rsblog-mag-featured {
    display: flex; gap: 1.5rem; align-items: stretch; margin-bottom: 1.75rem;
    background: #fff; border: 1px solid #e9ecef; border-radius: 14px; overflow: hidden;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
}
.rsblog-mag-featured-thumb { flex: 0 0 46%; display: block; }
.rsblog-mag-featured-thumb img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; }
.rsblog-mag-featured-body { flex: 1 1 auto; padding: 1.5rem 1.75rem; align-self: center; }
.rsblog-mag-badge {
    display: inline-block; background: linear-gradient(135deg, #00bbff, #0067ff); color: #fff;
    font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: .2rem .6rem; border-radius: 999px; margin-bottom: .6rem;
}
.rsblog-mag-featured-body .rsblog-entry-title { font-size: 2rem !important; line-height: 1.2; margin: 0 0 .5rem; }
.rsblog-mag-featured-meta { font-size: .85rem; color: #6c757d; margin-bottom: .6rem; }
.rsblog-mag-featured-excerpt { color: #44505f; line-height: 1.5; margin-bottom: 1rem; }

.rsblog-mag-card {
    background: #fff; border: 1px solid #e9ecef; border-radius: 12px; overflow: hidden;
    display: flex; flex-direction: column; height: 100%;
    transition: box-shadow .18s ease, transform .18s ease;
}
.rsblog-mag-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.rsblog-mag-thumb { display: block; aspect-ratio: 16 / 9; background: #eef1f4; }
.rsblog-mag-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rsblog-mag-noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: #b6c0cc; font-size: 2rem; }
.rsblog-mag-body { padding: 1rem 1.1rem 1.25rem; }
.rsblog-mag-body .rsblog-entry-title { font-size: 1.15rem !important; margin: 0 0 .3rem; }
.rsblog-mag-meta { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .4rem; }
.rsblog-mag-excerpt { font-size: .88rem; color: #6c757d; line-height: 1.4; margin: 0; }
@media (max-width: 767px) {
    .rsblog-mag-featured { flex-direction: column; }
    .rsblog-mag-featured-thumb { flex-basis: auto; }
    .rsblog-mag-featured-thumb img { min-height: 200px; }
}

/* ── Variant: Recent-entries sidebar (rsblog-variant-side) ─────────────────── */
/* Normal static box — not pinned to the top of the page, and no scrollbar when
   the list is short. (Was position:sticky+top, which kept it stuck at the top
   while the post list scrolled past it.) */
.rsblog-side .card-body { padding: 1.1rem 1.25rem; }
.rsblog-side-title {
    font-size: 1.05rem; font-weight: 700; color: #2b3a67;
    margin: 0 0 .75rem; padding-bottom: .5rem; border-bottom: 2px solid #0067ff;
}

/* ── Optional hero banner (rsblog-hero) — full-width row, flush under the header,
 *    like the site's other page headers. Breaks out of the component column. ── */
.rsblog-hero {
    display: flex; align-items: center; justify-content: center;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    text-align: center; overflow: hidden;
    /* full-bleed: stretch to the viewport edges from inside the content column */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* flush: cancel the container's top padding so it sits under the menu */
    margin-top: -1.5rem;
    margin-bottom: 2rem;
    padding: 3.25rem 1.5rem;
    border-radius: 0;
}
/* (Hero pages also drop Helix's 100px #sp-main-body top padding via an inline
 *  style emitted by hero.php, so only hero pages are affected — no flash.) */
/* Avoid a horizontal scrollbar from the full-bleed row. */
body.com_rsblog { overflow-x: hidden; }
.rsblog-hero-plain { background-color: #550e5a; }
/* 'Contained' width: stay inside the content column with normal spacing + rounded corners. */
.rsblog-hero-contained {
    margin-left: 0; margin-right: 0; margin-top: 0;
    border-radius: 12px;
}
.rsblog-hero-inner { max-width: 760px; }
.rsblog-hero-title {
    color: #fff !important; font-weight: 800; margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.rsblog-hero-sub {
    color: rgba(255, 255, 255, .92); margin: .6rem 0 0;
    font-size: 1.1rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

/* Blog page background: intentionally not set by the pack — the blog inherits the
   site's own body/#sp-main-body background. (A site can still set a page_bg image
   via the menu/plugin param.) */

/* ── Un-hide the blog Edit link. Many templates (e.g. Helix custom.css) hide Joomla's
   front-end edit pencils with a rule that includes the generic `.edit-icon`
   (`.edit-icon { display:none !important }`), which also catches RSBlog's own
   <li class="edit-icon"> Edit link in the post-action gear. Re-show ONLY the RSBlog
   one (higher specificity + !important beats the template rule). DO NOT REMOVE — the
   build refuses to package without it; see scratch/rsblogblog/build.php. */
.rsblog-post-actions .edit-icon,
ul.dropdown-menu.actions li.edit-icon {
    display: list-item !important;
}

/* Breathing room above the front-end submit/edit form toolbar (Save/Cancel) so it
   does not crowd the page banner. */
/* 1.5rem so a rendered hero's -1.5rem top margin cancels it flush; when no hero
   shows, this is just a modest gap above the Save/Cancel toolbar. */
body.view-form .edit.item-page { padding-top: 1.5rem; }