/* NewsRemind reference stylesheet
   Load after the theme's existing stylesheet:
   <link rel="stylesheet" href="newsremind-reference.css">
*/
:root {
  --ink: #111111;
  --muted: #727272;
  --line: #e5e5e5;
  --paper: #ffffff;
  --wash: #f7f7f7;
  --mint: #58d4c2;
  --content-width: 1180px;
  --font-body: Arial, Helvetica, sans-serif;
  --font-display: "Arial Black", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--mint); }
img { display: block; max-width: 100%; height: auto; }

/* Header: compact, editorial and centered like the reference. */
.cs-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.cs-header__inner,
.cs-header .cs-container,
.cs-header__nav-inner {
  width: min(100% - 40px, var(--content-width));
  margin-inline: auto;
}
.cs-header__topbar { min-height: 28px; border-bottom: 1px solid var(--line); font-size: 10px; }
.cs-header__nav { min-height: 86px; display: flex; align-items: center; justify-content: center; }
.cs-header__logo { margin: 0 auto; }
.cs-header__logo img { max-height: 30px; width: auto; }
.cs-header__nav-menu,
.cs-header__nav-menu > ul,
.cs-header .menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-header__nav-menu a,
.cs-header .menu a {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Main canvas */
.cs-site-primary, .site-content, .canvas-content {
  width: min(100% - 40px, var(--content-width));
  margin-inline: auto;
}
.canvas-content { padding-block: 34px 72px; }
.cnvs-block-row { margin: 0 auto 66px; }
.cnvs-block-row-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.cnvs-block-column { grid-column: span 12; min-width: 0; }

/* Section headings */
.cnvs-block-heading, .wp-block-heading, .canvas-content > h1, .canvas-content > h2 {
  margin: 0 0 28px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1;
  text-align: center;
}
.cnvs-block-heading p { margin: 0; }

/* WordPress / Canvas posts: airy card grids with image-led stories. */
.cs-posts-area__main,
.wp-block-latest-posts,
.cnvs-block-posts .cs-posts-area__main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 40px;
}
.cs-entry { min-width: 0; }
.cs-entry__outer { height: 100%; }
.cs-entry__thumbnail, .cs-entry__media { overflow: hidden; background: #f1f1f1; }
.cs-entry__thumbnail img, .cs-entry__media img {
  width: 100%;
  aspect-ratio: 1.55 / 1;
  object-fit: cover;
  transition: transform .35s ease;
}
.cs-entry:hover .cs-entry__thumbnail img, .cs-entry:hover .cs-entry__media img { transform: scale(1.035); }
.cs-entry__content { padding-top: 12px; }
.cs-entry__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.cs-entry__title a { box-shadow: inset 0 -.36em 0 rgba(88, 212, 194, .42); }
.cs-entry__title a:hover { color: var(--ink); box-shadow: inset 0 -.9em 0 rgba(88, 212, 194, .72); }
.cs-entry__meta, .cs-entry__date, .cs-entry__category {
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  text-transform: uppercase;
}
.cs-entry__excerpt { margin: 8px 0 0; color: var(--muted); font-size: 12px; }

/* Feature and two-column modules near the top of the reference. */
.cnvs-block-row:first-child .cs-posts-area__main { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
.cnvs-block-row:first-child .cs-entry:first-child { grid-row: span 2; }
.cnvs-block-row:first-child .cs-entry:first-child .cs-entry__thumbnail img { aspect-ratio: 1.67 / 1; }

/* Full-width cover/banner treatment. */
.wp-block-cover, .cnvs-block-core-cover, .cs-cover {
  min-height: 255px;
  display: grid;
  place-items: end start;
  padding: 30px;
  background-color: #404040;
}
.wp-block-cover__inner-container, .cnvs-block-core-cover__inner {
  max-width: 580px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 45px);
  line-height: .95;
  letter-spacing: -.05em;
}

/* Footer */
.cs-footer { padding: 46px 0 24px; background: #151515; color: #fff; }
.cs-footer__inner, .cs-footer .cs-container { width: min(100% - 40px, var(--content-width)); margin-inline: auto; }
.cs-footer a { color: #fff; }
.cs-footer .widget-title { margin: 0 0 14px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.cs-footer p, .cs-footer li { color: #bcbcbc; font-size: 11px; }

@media (max-width: 900px) {
  .cnvs-block-row { margin-bottom: 48px; }
  .cs-posts-area__main, .wp-block-latest-posts, .cnvs-block-posts .cs-posts-area__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cnvs-block-row:first-child .cs-posts-area__main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .cs-site-primary, .site-content, .canvas-content { width: min(100% - 28px, var(--content-width)); }
  .canvas-content { padding-top: 24px; }
  .cs-header__nav { min-height: 64px; }
  .cs-header__nav-menu, .cs-header__nav-menu > ul, .cs-header .menu { gap: 14px; overflow-x: auto; justify-content: flex-start; }
  .cs-header__nav-menu a, .cs-header .menu a { font-size: 9px; white-space: nowrap; }
  .cs-posts-area__main, .wp-block-latest-posts, .cnvs-block-posts .cs-posts-area__main,
  .cnvs-block-row:first-child .cs-posts-area__main { grid-template-columns: 1fr; gap: 28px; }
  .cnvs-block-row:first-child .cs-entry:first-child { grid-row: auto; }
  .cnvs-block-row { margin-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}