/*
Theme Name: kulturfeder.de
Theme URI: https://www.kulturfeder.de/
Author: kulturfeder.de
Description: Eigenständiges, schlankes WordPress-Theme für kulturfeder.de, rekonstruiert auf Basis des WordPress-Exports vom 25.08.2026 und der aktuellen öffentlichen Seitenstruktur.
Version: 4.20.0
Requires at least: 6.6
Requires PHP: 8.3
Text Domain: kulturfeder
License: GPL-2.0-or-later
*/

:root {
  --kf-bg: #fff;
  --kf-text: #555b5e;
  --kf-muted: #777;
  --kf-link: #263368;
  --kf-border: #e4e6e7;
  --kf-width: 1040px;
  --kf-reading: 760px;
  --kf-accent: #3f4b50;
  --kf-blue: #263368;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--kf-bg);
  color: var(--kf-text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.62;
}
a { color: var(--kf-link); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* Links in editorial content use the kulturfeder blue. */
.single-content a,
.page-content a,
.news-intro a,
.entry-content a,
.article-body a {
  color: var(--kf-blue);
}
.single-content a:hover,
.single-content a:focus,
.page-content a:hover,
.page-content a:focus,
.news-intro a:hover,
.news-intro a:focus,
.entry-content a:hover,
.entry-content a:focus,
.article-body a:hover,
.article-body a:focus {
  color: var(--kf-blue);
  text-decoration: underline;
}

/* WPZOOM feed: keep the image grid clean and let the plugin control its own captions. */
.kf-wpzoom-feed img {
  display: block;
  max-width: 100%;
  height: auto;
}
.kf-wpzoom-feed a {
  color: inherit;
}
button, input { font: inherit; }
.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; }

.site-wrap { width: min(var(--kf-width), calc(100% - 28px)); margin: 0 auto; }
.site-header { padding-top: 0; }
.topbar { width:100%; background:var(--kf-blue); }
/* Full-width bar so the social icons remain inside the blue header band. */
.topbar { width:100vw; margin-left:calc(50% - 50vw); }
.topbar-inner { display:flex; justify-content:space-between; align-items:center; min-height:36px; font-size:12px; color:#fff; gap:18px; }
.topbar-tools { display:flex; align-items:center; gap:16px; flex:0 0 auto; margin-left:auto; }
.top-search { display:flex; align-items:center; height:24px; border:1px solid rgba(255,255,255,.65); border-radius:2px; overflow:hidden; }
.top-search { flex:0 0 auto; }
.top-search input { width:145px; height:22px; border:0; outline:0; background:#fff; color:#222; padding:2px 8px; font:inherit; font-size:12px; }
.top-search input::placeholder { color:#777; }
.top-search button { width:28px; height:22px; border:0; background:#fff; color:var(--kf-blue); cursor:pointer; font-size:18px; line-height:20px; padding:0; }
.top-search button:hover, .top-search button:focus { background:#f1f1f1; }
.top-links, .social-links { display:flex; gap:14px; align-items:center; list-style:none; padding:0; margin:0; }
.top-links { min-width:0; flex:1 1 auto; }
.top-links li { flex:0 0 auto; }
.social-links { flex:0 0 auto; }
.social-links li { display:flex; align-items:center; }
.social-links a { display:flex; align-items:center; justify-content:center; width:22px; height:22px; line-height:1; }
.social-links img { display:block; width:20px; height:20px; object-fit:contain; filter:brightness(0) invert(1); transition:opacity .15s ease, transform .15s ease; }
.social-links a:hover img, .social-links a:focus img { opacity:.72; transform:scale(1.08); }
.top-links a { color:#fff; }
.brand-row {
  padding: 18px 0 20px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 468px;
  gap:32px;
  align-items:center;
}
.brand-logo { display:flex; align-items:center; justify-content:flex-start; min-width:0; }
.custom-logo-link img { display:block; width:min(460px, 100%); height:auto; }
.header-ad { width:468px; max-width:100%; min-height:60px; justify-self:end; display:flex; align-items:center; justify-content:flex-end; }
.header-ad-widget { width:468px; max-width:100%; margin:0; padding:0; }
.header-ad-widget > * { max-width:100%; }
.header-ad img { display:block; max-width:100%; height:auto; }
.site-title-text { font-size:24px; font-weight:700; letter-spacing:-.03em; }

.primary-nav { border-top:1px solid var(--kf-border); border-bottom:1px solid var(--kf-border); }
.primary-nav .menu { display:flex; justify-content:center; gap:0; list-style:none; padding:0; margin:0; }
.primary-nav .menu > li { margin:0; }
.primary-nav .menu > li > a { display:block; padding:12px 24px; font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:#424b4f; }
.primary-nav .menu > li > a:hover, .primary-nav .menu > li.current-menu-item > a { background:#f6f7f7; text-decoration:none; }
.mobile-toggle { display:none; width:100%; border:0; background:#f4f5f5; padding:10px; color:#3f484c; cursor:pointer; }

/* Content always keeps a 14px minimum gutter, regardless of viewport width. */
.content-area {
  width: calc(100% - 28px) !important;
  max-width: var(--kf-reading);
  margin: 34px auto 0 !important;
}
.content-area > *,
.content-area article,
.content-area figure,
.content-area .featured-image,
.content-area .single-content {
  max-width: 100%;
}
.content-area img { max-width: 100% !important; height: auto; }
.home-feed, .archive-feed { width:100%; }

/* Die vier redaktionellen Hauptkategorien werden zweispaltig gelistet.
   Reihenfolge: aktuellster Beitrag links, zweitaktuellster rechts,
   anschließend zeilenweise weiter. */
.archive-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 34px;
  row-gap: 30px;
}
.archive-grid .article-card {
  margin:0;
  padding:0 0 24px;
  border-bottom:1px solid var(--kf-border);
}
.article-card { padding:0 0 30px; margin:0 0 30px; border-bottom:1px solid var(--kf-border); }
.article-card .article-card-image { margin:0 0 15px; }
.article-card .article-card-image a { display:block; }
.article-card .article-card-image img { display:block; width:300px !important; max-width:100% !important; height:auto !important; }
.article-card:last-child { border-bottom:0; }
.article-taxonomy { display:flex; flex-wrap:wrap; gap:0 10px; margin-bottom:5px; font-size:13px; line-height:1.4; }
.article-taxonomy a { color:#5e686c; }
.article-taxonomy a + a:before { content:""; margin-right:10px; }
.article-meta { color:#858b8d; font-size:13px; margin:0 0 5px; }
.article-title { font-size:25px; line-height:1.22; margin:0 0 9px; font-weight:700; letter-spacing:-.025em; }
.article-title a { color:#30383c; }
.article-excerpt { font-size:16px; line-height:1.6; color:#4d5558; margin:0; }
.more-link { white-space:nowrap; }

.pagination { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin:34px 0 45px; }
.pagination a, .pagination span { min-width:30px; text-align:center; padding:4px 8px; color:#586164; }
.pagination .current { font-weight:700; border-bottom:1px solid #555; }
.pagination .next { min-width:auto; }

.breadcrumbs { font-size:12px; color:#858b8d; margin-bottom:20px; }
.breadcrumbs span + span:before { content:"›"; margin:0 8px; color:#aaa; }
.single-header { margin-bottom:20px; }
.single-header .article-title { font-size:38px; line-height:1.16; color:#30383c; }
.featured-image { margin:0 0 22px; }
.single-divider { border-top:2px dotted #c9cdcf; margin:24px 0 28px; }
.featured-image img { display:block; width:auto; max-width:100%; }
.single-content { font-size:17px; line-height:1.72; color:#555b5e; }
.single-content p { margin:0 0 1.15em; }
.single-content h2, .single-content h3, .single-content h4 { line-height:1.25; color:#30383c; }
.single-content blockquote { border-left:3px solid #d6d9da; margin:1.5em 0; padding:.2em 1.2em; color:#555d60; }
.single-content figure { margin:1.4em 0; }
.single-content figcaption { color:#777; font-size:13px; line-height:1.4; margin-top:5px; }
.single-content img { display:block; height:auto; }
.post-tags { margin-top:28px; font-size:13px; color:#777; }
.post-tags a { display:inline-block; margin:0 5px 5px 0; }
.author-box { border-top:1px solid var(--kf-border); margin-top:35px; padding-top:22px; display:flex; gap:18px; }
.author-avatar { flex:0 0 72px; width:72px; height:72px; min-width:72px; min-height:72px; overflow:hidden; }
.author-avatar img { width:72px; height:72px; min-width:72px; min-height:72px; object-fit:cover; object-position:center; border-radius:0; display:block; }
.author-box h3 { font-size:16px; margin:0 0 4px; }
.author-box p { margin:0; font-size:14px; color:#666; }

.related { margin-top:42px; border-top:1px solid var(--kf-border); padding-top:25px; }
.related h2 { font-size:19px; margin:0 0 18px; }
.related-item { padding:0 0 16px; margin-bottom:16px; border-bottom:1px solid var(--kf-border); }
.related-item:last-child { border-bottom:0; }
.related-item .article-title { font-size:19px; margin:3px 0 0; }

.archive-title { font-size:30px; line-height:1.2; margin:0 0 25px; }
.search-form { display:flex; margin-bottom:28px; }
.search-form label { flex:1; }
.search-form input[type=search] { width:100%; padding:10px 12px; border:1px solid #d7dada; }
.search-form button { border:0; background:var(--kf-accent); color:#fff; padding:10px 17px; cursor:pointer; }

.widget-area { margin-top:40px; padding-top:22px; border-top:1px solid var(--kf-border); }
.widget-area .widget-title { font-size:14px; letter-spacing:.05em; margin:0 0 15px; text-transform:uppercase; }

.site-footer { width:100%; margin:55px 0 0; padding:0; border-top:0; color:#73797b; font-size:12px; }
.footer-nav .menu { display:flex; flex-wrap:wrap; gap:12px 18px; list-style:none; padding:0; margin:0 0 15px; }
.footer-nav a { color:#73797b; }
.footer-credit { margin:0; text-align:center; }
.footer-bar { width:100%; background:var(--kf-blue); padding:12px 0; }
.footer-bar .footer-credit a { color:#fff; }
.cookie-placeholder { margin-top:18px; font-size:11px; color:#999; }


/* Keep the same 14px minimum side clearance on narrower desktop/tablet widths.
   The utility header switches to the same two-row arrangement as mobile
   before the viewport becomes too narrow for the desktop flex layout. */
@media (max-width: 1040px) {
  .site-wrap { width:calc(100% - 28px); }
  .topbar-inner {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "search social"
      "links links";
    align-items:center;
    gap:8px 12px;
    padding:9px 0 10px;
  }
  .topbar-tools { display:contents; }
  .top-search { grid-area:search; justify-self:start; width:min(190px,100%); height:32px; }
  .top-search input { width:100%; height:30px; font-size:14px; padding:3px 9px; }
  .top-search button { width:34px; height:30px; font-size:20px; }
  .social-links { grid-area:social; justify-self:end; display:flex; flex-wrap:nowrap; gap:9px; }
  .social-links a { width:26px; height:26px; }
  .social-links img { width:23px; height:23px; }
  .top-links {
    grid-area:links;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:center;
    gap:4px 17px;
    width:100%;
    font-size:13px;
    line-height:1.45;
  }
  .brand-row {
    grid-template-columns:1fr;
    gap:14px;
    padding:14px 0 15px;
  }
  .header-ad { width:100%; justify-self:start; justify-content:flex-start; min-height:0; }
  .header-ad-widget { width:468px; max-width:100%; }

  /* At this width the header behaves exactly like the compact mobile header. */
  .mobile-toggle {
    display:block;
    width:100%;
    border:0;
    border-top:1px solid var(--kf-border);
    border-bottom:1px solid var(--kf-border);
    background:#f4f5f5;
    padding:10px 14px;
    color:#3f484c;
    cursor:pointer;
    font-size:16px;
    line-height:1.4;
    text-align:center;
  }
  .primary-nav .menu { display:none; }
  .primary-nav.is-open .menu {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:0;
  }
  .primary-nav .menu > li > a {
    padding:9px 12px;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
  }
}

@media (max-width: 760px) {
  /* Mobile header: first row contains search left + social icons right;
     utility links sit underneath and may wrap over several lines. */
  .topbar { width:100%; margin-left:0; }
  .site-wrap { width:calc(100% - 28px); }
  .topbar-inner {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "search social"
      "links links";
    align-items:center;
    gap:8px 12px;
    padding:9px 0 10px;
  }
  .topbar-tools { display:contents; }
  .top-search { grid-area:search; justify-self:start; width:min(190px,100%); height:32px; }
  .top-search input { width:100%; height:30px; font-size:14px; padding:3px 9px; }
  .top-search button { width:34px; height:30px; font-size:20px; }
  .social-links {
    grid-area:social;
    justify-self:end;
    display:flex;
    flex-wrap:nowrap;
    gap:9px;
  }
  .social-links a { width:26px; height:26px; }
  .social-links img { width:23px; height:23px; }
  .top-links {
    grid-area:links;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:center;
    gap:4px 17px;
    width:100%;
    font-size:13px;
    line-height:1.45;
  }
  .top-links li { flex:0 0 auto; }

  .brand-row {
    padding:14px 0 15px;
    grid-template-columns:1fr;
    gap:14px;
  }
  .brand-logo { justify-content:flex-start; }
  .header-ad { width:100%; justify-self:start; justify-content:flex-start; min-height:0; }
  .header-ad-widget { width:468px; max-width:100%; }

  /* Mobile navigation: keep the compact grey "Menü" button. The category
     navigation is hidden until the button is opened, preventing the header
     from becoming crowded on narrow screens. */
  .primary-nav .site-wrap { width:calc(100% - 28px); }
  .mobile-toggle {
    display:block;
    width:100%;
    border:0;
    border-top:1px solid var(--kf-border);
    border-bottom:1px solid var(--kf-border);
    background:#f4f5f5;
    padding:10px 14px;
    color:#3f484c;
    cursor:pointer;
    font-size:16px;
    line-height:1.4;
    text-align:center;
  }
  .primary-nav .menu {
    display:none;
  }
  .primary-nav.is-open .menu {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:0;
  }
  .primary-nav .menu > li > a {
    padding:9px 12px;
    border-top:0;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
  }

  /* Never let article text or images touch the viewport edges. */
  .content-area {
    width:calc(100% - 28px);
    max-width:var(--kf-reading);
    margin:25px auto 0;
  }
  .archive-grid { grid-template-columns:1fr; column-gap:0; }
  .article-card .article-card-image img { width:300px !important; max-width:100% !important; height:auto !important; }
  .article-title { font-size:22px; }
  .single-header .article-title { font-size:30px; }
  .single-content { font-size:16px; }
  .single-content img,
  .featured-image img { max-width:100%; height:auto; }
  .author-box { align-items:flex-start; }
}

@media (max-width: 520px) {
  .topbar-inner {
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px 8px;
  }
  .top-search { width:min(170px,100%); }
  .social-links { gap:6px; }
  .social-links a { width:23px; height:23px; }
  .social-links img { width:20px; height:20px; }
  .top-links { gap:3px 12px; font-size:12px; }
  .primary-nav .menu > li > a { padding:8px 9px; font-size:12px; }
  .single-header .article-title { font-size:27px; }
}

@media (max-width: 390px) {
  .top-search { width:145px; }
  .social-links { gap:4px; }
  .social-links a { width:21px; height:21px; }
  .social-links img { width:18px; height:18px; }
  .top-links { gap:3px 10px; font-size:11px; }
  .primary-nav .menu > li > a { padding:7px 7px; font-size:11px; }
}

/* Instagram News page */
.instagram-news { margin-top:32px; }
.kf-wpzoom-feed { width:100%; }
.kf-wpzoom-feed .wpzoom-instagram-widget, .kf-wpzoom-feed .instagram-widget, .kf-wpzoom-feed .wpzoom-instagram-feed { width:100%; }
.instagram-news > h2 { font-size:22px; line-height:1.25; margin:0 0 20px; }
.instagram-feed-placeholder { border-top:1px solid var(--kf-border); border-bottom:1px solid var(--kf-border); padding:24px 0; color:#596164; }
.instagram-profile-button { display:inline-block; padding:9px 14px; background:var(--kf-blue); color:#fff; text-decoration:none; }
.instagram-profile-button:hover, .instagram-profile-button:focus { color:#fff; text-decoration:none; opacity:.9; }

/* Autorenseiten werden wie die redaktionellen Kategorieseiten zweispaltig dargestellt. */
.author-archive-grid { width:100%; }
.author-archive-description { margin-bottom:25px; }


/* Hard-square author portrait: no inherited image ratio can override this. */
.author-avatar {
  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  max-width:72px !important;
  min-height:72px !important;
  max-height:72px !important;
  flex:0 0 72px !important;
  overflow:hidden !important;
}
.author-avatar img,
.author-avatar img.avatar {
  display:block !important;
  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  max-width:72px !important;
  min-height:72px !important;
  max-height:72px !important;
  object-fit:cover !important;
  object-position:center !important;
}


/* 4.15: deterministic responsive layout across Safari and Chrome. */
.site-wrap,
.content-area,
.primary-nav .site-wrap {
  box-sizing: border-box;
}

/* Never allow the article canvas to escape its own gutter. */
.content-area {
  width: min(var(--kf-reading), calc(100% - 28px)) !important;
  max-width: var(--kf-reading) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-wrap: break-word;
}
.content-area > article,
.content-area > section,
.content-area > .breadcrumbs,
.content-area .single-header,
.content-area .single-content,
.content-area .featured-image,
.content-area .archive-grid,
.content-area .article-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.content-area .featured-image {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.content-area .featured-image img,
.content-area .single-content img,
.content-area .article-card-image img {
  max-width: 100% !important;
  width: auto;
  height: auto;
}

/* Compact header is triggered early enough that a resized desktop browser
   uses exactly the same utility-header geometry as mobile. */
@media (max-width: 1040px) {
  .topbar-inner {
    width: min(var(--kf-width), calc(100% - 28px));
    max-width: calc(100% - 28px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  .topbar-tools { display: contents; }
  .primary-nav .site-wrap {
    width: min(var(--kf-width), calc(100% - 28px));
    max-width: calc(100% - 28px);
    margin-left: auto;
    margin-right: auto;
  }
  .primary-nav .menu { display: none; }
  .primary-nav .mobile-toggle { display: block; }
  .primary-nav.is-open .menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .content-area {
    width: calc(100% - 28px) !important;
    margin-left: 14px !important;
    margin-right: 14px !important;
  }
  .site-wrap,
  .topbar-inner,
  .primary-nav .site-wrap {
    width: calc(100% - 28px) !important;
    margin-left: 14px !important;
    margin-right: 14px !important;
  }
}

@media (max-width: 520px) {
  .content-area,
  .site-wrap,
  .topbar-inner,
  .primary-nav .site-wrap {
    width: calc(100% - 28px) !important;
    margin-left: 14px !important;
    margin-right: 14px !important;
  }
}


/* =====================================================================
   kulturfeder 4.16 – one deterministic responsive layout
   ---------------------------------------------------------------------
   The compact header is deliberately driven by ONE breakpoint. This avoids
   browser-dependent intermediate flex layouts when a desktop window is
   resized. The same 14px gutter is used for header content, navigation and
   page content.
   ===================================================================== */

.site-wrap,
.topbar-inner,
.primary-nav > .site-wrap,
.content-area {
  box-sizing: border-box;
  min-width: 0;
}

/* The blue utility bar itself always reaches the viewport edge. Its content
   never does: the inner wrapper supplies the same 14px minimum gutter. */
.topbar {
  width: 100%;
  margin-left: 0;
}
.topbar-inner {
  width: min(var(--kf-width), calc(100% - 28px));
  max-width: calc(100% - 28px);
  margin-left: auto;
  margin-right: auto;
}

/* Article/page canvas: never touch the viewport edge. */
.content-area {
  width: min(var(--kf-reading), calc(100% - 28px)) !important;
  max-width: var(--kf-reading) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.content-area .featured-image,
.content-area .single-content,
.content-area .single-header,
.content-area .article-card,
.content-area .article-card-image,
.content-area .breadcrumbs,
.content-area .archive-grid,
.content-area > article,
.content-area > section {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}
.content-area img {
  max-width: 100% !important;
  height: auto !important;
}

/* One and the same compact header for tablet, resized desktop windows and
   phones. At this point there is no competing flex layout left active. */
@media (max-width: 1040px) {
  .topbar-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "search social"
      "links links";
    align-items: center;
    column-gap: 12px;
    row-gap: 7px;
    padding: 9px 0 10px;
  }

  .topbar-tools { display: contents !important; }

  .top-search {
    grid-area: search;
    justify-self: start;
    width: min(190px, 100%);
    min-width: 0;
    height: 32px;
  }
  .top-search input {
    width: 100%;
    min-width: 0;
    height: 30px;
    font-size: 14px;
  }
  .top-search button { height: 30px; }

  .social-links {
    grid-area: social;
    justify-self: end;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }
  .social-links a { width: 26px; height: 26px; }
  .social-links img { width: 23px; height: 23px; }

  .top-links {
    grid-area: links;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 4px 17px;
    font-size: 13px;
    line-height: 1.45;
  }
  .top-links li { flex: 0 0 auto; }

  .brand-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px;
  }

  /* The grey button is always full-width; category links are hidden until
     it is opened. */
  .primary-nav .mobile-toggle {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
  }
  .primary-nav > .site-wrap {
    width: min(var(--kf-width), calc(100% - 28px));
    max-width: calc(100% - 28px);
    margin-left: auto;
    margin-right: auto;
  }
  .primary-nav .menu { display: none !important; }
  .primary-nav.is-open .menu {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    min-width: 0;
  }

  .content-area {
    width: calc(100% - 28px) !important;
    max-width: var(--kf-reading) !important;
  }
}

@media (max-width: 520px) {
  .topbar-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
  }
  .top-search { width: min(170px, 100%); }
  .social-links { gap: 6px; }
  .social-links a { width: 23px; height: 23px; }
  .social-links img { width: 20px; height: 20px; }
  .top-links { gap: 3px 12px; font-size: 12px; }
}

@media (max-width: 390px) {
  .top-search { width: 145px; }
  .social-links { gap: 4px; }
  .social-links a { width: 21px; height: 21px; }
  .social-links img { width: 18px; height: 18px; }
  .top-links { gap: 3px 10px; font-size: 11px; }
}


/* v4.19: Homepage desktop uses the large responsive WordPress image source. Category/archive cards
   retain the compact 300px image. On compact windows/mobile the homepage also
   switches to the compact image. */
@media (min-width: 1041px) {
  .content-area .home-feed .article-card-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}
@media (max-width: 1040px) {
  .content-area .home-feed .article-card-image img {
    width: 300px !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* v4.20: Homepage images remain fluid while the browser window is resized.
   Archive/category/author cards keep their compact 300px presentation. */
.content-area .home-feed .article-card-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}