/* usernotices.com — 2026-10 visual refresh, loaded after custom.css.
   Overrides only: same markup, same URLs. Inline styles in blocs/body.php need !important. */
:root {
  --un-ink: #1d2733; --un-text: #3b4654; --un-muted: #6b7684; --un-line: #e6e9ee;
  --un-bg: #f5f7fa; --un-card: #fff; --un-brand: #1f8f7d; --un-brand-soft: #e8f6f3; --un-navy: #1b2c3e;
  --un-radius: 14px;
}
body { background: var(--un-bg); color: var(--un-text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { color: var(--un-ink); font-family: inherit; letter-spacing: -.01em; }
h3 { color: var(--un-ink) !important; font-family: inherit !important; }
a { color: var(--un-brand); }

/* Header & category bar */
.header { background: var(--un-navy); box-shadow: 0 1px 0 rgba(255,255,255,.04); }
.menu { background: #fff; border-bottom: 1px solid var(--un-line); box-shadow: none; }
.menu a { color: var(--un-text); font-weight: 600; }
.menu a:hover { color: var(--un-brand); }

/* Layout */
.wrapper { max-width: 1240px; }
.content { border: 1px solid var(--un-line); border-radius: var(--un-radius); box-shadow: 0 1px 2px rgba(16,24,40,.04); padding: 34px 40px; }
.centercolumn { max-width: 820px; }

/* Article typography */
.content h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.2; font-weight: 750; margin: 8px 0 18px; }
[itemprop="articleBody"] { font-size: 18px; line-height: 1.78; color: var(--un-text); }
[itemprop="articleBody"] p { margin: 0 0 1.15em; }
[itemprop="articleBody"] h2 { font-size: 1.6rem; line-height: 1.3; margin: 1.8em 0 .6em; padding-top: .2em; scroll-margin-top: 80px; }
[itemprop="articleBody"] h3 { font-size: 1.25rem; line-height: 1.35; margin: 1.6em 0 .5em; scroll-margin-top: 80px; }
[itemprop="articleBody"] ul, [itemprop="articleBody"] ol { padding-left: 1.3em; margin: 0 0 1.2em; }
[itemprop="articleBody"] li { margin: .4em 0; }
[itemprop="articleBody"] li::marker { color: var(--un-brand); font-weight: 700; }
[itemprop="articleBody"] strong { color: var(--un-ink); }
[itemprop="articleBody"] table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .92em; display: block; overflow-x: auto; }
[itemprop="articleBody"] th, [itemprop="articleBody"] td { border: 1px solid var(--un-line); padding: 9px 12px; text-align: left; vertical-align: top; }
[itemprop="articleBody"] th { background: var(--un-bg); color: var(--un-ink); }
[itemprop="articleBody"] blockquote { margin: 0 0 1.2em; padding: 12px 18px; border-left: 4px solid var(--un-brand); background: var(--un-brand-soft); border-radius: 0 10px 10px 0; }
.content img { border-radius: 12px; }

/* Boxes generated with inline styles */
.featured-snippet { background: var(--un-brand-soft) !important; border-left: 4px solid var(--un-brand) !important; border-radius: 0 12px 12px 0; padding: 16px 20px !important; font-size: 1.05rem; line-height: 1.65; color: var(--un-ink); }
.table-of-contents { background: #fff !important; border: 1px solid var(--un-line) !important; border-left: 4px solid var(--un-brand) !important; border-radius: 12px !important; padding: 16px 20px !important; }
.table-of-contents a { color: var(--un-ink) !important; }
.table-of-contents a:hover { color: var(--un-brand) !important; }
.key-takeaways, .related-articles { background: #fff !important; border: 1px solid var(--un-line) !important; border-left: 4px solid var(--un-brand) !important; border-radius: 12px !important; }
.faq-section .faq-item { border: 1px solid var(--un-line); border-radius: 12px; padding: 14px 18px; margin: 10px 0; background: #fff; }
.faq-section h3[itemprop="name"] { color: var(--un-ink) !important; font-size: 1.05rem; }
.color-box, .tip-box { border-radius: 12px; }
.breadcrumb { font-size: .85rem; }
.summary.topic, .last_updated { color: var(--un-muted); font-size: .88rem; }

/* Sidebar */
.leftcolumn .segment span { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--un-muted); }
.leftcolumn ul li a { border-radius: 10px; }
.relatesearchbody span { display: inline-block; margin: 0 4px 6px 0; padding: 3px 10px; border: 1px solid var(--un-line); border-radius: 999px; background: #fff; font-size: 13px !important; color: var(--un-text); }

@media (max-width: 800px) {
  .content { padding: 18px 16px; border-radius: 0; border-left: 0; border-right: 0; }
  [itemprop="articleBody"] { font-size: 17px; line-height: 1.72; }
  [itemprop="articleBody"] h2 { font-size: 1.35rem; }
  [itemprop="articleBody"] h3 { font-size: 1.15rem; }
}