/* ============================================================
   NEEL NETWORKS — BLOG MASTER CSS
   ============================================================
   INSTALLATION (do once, never again):
   Option A → Appearance → Customize → Additional CSS → paste all of this
   Option B → Add @import or paste into your child theme's style.css
   Option C → Create a new file /wp-content/themes/YOUR-THEME/neel-blog.css
              and enqueue it in functions.php:
              wp_enqueue_style('neel-blog', get_stylesheet_directory_uri().'/neel-blog.css');

   USAGE:
   Every blog post content can then be pasted directly into the
   WordPress post editor (Text / HTML / Code mode) using ONLY
   the HTML tags below — no inline styles needed anywhere.
   ============================================================ */

/* ── Brand Colours (edit here if brand updates) ──────────── */
:root {
  --nn-navy:      #1E3A5F;
  --nn-teal:      #0D7377;
  --nn-gold:      #F4A261;
  --nn-green:     #2D6A4F;
  --nn-red:       #C0392B;
  --nn-bg-blue:   #EBF5FB;
  --nn-bg-yellow: #FEF9E7;
  --nn-bg-red:    #FADBD8;
  --nn-bg-green:  #D5F5E3;
  --nn-bg-grey:   #F2F3F4;
  --nn-border:    #D5D8DC;
  --nn-text:      #1C2833;
  --nn-muted:     #7F8C8D;
  --nn-alt1:      #EBF5FB;
  --nn-alt2:      #FDFEFE;
}

/* ── Post wrapper ─────────────────────────────────────────── */
.nn-post {
  max-width: 1100px;
  margin: 0 auto;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--nn-text);
  line-height: 1.8;
  font-size: 17px;
}

/* ── Post meta bar ────────────────────────────────────────── */
.nn-meta {
  font-size: 0.85em;
  color: var(--nn-muted);
  margin-bottom: 1.8em;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
img.emoji span {
    max-width: 3% !important;
    border: 1px solid #005;
}

/* ── Headings ─────────────────────────────────────────────── */
.nn-post h1 {
  font-size: 2.1em;
  font-weight: 700;
  color: var(--nn-navy);
  line-height: 1.3;
  margin-bottom: 0.5em;
}
.nn-post h2 {
  font-size: 1.55em;
  font-weight: 700;
  color: var(--nn-navy);
  margin-top: 2.2em;
  margin-bottom: 0.6em;
  border-left: 4px solid var(--nn-teal);
  padding-left: 14px;
}
.nn-post h3 {
  font-size: 1.2em;
  font-weight: 700;
  color: var(--nn-teal);
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}
.nn-post h4 {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--nn-navy);
  margin-top: 1.2em;
}

/* ── Body text & lists ────────────────────────────────────── */
.nn-post p  { margin-bottom: 1.2em; }
.nn-post ul,
.nn-post ol { margin: 0 0 1.2em 1.5em; }
.nn-post li { margin-bottom: 0.5em; }
.nn-post strong { color: var(--nn-navy); }
.nn-post a  { color: var(--nn-teal); text-decoration: underline; }
.nn-post a:hover { color: var(--nn-navy); }

/* ── Images ───────────────────────────────────────────────── */
.nn-post img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 1.6em 0 0.4em;
  display: block;
}
.nn-img-caption {
  font-size: 0.82em;
  color: var(--nn-muted);
  text-align: center;
  margin-bottom: 1.6em;
  font-style: italic;
}

/* ── Info boxes ───────────────────────────────────────────── */
.nn-box {
  padding: 20px 24px;
  margin: 2em 0;
  border-radius: 4px;
}
.nn-box p { margin-bottom: 0.5em; }
.nn-box p:last-child { margin-bottom: 0; }
.nn-box ul { margin-bottom: 0; }

.nn-box--blue   { background: var(--nn-bg-blue);   border-left: 5px solid var(--nn-teal); width:100%; }
.nn-box--yellow { background: var(--nn-bg-yellow); border-left: 5px solid var(--nn-gold); }
.nn-box--red    { background: var(--nn-bg-red);    border-left: 5px solid var(--nn-red); }
.nn-box--green  { background: var(--nn-bg-green);  border-left: 5px solid var(--nn-green); }
.nn-box--grey   { background: var(--nn-bg-grey);   border: 1px solid var(--nn-border); }

.nn-box--green strong { color: var(--nn-green); }
.nn-box--red   strong { color: var(--nn-red); }

/* ── Numbered step list ───────────────────────────────────── */
.nn-steps {
  list-style: none;
  margin: 0 0 1.5em 0;
  padding: 0;
  counter-reset: nn-step;
}
.nn-steps li {
  counter-increment: nn-step;
  display: flex;
  gap: 16px;
  margin-bottom: 1.4em;
  align-items: flex-start;
}
.nn-steps li::before {
  content: counter(nn-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  background: var(--nn-navy);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9em;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── CTA block ────────────────────────────────────────────── */
.nn-cta {
 background: #1D1729;
    position: relative;
    overflow: hidden;
  color: #fff;
  padding: 40px 60px;
  border-radius: 8px;
  margin: 2.5em 0;
  text-align: center;
 width: 100%;
 z-index: 1;

}

.nn-cta:before{
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(0, 81, 130, .4) 0%, transparent 65%), radial-gradient(ellipse 55% 70% at 100% 50%, rgba(250, 163, 31, .12) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}


.nn-cta * {
    position: relative;
    z-index: 2;
}

.nn-cta P {
    color: #fff !important;
}
.nn-cta p { color: #fff; margin-bottom: 1em; font-size: 1.05em; text-align:center; }
.nn-cta p:last-child { margin-bottom: 0; }
.nn-cta p {
    text-align: center !important;
}
.nn-cta strong { color: var(--nn-gold); }

.nn-cta a.nn-cta-btn{
 display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
  transition: all 0.3s;
   background: #faa31f;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.5px;
  margin-right: 15px;
}



.nn-cta a.nn-cta-btn.nn-cta-btn--outline {
  background: #fff;
  color: #005182!important;
}

a.nn-cta-btn.nn-cta-btn--outline.whts-btn{
background: #1da851;
color: #fff!important; 
}

.nn-cta a.nn-cta-btn:hover, 
.nn-cta a.nn-cta-btn.nn-cta-btn--outline:hover, 
.nn-cta a.nn-cta-btn.nn-cta-btn--outline.whts-btn:hover {background: #42403c !important; color: #fff !important; }

/* ── Comparison / data table ──────────────────────────────── */
.nn-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  font-size: 15px;
}
.nn-table th {
  background: var(--nn-navy);
  color: #fff;
  padding: 12px 14px;
  text-align: left;
  font-weight: 700;
}
.nn-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--nn-border);
  vertical-align: top;
}
.nn-table tr:nth-child(even) td { background: var(--nn-alt1); vertical-align: middle !important; }
.nn-table tr:nth-child(odd)  td { background: var(--nn-alt2); vertical-align: middle !important; }
.nn-table .nn-label { font-weight: 700; color: var(--nn-navy); }

/* ── FAQ table ────────────────────────────────────────────── */
.nn-faq {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
}
.nn-faq td {
  padding: 14px 16px;
  border: 1px solid var(--nn-border);
  vertical-align: middle;
  line-height: 1.7;
  font-size: 14px;
}
.nn-faq .nn-faq-q {
  font-weight: 700;
  color: var(--nn-navy);
  background: var(--nn-bg-grey);
  width: 38%;
}
.nn-faq .nn-faq-a { background: var(--nn-alt2); }

/* ── Tool / feature cards grid ────────────────────────────── */
.nn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 1.8em 0;
}
.nn-card {
  background: #F8F9FA;
  border: 1px solid var(--nn-border);
  border-radius: 8px;
  padding: 16px 18px;
}
.nn-card h4 { margin: 0 0 6px 0; color: var(--nn-navy); font-size: 0.98em; }
.nn-card p  { margin: 0; font-size: 0.88em; color: #5D6D7E; line-height: 1.5; }
.nn-tag {
  display: inline-block;
  background: var(--nn-teal);
  color: #fff;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 0.75em;
  font-weight: 700;
  margin-bottom: 6px;
  font-family: Arial, sans-serif;
}

/* ── Timeline grid (2-col) ────────────────────────────────── */
.nn-timeline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 1.8em 0;
}
.nn-timeline-card {
  background: #F8F9FA;
  border: 1px solid var(--nn-border);
  border-radius: 8px;
  padding: 18px 20px;
}
.nn-timeline-card h4 { margin-top: 0; color: var(--nn-navy); font-size: 1em; }
.nn-year {
  display: inline-block;
  background: var(--nn-navy);
  color: #fff;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: 700;
  margin-bottom: 8px;
  font-family: Arial, sans-serif;
}

/* ── Internal links box ───────────────────────────────────── */
.nn-related {
  background: var(--nn-bg-grey);
  border: 1px solid var(--nn-border);
  padding: 20px 24px;
  border-radius: 6px;
  margin: 2.5em 0;
 width: 100%;
}
.nn-related h4 { margin-top: 0; margin-bottom: 0.8em; color: var(--nn-navy); }
.nn-related ul { margin: 0; }
.nn-related li { margin-bottom: 0.4em; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .nn-post h1   { font-size: 1.6em; }
  .nn-post h2   { font-size: 1.3em; }
  .nn-grid,
  .nn-timeline  { grid-template-columns: 1fr; }
  .nn-cta       { padding: 20px 18px; }
  .nn-faq .nn-faq-q { width: 100%; display: block; }
  .nn-faq td    { display: block; width: 100%; }
}