/* =========================================================================
   SalemVA — post content styles
   Scoped to #salem-post-content, the left-hand content pane.

   Written for plain post markup: headings, paragraphs, lists, quotes,
   tables, images and links, with no bespoke classes needed. Existing posts
   pick it up as they are.

   Values are taken from the content page design (content-page.dc.html).
   ========================================================================= */

#salem-post-content {
  --sv-navy:        #1B4C8C;
  --sv-navy-dark:   #163D70;
  --sv-ink:         #0D1E35;  /* headings, bold text */
  --sv-body:        #44577A;  /* body copy */
  --sv-muted:       #5B6F8A;  /* captions, meta */
  --sv-border:      rgba(27, 76, 140, 0.15);
  --sv-tint:        #F0F4FA;  /* pale panel */
  --sv-tint-strong: #E8EEF8;  /* callout panel */
  --sv-sans:        'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sv-serif:       'EB Garamond', Georgia, serif;

  font-family: var(--sv-sans);
  color: var(--sv-body);
  font-size: 17px;
  line-height: 1.75;
  max-width: 780px;
}

/* Stop the first and last elements pushing the pane out of alignment. */
#salem-post-content > *:first-child { margin-top: 0; }
#salem-post-content > *:last-child  { margin-bottom: 0; }

/* ---------- Headings ---------------------------------------------------- */

#salem-post-content h1,
#salem-post-content h2,
#salem-post-content h3,
#salem-post-content h4,
#salem-post-content h5,
#salem-post-content h6 {
  font-family: var(--sv-sans);
  color: var(--sv-ink);
  font-weight: 800;
  /* Clears the sticky header when a link jumps to a heading. */
  scroll-margin-top: 96px;
}

#salem-post-content h1 {
  font-size: clamp(32px, 4vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 14px;
}

#salem-post-content h2 {
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 44px 0 14px;
}

#salem-post-content h3 {
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 32px 0 10px;
}

#salem-post-content h4 {
  font-size: 17px;
  font-weight: 700;
  margin: 26px 0 8px;
}

#salem-post-content h5,
#salem-post-content h6 {
  font-size: 12px;
  font-weight: 800;
  color: var(--sv-navy);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 26px 0 10px;
}

/* ---------- Body copy --------------------------------------------------- */

#salem-post-content p {
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 22px;
  text-wrap: pretty;
}

/* The opening paragraph reads as a standfirst. */
#salem-post-content > p:first-of-type {
  font-size: 19px;
  line-height: 1.6;
  max-width: 640px;
}

#salem-post-content strong,
#salem-post-content b {
  color: var(--sv-ink);
  font-weight: 700;
}

#salem-post-content em { font-style: italic; }

/* Links.
   Navy on white is 8.5:1, comfortably past the 4.5:1 minimum. The darker
   navy on hover is 10.8:1. Visited stays the same colour on purpose: on a
   financial site a half-read page should not look different from an unread
   one, and the brand only has the one blue.

   !important is on the colour and underline declarations to beat Elementor's
   global link colour, which it writes into the kit stylesheet and loads after
   the theme. Only these properties carry it, so everything else here can
   still be overridden normally. */
#salem-post-content a,
#salem-post-content a:link,
#salem-post-content a:visited {
  color: var(--sv-navy) !important;
  font-weight: 600;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(27, 76, 140, 0.35) !important;
}

#salem-post-content a:hover {
  color: var(--sv-navy-dark) !important;
  text-decoration-color: var(--sv-navy-dark) !important;
}

#salem-post-content a:active {
  color: var(--sv-navy-dark) !important;
}

/* Keyboard users get a visible ring; mouse users do not. */
#salem-post-content a:focus-visible {
  outline: 2px solid var(--sv-navy);
  outline-offset: 2px;
  border-radius: 3px;
}

/* A link that is the whole heading keeps the heading's colour and weight,
   and picks up the underline only on hover. */
#salem-post-content h1 a,
#salem-post-content h2 a,
#salem-post-content h3 a,
#salem-post-content h4 a {
  color: inherit !important;
  font-weight: inherit;
  text-decoration: none !important;
}

#salem-post-content h1 a:hover,
#salem-post-content h2 a:hover,
#salem-post-content h3 a:hover,
#salem-post-content h4 a:hover {
  color: var(--sv-navy) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* An image wrapped in a link should not carry link styling. */
#salem-post-content a:has(> img) {
  text-decoration: none !important;
}

/* Buttons are links too, so they need the colour rules above reversed. */
#salem-post-content .wp-block-button__link,
#salem-post-content .elementor-button {
  text-decoration: none !important;
}

#salem-post-content .wp-block-button__link:not(.is-style-outline *) {
  color: #fff !important;
}

/* ---------- Lists ------------------------------------------------------- */

#salem-post-content ul,
#salem-post-content ol {
  margin: 0 0 26px;
  padding-left: 22px;
}

#salem-post-content li {
  font-size: 16.5px;
  line-height: 1.65;
  margin-bottom: 11px;
}

#salem-post-content li::marker {
  color: var(--sv-navy);
  font-weight: 700;
}

#salem-post-content li > ul,
#salem-post-content li > ol {
  margin: 11px 0 0;
}

/* ---------- Quotes ------------------------------------------------------ */

#salem-post-content blockquote {
  margin: 0 0 30px;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--sv-navy);
  color: var(--sv-ink);
}

#salem-post-content blockquote p {
  font-family: var(--sv-serif);
  font-size: 21px;
  font-style: italic;
  line-height: 1.55;
  color: var(--sv-ink);
}

#salem-post-content blockquote cite,
#salem-post-content blockquote footer {
  display: block;
  font-family: var(--sv-sans);
  font-size: 14px;
  font-style: normal;
  color: var(--sv-muted);
  margin-top: 10px;
}

/* ---------- Tables ------------------------------------------------------ */

/* The wrapper scrolls rather than the page, so a wide table cannot break
   the layout on a phone. */
#salem-post-content .wp-block-table,
#salem-post-content figure.wp-block-table {
  margin: 0 0 30px;
  overflow-x: auto;
}

#salem-post-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 0 0 30px;
  border: 1px solid var(--sv-border);
  border-radius: 14px;
  overflow: hidden;
}

#salem-post-content .wp-block-table table { margin-bottom: 0; }

#salem-post-content th {
  background: var(--sv-tint-strong);
  color: var(--sv-ink);
  font-weight: 700;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sv-border);
}

#salem-post-content td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--sv-border);
  vertical-align: top;
}

#salem-post-content tbody tr:last-child td { border-bottom: none; }
#salem-post-content tbody tr:nth-child(even) { background: var(--sv-tint); }

/* ---------- Images and figures ------------------------------------------ */

#salem-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

#salem-post-content figure,
#salem-post-content .wp-block-image {
  margin: 0 0 30px;
}

#salem-post-content figcaption,
#salem-post-content .wp-caption-text {
  font-size: 13.5px;
  color: var(--sv-muted);
  line-height: 1.7;
  margin-top: 10px;
}

/* ---------- Buttons ----------------------------------------------------- */

#salem-post-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 30px;
}

#salem-post-content .wp-block-button__link {
  background: var(--sv-navy);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 100px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#salem-post-content .wp-block-button__link:hover {
  background: var(--sv-navy-dark);
}

#salem-post-content .is-style-outline .wp-block-button__link,
#salem-post-content .wp-block-button.is-style-outline > .wp-block-button__link {
  background: #fff;
  color: var(--sv-navy);
  border: 1px solid rgba(27, 76, 140, 0.35);
}

#salem-post-content .is-style-outline .wp-block-button__link:hover {
  background: var(--sv-tint);
}

/* ---------- Panels, separators and code --------------------------------- */

/* A group block with a background reads as the callout panel from the
   design, without the editor needing a custom class. */
#salem-post-content .wp-block-group.has-background {
  background: var(--sv-tint-strong);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 30px;
}

#salem-post-content hr,
#salem-post-content .wp-block-separator {
  border: none;
  border-top: 1px solid var(--sv-border);
  margin: 38px 0;
  height: 0;
}

#salem-post-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--sv-tint);
  border: 1px solid var(--sv-border);
  border-radius: 6px;
  padding: 2px 6px;
}

#salem-post-content pre {
  background: var(--sv-tint);
  border: 1px solid var(--sv-border);
  border-radius: 14px;
  padding: 18px 20px;
  overflow-x: auto;
  margin: 0 0 30px;
}

#salem-post-content pre code {
  background: none;
  border: none;
  padding: 0;
}

/* ---------- Alignment --------------------------------------------------- */

#salem-post-content .aligncenter { margin-left: auto; margin-right: auto; }
#salem-post-content .alignleft   { float: left;  margin: 0 26px 22px 0; }
#salem-post-content .alignright  { float: right; margin: 0 0 22px 26px; }
#salem-post-content .alignwide,
#salem-post-content .alignfull   { max-width: 100%; }

/* ---------- Small screens ----------------------------------------------- */

@media (max-width: 600px) {
  #salem-post-content h2 { font-size: 21px; margin-top: 34px; }
  #salem-post-content h3 { font-size: 18px; }
  #salem-post-content p  { font-size: 16px; }
  #salem-post-content > p:first-of-type { font-size: 17.5px; }
  #salem-post-content li { font-size: 16px; }
  #salem-post-content .alignleft,
  #salem-post-content .alignright { float: none; margin: 0 0 22px; }
}

/* =========================================================================
   SalemVA — page sidebar, [salem-page-sidebar]
   "On this page" jump nav + "Related" panel, the right-hand column.

   Values taken from the content page design (content-page.dc.html).
   ========================================================================= */

.salem-page-sidebar {
  --sv-navy:        #1B4C8C;
  --sv-ink:         #0D1E35;
  --sv-body:        #44577A;
  --sv-border:      rgba(27, 76, 140, 0.18);
  --sv-tint-strong: #E8EEF8;

  width: 250px;
  flex: 0 0 auto;
  position: sticky;
  top: 96px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.salem-page-sidebar__label,
.salem-page-sidebar__related-heading {
  margin: 0 0 12px;
}

.salem-page-sidebar__label {
  font-size: 11px;
  font-weight: 800;
  color: var(--sv-navy);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.salem-page-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--sv-border);
}

.salem-page-sidebar__nav a {
  font-size: 14px;
  color: var(--sv-body);
  text-decoration: none;
  padding: 7px 0 7px 16px;
  line-height: 1.45;
}

.salem-page-sidebar__nav a:hover,
.salem-page-sidebar__nav a:focus-visible {
  color: var(--sv-navy);
}

.salem-page-sidebar__related {
  background: var(--sv-tint-strong);
  border-radius: 14px;
  padding: 18px;
  margin-top: 22px;
}

.salem-page-sidebar__related-heading {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--sv-ink);
}

.salem-page-sidebar__related-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.salem-page-sidebar__related-links a {
  font-size: 14px;
  color: var(--sv-navy);
}

.salem-page-sidebar__related-links a:hover,
.salem-page-sidebar__related-links a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .salem-page-sidebar {
    position: static;
    width: 100%;
  }
}