/* ===========================================================================
   EverOn — Blog
   ---------------------------------------------------------------------------
   Styles for the WordPress-driven pages: the article index (/blog/) and the
   single post view (/blog/<slug>/).

   IMPORTANT — the .wp-content block below styles HTML that comes out of the
   WordPress editor. Editors can insert any block (headings, lists, quotes,
   images, embeds), so these rules must cover the standard block markup rather
   than assume a fixed structure. If a new block type looks wrong on the site,
   add a rule here rather than changing the post.
   =========================================================================== */

/* --- Article body: WordPress block output ---------------------------------- */
.wp-content {
  font-size: var(--f-body);
  font-weight: var(--fw-light);
  line-height: 1.72;
  color: var(--c-ink);
  font-variation-settings: 'CRSV' 1, 'SHRP' 0;
}

.wp-content > *:first-child { margin-top: 0; }

.wp-content p { margin: 0 0 20px; }

/* The first paragraph of a post reads as a lede. */
.wp-content > p:first-of-type {
  font-size: var(--f-body-lg);
  line-height: 1.66;
  color: var(--c-navy);
}

.wp-content h2 {
  font-size: var(--f-h2);
  line-height: 1.12;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.03em;
  color: var(--c-navy);
  margin: 56px 0 18px;
  scroll-margin-top: 150px;
  font-variation-settings: 'SHRP' 80;
}

.wp-content h3 {
  font-size: var(--f-h4);
  line-height: 1.2;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--c-navy);
  margin: 40px 0 14px;
  scroll-margin-top: 150px;
  font-variation-settings: 'SHRP' 80;
}

.wp-content h4 { font-size: var(--f-body-lg); font-weight: var(--fw-semibold); color: var(--c-navy); margin: 32px 0 12px; }

.wp-content ul,
.wp-content ol { margin: 0 0 20px; padding-left: 24px; }
.wp-content li { margin: 0 0 10px; }
.wp-content li::marker { color: var(--c-orange); }

.wp-content a { color: var(--c-blue-link); text-decoration: underline; text-underline-offset: 3px; }
.wp-content a:hover { color: var(--c-orange); }

.wp-content strong { font-weight: var(--fw-semibold); font-variation-settings: 'SHRP' 80; }

.wp-content blockquote {
  margin: 34px 0;
  padding: 26px 30px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  box-shadow: inset 3px 0 0 var(--c-orange);
}
.wp-content blockquote p {
  font-size: var(--f-h4);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--c-navy);
  margin: 0;
}
.wp-content blockquote cite {
  display: block; margin-top: 12px;
  font-size: var(--f-small); font-style: normal;
  color: var(--c-ink-muted);
}

.wp-content figure { margin: 34px 0; }
.wp-content img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-sm); background: var(--c-surface-alt);
}
.wp-content figcaption {
  margin-top: 10px;
  font-size: var(--f-small);
  color: var(--c-ink-muted);
  text-align: center;
}

.wp-content hr { border: 0; border-top: 1px solid var(--c-rule); margin: 48px 0; }

.wp-content table { width: 100%; border-collapse: collapse; margin: 34px 0; font-size: var(--f-small); }
.wp-content th, .wp-content td { padding: 12px 14px; border-bottom: 1px solid var(--c-rule); text-align: left; }
.wp-content th { font-weight: var(--fw-semibold); color: var(--c-navy); }

.wp-content pre {
  background: var(--c-navy); color: var(--c-on-dark-90);
  padding: 20px 24px; border-radius: var(--r-sm);
  overflow-x: auto; font-size: 14px; line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin: 0 0 20px;
}
.wp-content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
.wp-content :not(pre) > code {
  background: var(--c-surface); padding: 2px 6px; border-radius: 4px; color: var(--c-navy);
}

/* Embeds (YouTube, Vimeo) keep their aspect ratio. */
.wp-content .wp-block-embed__wrapper { position: relative; }
.wp-content iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-sm); }

/* WordPress alignment classes. */
.wp-content .aligncenter { margin-left: auto; margin-right: auto; }
.wp-content .alignleft   { float: left;  margin: 6px 28px 20px 0; max-width: 50%; }
.wp-content .alignright  { float: right; margin: 6px 0 20px 28px; max-width: 50%; }
.wp-content .alignwide   { width: min(100vw - (2 * var(--sp-gutter)), 1060px); margin-left: 50%; transform: translateX(-50%); }

/* ===========================================================================
   GUTENBERG BLOCKS
   ---------------------------------------------------------------------------
   Styling for every block an editor is allowed to insert. The allowlist is
   enforced in cms/wp-content/mu-plugins/everon-block-editor.php — the two
   MUST stay in step: a block that is allowed but not styled here will render
   unstyled and break the look of the article.

   Why these rules are needed at all: WordPress ships its own block stylesheet
   (wp-block-library) and generates layout CSS per page, but the public site
   does not load any of it. Classes such as `is-layout-flex` therefore arrive
   with no meaning attached, and every block has to be styled from scratch
   here. That is deliberate — it is what keeps the blog looking like the site
   rather than like a WordPress theme.
   =========================================================================== */

/* --- Paragraph variants ---------------------------------------------------- */
.wp-content p.has-drop-cap::first-letter {
  float: left;
  font-size: 3.4em;
  line-height: .82;
  font-weight: var(--fw-semibold);
  color: var(--c-orange);
  margin: 6px 12px 0 0;
  font-variation-settings: 'SHRP' 80;
}

.wp-content .has-text-align-center { text-align: center; }
.wp-content .has-text-align-right  { text-align: right; }
.wp-content .has-text-align-left   { text-align: left; }

/* --- Lists ----------------------------------------------------------------- */
.wp-content ul.wp-block-list,
.wp-content ol.wp-block-list { margin: 0 0 20px; padding-left: 24px; }
.wp-content .wp-block-list ul,
.wp-content .wp-block-list ol { margin: 10px 0 0; }

/* --- Quote / pullquote ----------------------------------------------------- */
/* .wp-content blockquote is styled above; these cover the block wrappers. */
.wp-content .wp-block-quote > p:last-of-type { margin-bottom: 0; }

.wp-content .wp-block-pullquote {
  margin: 44px 0;
  padding: 32px 0;
  border-top: 2px solid var(--c-orange);
  border-bottom: 2px solid var(--c-orange);
  text-align: center;
}
.wp-content .wp-block-pullquote blockquote { margin: 0; padding: 0; background: none; box-shadow: none; }
.wp-content .wp-block-pullquote p {
  font-size: 28px;
  font-weight: var(--fw-light);
  line-height: 1.35;
  color: var(--c-navy);
  margin: 0;
}
.wp-content .wp-block-pullquote cite {
  display: block;
  margin-top: 16px;
  font-size: var(--f-eyebrow);
  font-style: normal;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-orange);
}

/* --- Image ----------------------------------------------------------------- */
.wp-content .wp-block-image { margin: 34px 0; }
.wp-content .wp-block-image img { border-radius: var(--r-sm); }
.wp-content .wp-block-image.is-style-rounded img { border-radius: var(--r-pill); }
.wp-content .wp-element-caption,
.wp-content .wp-block-image figcaption {
  margin-top: 10px;
  font-size: var(--f-small);
  color: var(--c-ink-muted);
  text-align: center;
}

/* --- Gallery --------------------------------------------------------------- */
.wp-content .wp-block-gallery {
  display: grid;
  gap: 14px;
  margin: 34px 0;
  grid-template-columns: repeat(3, 1fr);
}
.wp-content .wp-block-gallery.columns-1 { grid-template-columns: 1fr; }
.wp-content .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.wp-content .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.wp-content .wp-block-gallery .wp-block-image { margin: 0; }
.wp-content .wp-block-gallery.is-cropped .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 640px) {
  .wp-content .wp-block-gallery,
  .wp-content .wp-block-gallery.columns-3,
  .wp-content .wp-block-gallery.columns-4 { grid-template-columns: repeat(2, 1fr); }
}

/* --- Table ----------------------------------------------------------------- */
.wp-content .wp-block-table { margin: 34px 0; overflow-x: auto; }
.wp-content .wp-block-table table { margin: 0; }
.wp-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--c-surface); }
.wp-content .wp-block-table.is-style-stripes td { border-bottom: 0; }

/* --- Separator ------------------------------------------------------------- */
.wp-content .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--c-rule);
  margin: 48px auto;
  max-width: 100%;
}
.wp-content .wp-block-separator.is-style-wide { max-width: 100%; }
.wp-content .wp-block-separator.is-style-dots {
  border: 0;
  text-align: center;
  line-height: 1;
}
.wp-content .wp-block-separator.is-style-dots::before {
  content: '···';
  color: var(--c-orange);
  font-size: 26px;
  letter-spacing: 12px;
  padding-left: 12px;
}

/* --- Spacer ---------------------------------------------------------------- */
.wp-content .wp-block-spacer { display: block; }

/* --- Buttons --------------------------------------------------------------- */
.wp-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0;
}
.wp-content .wp-block-buttons.is-content-justification-center { justify-content: center; }
.wp-content .wp-block-button__link,
.wp-content .wp-element-button {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  border-radius: var(--r-pill);
  background: var(--c-orange);
  color: var(--c-white);
  font-size: var(--f-small);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  font-variation-settings: 'SHRP' 80;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.wp-content .wp-block-button__link:hover,
.wp-content .wp-element-button:hover {
  background: var(--c-orange-light);
  color: var(--c-white);
}
/* The "outline" style variation. */
.wp-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--c-navy);
  border: 1.5px solid var(--c-navy);
}
.wp-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--c-navy);
  color: var(--c-white);
}

/* --- Columns --------------------------------------------------------------- */
.wp-content .wp-block-columns {
  display: flex;
  gap: 32px;
  margin: 34px 0;
  align-items: flex-start;
}
.wp-content .wp-block-column { flex: 1 1 0; min-width: 0; }
.wp-content .wp-block-column > *:first-child { margin-top: 0; }
.wp-content .wp-block-column > *:last-child  { margin-bottom: 0; }

@media (max-width: 780px) {
  .wp-content .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-direction: column;
    gap: 20px;
  }
  .wp-content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: auto !important;
  }
}

/* --- Group ----------------------------------------------------------------- */
.wp-content .wp-block-group { margin: 34px 0; }
.wp-content .wp-block-group > *:first-child { margin-top: 0; }
.wp-content .wp-block-group > *:last-child  { margin-bottom: 0; }
/* A group with a background reads as a callout panel. */
.wp-content .wp-block-group.has-background {
  padding: 28px 32px;
  border-radius: var(--r-sm);
}

/* --- Media & text ---------------------------------------------------------- */
.wp-content .wp-block-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  margin: 34px 0;
}
.wp-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 2; }
.wp-content .wp-block-media-text__media { margin: 0; }
.wp-content .wp-block-media-text__media img { border-radius: var(--r-sm); }
.wp-content .wp-block-media-text__content > *:first-child { margin-top: 0; }
.wp-content .wp-block-media-text__content > *:last-child  { margin-bottom: 0; }

@media (max-width: 780px) {
  .wp-content .wp-block-media-text.is-stacked-on-mobile { grid-template-columns: 1fr; gap: 20px; }
  .wp-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 0; }
}

/* --- Embeds and video ------------------------------------------------------ */
.wp-content .wp-block-embed,
.wp-content .wp-block-video { margin: 34px 0; }
.wp-content .wp-block-embed__wrapper { position: relative; }
.wp-content .wp-block-embed.wp-has-aspect-ratio iframe { aspect-ratio: 16 / 9; }
.wp-content .wp-block-embed.wp-embed-aspect-4-3 iframe { aspect-ratio: 4 / 3; }
.wp-content .wp-block-embed.wp-embed-aspect-1-1 iframe { aspect-ratio: 1 / 1; }
.wp-content .wp-block-video video {
  width: 100%;
  display: block;
  border-radius: var(--r-sm);
  background: var(--c-navy);
}
/* An unresolved embed shows its bare URL; make that obviously a link. */
.wp-content .wp-block-embed__wrapper > a { word-break: break-all; }

/* --- Code and preformatted -------------------------------------------------- */
.wp-content .wp-block-code,
.wp-content .wp-block-preformatted {
  background: var(--c-navy);
  color: var(--c-on-dark-90);
  padding: 20px 24px;
  border-radius: var(--r-sm);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin: 0 0 20px;
  white-space: pre-wrap;
}
.wp-content .wp-block-code code { background: none; padding: 0; color: inherit; }

/* --- Details (accordion) ---------------------------------------------------- */
.wp-content .wp-block-details {
  margin: 24px 0;
  padding: 20px 24px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  border-left: 3px solid var(--c-orange);
}
.wp-content .wp-block-details summary {
  cursor: pointer;
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
  font-variation-settings: 'SHRP' 80;
  list-style: none;
}
.wp-content .wp-block-details summary::-webkit-details-marker { display: none; }
.wp-content .wp-block-details summary::before {
  content: '+';
  display: inline-block;
  width: 1.1em;
  color: var(--c-orange);
  font-weight: var(--fw-semibold);
}
.wp-content .wp-block-details[open] summary::before { content: '\2212'; }
.wp-content .wp-block-details > *:not(summary) { margin-top: 14px; }
.wp-content .wp-block-details > *:last-child { margin-bottom: 0; }

/* --- Footnotes -------------------------------------------------------------- */
.wp-content .wp-block-footnotes {
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--c-rule);
  font-size: var(--f-small);
  color: var(--c-ink-muted);
}

/* --- Brand colour + size utility classes -----------------------------------
   These are the palette and font-size slugs registered for the editor in
   everon-block-editor.php. WordPress emits the class; the value lives here,
   so the palette has ONE definition (tokens.css) rather than two.
   --------------------------------------------------------------------------- */
.wp-content .has-navy-color            { color: var(--c-navy); }
.wp-content .has-ink-color             { color: var(--c-ink); }
.wp-content .has-muted-color           { color: var(--c-ink-muted); }
.wp-content .has-blue-color            { color: var(--c-blue-link); }
.wp-content .has-orange-color          { color: var(--c-orange); }
.wp-content .has-white-color           { color: var(--c-white); }

.wp-content .has-navy-background-color    { background-color: var(--c-navy); }
.wp-content .has-surface-background-color { background-color: var(--c-surface); }
.wp-content .has-blue-background-color    { background-color: var(--c-blue); }
.wp-content .has-orange-background-color  { background-color: var(--c-orange); }
.wp-content .has-white-background-color   { background-color: var(--c-white); }

/* Text on a dark panel has to invert, or it disappears. */
.wp-content .has-navy-background-color,
.wp-content .has-blue-background-color,
.wp-content .has-orange-background-color { color: var(--c-white); }
.wp-content .has-navy-background-color a,
.wp-content .has-blue-background-color a,
.wp-content .has-orange-background-color a { color: var(--c-white); }

.wp-content .has-small-font-size   { font-size: var(--f-small); }
.wp-content .has-medium-font-size  { font-size: var(--f-body); }
.wp-content .has-large-font-size   { font-size: var(--f-body-lg); line-height: 1.5; }
.wp-content .has-x-large-font-size { font-size: var(--f-h3); line-height: 1.2; font-weight: var(--fw-semibold); }

/* --- Blog index ------------------------------------------------------------ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 34px 22px;
}

.blog-empty {
  padding: 64px 0;
  font-size: var(--f-body-lg);
  font-weight: var(--fw-light);
  color: var(--c-ink-muted);
}

/* Pagination */
.blog-pager { display: flex; gap: 10px; justify-content: center; margin-top: 64px; flex-wrap: wrap; }
.blog-pager a,
.blog-pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 46px; padding: 0 16px;
  border-radius: var(--r-pill); border: 1.5px solid var(--c-navy);
  font-size: var(--f-small); font-weight: var(--fw-medium); color: var(--c-navy);
  transition: background .25s ease, color .25s ease;
}
.blog-pager a:hover { background: var(--c-navy); color: var(--c-white); }
.blog-pager .is-current { background: var(--c-navy); color: var(--c-white); }
.blog-pager .is-disabled { opacity: .3; pointer-events: none; }

/* --- Single post layout ---------------------------------------------------- */
.article-grid {
  max-width: var(--w-article);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

@media (max-width: 1000px) {
  .article-grid { grid-template-columns: 1fr; gap: 0; }
  .article-aside { display: none; }
}

/* Reading-progress bar pinned under the nav. */
#read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--c-orange); z-index: 150;
  transition: width .1s linear;
}

/* ---------------------------------------------------------------------------
   Draft preview banner
   Only rendered on /blog/preview/<id>/, which is visible to logged-in editors
   only. It sits above the fixed nav so it cannot be mistaken for page content.
   --------------------------------------------------------------------------- */
.preview-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--c-orange);
  color: var(--c-white);
  font-size: var(--f-small);
  font-weight: var(--fw-medium);
  text-align: center;
}
.preview-bar strong { font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; }
.preview-bar a { color: var(--c-white); text-decoration: underline; text-underline-offset: 3px; }
.preview-bar a:hover { color: var(--c-navy); }

/* Push the page down so the banner never covers the nav. */
body:has(.preview-bar) #b-nav,
body:has(.preview-bar) #nav-content,
body:has(.preview-bar) #nav-refract,
body:has(.preview-bar) #nav-edge { top: 40px; }