/* Public News & Insights pages. */

/* Per-Article-Type badge colors, shared by the index page's card/hero
   badges and the article detail page's own type badge (2026-09-26
   redesign — both surfaces must agree on the same red/purple/blue/green
   palette). Matched by exact type label text since article_type isn't a
   real taxonomy (see public-pages.php's own note on why — it lives on
   news_content_queue, not a news_article_type term), so this can't key off
   a term slug/class the way news_topic etc. do. */
.unionup-news-tag-type { background: #1559d1; color: #fff; }
.unionup-news-tag-type-news { background: #e02020; color: #fff; }
.unionup-news-tag-type-cases-law { background: #6d38d9; color: #fff; }
.unionup-news-tag-type-explainer { background: #1559d1; color: #fff; }
.unionup-news-tag-type-practical-guidance { background: #18a84a; color: #fff; }

.unionup-news-article-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* The theme's global h2/h3 (style.css) are sized for page hero titles
   (h2 is 42px) — fine for marketing pages, but that inherited size makes an
   in-article subheading look broken rather than like a heading. Scoped
   overrides here give article body headings their own, readable scale. */
.unionup-news-article-body h2 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 32px;
    margin-bottom: 12px;
}

.unionup-news-article-body h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 24px;
    margin-bottom: 10px;
}

/* Boxed + scrolled into view on open (2026-09-21 feedback: the form was
   opening below the fold with no visual change where the user was already
   looking, so it went unnoticed — see the matching scrollIntoView() call in
   feedback.php's inline script). The box makes "a form just appeared"
   obvious even before the scroll animation finishes. */
.unionup-news-feedback-form {
    max-width: 560px;
    padding: 16px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #f8f9fa;
}

.unionup-news-feedback-form textarea {
    max-width: 100%;
}

/* Bootstrap's .btn-link (underlined, and this theme's button overrides push
   it toward all-caps/bold) reads as a prominent call-to-action — too loud
   for utility links at the foot of an article (2026-09-01 feedback). Plain,
   quiet text links instead: same color as body copy, no underline until
   hover, normal case. */
.unionup-news-feedback-quiet-link {
    text-decoration: none;
    text-transform: none;
    font-weight: 400;
    font-size: 13px;
    color: #6c757d;
    vertical-align: baseline;
}

.unionup-news-feedback-quiet-link:hover,
.unionup-news-feedback-quiet-link:focus {
    text-decoration: underline;
    color: #495057;
}

/* Branded strip above article content linking back to the News & Insights
   index (2026-09-01 request) — deliberately separate from the theme's own
   site-wide nav (logo/menu/Login/Sign Up, already rendered by get_header()
   above this), so it reads as "you're inside a blog section" rather than
   duplicating the main site header. */
.unionup-news-masthead {
    background: #0046bf;
    padding: 10px 0;
}

.unionup-news-masthead a {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    letter-spacing: 0.02em;
}

.unionup-news-masthead a:hover {
    text-decoration: underline;
}

.unionup-news-related-articles-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.unionup-news-related-articles-list li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

/* ---- Blog Home index page (2026-09-26) ----
   Ported 1:1 from the user's own standalone HTML mockup — same selectors'
   worth of values (colors, spacing, radii) as that file's :root/.tab/
   .filter/.hero/.card rules, re-namespaced under unionup-news-* and applied
   to the real WordPress-rendered markup in public-pages.php instead of the
   mockup's static placeholder content. Filters/Sort are real <select>
   elements (the mockup's were unstyled display-only buttons) since these
   have to actually filter live articles — styled to read the same as the
   mockup's pill/chevron buttons. */

.unionup-news-page {
    --unionup-news-blue: #1559d1;
    --unionup-news-dark-blue: #08246b;
    --unionup-news-light-blue: #eaf4ff;
    --unionup-news-border: #d8e2f1;
    --unionup-news-text: #10204a;
    --unionup-news-muted: #5d6b86;
    --unionup-news-red: #e02020;
    --unionup-news-purple: #6d38d9;
    --unionup-news-green: #18a84a;
    --unionup-news-radius: 7px;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--unionup-news-text);
    background: #fff;
}

/* Uses Bootstrap's own .container (same class header.php and footer.php
   render with) instead of a custom fixed max-width, so the page's left/
   right edges line up with the site's header/footer at every breakpoint
   (2026-09-26 fix — the mockup's own 980px max-width read as a large,
   mismatched gap against the real site chrome, which is wider). */
.unionup-news-page .container {
    padding-top: 14px;
    padding-bottom: 26px;
}

.unionup-news-site-title {
    margin: 0;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -1.2px;
    color: #102783;
}

.unionup-news-tagline {
    margin-top: 2px;
    font-size: 12px;
    color: #4f6384;
    font-weight: 600;
}

.unionup-news-type-tabs {
    display: flex;
    gap: 8px;
    margin-top: 13px;
    flex-wrap: wrap;
}

.unionup-news-tab {
    min-width: 110px;
    text-align: center;
    border: 1px solid var(--unionup-news-border);
    background: #fff;
    color: #30456d;
    border-radius: 4px;
    height: 36px;
    line-height: 34px;
    padding: 0 18px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
}

.unionup-news-tab:hover {
    color: #30456d;
    text-decoration: none;
}

.unionup-news-tab.is-active {
    background: var(--unionup-news-blue);
    color: #fff;
    border-color: var(--unionup-news-blue);
}

.unionup-news-filters {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.unionup-news-filter {
    height: 30px;
    border: 1px solid var(--unionup-news-border);
    background: #fff;
    border-radius: 4px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #34496c;
}

.unionup-news-filter select {
    border: none;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    color: #34496c;
    padding: 0;
    height: 28px;
    max-width: 150px;
}

.unionup-news-filter-icon {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 2px solid var(--unionup-news-blue);
    position: relative;
    flex: 0 0 auto;
}

.unionup-news-filter-icon::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 4px;
    height: 4px;
    background: var(--unionup-news-blue);
    border-radius: 1px;
}

/* Hero / Lead Story */
.unionup-news-hero-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.unionup-news-hero {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 42% 58%;
    border-radius: var(--unionup-news-radius);
    overflow: hidden;
    background: var(--unionup-news-light-blue);
    min-height: 224px;
}

.unionup-news-hero-image {
    position: relative;
    min-height: 224px;
    background-size: cover;
    background-position: center;
    background-color: #d8c0a0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unionup-news-hero-placeholder,
.unionup-news-card-placeholder {
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    font-weight: 700;
}

.unionup-news-badge {
    position: absolute;
    top: 9px;
    left: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 9px;
    border-radius: 3px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

/* Per-Article-Type badge colors — matched exactly to the mockup's palette. */
.unionup-news-tag-type-news { background: var(--unionup-news-red); }
.unionup-news-tag-type-cases-law { background: var(--unionup-news-purple); }
.unionup-news-tag-type-explainer { background: var(--unionup-news-blue); }
.unionup-news-tag-type-practical-guidance { background: var(--unionup-news-green); }

.unionup-news-hero-content {
    padding: 18px 24px 16px 24px;
    background: var(--unionup-news-light-blue);
    position: relative;
}

.unionup-news-lead-badge {
    display: inline-block;
    background: #2d78df;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 7px;
    border-radius: 3px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.unionup-news-hero-content h2 {
    margin: 0;
    font-size: 25px;
    line-height: 1.15;
    letter-spacing: -0.7px;
    color: #081f57;
    max-width: 470px;
    font-weight: 800;
}

.unionup-news-hero-content p {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.28;
    color: #263a64;
    max-width: 510px;
    font-weight: 600;
}

.unionup-news-hero-bottom {
    margin-top: 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.unionup-news-meta {
    font-size: 11px;
    color: #71809a;
    font-weight: 700;
}

.unionup-news-read-btn {
    display: inline-block;
    background: var(--unionup-news-blue);
    color: #fff;
    border: none;
    border-radius: 4px;
    height: 32px;
    line-height: 32px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 800;
}

/* Section head / tools */
.unionup-news-section-head {
    margin-top: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.unionup-news-section-head h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1;
    font-weight: 800;
    color: #0d2160;
    letter-spacing: -0.8px;
}

.unionup-news-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

.unionup-news-search-form {
    width: 250px;
    height: 34px;
    border: 1px solid var(--unionup-news-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
}

.unionup-news-search-form input[type="text"] {
    border: none;
    background: transparent;
    color: var(--unionup-news-text);
    font-size: 11px;
    font-weight: 700;
    width: 100%;
    outline: none;
}

.unionup-news-magnify {
    width: 13px;
    height: 13px;
    border: 2px solid var(--unionup-news-blue);
    border-radius: 50%;
    position: relative;
    flex: 0 0 auto;
}

.unionup-news-magnify::after {
    content: "";
    width: 6px;
    height: 2px;
    background: var(--unionup-news-blue);
    position: absolute;
    right: -5px;
    bottom: -3px;
    transform: rotate(45deg);
    border-radius: 2px;
}

.unionup-news-sort-form {
    margin: 0;
}

.unionup-news-sort {
    height: 34px;
    border: 1px solid var(--unionup-news-border);
    border-radius: 4px;
    background: #fff;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #66748d;
    font-weight: 700;
    white-space: nowrap;
}

.unionup-news-sort select {
    border: none;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    color: #253b66;
}

/* Card grid */
.unionup-news-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.unionup-news-card {
    display: block;
    border: 1px solid var(--unionup-news-border);
    border-radius: var(--unionup-news-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 40, 80, 0.04);
    text-decoration: none;
    color: inherit;
}

.unionup-news-card-image {
    height: 111px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: #dbe4ef;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unionup-news-card .unionup-news-badge {
    top: 7px;
    left: 7px;
    height: 22px;
    font-size: 9px;
    padding: 0 8px;
}

.unionup-news-card-body {
    padding: 9px 10px 12px;
}

.unionup-news-card-body h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: -0.35px;
    color: #0d2868;
    font-weight: 800;
}

.unionup-news-card-body p {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.25;
    color: #405174;
    font-weight: 600;
}

.unionup-news-card-body .unionup-news-meta {
    margin-top: 9px;
}

.unionup-news-load-wrap {
    display: flex;
    justify-content: center;
    margin-top: 13px;
}

.unionup-news-load-btn {
    display: inline-block;
    height: 35px;
    line-height: 33px;
    border: 1px solid #b9d0ee;
    background: #fff;
    color: var(--unionup-news-blue);
    border-radius: 5px;
    padding: 0 22px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

/* ---- Article detail page (2026-09-26) ----
   Same visual language as the index page above (colors, fonts, badge
   palette, container) applied to the article's own structure — user asked
   for the detail page to match the redesign, no separate mockup was given
   for this page specifically. */

.unionup-news-article-header {
    margin-bottom: 18px;
}

.unionup-news-article-site-title a {
    color: inherit;
    text-decoration: none;
}

.unionup-news-article-site-title a:hover {
    text-decoration: underline;
}

/* Two-column article layout (2026-09-26 sidebar request) — the article
   column keeps the same comfortable reading max-width it always had;
   flex-basis rather than a fixed % so it shares space naturally with the
   sidebar's own fixed width below. */
.unionup-news-article-layout {
    display: flex;
    gap: 36px;
    align-items: flex-start;
}

.unionup-news-article {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 780px;
}

.unionup-news-sidebar {
    flex: 0 0 300px;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.unionup-news-widget {
    border: 1px solid var(--unionup-news-border, #d8e2f1);
    border-radius: var(--unionup-news-radius, 7px);
    padding: 16px;
    background: #fff;
}

.unionup-news-widget h4 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 800;
    color: #0d2160;
}

.unionup-news-widget .unionup-news-related-articles h4 {
    margin: 0 0 12px;
}

.unionup-news-widget-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.unionup-news-widget-pills a.unionup-news-pill {
    text-decoration: none;
}

.unionup-news-widget-pills a.unionup-news-pill:hover {
    background: var(--unionup-news-blue, #1559d1);
    color: #fff;
}

.unionup-news-widget-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.unionup-news-widget-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--unionup-news-border, #d8e2f1);
}

.unionup-news-widget-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.unionup-news-widget-list a {
    color: #0d2868;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    line-height: 1.35;
    display: block;
}

.unionup-news-widget-list a:hover {
    color: var(--unionup-news-blue, #1559d1);
    text-decoration: underline;
}

.unionup-news-widget-list .unionup-news-meta {
    margin-top: 4px;
    font-size: 11px;
}

@media (max-width: 900px) {
    .unionup-news-article-layout {
        flex-direction: column;
    }

    .unionup-news-sidebar {
        width: 100%;
        flex: 1 1 auto;
    }
}

.unionup-news-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
}

/* .unionup-news-badge is positioned absolute for the hero/card contexts
   (2026-09-25) — this modifier makes it a normal inline pill instead, for
   contexts like this one where it isn't overlaid on an image. */
.unionup-news-badge-static {
    position: static;
    display: inline-flex;
}

.unionup-news-citation-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1b1b1b;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 0 10px;
    height: 24px;
    border-radius: 3px;
}

.unionup-news-citation-pill-link {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

.unionup-news-citation-pill-link:hover,
.unionup-news-citation-pill-link:focus {
    color: var(--unionup-news-light-blue, #eaf4ff);
}

.unionup-news-article-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.8px;
    color: #081f57;
}

.unionup-news-article-meta {
    margin-top: 8px;
}

.unionup-news-article-image {
    margin: 20px 0;
}

.unionup-news-article-body {
    margin-top: 24px;
    font-size: 15px;
    line-height: 1.7;
    color: #263a64;
}

.unionup-news-article-body p {
    margin: 0 0 16px;
}

.unionup-news-article-tagset {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--unionup-news-border, #d8e2f1);
}

.unionup-news-pill {
    display: inline-block;
    background: #f1f2f4;
    color: #34496c;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
}

.unionup-news-pill-union {
    background: var(--unionup-news-blue, #1559d1);
    color: #fff;
}

.unionup-news-article-sources {
    margin-top: 28px;
}

.unionup-news-article-sources h4 {
    font-size: 14px;
    font-weight: 800;
    color: #0d2160;
    margin-bottom: 8px;
}

.unionup-news-article-sources ul {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #405174;
}

.unionup-news-article-sources li {
    margin-bottom: 4px;
}

.unionup-news-article-sources a {
    color: var(--unionup-news-blue, #1559d1);
    font-weight: 700;
    text-decoration: none;
}

.unionup-news-article-sources a:hover {
    text-decoration: underline;
}

@media (max-width: 760px) {
    .unionup-news-hero {
        grid-template-columns: 1fr;
    }

    .unionup-news-hero-image {
        min-height: 190px;
    }

    .unionup-news-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .unionup-news-tools {
        width: 100%;
    }

    .unionup-news-search-form {
        flex: 1;
        width: auto;
    }

    .unionup-news-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .unionup-news-site-title {
        font-size: 25px;
    }

    .unionup-news-tab {
        min-width: auto;
        flex: 1 1 calc(50% - 8px);
    }

    .unionup-news-filter {
        flex: 1 1 calc(50% - 8px);
    }

    .unionup-news-hero-content h2 {
        font-size: 22px;
    }

    .unionup-news-hero-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .unionup-news-tools {
        flex-direction: column;
    }

    .unionup-news-search-form,
    .unionup-news-sort {
        width: 100%;
    }
}

.unionup-news-related-articles-list li:last-child {
    border-bottom: none;
}

.unionup-news-related-articles-list a {
    color: #0046bf;
    font-weight: 600;
    text-decoration: none;
}

.unionup-news-related-articles-list a:hover {
    text-decoration: underline;
}