/* Additions to the redesign's styles.css for the live site (real news and the published legal
   texts). Colors only through the tokens defined in styles.css. */

/* Home: no news cards below the featured one */
.news-grid-wide:not(:has(.news-card, .chips)) { display: none; }
.news-empty { margin-top: 8px; }

/* News text written in the dashboard's editor */
.article-body > * { max-width: 100%; }
.article-body h1 { font-size: 40px; margin-top: 16px; }
.article-body h3 { font-size: 22px; margin-top: 8px; }
.article-body ul, .article-body ol { display: grid; gap: 8px; padding-left: 0; }
.article-body ul { list-style: none; }
.article-body ul li { position: relative; padding-left: 24px; }
.article-body ul li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 12px; background: var(--red); transform: skewX(-18deg); }
.article-body ol { padding-left: 24px; }
.article-body a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.article-body img { height: auto; border-radius: var(--radius); }
.article-body img[style*="float"] { margin: 4px 20px 12px; }
.article-body blockquote { margin: 0; padding: 14px 20px; border-left: 3px solid var(--red); background: var(--tint); border-radius: 0 8px 8px 0; color: var(--ink); }
.article-body pre { padding: 16px; border-radius: 8px; background: var(--code-bg); color: var(--on-accent); overflow-x: auto; font-size: 15px; }
.article-body code { font-size: .9em; }
.article-body hr { border: 0; height: 1px; background: var(--line); }
.article-body table { width: 100%; border-collapse: collapse; font-size: 16px; display: block; overflow-x: auto; }
.article-body th, .article-body td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-body th { background: var(--surface); color: var(--ink); }
.article-body iframe, .article-body video { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius); }
.article-video { border-radius: var(--radius); overflow: hidden; background: var(--app); box-shadow: var(--shadow); }
.article-video iframe { display: block; border-radius: 0; }
.article-video { position: relative; aspect-ratio: 16 / 9; }
.article-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.article-video-play { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; background: var(--app); }
.article-video-play img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.article-video-play::after { content: ""; position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: 14px; background: #f00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='white'/%3E%3C/svg%3E") center / 28px no-repeat; opacity: .9; transition: opacity .2s; }
.article-video-play:hover::after { opacity: 1; }
.article-body p[style*="text-align"] { max-width: none; }

/* Published legal texts */
.legal-body strong { color: var(--ink); }
.legal-body p, .legal-body li { overflow-wrap: anywhere; }
.legal-part { display: grid; gap: 4px; scroll-margin-top: 96px; }
.legal-part-note { font-weight: 500; font-size: 14px; opacity: .75; }
.legal-steps { display: grid; gap: 10px; padding-left: 22px; }