/*
Theme Name: Pixelario
Theme URI: https://example.com/pixelario
Author: Pixelario
Description: Tema editorial próprio para o portal Pixelario. Projetado para funcionar com o plugin Pixelario Core.
Version: 1.0.18
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: pixelario
*/

:root {
  --px-bg: #ffffff;
  --px-surface: #f4f5f7;
  --px-surface-2: #eceff2;
  --px-text: #101214;
  --px-muted: #606a73;
  --px-border: #d9dde1;
  --px-header: #050505;
  --px-blue: #1287ee;
  --px-blue-dark: #0667bb;
  --px-orange: #ff8500;
  --px-red: #e31b23;
  --px-grafite: #1b1f24;
  --px-white: #ffffff;
  --px-shadow: 0 12px 32px rgba(0,0,0,.12);
  --px-radius: 7px;
  --px-max: 1440px;
}

html[data-theme="dark"] {
  --px-bg: #1b1f24;
  --px-surface: #22272d;
  --px-surface-2: #2a3036;
  --px-text: #f2f4f6;
  --px-muted: #b4bdc6;
  --px-border: #394149;
  --px-grafite: #121519;
  --px-shadow: 0 12px 32px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--px-bg);
  color: var(--px-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  padding-top: 73px;
  transition: background-color .2s ease, color .2s ease;
}
body.admin-bar { padding-top: 105px; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  height: 73px;
  background: var(--px-header);
  border-bottom: 3px solid var(--px-orange);
  color: #fff;
}
.admin-bar .site-header { top: 32px; }
.header-inner {
  width: min(100%, var(--px-max));
  height: 70px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.header-side { display:flex; align-items:center; gap: 16px; min-width:0; }
.header-left { justify-content:flex-start; }
.header-right { justify-content:flex-end; }
.icon-button {
  width: 42px; height: 42px;
  border: 0; background: transparent; color: #fff;
  display:grid; place-items:center; border-radius: 50%;
  transition: background-color .15s ease, color .15s ease;
}
.icon-button:hover, .icon-button:focus-visible { background: rgba(255,255,255,.12); color: var(--px-orange); outline: none; }
.icon-button svg { width: 25px; height:25px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.logo-link { display:flex; align-items:center; justify-content:center; height:100%; }
.logo-link img { width: min(300px, 36vw); max-height: 48px; object-fit: contain; }

.search-panel {
  position:absolute; top: 70px; right: 24px; left: 24px;
  background: var(--px-header); border-top:1px solid #242424;
  padding: 14px 0 16px; display:none;
}
.search-panel.is-open { display:block; }
.search-form { max-width: 880px; margin: 0 auto; display:flex; gap:10px; padding:0 16px; }
.search-form input {
  flex:1; min-width:0; background:#161616; color:#fff; border:1px solid #3b3b3b;
  border-radius: 5px; padding: 12px 14px; outline:none;
}
.search-form input:focus { border-color: var(--px-orange); }
.search-form button { background:var(--px-orange); color:#111; border:0; border-radius:5px; padding:0 18px; font-weight:800; }

.menu-overlay { position:fixed; inset:0; background:rgba(0,0,0,.64); opacity:0; visibility:hidden; transition:.2s ease; z-index:10001; }
.menu-overlay.is-open { opacity:1; visibility:visible; }
.side-menu {
  position:fixed; z-index:10002; left:0; top:0; bottom:0; width:min(340px, 88vw);
  background:var(--px-grafite); color:#fff; transform:translateX(-105%); transition:transform .22s ease;
  box-shadow:18px 0 45px rgba(0,0,0,.26); overflow:auto;
}
.side-menu.is-open { transform:translateX(0); }
.side-menu-inner { padding:24px; }
.side-menu-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:20px; border-bottom:1px solid #394149; }
.side-menu-head img { width:190px; height:auto; }
.side-menu-nav { margin-top:22px; }
.side-menu-nav ul { list-style:none; margin:0; padding:0; }
.side-menu-nav li { margin:0; }
.side-menu-nav a { display:block; padding:12px 10px; border-radius:5px; font-weight:650; color:#fff; }
.side-menu-nav a:hover, .side-menu-nav a:focus-visible { background:rgba(255,255,255,.06); color:var(--px-orange); outline:none; }

.site-main { width:min(100%, var(--px-max)); margin:0 auto; padding:24px; }
.home-main { padding-top: 10px; }

.highlights { display:grid; grid-template-columns: 58fr 42fr; gap:14px; margin-bottom: 28px; }
/* The slider itself is the positioning context for its controls. */
.highlight-slider { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:var(--px-radius); background:#20252b; isolation:isolate; }
.highlight-card { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--px-radius); background:#20252b; isolation:isolate; }
.slider-card { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border-radius:inherit; }
.highlight-card img { width:100%; height:100%; object-fit:cover; }
.highlight-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.02) 25%, rgba(0,0,0,.88) 100%); z-index:1; }
.highlight-link { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; justify-content:flex-end; padding:24px; color:#fff; }
.highlight-title { margin:0; font-size:clamp(1.25rem, 2.15vw, 2rem); line-height:1.08; font-weight:850; letter-spacing:-.025em; max-width:95%; }
.highlight-meta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:10px; font-size:.86rem; color:#e8eaec; }
.highlight-meta .comment-count { color:#ff434a; font-weight:800; }
.slider-card { display:none; }
.slider-card.is-active { display:block; }
.slider-arrow {
  position:absolute; z-index:4; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border:0; border-radius:50%; background:rgba(0,0,0,.63); color:#fff;
  display:grid; place-items:center;
}
.slider-arrow:hover { background:var(--px-orange); color:#111; }
.slider-arrow.prev { left:14px; }
.slider-arrow.next { right:14px; }
.slider-arrow svg { width:21px; height:21px; }
.slider-dots { position:absolute; z-index:4; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:7px; }
.slider-dot { width:11px; height:11px; border-radius:50%; border:0; background:#aeb6bf; padding:0; }
.slider-dot.is-active { background-color:var(--px-orange); }

.section-heading { display:flex; flex-direction:column; align-items:flex-start; gap:0; margin:0 0 14px; }
.section-title-box { margin:0; background:var(--px-blue); color:#fff; padding:8px 18px 9px; border-radius:6px 6px 0 0; font-size:1.15rem; line-height:1.1; font-weight:850; text-transform:uppercase; white-space:nowrap; }
.section-rule { display:block; flex:none; align-self:stretch; width:100%; height:4px; margin:0; background:var(--px-orange); }

.news-list { display:flex; flex-direction:column; }
.news-item {
  display:grid; grid-template-columns: 26% 1fr; gap:20px; padding: 0 0 12px; margin: 0 0 12px;
  border-bottom:1px solid var(--px-border);
}
.news-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--px-radius); background:var(--px-surface-2); }
.news-thumb img { width:100%; height:100%; object-fit:cover; }
.news-content { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.news-title { margin:0; font-size:clamp(1.08rem, 1.6vw, 1.5rem); line-height:1.15; font-weight:800; letter-spacing:-.018em; }
.news-title a:hover { color:var(--px-blue); }
.news-excerpt { margin:7px 0 9px; color:var(--px-muted); font-size:1rem; line-height:1.38; }
.news-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--px-muted); font-size:.86rem; }
.news-meta .comments { color:var(--px-red); font-weight:800; }
.load-more-wrap { display:flex; justify-content:center; margin:24px 0 8px; }
.load-more-button { border:0; background:var(--px-blue-dark); color:#fff; padding:11px 26px; border-radius:6px; font-weight:850; text-transform:uppercase; }
.load-more-button:hover { background:var(--px-orange); color:#111; }
.load-more-button.is-loading { opacity:.7; pointer-events:none; }

.site-footer { margin-top:42px; background:#050505; color:#fff; }
.footer-inner { width:min(100%, var(--px-max)); margin:0 auto; padding:26px 24px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.footer-nav a { color:#dce0e4; margin-right:14px; font-size:.92rem; }
.footer-nav a:hover { color:var(--px-orange); }
.footer-copy { color:#9ea7b0; font-size:.86rem; }

/* Single */
.single-layout { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:36px; align-items:start; }
.single-main { min-width:0; }
.article-header { max-width: 900px; }
.article-title { margin:0; font-size:clamp(2rem, 4.2vw, 3.8rem); line-height:1.03; letter-spacing:-.03em; font-weight:900; }
.article-subtitle { margin:10px 0 12px; color:var(--px-muted); font-size:1.2rem; line-height:1.4; }
.article-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--px-muted); font-size:.9rem; margin-bottom:18px; }
.article-meta .comments { color:var(--px-red); font-weight:800; }
.article-hero { border-radius:var(--px-radius); overflow:hidden; aspect-ratio:16/9; background:var(--px-surface-2); margin-bottom:24px; }
.article-hero img { width:100%; height:100%; object-fit:cover; }
.article-body { width:min(100%, 820px); font-size:18px; line-height:1.8; }
.article-body p { margin:0 0 1.15em; }
.article-body h2 { font-size:1.65rem; line-height:1.2; margin:1.6em 0 .65em; }
.article-body h3 { font-size:1.28rem; line-height:1.25; margin:1.4em 0 .55em; }
.article-body blockquote {
  margin:1.5em 0; padding:20px 24px;
  border:0; border-left:4px solid var(--px-orange);
  border-radius:0 var(--px-radius) var(--px-radius) 0;
  background:var(--px-surface); color:var(--px-text);
  font-family:Georgia, "Times New Roman", serif; font-style:italic;
  overflow-wrap:anywhere;
}
.article-body blockquote p:last-child { margin-bottom:0; }
.article-body blockquote cite {
  display:block; margin-top:12px; color:var(--px-muted);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-style:normal; font-size:.85em;
}
.article-body a { color:var(--px-blue); text-decoration:underline; text-decoration-thickness:.08em; text-underline-offset:2px; }
.article-body a:hover { color:var(--px-orange); }
.article-source { width:min(100%, 820px); margin:25px 0; padding:14px 16px; border-left:4px solid var(--px-orange); background:var(--px-surface); font-size:.92rem; color:var(--px-muted); }
.article-source a { color:var(--px-blue); }
.topics { margin:24px 0; }
.topics-title { font-weight:850; margin-bottom:9px; }
.topic-pill { display:inline-block; background:var(--px-surface); border:1px solid var(--px-border); padding:5px 9px; border-radius:999px; margin:0 6px 6px 0; font-size:.83rem; }
.topic-pill:hover { border-color:var(--px-orange); color:var(--px-orange); }
.screen-reader-text {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.share-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:18px 0 26px;
}
.share-button {
  position:relative;
  width:40px;
  height:40px;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#737b84;
  font-size:0;
  font-weight:700;
  text-decoration:none;
  transition:color .16s ease, transform .16s ease, background-color .16s ease;
}
.share-button svg {
  width:22px;
  height:22px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.share-button .share-brand {
  width:24px;
  height:24px;
  fill:currentColor;
  stroke:none;
}
.share-button:hover,
.share-button:focus-visible {
  color:var(--px-orange);
  background:rgba(255,133,0,.08);
  transform:translateY(-1px);
  outline:none;
}
.share-button:focus-visible {
  box-shadow:0 0 0 2px var(--px-orange);
}
.share-copy { position:relative; }
.share-toast { position:absolute; left:50%; bottom:calc(100% + 7px); transform:translateX(-50%); background:#111; color:#fff; padding:4px 8px; border-radius:4px; font-size:.74rem; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease; z-index:5; }
.share-toast.is-visible { opacity:1; }
.related-sidebar { background:var(--px-surface); padding:16px; border-radius:var(--px-radius); }
.related-title { margin:0 0 12px; font-size:1.05rem; text-transform:uppercase; font-weight:900; color:var(--px-orange); }
.related-item { display:grid; grid-template-columns:94px 1fr; gap:10px; padding:0 0 12px; margin:0 0 12px; border-bottom:1px solid var(--px-border); }
.related-item:last-child { border-bottom:0; margin-bottom:0; padding-bottom:0; }
.related-thumb { aspect-ratio:16/9; overflow:hidden; border-radius:5px; background:var(--px-surface-2); }
.related-thumb img { width:100%; height:100%; object-fit:cover; }
.related-item-title { font-weight:750; font-size:.9rem; line-height:1.22; }
.related-date { margin-top:4px; color:var(--px-muted); font-size:.76rem; }
.disqus-wrap { width:min(100%, 820px); margin-top:32px; }

/* Pages, archives and search */
.archive-head { margin-bottom:18px; }
.archive-title { margin:0; font-size:2.1rem; line-height:1.1; font-weight:900; }
.archive-description { color:var(--px-muted); }
.pagination { margin:25px 0; }
.pagination .page-numbers { display:inline-block; border:1px solid var(--px-border); padding:8px 11px; margin-right:6px; border-radius:4px; }
.pagination .current { background:var(--px-blue); color:#fff; border-color:var(--px-blue); }

.empty-state { padding:40px 0; color:var(--px-muted); }

@media (max-width: 900px) {
  .site-main { padding:18px; }
  .highlights { grid-template-columns:1fr; }
  .news-item { grid-template-columns: 34% 1fr; gap:14px; }
  .single-layout { grid-template-columns:1fr; }
  .related-sidebar { order:2; }
}

@media (max-width: 680px) {
  body { padding-top:63px; overflow-x:hidden; }
  body.admin-bar { padding-top:109px; }

  .site-header { height:63px; }
  .admin-bar .site-header { top:46px; }
  .header-inner { height:60px; padding:0 12px; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
  .header-inner > .logo-link { min-width:0; justify-self:center; }
  .header-inner > .logo-link img { width:min(200px, 50vw, calc(100vw - 200px)); max-height:36px; }
  .icon-button { width:38px; height:38px; }
  .header-side { gap:6px; }

  .search-panel { top:60px; left:0; right:0; }
  .search-form { padding:0 12px; }
  .search-form button { padding:0 14px; }

  /* Menu compacto no celular */
  .side-menu {
    width:min(50%, 260px);
    max-width:260px;
    top:0;
    bottom:auto;
    max-height:100dvh;
    overflow:auto;
  }
  .side-menu-inner { padding:12px 14px; }
  .side-menu-head { gap:8px; padding-bottom:10px; }
  .side-menu-head img { width:120px; }
  .side-menu-head .icon-button { width:34px; height:34px; }
  .side-menu-head .icon-button span { font-size:24px !important; }
  .side-menu-nav { margin-top:10px; }
  .side-menu-nav a { padding:7px 0; font-size:.9rem; line-height:1.2; }

  .site-main { width:100%; max-width:100%; padding:14px 12px; }

  .highlights { grid-template-columns:1fr; gap:10px; margin-bottom:20px; }
  .highlight-link { padding:16px; }
  .highlight-title { font-size:1.12rem; transform:translateY(-18px); }
  .highlight-meta { font-size:.76rem; gap:8px; }
  .slider-arrow { width:36px; height:36px; }
  .slider-arrow.prev { left:8px; }
  .slider-arrow.next { right:8px; }
  .slider-dots { bottom:8px; gap:5px; }
  .slider-dot { width:9px; height:9px; }

  .section-title-box {
    font-size:.75rem;
    padding:6px 10px;
  }
  .section-rule { height:3px; }

  .news-item {
    width:100%;
    grid-template-columns:38% minmax(0,1fr);
    gap:10px;
    padding-bottom:10px;
    margin-bottom:10px;
  }
  .news-content { min-width:0; }
  .news-title {
    font-size:.8rem;
    line-height:1.15;
    overflow-wrap:anywhere;
  }
  .news-excerpt { display:none; }
  .news-meta {
    margin-top:10px;
    font-size:.68rem;
    gap:5px;
    line-height:1.2;
  }
  .news-thumb { width:100%; }

  /* Rodapé compacto */
  .site-footer { margin-top:24px; }
  .footer-inner {
    width:100%;
    padding:6px 8px;
    gap:3px;
    min-height:0;
  }
  .footer-nav { margin:0; padding:0; line-height:1; }
  .footer-nav a {
    font-size:50%;
    margin-right:8px;
  }
  .footer-copy {
    font-size:50%;
    line-height:1;
    margin:0;
    padding:0;
  }

  /* Matéria: uma coluna, sem largura herdada do desktop */
  .single-layout {
    display:block;
    width:100%;
    max-width:none;
    margin:0;
  }
  .single-main {
    display:block;
    width:100%;
    max-width:none;
    min-width:0;
    margin:0;
  }
  .article-header {
    width:100%;
    max-width:none;
    margin:0;
  }
  .article-title {
    width:100%;
    max-width:none;
    margin:0;
    font-size:clamp(1.65rem, 8vw, 2rem);
    line-height:1.08;
    letter-spacing:-.025em;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .article-subtitle {
    width:100%;
    max-width:none;
    margin:8px 0 10px;
    font-size:.92rem;
    line-height:1.35;
    overflow-wrap:anywhere;
  }
  .article-meta {
    width:100%;
    max-width:none;
    margin-top:12px;
    margin-bottom:14px;
    gap:7px;
    font-size:.72rem;
    line-height:1.25;
  }
  .article-hero {
    width:100%;
    max-width:100%;
    margin:0 0 18px;
    aspect-ratio:16/9;
  }
  .article-body {
    width:100%;
    max-width:100%;
    min-width:0;
    font-size:16px;
    line-height:1.7;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .article-body img,
  .article-body video,
  .article-body iframe,
  .article-body embed,
  .article-body object {
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
  }
  .article-body iframe { aspect-ratio:16/9; }
  .article-body pre,
  .article-body table {
    max-width:100%;
    overflow-x:auto;
  }
  .article-body pre {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
  }
  .article-body table {
    display:block;
    width:max-content;
    min-width:100%;
  }
  .article-body h2 { font-size:1.35rem; }
  .article-body h3 { font-size:1.15rem; }
  .article-body blockquote { margin:1.2em 0; padding:16px 18px; }

  .article-source,
  .disqus-wrap {
    width:100%;
    max-width:100%;
  }

  .share-row { gap:6px; margin:14px 0 20px; }
  .share-button { width:36px; height:36px; }

  .related-sidebar {
    width:100%;
    max-width:100%;
    margin-top:24px;
    padding:12px;
  }
  .related-item {
    grid-template-columns:88px minmax(0,1fr);
    gap:9px;
  }

  .archive-title { font-size:1.6rem; }
}

@media (max-width: 420px) {
  .side-menu {
    width:50%;
  }
  .news-item {
    grid-template-columns:42% minmax(0,1fr);
    gap:8px;
  }
  .news-title { font-size:.78rem; }
  .news-meta { font-size:.64rem; }
  .article-title { font-size:1.6rem; }
}

/* Institutional pages */
.page-main { width:min(100%, 900px); margin:0 auto; }
.page-main .article-header { max-width:none; }
.page-main .article-body { width:100%; max-width:none; }
.error-404 { text-align:center; padding:70px 20px; }
.error-404-code { font-size:clamp(4rem,12vw,5rem); font-weight:900; line-height:1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* Launch accessibility: preserve the colored dots while enlarging touch areas. */
.slider-dots { gap:2px; }
.slider-dot { box-sizing:border-box;width:26px;height:26px;border:7px solid transparent;background-clip:padding-box; }
.section-title-box { background:var(--px-blue-dark); }
@media(max-width:680px){ .slider-dot {width:26px;height:26px;border-width:8px;} .slider-dots {bottom:2px;gap:2px;} }

/* Approved homepage labels. Font served by Pixelario; license in assets/fonts. */
@font-face {
  font-family:'Barlow Semi Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('assets/fonts/barlow-semi-condensed-700-latin.woff2') format('woff2');
}
.highlights { align-items:start; }
.fixed-featured-group { position:relative; align-self:end; min-width:0; }
.fixed-featured-group .fixed-highlight { width:100%; }
.highlight-eyebrow, .home-main #latest-title { font-family:"Barlow Semi Condensed", "Segoe UI", Arial, sans-serif; font-weight:700; letter-spacing:.025em; }
.highlight-eyebrow { font-size:1.2rem; line-height:1.2; }
.fixed-eyebrow { display:flex; align-items:flex-end; color:#fff; margin:0 0 10px; border-bottom:2px solid var(--px-red,#e31b23); }
.fixed-eyebrow span { display:inline-block; background:var(--px-red,#e31b23); padding:6px 10px; border-radius:4px 4px 0 0; }
.slider-eyebrow { position:absolute; top:16px; left:16px; z-index:5; color:#fff; background:var(--px-orange,#ff8500); padding:6px 10px; border-radius:4px; pointer-events:none; }
@media (max-width:900px) {
  .fixed-featured-group { align-self:auto; }
  .fixed-eyebrow { position:absolute; top:12px; left:12px; z-index:5; margin:0; border:0; pointer-events:none; }
  .fixed-eyebrow span { padding:4px 7px; border-radius:4px; }
  .slider-eyebrow { top:12px; left:12px; padding:4px 7px; }
  .highlight-eyebrow { font-size:.875rem; }
}


/* The ARTIGO category supplies the editorial label above the article title. */
.article-header .article-type-label {
  display:table; width:auto; max-width:100%; margin:0 0 12px;
  padding:6px 10px; border-radius:4px;
  background:#16723d; color:#fff;
  font-family:"Barlow Semi Condensed", "Segoe UI", Arial, sans-serif;
  font-size:1.2rem; line-height:1.2; font-weight:700; letter-spacing:.025em;
}
@media (max-width:680px) {
  .article-header .article-type-label { font-size:.875rem; padding:4px 7px; margin-bottom:10px; }
}


/* Keep slider headlines above the navigation dots at every viewport size. */
.highlight-slider .highlight-link { padding-bottom:52px; }
.highlight-slider .highlight-title { transform:none; }
@media (max-width:680px) {
  .highlight-slider .highlight-link { padding-bottom:40px; }
}

/* Homepage calendar: covers and dates, without article links or titles. */
.px-calendar { margin-top:36px; }
.px-calendar-heading { display:flex; align-items:center; position:relative; padding-bottom:17px; margin-bottom:22px; gap:12px; }
.px-calendar-heading::after { content:""; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--px-orange); border-radius:2px; }
.px-calendar-heading::before { content:""; position:absolute; bottom:0; left:0; width:155px; height:7px; z-index:1; background:var(--px-orange); clip-path:polygon(0 0,calc(100% - 12px) 0,100% 100%,0 100%); }
.px-calendar-title { margin:0; color:#fff; background:var(--px-blue-dark); font:700 1.375rem/1.2 "Barlow Semi Condensed","Segoe UI",Arial,sans-serif; letter-spacing:.025em; padding:9px 25px 9px 18px; border-radius:6px; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%); }
.px-calendar-controls { display:flex; gap:8px; margin-left:auto; }
.px-calendar-arrow { display:grid; place-items:center; border:0; width:44px; height:44px; border-radius:50%; background:#1b1f24; color:#fff; padding:10px; }
.px-calendar-arrow svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; }
.px-calendar-arrow:hover:not(:disabled) { background:var(--px-red); }
.px-calendar-arrow:disabled { opacity:.3; cursor:default; }
.px-calendar-arrow:focus-visible,.px-calendar-rail:focus-visible { outline:3px solid var(--px-orange); outline-offset:3px; }
.px-calendar-rail { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-color:var(--px-orange) var(--px-surface-2); scrollbar-width:thin; padding:0 0 17px; margin:0; list-style:none; overscroll-behavior-x:contain; }
.px-calendar-rail::-webkit-scrollbar { height:6px; }
.px-calendar-rail::-webkit-scrollbar-track { background:var(--px-surface-2); border-radius:8px; }
.px-calendar-rail::-webkit-scrollbar-thumb { background:var(--px-orange); border-radius:8px; }
.px-calendar-cover { flex:0 0 calc((100% - 80px)/6); min-width:150px; aspect-ratio:2/3; position:relative; border-radius:7px; overflow:hidden; background:var(--px-surface-2); scroll-snap-align:start; }
.px-calendar-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.px-calendar-date { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 20px); display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:5px; white-space:nowrap; background:var(--px-orange); color:#101214; font-size:14px; line-height:1.2; font-weight:750; box-shadow:0 3px 12px rgba(0,0,0,.25); }
.px-calendar-date svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; flex-shrink:0; }
.px-calendar-empty { color:var(--px-muted); margin:0; }
@media(max-width:680px) {
  .px-calendar { margin-top:28px; }
  .px-calendar-heading { padding-bottom:15px; margin-bottom:19px; }
  .px-calendar-heading::before { width:122px; }
  .px-calendar-title { font-size:1.0625rem; padding:8px 22px 8px 12px; }
  .px-calendar-controls { gap:6px; }
  .px-calendar-rail { gap:12px; }
  .px-calendar-cover { flex-basis:43%; min-width:0; }
  .px-calendar-date { bottom:12px; padding:8px 10px; font-size:12px; gap:5px; }
  .px-calendar-date svg { width:14px; height:14px; }
}

/* Calendar covers use 70% of their previous width and keep the 2:3 ratio. */
.px-calendar-cover { flex-basis:calc(11.66666667% - 9.33333333px); min-width:105px; scroll-snap-align:center; }
.px-calendar-rail.is-positioned::before,.px-calendar-rail.is-positioned::after { content:""; flex:0 0 var(--px-calendar-edge,0px); }
.px-calendar-date { bottom:10px; max-width:calc(100% - 10px); padding:7px 6px; font-size:12px; gap:4px; }
.px-calendar-date svg { width:14px; height:14px; }
@media(max-width:680px) {
  .px-calendar-cover { flex-basis:30.1%; min-width:0; }
  .px-calendar-date { bottom:8px; padding:6px; }
}
@media(max-width:360px) {
  .px-calendar-date { font-size:11px; }
  .px-calendar-date svg { display:none; }
}

/* Related news follow the article, including the comments, on desktop.
   Specificity also accommodates the older layout in WordPress Additional CSS. */
@media(min-width:901px) {
  .single-post .site-main .single-layout {
    display:grid !important;
    grid-template-columns:minmax(0, .6fr) minmax(0, 800px) 340px !important;
    gap:clamp(24px, 5.2vw, 100px) !important;
    width:100% !important;
    max-width:100% !important;
    padding-right:60px !important;
    align-items:start;
  }
  .single-post .site-main .single-main {
    grid-column:2 !important;
    min-width:0;
    width:100% !important;
    max-width:800px !important;
  }
  .single-post .site-main .related-sidebar {
    --px-related-top:89px;
    grid-column:3 !important;
    width:320px !important;
    margin-left:20px;
    position:fixed;
    top:var(--px-related-top);
    /* Match column 3's horizontal position, including the unused part of .6fr. */
    right:calc(84px + max(0px, 40% - 499.2px - clamp(19.2px, 4.16vw, 80px)));
    align-self:start;
    max-height:calc(100vh - var(--px-related-top) - 16px);
    max-height:calc(100dvh - var(--px-related-top) - 16px);
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
  }
  .single-post.admin-bar .site-main .related-sidebar { --px-related-top:121px; }
}
@media(max-width:900px) {
  .single-post .site-main .single-layout {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding-right:0 !important;
  }
  .single-post .site-main .single-main {
    grid-column:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0;
  }
  .single-post .site-main .related-sidebar {
    grid-column:auto !important;
    position:static;
    top:auto;
    right:auto;
    width:100% !important;
    max-width:100% !important;
    max-height:none;
    overflow:visible;
    margin-left:0;
    margin-top:24px !important;
  }
}

/* Article shortcut to the comments, including the Disqus consent panel. */
.article-comments-shortcut { color:var(--px-blue); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.article-comments-shortcut:hover { color:var(--px-orange); }
.article-comments-shortcut:focus-visible { outline:2px solid var(--px-orange); outline-offset:4px; border-radius:2px; }
.article-comments-target { scroll-margin-top:90px; }
.admin-bar .article-comments-target { scroll-margin-top:125px; }
@media (max-width:782px) { .admin-bar .article-comments-target { scroll-margin-top:140px; } }