/* ==========================================================================
   NityNet — blog stylesheet (loaded by nn-site-design.php on blog views only:
   the /blog/ index page, single posts, archives and search).
   Restyles Hello Elementor's blog output to match the front page design
   system and styles the shared chrome the plugin injects (promo bar,
   header, WhatsApp button). Same palette as front-page.php — no orange.
   ========================================================================== */

body.nn-blog-view {
  --nn-cream: #FAF7F1;
  --nn-white: #FFFFFF;
  --nn-ink: #14202B;
  --nn-muted: #5A6B78;
  --nn-blue: #0F74AD;
  --nn-gold: #C9A86A;
  --nn-gold-ink: #8A6D35;
  --nn-border: #E8E1D3;
  --nn-blue-tint: #EDF3F7;
  --nn-radius: 16px;
  --nn-shadow: 0 10px 30px rgba(20, 32, 43, .08);
  --nn-shadow-lift: 0 18px 40px rgba(20, 32, 43, .14);

  background: var(--nn-cream);
  color: var(--nn-ink);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body.nn-blog-view h1,
body.nn-blog-view h2,
body.nn-blog-view h3,
body.nn-blog-view h4 {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--nn-ink);
  line-height: 1.25;
}
body.nn-blog-view a { color: var(--nn-blue); }

/* The theme's own header is replaced by the injected NityNet header. */
body.nn-blog-view header.site-header,
body.nn-blog-view .site-header { display: none !important; }

/* Legacy Elementor Theme Builder header/footer locations are suppressed in
   PHP (elementor/theme/do_location); this is the CSS belt-and-suspenders so
   they can never render (and double the header/promo) on blog views. */
body.nn-blog-view .elementor-location-header,
body.nn-blog-view .elementor-location-footer { display: none !important; }

/* --------------------------------------------------------------------------
   Shared chrome (identical classes to front-page.php)
   -------------------------------------------------------------------------- */
.nn-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.98); border-bottom: 1px solid #E8E1D3; font-family: 'Poppins', system-ui, sans-serif; }
.nn-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.nn-header-in { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.nn-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.nn-brand img { width: 44px; height: 44px; object-fit: contain; display: block; }
.nn-word { font-size: 22px; font-weight: 700; color: #14202B; letter-spacing: .2px; }
.nn-nav { display: flex; gap: 28px; }
.nn-nav a { color: #14202B; text-decoration: none; font-size: 15px; font-weight: 500; }
.nn-nav a:hover { color: #0F74AD; }
.nn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 12px; border: 2px solid transparent; font-size: 15.5px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease; }
.nn-btn-primary { background: #0F74AD; color: #fff; }
.nn-btn-primary:hover { background: #14202B; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(20,32,43,.18); }
.nn-header-cta { padding: 11px 20px; }
/* Button text fix (v1.1, mirrors front-page.php): the generic link rule
   "body.nn-blog-view a" (specificity 0-1-2) beat ".nn-btn-primary" (0-1-0)
   and painted the header CTA's label the same blue as its background.
   These state-pinned, higher-specificity rules cannot be overridden. */
body.nn-blog-view a.nn-btn-primary,
body.nn-blog-view a.nn-btn-primary:link,
body.nn-blog-view a.nn-btn-primary:visited,
body.nn-blog-view a.nn-btn-primary:hover,
body.nn-blog-view a.nn-btn-primary:active,
body.nn-blog-view button.nn-btn-primary { color: #fff; }
body.nn-blog-view .nn-btn:focus-visible { outline: 3px solid #C9A86A; outline-offset: 2px; }
body.nn-blog-view .nn-burger { display: none !important; background: none; border: 0; padding: 10px; cursor: pointer; flex-direction: column; gap: 5px; }
.nn-burger span { display: block; width: 24px; height: 2.5px; background: #14202B; border-radius: 2px; }
.nn-mobile-nav { display: none; border-top: 1px solid #E8E1D3; background: #fff; padding: 14px 24px 20px; }
.nn-mobile-nav a { display: block; padding: 10px 0; color: #14202B; text-decoration: none; font-weight: 500; }
.nn-mobile-nav .nn-btn { margin-top: 10px; color: #fff; }
.nn-mobile-nav.nn-open { display: block; }
@media (max-width: 860px) {
  .nn-nav, .nn-header-cta { display: none; }
  body.nn-blog-view .nn-burger { display: flex !important; }
}

/* Floating WhatsApp (official green) */
.nn-wa { position: fixed; bottom: 22px; right: 22px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0,0,0,.28); z-index: 999; transition: transform .25s ease; }
.nn-wa:hover { transform: scale(1.08); }
.nn-wa svg { width: 28px; height: 28px; fill: #fff; display: block; }
.nn-call { position: fixed; bottom: 90px; right: 22px; width: 56px; height: 56px; border-radius: 50%; background: #0F74AD; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0,0,0,.28); z-index: 999; transition: transform .25s ease; }
.nn-call:hover { transform: scale(1.08); }
.nn-call svg { width: 28px; height: 28px; fill: #fff; display: block; }

/* Scroll reveal (blog cards/blocks get .nn-reveal from the shortcode/theme) */
.nn-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.nn-reveal.nn-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
body.nn-blog-view .site-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 24px 72px;
}
body.nn-blog-view.single-post .site-main { max-width: 880px; }

/* --------------------------------------------------------------------------
   Blog index (the [nn_blog_posts] shortcode output + generic fallbacks)
   -------------------------------------------------------------------------- */
body.nn-blog-view .nn-blog-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
body.nn-blog-view .nn-blog-posts article,
body.nn-blog-view .nn-blog-card {
  background: var(--nn-white);
  border-radius: var(--nn-radius);
  box-shadow: var(--nn-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
body.nn-blog-view .nn-blog-posts article:hover,
body.nn-blog-view .nn-blog-card:hover { transform: translateY(-4px); box-shadow: var(--nn-shadow-lift); }
body.nn-blog-view .nn-blog-posts img,
body.nn-blog-view .nn-blog-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
body.nn-blog-view .nn-blog-posts h2,
body.nn-blog-view .nn-blog-posts h3,
body.nn-blog-view .nn-blog-card h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 18px 20px 8px;
}
body.nn-blog-view .nn-blog-posts h2 a,
body.nn-blog-view .nn-blog-posts h3 a,
body.nn-blog-view .nn-blog-card h3 a { color: var(--nn-ink); text-decoration: none; }
body.nn-blog-view .nn-blog-posts h2 a:hover,
body.nn-blog-view .nn-blog-posts h3 a:hover,
body.nn-blog-view .nn-blog-card h3 a:hover { color: var(--nn-blue); }
body.nn-blog-view .nn-blog-posts p,
body.nn-blog-view .nn-blog-card p { color: var(--nn-muted); font-size: 15px; margin: 0 20px 18px; }
body.nn-blog-view .nn-blog-date { color: var(--nn-muted); font-size: 13px; margin: 0 20px 6px; }

/* Single post: the article sits in one white card, like the index cards. */
body.nn-blog-view.single-post .site-main article {
  background: var(--nn-white);
  border-radius: var(--nn-radius);
  box-shadow: var(--nn-shadow);
  padding: 40px 44px;
}
@media (max-width: 640px) {
  body.nn-blog-view.single-post .site-main article { padding: 26px 20px; }
}

/* --------------------------------------------------------------------------
   Single post typography
   -------------------------------------------------------------------------- */
body.nn-blog-view .entry-title,
body.nn-blog-view.single-post h1 {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 18px;
}
body.nn-blog-view .page-content,
body.nn-blog-view .entry-content {
  font-size: 16.5px;
  line-height: 1.75;
  color: #33424E;
}
body.nn-blog-view .page-content p,
body.nn-blog-view .entry-content p { margin: 0 0 18px; }
body.nn-blog-view .page-content h2,
body.nn-blog-view .entry-content h2 { font-size: 26px; font-weight: 700; margin: 38px 0 14px; }
body.nn-blog-view .page-content h3,
body.nn-blog-view .entry-content h3 { font-size: 21px; font-weight: 600; margin: 30px 0 12px; }
body.nn-blog-view .page-content ul,
body.nn-blog-view .page-content ol,
body.nn-blog-view .entry-content ul,
body.nn-blog-view .entry-content ol { margin: 0 0 18px; padding-left: 24px; }
body.nn-blog-view .page-content li,
body.nn-blog-view .entry-content li { margin-bottom: 8px; }
body.nn-blog-view .page-content img,
body.nn-blog-view .entry-content img { border-radius: var(--nn-radius); max-width: 100%; height: auto; }
body.nn-blog-view .page-content figure,
body.nn-blog-view .entry-content figure { margin: 0 0 22px; }
body.nn-blog-view .page-content table,
body.nn-blog-view .entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--nn-shadow);
  font-size: 15px;
}
body.nn-blog-view .page-content th,
body.nn-blog-view .entry-content th {
  background: var(--nn-cream);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--nn-border);
  color: var(--nn-ink);
}
body.nn-blog-view .page-content td,
body.nn-blog-view .entry-content td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--nn-border);
}
body.nn-blog-view .page-content blockquote,
body.nn-blog-view .entry-content blockquote {
  border-left: 4px solid var(--nn-blue);
  margin: 0 0 20px;
  padding: 6px 0 6px 18px;
  color: var(--nn-muted);
  font-style: italic;
}
body.nn-blog-view .page-content a,
body.nn-blog-view .entry-content a { text-decoration: underline; text-underline-offset: 3px; }

/* Post navigation / pagination */
body.nn-blog-view .post-navigation,
body.nn-blog-view .posts-navigation { margin-top: 40px; font-weight: 600; }
body.nn-blog-view .post-navigation a,
body.nn-blog-view .posts-navigation a { text-decoration: none; }
body.nn-blog-view .post-navigation a:hover,
body.nn-blog-view .posts-navigation a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Theme footer, restyled to match the front page footer
   -------------------------------------------------------------------------- */
body.nn-blog-view .site-footer {
  background: var(--nn-ink);
  color: #C9D4DC;
  font-family: 'Poppins', system-ui, sans-serif;
}
body.nn-blog-view .site-footer a { color: #C9D4DC; text-decoration: none; }
body.nn-blog-view .site-footer a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Responsive + motion preferences
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body.nn-blog-view .nn-blog-posts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body.nn-blog-view .nn-blog-posts { grid-template-columns: 1fr; }
  body.nn-blog-view .site-main { padding: 32px 20px 52px; }
  body.nn-blog-view .entry-title,
  body.nn-blog-view.single-post h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .nn-reveal { opacity: 1; transform: none; transition: none; }
  .nn-btn, .nn-wa,
  body.nn-blog-view .nn-blog-posts article,
  body.nn-blog-view .nn-blog-card { transition: none; }
}