/* ============================================================================
   archive-blog.css — JP-359 "Restyle module: Blog"
   Figma: VSSY3wxlC31HrYDwwmHmrv node 254:11008 (Blog-Desktop 1440)

   Rebuilds the JTL blog archive layout: a left sidebar (Kategorien / Suche /
   Themen / Social Media) next to a 2-column grid of post cards, plus numbered
   pagination.

   Everything is scoped under `.blog-archive-redesign` (the wrapper section
   added to archive-blog.php / page-templates/archive-blog.php /
   page-templates/blog.php) so these rules cannot leak onto other pages.

   Enqueued by includes/general.php on the blog archive only, after dist/app.css
   so it wins specificity fights against the theme's global styles.

   Design tokens (read from Figma get_design_context):
     --jtl-light-sand  #eeeee7   page background
     --jtl-dark-blue   #0b1b45   headings, body copy, outline
     --jtl-tech-blue   #2722f8   accent, "Weiterlesen" bar, active page
     --jtl-white       #ffffff   card / widget surfaces
   Type: Inter. Card title 24/32 600, body 16/24 400, widget title 20/28 600.
   ========================================================================== */

.blog-archive-redesign {
    --bar-light-sand: #eeeee7;
    --bar-dark-blue:  #0b1b45;
    --bar-tech-blue:  #2722f8;
    --bar-white:      #ffffff;

    background-color: var(--bar-light-sand);
    padding: 80px 64px;
    font-family: "Inter", "Proxima Nova", Arial, sans-serif;
}

.blog-archive-redesign *,
.blog-archive-redesign *::before,
.blog-archive-redesign *::after {
    box-sizing: border-box;
}

/* Inline SVG icons are used throughout the rebuilt partials instead of
   icon-font classes — the theme's bundled Font Awesome CSS only ships a
   partial glyph set and is missing fa-tag / fa-list / fa-hashtag /
   fa-arrow-right etc., so a font-based approach would render blank boxes. */
.blog-archive-redesign svg {
    display: block;
    flex: 0 0 auto;
}

/* The theme does not define WordPress core's .screen-reader-text class,
   so define it locally to keep the accessible labels visually hidden. */
.blog-archive-redesign .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The Figma frame is 1440 wide with 64px gutters -> 1312px content band. */
.blog-archive-redesign__inner {
    max-width: 1312px;
    margin: 0 auto;
}

/* ── Top-level layout: sidebar + content ──────────────────────────────────── */
.blog-archive-redesign__layout {
    display: grid;
    grid-template-columns: 303px 1fr;
    gap: 32px;
    align-items: start;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.blog-archive-redesign__sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bar-widget {
    background-color: var(--bar-white);
    border-radius: 24px;
    padding: 16px;
    overflow: hidden;
}

.bar-widget__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
}

.bar-widget__head-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bar-tech-blue);
}

.bar-widget__head-icon svg {
    width: 24px;
    height: 24px;
}

.bar-widget__title {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--bar-dark-blue);
}

/* — Kategorien + Suche widget — */
.bar-categories {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bar-select,
.bar-search__field {
    width: 100%;
    border: 1px solid var(--bar-dark-blue);
    border-radius: 24px;
    padding: 12px 22px;
    font-size: 16px;
    line-height: 24px;
    color: var(--bar-dark-blue);
    background-color: var(--bar-white);
    font-family: inherit;
}

/* native <select> styled as the Figma "Alle Kategorien" pill */
.bar-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230b1b45' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 22px center;
    padding-right: 44px;
}

.bar-search {
    position: relative;
    display: flex;
}

.bar-search__field {
    padding-right: 48px;
}

.bar-search__field::placeholder {
    color: var(--bar-dark-blue);
    opacity: 1;
}

.bar-search__btn {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--bar-dark-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bar-search__btn svg {
    width: 20px;
    height: 20px;
}

/* — Themen widget — */
.bar-themen__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bar-themen__item {
    margin: 0;
}

.bar-tag {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 4px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color .15s ease;
}

.bar-tag:hover {
    background-color: var(--bar-light-sand);
}

.bar-tag__name {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--bar-dark-blue);
}

.bar-tag__count {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
    color: var(--bar-tech-blue);
}

.bar-themen__all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    text-decoration: none;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--bar-dark-blue);
}

.bar-themen__all-arrow {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bar-dark-blue);
}

.bar-themen__all-arrow svg {
    width: 16px;
    height: 16px;
}

/* — Social widget — */
.bar-social__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bar-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--bar-dark-blue);
    text-decoration: none;
    transition: color .15s ease;
}

.bar-social__link svg {
    width: 24px;
    height: 24px;
}

.bar-social__link:hover {
    color: var(--bar-tech-blue);
}

/* The theme appends a small external-link glyph to every a[target="_blank"]
   via an ::after pseudo. Suppress it inside the social row so the icons line
   up cleanly (matches the Figma, which shows bare icons). */
.bar-social__link::after,
.bar-social__link::before {
    content: none !important;
    display: none !important;
}

.bar-social__sep {
    flex: 1 1 auto;
    height: 1px;
    background-color: #d6d6cf;
}

/* ── Card grid ────────────────────────────────────────────────────────────── */
.blog-archive-redesign__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    align-content: start;
}

.bar-card {
    display: flex;
    flex-direction: column;
    background-color: var(--bar-white);
    border-radius: 24px;
    overflow: hidden;
}

/* card image header */
.bar-card__media {
    position: relative;
    display: block;
    aspect-ratio: 416 / 188;
    background-color: var(--bar-tech-blue);
    overflow: hidden;
}

.bar-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bar-card__media--placeholder {
    background:
        linear-gradient(135deg, #2722f8 0%, #0b1b45 100%);
}

/* folded-corner "post-it" tab overlay */
.bar-card__tab {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    background-color: #fb581f;
    color: var(--bar-white);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .3px;
    text-transform: uppercase;
    border-radius: 4px 4px 4px 0;
}

.bar-card__tab::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    border-width: 7px 7px 0 0;
    border-style: solid;
    border-color: #c33f10 transparent transparent transparent;
}

/* card body */
.bar-card__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    flex: 1 1 auto;
}

.bar-card__meta {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--bar-dark-blue);
}

.bar-card__meta a {
    color: var(--bar-dark-blue);
    text-decoration: underline;
}

.bar-card__title {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--bar-dark-blue);
}

.bar-card__title a {
    color: inherit;
    text-decoration: none;
}

.bar-card__title a:hover {
    color: var(--bar-tech-blue);
}

.bar-card__excerpt {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

.bar-card__excerpt p {
    margin: 0;
}

.bar-card__divider {
    border: 0;
    border-top: 1px solid #d6d6cf;
    margin: 0;
}

/* author block */
.bar-card__author {
    display: flex;
    align-items: center;
    gap: 24px;
}

.bar-card__author-avatar {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--bar-light-sand);
}

.bar-card__author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bar-card__author-name {
    display: block;
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    color: var(--bar-dark-blue);
}

.bar-card__author-role {
    display: block;
    font-size: 16px;
    line-height: 24px;
    color: var(--bar-dark-blue);
}

/* tag chips row */
.bar-card__tags {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.bar-card__tags-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bar-tech-blue);
    margin-top: 1px;
}

.bar-card__tags-icon svg {
    width: 20px;
    height: 20px;
}

.bar-card__tags-list {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--bar-dark-blue);
}

.bar-card__tags-list a {
    color: #000000;
    text-decoration: underline;
}

.bar-card__tags-list a:hover {
    color: var(--bar-tech-blue);
}

/* blue "Weiterlesen" footer bar */
.bar-card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding: 16px 24px;
    min-height: 60px;
    background-color: var(--bar-tech-blue);
    color: var(--bar-white);
    text-decoration: none;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    transition: background-color .15s ease;
}

.bar-card__cta:hover {
    background-color: #1c18d6;
    color: var(--bar-white);
}

.bar-card__cta-label {
    color: var(--bar-white) !important;
}

.bar-card__cta-arrow {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bar-card__cta-arrow svg {
    width: 18px;
    height: 18px;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.blog-archive-redesign__pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 32px;
}

/* The theme's getPaginatedLinks() emits <ul class="pagination"><li class="page-item">.
   Override the global Bootstrap pagination styling to the Figma pill chips. */
.blog-archive-redesign .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
}

.blog-archive-redesign .pagination .page-item {
    margin: 0;
    border: 0;
}

.blog-archive-redesign .pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: 0 !important;
    border-radius: 20px;
    background-color: var(--bar-white);
    color: var(--bar-dark-blue);
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    text-decoration: none;
    box-shadow: none;
}

.blog-archive-redesign .pagination .page-item.active .page-link,
.blog-archive-redesign .pagination .page-item .page-link.current {
    background-color: var(--bar-tech-blue);
    color: var(--bar-white);
    font-weight: 700;
}

.blog-archive-redesign .pagination .page-link:hover {
    background-color: var(--bar-tech-blue);
    color: var(--bar-white);
}

/* prev / next arrows — getPaginatedLinks renders them with an empty <span> */
.blog-archive-redesign .pagination .page-link.next,
.blog-archive-redesign .pagination .page-link.prev {
    width: 46px;
    font-size: 0;
    background-color: var(--bar-white);
    color: var(--bar-dark-blue);
}

.blog-archive-redesign .pagination .page-link.next::after {
    content: "\2192"; /* → */
    font-size: 18px;
}

.blog-archive-redesign .pagination .page-link.prev::after {
    content: "\2190"; /* ← */
    font-size: 18px;
}

.blog-archive-redesign .pagination .page-link.next:hover,
.blog-archive-redesign .pagination .page-link.prev:hover {
    background-color: var(--bar-tech-blue);
    color: var(--bar-white);
}

.blog-archive-redesign .pagination .page-item .dots {
    background: transparent;
    color: var(--bar-dark-blue);
}

/* ── Blog header above the archive (keeps the existing partial readable) ───── */
.blog-archive-redesign__header {
    max-width: 1312px;
    margin: 0 auto 24px;
}

.blog-archive-redesign__header .subtitle {
    margin: 0 0 4px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--bar-tech-blue);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* QA batch #21 item 3.2 — the blog H1 rendered in the OLD font.

   The old font was NOT Museo. An earlier version of this comment said the H1
   "inherited app.css's h1,.h1,h2,.h2 { font-family: Museo }". Measured, that is
   false: strip this declaration in the browser and the H1 computes to
       Inter, "Proxima Nova", Arial, sans-serif
   on /de/jtl-blog AND on /en/jtl-blog/topics/ai/ — never Museo.

   The reason is a second rule in app.css that the Museo one loses to:

       .page-template-blog h1…h5,  .post-type-archive-blog h1…h5,
       .tax-blog_category h1…h5,   .page-template-archive-blog h1…h5
           { font-family: inherit; }          <- 0,1,1

   That covers every blog surface and beats the bare `h1 { font-family: Museo }`
   (0,0,1), so the blog H1 inherits the legacy Inter/Proxima-Nova BODY stack.
   Museo never applied here at all. h3–h6 escape it because custom-clone.css
   pins them to Kurdis with !important; H1/H2 were left out of that rule.

   This rule is also 0,1,1, so it TIES with `.post-type-archive-blog h1` and wins
   on source order alone: general.php enqueues assets/css/archive-blog.css after
   the theme's dist/app.css (measured: link #14 vs #13). That is the whole margin —
   no !important, but also no specificity headroom. If anything ever enqueues a
   blog sheet after this one, this declaration loses silently.

   This is the blog component's own stylesheet — the right Layer A home — not a
   custom-clone append and not a page-scoped override.

   Blast radius: every .blog-archive-redesign__header h1, in BOTH languages. The DE
   twin renders Museo here too, so this corrects DE rather than regressing it.

   Measured on the dev tunnel, all five of these render the header and load this
   sheet, so all five change:
       /en/jtl-blog              lang=en     page-template-blog
       /de/jtl-blog              lang=de-DE  page-template-blog
       /en/jtl-blog/topics/ai/   lang=en     post-type-archive-blog
       /de/jtl-blog/themen/ki/   lang=de-DE  post-type-archive-blog
       /de/blog/greyhound-migr/  lang=de-DE  tax-blog_category

   NOTE the last one. An earlier version of this comment claimed DE *category*
   archives "still use the pre-redesign template and do not carry this class".
   That is FALSE -- /de/blog/greyhound-migr/ emits
       <div class="blog-archive-redesign__header">
         <h2 class="subtitle">GREYHOUND</h2><h1>Blog-Beiträge zur Kategorie:</h1>
   so its H1 picks up Kurdis too. Correct (it was Museo, the old face), but one more
   page than the claim admitted. Verified: computed font-family on that H1 is now
   "Kurdis, Kurdis Wide, Inter, sans-serif". Its eyebrow is NOT touched by this PR --
   it is already tech-blue via the pre-existing overrides/qa15-blog-category-hero.css
   (`body.tax-blog_category .blog-archive-redesign__header .subtitle`), and the qa21
   sheet does not match it (gated html[lang="en"] + post-type-archive-blog). */
.blog-archive-redesign__header h1 {
    margin: 0;
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif;
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    color: var(--bar-dark-blue);
}

/* ── Empty category (batch #15) ───────────────────────────────────────────────
   A category with no posts in the current language (e.g. /en/blog/countx-migr/
   — a DE-only term) used to render nothing at all. main-category.php now emits
   this card in the main column so the page keeps its header + sidebar and the
   visitor has a way out. Matches the sidebar widgets: white, 24px radius. */
.blog-archive-redesign__empty {
    background-color: var(--bar-white);
    border-radius: 24px;
    padding: 48px 40px;
    text-align: center;
}

.blog-archive-redesign__empty-text {
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 28px;
    color: var(--bar-dark-blue);
}

/* The `a.` + wrapper prefix is load-bearing, not padding. app.css ships
   `.tax-blog_category a { color:#333 }` — specificity (0,1,1), which beats a
   bare `.blog-archive-redesign__empty-link` (0,1,0) and paints the label #333
   on the #2722f8 pill (~2.1:1 contrast, fails WCAG AA). (0,2,1) wins it back
   without `!important`. Verified via getComputedStyle, not by eye. */
.blog-archive-redesign a.blog-archive-redesign__empty-link {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 999px;
    background-color: var(--bar-tech-blue);
    color: var(--bar-white);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-decoration: none;
}

.blog-archive-redesign a.blog-archive-redesign__empty-link:hover,
.blog-archive-redesign a.blog-archive-redesign__empty-link:focus {
    background-color: var(--bar-dark-blue);
    color: var(--bar-white);
    text-decoration: none;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* Tablet: sidebar drops under, single content column keeps 2-up cards */
@media (max-width: 1100px) {
    .blog-archive-redesign {
        padding: 56px 32px;
    }

    .blog-archive-redesign__layout {
        grid-template-columns: 1fr;
    }

    .blog-archive-redesign__sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .blog-archive-redesign__sidebar .bar-widget {
        flex: 1 1 280px;
    }
}

/* Phone: everything stacks, cards go single column */
@media (max-width: 720px) {
    .blog-archive-redesign {
        padding: 40px 16px;
    }

    .blog-archive-redesign__grid {
        grid-template-columns: 1fr;
    }

    .blog-archive-redesign__sidebar {
        flex-direction: column;
    }

    .blog-archive-redesign__sidebar .bar-widget {
        flex: 1 1 auto;
    }

    .blog-archive-redesign__pagination {
        justify-content: center;
    }

    .blog-archive-redesign__header h1 {
        font-size: 30px;
        line-height: 38px;
    }

    .bar-card__title {
        font-size: 21px;
        line-height: 28px;
    }

    .bar-card__author {
        gap: 16px;
    }
}