/* newsplus design layer: readable article text, accessible shared widgets, related articles and the
   slim sticky bar. Site colours and theme-specific fixes live in each site's css/site-newsplus.css. */
:root {
  --np-read-size: 18px;
  --np-read-size-sm: 17px;
  --np-read-line: 1.7;
  --np-read-color: #222;
  --np-read-measure: 70ch;
  --np-read-font: inherit;
  --np-r-sm: 6px;
  --np-r-lg: 12px;
  --np-tap: 44px;
}

/* G1 + G5: article body. Text pasted from Word/other sites carries inline fonts, sizes and
   justification; the reader gets one font, one size and left-aligned text. Headings, code, icons
   and deliberate colours inside spans are left alone. */
.np-article-body { font-size: var(--np-read-size) !important; line-height: var(--np-read-line) !important; color: var(--np-read-color); }
.np-article-body,
.np-article-body :is(p, li, font, td, blockquote, strong, b, em, u, div:not([class]), span:not([class]), a:not([class]), i:not([class])) {
  font-family: var(--np-read-font) !important;
}
.np-article-body :is(p, li, blockquote, div:not([class]), font, span:not([class])) {
  font-size: inherit !important;
  line-height: inherit !important;
}
.np-article-body :is(p, li, div:not([class]), blockquote) {
  text-align: left !important;
  text-indent: 0 !important;
  font-weight: 400;
  letter-spacing: normal !important;
  word-spacing: normal !important;
}
.np-article-body p { color: var(--np-read-color) !important; margin: 0 0 1.1em !important; }
.np-article-body p:not(:has(img, iframe, video, table)) { max-width: var(--np-read-measure); }
.np-article-body :is(ul, ol) { max-width: var(--np-read-measure); padding-left: 1.4em; margin: 0 0 1.1em; }
.np-article-body li { margin-bottom: .35em; }
.np-article-body :is(p, div)[style*="center"] { text-align: center !important; }  /* captions, centred photos */
.np-article-body :is(h2, h3, h4) { font-family: inherit; line-height: 1.3; margin: 1.4em 0 .6em; text-align: left; }
.np-article-body h2 { font-size: 1.35em; } .np-article-body h3 { font-size: 1.2em; } .np-article-body h4 { font-size: 1.05em; }
.np-article-body blockquote { border-left: 4px solid var(--np-accent); margin: 1.4em 0; padding: .2em 0 .2em 1em; font-style: italic; }
.np-article-body a { text-decoration: underline; text-underline-offset: 2px; }
.np-article-body :is(table) { display: block; max-width: 100%; overflow-x: auto; }
.np-article-body :is(pre, code) { font-family: ui-monospace, Consolas, monospace !important; white-space: pre-wrap; }
.np-article-body img { border-radius: var(--np-r-sm); }
.np-article-body :is(iframe, video, embed, object) { max-width: 100% !important; }
.np-article-body { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .np-article-body { font-size: var(--np-read-size-sm) !important; }
}

/* G14: share buttons with white text that passes 4.5:1 */
.np-fb { background: #1464d8; } .np-msg { background: #0063cc; } .np-tg { background: #1a76a6; }
.np-li { background: #0a5bab; } .np-copy { background: #4b5563; }
.np-share__btn { min-height: var(--np-tap); height: auto; border-radius: var(--np-r-sm); }
@media (max-width: 520px) { .np-share__btn { width: var(--np-tap); } }
.np-star { min-width: 36px; min-height: var(--np-tap); }

/* G9: dark gradient behind text that sits on a photo */
.np-scrim { position: relative; }
.np-scrim::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,0) 70%); z-index: 1; }
.np-scrim > :not(img):not(picture) { position: relative; z-index: 2; }

/* G12: related articles */
.np-related { margin: 36px 0 12px; font-family: var(--np-font); clear: both; }
.np-related__title { font-size: 22px !important; font-weight: 700 !important; margin: 0 0 16px !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--np-text) !important; padding: 0 0 10px; border-bottom: 2px solid var(--np-accent); }
.np-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.np-related__card { display: flex; flex-direction: column; gap: 8px; color: var(--np-text) !important; text-decoration: none !important; }
.np-related__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--np-r-sm); background: var(--np-soft); }
.np-related__name { font-weight: 600; font-size: 16px; line-height: 1.4; text-transform: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.np-related__card:hover .np-related__name { color: var(--np-accent); }
.np-related__date { font-size: 13px; color: #5c6370; }
@media (max-width: 760px) { .np-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .np-related__name { font-size: 15px; } }

/* G13: slim bar that appears when scrolling up, plus reading progress */
.np-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 9990; background: var(--np-surface); box-shadow: 0 1px 0 var(--np-border), 0 4px 14px rgba(0,0,0,.08);
  transform: translateY(-100%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; font-family: var(--np-font); }
.np-sticky.is-shown { transform: none; visibility: visible; transition: transform .22s ease; }
.np-sticky__in { max-width: 1200px; margin: 0 auto; height: 52px; padding: 0 12px; display: flex; align-items: center; gap: 14px; }
.np-sticky__logo { flex: none; display: flex; align-items: center; height: 100%; font-weight: 700; color: var(--np-text) !important; text-decoration: none !important; }
.np-sticky__logo img { height: 32px; width: auto; max-width: 140px; object-fit: contain; }
.np-sticky__nav { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent); }
.np-sticky__nav::-webkit-scrollbar { display: none; }
.np-sticky__nav a { flex: none; display: inline-flex; align-items: center; min-height: var(--np-tap); padding: 0 10px; font-size: 15px; font-weight: 600; color: var(--np-text) !important; text-decoration: none !important; white-space: nowrap; border-radius: var(--np-r-sm); text-transform: none; }
.np-sticky__nav a:hover { color: var(--np-accent) !important; }
.np-sticky .np-theme-toggle { flex: none; }
.np-progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: var(--np-accent); z-index: 9991; transition: top .22s ease; pointer-events: none; }
.np-sticky.is-shown + .np-progress { top: 52px; }
@media print { .np-sticky { display: none; } }

/* G6: comfortable tap areas for newsplus widgets */
.np-theme-toggle { min-width: var(--np-tap); min-height: var(--np-tap); }
.np-social a { min-height: 36px; display: inline-flex; align-items: center; }

/* Weather places that rotate / switch on click */
[data-np-wx-item][hidden] { display: none !important; }
.np-wx-switch { cursor: pointer; }
.np-wx-switch [data-np-wx-item] { animation: np-wx-in .35s ease; }
@keyframes np-wx-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .np-wx-switch [data-np-wx-item] { animation: none; } }