/**
 * NN Blog Index
 *
 * Every rule is scoped under .nn-blog so it cannot leak into the homepage,
 * post templates, or any Elementor-rendered page.
 *
 * ACCESSIBILITY NOTE, READ BEFORE CHANGING ANY COLOR
 *
 * The brand orange #F7941D has a contrast ratio of 2.15:1 on the page
 * background and 2.28:1 on white. It CANNOT be used for text. It is a
 * background, border, and decoration color only.
 *
 * For orange-looking text, use --nn-orange-text (#A85C04), which is the
 * same hue darkened to 5.00:1 on white and 4.71:1 on the page background.
 *
 * Measured ratios, all AA compliant:
 *   navy on white ................ 14.42
 *   body on white ................  7.60
 *   muted on white ...............  5.58
 *   orange-text on white .........  5.00
 *   orange-text on page bg .......  4.71
 *   badge text on badge bg .......  5.64
 *   gold on navy .................  8.65
 *   hero subhead on navy .........  8.79
 *
 * Do not "fix" the colors back to brand orange. It was checked.
 */

.nn-blog {
  --nn-navy: #1C2B3A;
  --nn-orange: #F7941D;        /* decoration only, never text */
  --nn-orange-text: #A85C04;   /* accessible orange, for text and focusable borders */
  --nn-gold: #FBBD6A;          /* on navy only */
  --nn-ink: #1C2B3A;
  --nn-body: #4A5561;
  --nn-muted: #5F6975;
  --nn-line: #D8DEE4;
  --nn-page: #F7F8FA;
  --nn-card: #FFFFFF;
  --nn-badge-text: #8A5308;
  --nn-focus: #1C2B3A;

  background: var(--nn-page);
  color: var(--nn-body);
  font-family: "Nunito Sans", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.nn-blog *,
.nn-blog *::before,
.nn-blog *::after { box-sizing: border-box; }

.nn-blog a { text-decoration: none; color: inherit; }

/* Visible, high-contrast focus indicator. WCAG 2.4.11. */
.nn-blog a:focus-visible,
.nn-blog button:focus-visible {
  outline: 3px solid var(--nn-focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.nn-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}

/* ---------- Hero ---------- */

.nn-hero {
  background: var(--nn-navy);
  color: #fff;
  text-align: center;
  padding: 96px 24px 104px;
}

.nn-hero__pill {
  display: inline-block;
  border: 1px solid rgba(251, 189, 106, .4);
  background: rgba(251, 189, 106, .08);
  color: var(--nn-gold);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 26px;
}

.nn-hero__title {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 60px;
  line-height: 1.05;
  margin: 0 0 20px;
  color: #fff;
}

.nn-hero__title span { color: var(--nn-gold); } /* gold on navy = 8.65:1 */

.nn-hero__sub {
  max-width: 520px;
  margin: 0 auto;
  color: #C3CBD3;
  font-size: 16px;
}

/* ---------- Section header ---------- */

.nn-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nn-orange-text);
  margin: 0 0 10px;
}

/* Decorative rule. Not information. Brand orange is fine here. */
.nn-eyebrow::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--nn-orange);
  margin-top: 10px;
}

.nn-sec-title {
  font-family: "Playfair Display", serif;
  font-size: 44px;
  line-height: 1.1;
  color: var(--nn-ink);
  margin: 0 0 36px;
}

/* ---------- Shared card bits ---------- */

.nn-badge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nn-badge-text);
  background: rgba(247, 148, 29, .14);
  padding: 5px 11px;
  border-radius: 5px;
  margin-bottom: 14px;
}

.nn-meta {
  font-size: 13px;
  color: var(--nn-muted);
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.nn-more {
  font-weight: 700;
  color: var(--nn-orange-text);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nn-more svg { transition: transform .2s ease; }
.nn-featured:hover .nn-more svg,
.nn-card:hover .nn-more svg { transform: translateX(3px); }

/*
 * THE RULE THAT FIXES THE RAGGED GRID.
 * Live site: images render at native ratio with object-fit: fill,
 * heights swing 309px to 552px inside fixed 831px cards.
 */
.nn-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--nn-navy);
}

.nn-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.nn-media__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--nn-navy);
}

/*
 * STRETCHED LINK PATTERN. Do not replace with a card-wrapping <a>.
 *
 * The whole card is clickable, but the only real link is on the title.
 * A card-wrapping anchor makes the accessible link name the entire card
 * text: category, title, author, date, read time, excerpt, and CTA, read
 * as one forty-word link. This pattern keeps the link name equal to the
 * title, which is what a screen reader user needs from a list of posts.
 */
.nn-card,
.nn-featured { position: relative; }

.nn-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Focus lands on the title link, so ring the whole card. */
.nn-card:focus-within,
.nn-featured:focus-within {
  outline: 3px solid var(--nn-focus);
  outline-offset: 3px;
}

.nn-card:focus-within .nn-title a:focus-visible,
.nn-featured:focus-within .nn-title a:focus-visible {
  outline: none;
}

/* Text stays selectable above the stretched overlay. */
.nn-excerpt,
.nn-meta,
.nn-badge { position: relative; z-index: 2; }

/* ---------- Featured card ---------- */

/*
 * The featured slot uses 4:3 rather than the grid's 16:9. WordPress serves
 * 'large' images capped at 1024x768 (4:3), so a 16:9 crop here cut a quarter
 * of the image's height off; the site's square/4:3 graphics lost their
 * bottom edge (the logo). 4:3 shows those whole. The grid keeps 16:9 -- that
 * lock is what keeps the rows aligned, and it stays.
 */
.nn-featured .nn-media {
  aspect-ratio: 4 / 3;
}

/*
 * contain, not cover, so NO future featured image can ever have its content
 * cropped away, whatever its shape. The slot's navy background acts as a
 * matte behind any leftover space: the site's navy brand graphics blend
 * into it seamlessly, and photos read as deliberately framed. The grid
 * below stays object-fit: cover -- cropping small thumbnails is the price
 * of aligned rows, and that trade was made knowingly.
 */
.nn-featured .nn-media img {
  object-fit: contain;
}

.nn-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  background: var(--nn-card);
  border: 1px solid var(--nn-line);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 48px;
  transition: border-color .2s ease;
}

.nn-featured:hover { border-color: var(--nn-navy); }
.nn-featured:hover .nn-media img { transform: scale(1.02); }

.nn-featured .nn-body {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nn-featured .nn-title {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.22;
  color: var(--nn-ink);
  margin: 0 0 12px;
  text-transform: none;
}

.nn-featured .nn-excerpt {
  margin: 0 0 20px;
  font-size: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nn-featured .nn-more { font-size: 15px; }

/* ---------- Filter bar ---------- */

.nn-filters {
  display: flex;
  gap: 28px;
  align-items: center;
  border-bottom: 1px solid var(--nn-line);
  padding-bottom: 14px;
  margin-bottom: 32px;
  overflow-x: auto;
  scrollbar-width: none;
}

.nn-filters::-webkit-scrollbar { display: none; }

/*
 * The original bug: color and background-color were both rgb(251,189,106).
 * Contrast 1:1. WCAG 1.4.3 failure. Never set these to the same value.
 *
 * Active state is signalled three ways, not by color alone (WCAG 1.4.1):
 * darker text, bold weight, and an underline. Plus aria-current in markup.
 */
.nn-filter {
  font-size: 15px;
  color: var(--nn-ink);
  white-space: nowrap;
  padding: 4px 0 12px;
  margin-bottom: -15px;
  min-height: 24px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.nn-filter:hover {
  color: var(--nn-orange-text);
  border-bottom-color: var(--nn-orange-text);
}

.nn-filter[aria-current="page"] {
  color: var(--nn-orange-text);
  border-bottom-color: var(--nn-orange-text);
  font-weight: 700;
}

/* ---------- Feed grid ---------- */

.nn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.nn-card {
  display: flex;
  flex-direction: column;
  background: var(--nn-card);
  border: 1px solid var(--nn-line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease;
}

.nn-card:hover { border-color: var(--nn-navy); }
.nn-card:hover .nn-media img { transform: scale(1.03); }

.nn-card .nn-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.nn-card .nn-badge { font-size: 10px; margin-bottom: 12px; }

/* Sentence case, not uppercase. Clamped to 2 lines. */
.nn-card .nn-title {
  font-family: "Nunito Sans", sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--nn-ink);
  margin: 0 0 8px;
  text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nn-card .nn-excerpt {
  font-size: 14px;
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nn-card .nn-more { margin-top: auto; font-size: 14px; }

/* ---------- Pagination ---------- */

.nn-pagination {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 56px;
}

.nn-btn {
  display: inline-block;
  border: 2px solid var(--nn-orange-text);
  color: var(--nn-orange-text);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 34px;
  min-height: 44px;
  border-radius: 8px;
  transition: background .18s ease, color .18s ease;
}

/* white on #A85C04 = 5.00:1 */
.nn-btn:hover { background: var(--nn-orange-text); color: #fff; }

.nn-btn--ghost {
  border-color: var(--nn-muted);
  color: var(--nn-body);
}

.nn-btn--ghost:hover { background: var(--nn-navy); color: #fff; }

.nn-empty { text-align: center; padding: 64px 0; color: var(--nn-body); }

/* Screen-reader-only utility. */
.nn-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Responsive. Reflow at 320px, WCAG 1.4.10 ---------- */

@media (max-width: 1000px) {
  .nn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nn-featured { grid-template-columns: 1fr; }
  .nn-featured .nn-body { padding: 28px; }
  .nn-hero__title { font-size: 44px; }
  .nn-sec-title { font-size: 34px; }
}

@media (max-width: 640px) {
  .nn-grid { grid-template-columns: 1fr; }
  .nn-hero { padding: 64px 20px 72px; }
  .nn-hero__title { font-size: 34px; }
  .nn-wrap { padding: 48px 20px 64px; }
  .nn-featured .nn-title { font-size: 24px; }
  .nn-pagination { flex-direction: column; align-items: stretch; }
}

/* WCAG 2.3.3. Kill the transform, not just its transition. */
@media (prefers-reduced-motion: reduce) {
  .nn-blog *,
  .nn-blog *::before,
  .nn-blog *::after {
    transition: none !important;
    animation: none !important;
  }
  .nn-card:hover .nn-media img,
  .nn-featured:hover .nn-media img { transform: none; }
  .nn-featured:hover .nn-more svg,
  .nn-card:hover .nn-more svg { transform: none; }
}

/* Respect forced-colors / Windows High Contrast. */
@media (forced-colors: active) {
  .nn-card,
  .nn-featured { border: 1px solid CanvasText; }
  .nn-filter[aria-current="page"] { border-bottom-color: Highlight; }
}