/**
 * nexavice-extra.css
 * Pagination · Comment form · Search form · Gutenberg block overrides
 * Loaded via functions.php (enqueued after main style.css)
 */

/* ============================================================
   PAGINATION
============================================================ */
.nx-pagination { margin: 32px 0; }

.nx-pagination-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
}

.nx-pagination-list a,
.nx-pagination-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--nx-radius);
  font-size: .85rem;
  font-weight: 500;
  border: 1px solid var(--nx-border);
  background: var(--nx-bg);
  color: var(--nx-text-secondary);
  text-decoration: none;
  transition: all var(--duration) var(--ease);
}

.nx-pagination-list a:hover {
  border-color: var(--nx-red);
  color: var(--nx-red);
  background: var(--nx-red-light);
}

.nx-pagination-list .current {
  background: var(--nx-red);
  border-color: var(--nx-red);
  color: #fff;
  font-weight: 700;
}

.nx-pagination-list .dots {
  border: none;
  background: transparent;
  color: var(--nx-text-muted);
}

/* ============================================================
   COMMENT FORM (WP default override)
============================================================ */
.comment-form { margin-top: 24px; }

.comment-form label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--nx-text-secondary);
  margin-bottom: 5px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  padding: 10px 14px;
  font-family: var(--font-ui);
  font-size: .9rem;
  background: var(--nx-bg);
  color: var(--nx-text-primary);
  outline: none;
  transition: border-color var(--duration);
  margin-bottom: 16px;
}

.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--nx-red); }

.comment-form textarea { min-height: 120px; resize: vertical; }

.comment-form .form-submit { margin-top: 4px; }

.comment-form p.comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; }
.comment-form p.comment-form-cookies-consent input { margin-top: 3px; flex-shrink: 0; }
.comment-form p.comment-form-cookies-consent label { font-weight: 400; font-size: .82rem; }

.comment-list .nx-comment { list-style: none; }

.comment-reply-link {
  font-size: .75rem;
  color: var(--nx-red);
  font-weight: 600;
  text-decoration: none;
}
.comment-reply-link:hover { text-decoration: underline; }

/* ============================================================
   SEARCH FORM (WP default override)
============================================================ */
.search-form {
  display: flex;
  gap: 8px;
}

.search-form label { flex: 1; }

.search-field {
  width: 100%;
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  padding: 11px 16px;
  font-size: .9rem;
  background: var(--nx-bg-2);
  color: var(--nx-text-primary);
  outline: none;
  transition: border-color var(--duration);
  font-family: var(--font-ui);
}
.search-field:focus { border-color: var(--nx-red); }

.search-submit {
  background: var(--nx-red);
  color: #fff;
  border: none;
  border-radius: var(--nx-radius);
  padding: 11px 20px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration);
  font-family: var(--font-ui);
}
.search-submit:hover { background: var(--nx-red-dark); }

/* ============================================================
   GUTENBERG / BLOCK EDITOR OVERRIDES
============================================================ */
.wp-block-image { margin: 2rem 0; }
.wp-block-image img { border-radius: var(--nx-radius); width: 100%; }
.wp-block-image figcaption { font-size: .78rem; color: var(--nx-text-muted); text-align: center; margin-top: 6px; }

.wp-block-pullquote {
  border-top: 4px solid var(--nx-red);
  border-bottom: 4px solid var(--nx-red);
  padding: 28px 32px;
  margin: 2.5rem 0;
  text-align: center;
}
.wp-block-pullquote blockquote p {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--nx-text-primary);
  line-height: 1.5;
}

.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.wp-block-table th,
.wp-block-table td {
  padding: 10px 14px;
  border: 1px solid var(--nx-border);
  text-align: left;
}
.wp-block-table th { background: var(--nx-bg-2); font-weight: 600; }
.wp-block-table tr:hover td { background: var(--nx-bg-2); }

.wp-block-code {
  background: var(--nx-bg-3);
  border-radius: var(--nx-radius);
  padding: 20px;
  font-family: var(--font-mono);
  font-size: .875rem;
  overflow-x: auto;
  border: 1px solid var(--nx-border);
}

.wp-block-quote {
  border-left: 4px solid var(--nx-red);
  margin: 2rem 0;
  padding: 16px 24px;
  background: var(--nx-bg-2);
  border-radius: 0 var(--nx-radius) var(--nx-radius) 0;
}
.wp-block-quote p { font-style: italic; font-size: 1.05rem; margin-bottom: 8px; }
.wp-block-quote cite { font-size: .82rem; color: var(--nx-text-muted); }

/* ============================================================
   AD ZONES
============================================================ */
.nx-ad-leaderboard {
  width: 100%;
  min-height: 90px;
  background: var(--nx-bg-3);
  border: 1px dashed var(--nx-border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  color: var(--nx-text-muted);
  border-radius: var(--nx-radius);
  margin: 20px 0;
}

.nx-ad-rectangle {
  width: 100%;
  min-height: 250px;
  background: var(--nx-bg-3);
  border: 1px dashed var(--nx-border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  color: var(--nx-text-muted);
  border-radius: var(--nx-radius);
}

/* ============================================================
   DARK MODE EXTRAS
============================================================ */
[data-theme="dark"] .search-field { background: var(--nx-bg-2); }
[data-theme="dark"] .wp-block-code { background: var(--nx-bg-3); }
[data-theme="dark"] .wp-block-quote { background: var(--nx-bg-3); }
[data-theme="dark"] .wp-block-table th { background: var(--nx-bg-3); }
[data-theme="dark"] .nx-ad-leaderboard,
[data-theme="dark"] .nx-ad-rectangle { background: var(--nx-bg-3); }

/* ============================================================
   NAV CATEGORY COLOUR ACCENTS
============================================================ */
.nx-nav-link--breaking-news:hover,
.nx-nav-link--breaking-news.active { color: #E8192C !important; border-bottom-color: #E8192C !important; }

.nx-nav-link--politics:hover,
.nx-nav-link--politics.active     { color: #DC2626 !important; border-bottom-color: #DC2626 !important; }

.nx-nav-link--business:hover,
.nx-nav-link--business.active     { color: #16A34A !important; border-bottom-color: #16A34A !important; }

.nx-nav-link--tech:hover,
.nx-nav-link--tech.active         { color: #0EA5E9 !important; border-bottom-color: #0EA5E9 !important; }

.nx-nav-link--sports:hover,
.nx-nav-link--sports.active       { color: #F97316 !important; border-bottom-color: #F97316 !important; }

.nx-nav-link--health:hover,
.nx-nav-link--health.active       { color: #EC4899 !important; border-bottom-color: #EC4899 !important; }

.nx-nav-link--lifestyle:hover,
.nx-nav-link--lifestyle.active    { color: #8B5CF6 !important; border-bottom-color: #8B5CF6 !important; }

.nx-nav-link--entertainment:hover,
.nx-nav-link--entertainment.active{ color: #EAB308 !important; border-bottom-color: #EAB308 !important; }

/* Nav arrow icon */
.nx-nav-arrow {
  transition: transform 200ms ease;
  opacity: .5;
}
.nx-nav-item:hover .nx-nav-arrow  { transform: rotate(180deg); opacity: 1; }

/* Dropdown category accent line */
.nx-dropdown { border-top: 2px solid var(--nx-red); }
.nx-nav-item:hover .nx-nav-link--politics   ~ .nx-dropdown { border-top-color: #DC2626; }
.nx-nav-item:hover .nx-nav-link--business   ~ .nx-dropdown { border-top-color: #16A34A; }
.nx-nav-item:hover .nx-nav-link--tech       ~ .nx-dropdown { border-top-color: #0EA5E9; }
.nx-nav-item:hover .nx-nav-link--sports     ~ .nx-dropdown { border-top-color: #F97316; }
.nx-nav-item:hover .nx-nav-link--health     ~ .nx-dropdown { border-top-color: #EC4899; }
.nx-nav-item:hover .nx-nav-link--lifestyle  ~ .nx-dropdown { border-top-color: #8B5CF6; }
.nx-nav-item:hover .nx-nav-link--entertainment ~ .nx-dropdown { border-top-color: #EAB308; }

/* ============================================================
   LIVE DATE IN TOPBAR
============================================================ */
#nx-live-date { font-size: .72rem; color: rgba(255,255,255,.55); letter-spacing: .02em; }

/* ============================================================
   PAGE TEMPLATE STYLES (About, Legal, Contact, Author)
============================================================ */

/* Sticky TOC (Privacy Policy) */
@media (max-width: 900px) {
  .nx-container > div[style*="grid-template-columns:240px"] {
    grid-template-columns: 1fr !important;
  }
  .nx-container nav[style*="sticky"] { position: static !important; }
}

/* Team grid responsive */
@media (max-width: 900px) {
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 560px) {
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Contact form focus states */
#cf_name:focus, #cf_email:focus,
#cf_subject:focus, #cf_type:focus,
#cf_message:focus {
  border-color: var(--nx-red) !important;
  box-shadow: 0 0 0 3px rgba(232,25,44,.12);
}

/* Values / credentials grid */
.nx-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 768px) { .nx-values-grid { grid-template-columns: 1fr !important; } }

/* Legal article styles */
.nx-article-body h2 { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--nx-border); }
.nx-article-body h3 { margin-top: 1.75rem; }
.nx-article-body ul  { padding-left: 1.25rem; margin-bottom: 1.25rem; }
.nx-article-body ul li { list-style: disc; margin-bottom: .5rem; font-size: .95rem; color: var(--nx-text-secondary); line-height: 1.7; }
.nx-article-body table { margin-bottom: 2rem; }

/* ============================================================
   CATEGORY PAGE HERO BANNER COLOUR CODING
============================================================ */
.category-breaking-news .nx-cat-banner  { border-left-color: #E8192C; }
.category-politics .nx-cat-banner       { border-left-color: #DC2626; }
.category-business .nx-cat-banner       { border-left-color: #16A34A; }
.category-tech .nx-cat-banner           { border-left-color: #0EA5E9; }
.category-sports .nx-cat-banner         { border-left-color: #F97316; }
.category-health .nx-cat-banner         { border-left-color: #EC4899; }
.category-lifestyle .nx-cat-banner      { border-left-color: #8B5CF6; }
.category-entertainment .nx-cat-banner  { border-left-color: #EAB308; }

/* ============================================================
   FOOTER NEWSLETTER BAR RESPONSIVE
============================================================ */
@media (max-width: 640px) {
  #nx-footer div[style*="display:flex;align-items:center;justify-content:space-between"] {
    flex-direction: column !important;
    text-align: center !important;
  }
  #nx-footer div[style*="display:flex;gap:8px;flex:0 0 auto"] {
    width: 100% !important;
    flex-direction: column !important;
  }
  #nx-footer input[type="email"] { min-width: unset !important; width: 100% !important; }
}

/* ============================================================
   DARK MODE — PAGE TEMPLATES
============================================================ */
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select {
  background: var(--nx-bg-2) !important;
  color: var(--nx-text-primary) !important;
  border-color: var(--nx-border) !important;
}
[data-theme="dark"] table th { background: var(--nx-bg-3) !important; }


/* ============================================================
   SUBCATEGORY BAR — appears inline below nav on hover/active
============================================================ */
.nx-subcat-bar {
  display: none;
  border-top: 3px solid var(--nx-red);
  background-color: var(--nx-bg, #ffffff);
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  position: relative;
  z-index: 89;
}
[data-theme="dark"] .nx-subcat-bar {
  background-color: var(--nx-bg, #0f1117);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.nx-subcat-bar.nx-subcat-visible {
  display: block;
  animation: nx-subcat-in .18s ease;
}
@keyframes nx-subcat-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nx-subcat-inner {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nx-subcat-inner::-webkit-scrollbar { display: none; }
.nx-subcat-label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--nx-red);
  padding: 10px 16px 10px 0;
  white-space: nowrap;
  border-right: 1px solid var(--nx-border);
  margin-right: 12px;
  flex-shrink: 0;
}
.nx-subcat-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
}
.nx-subcat-link {
  display: inline-block;
  padding: 9px 14px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--nx-text-primary);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  text-decoration: none;
  opacity: .75;
}
.nx-subcat-link:hover,
.nx-subcat-link--active {
  color: var(--nx-red);
  border-bottom-color: var(--nx-red);
  opacity: 1;
}
.nx-subcat-all {
  font-weight: 800;
  color: var(--nx-text-primary);
  opacity: 1;
}

/* Remove arrow from category nav links (only More keeps arrow) */
.nx-nav-has-sub .nx-nav-arrow { display: none !important; }

/* ============================================================
   PROFESSIONAL HOMEPAGE BANNER
============================================================ */
.nx-promo-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0f1117 0%, #1a1f2e 50%, #0f1117 100%);
  border-radius: 14px;
  margin: 28px 0 32px;
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 180px;
}
.nx-promo-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
  pointer-events: none;
}
.nx-promo-banner::after {
  content: '';
  position: absolute;
  top: -80px;
  right: -60px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(232,25,44,.25) 0%, transparent 70%);
  pointer-events: none;
}
.nx-promo-banner-left {
  position: relative;
  z-index: 2;
  flex: 1;
}
.nx-promo-banner-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(232,25,44,.15);
  border: 1px solid rgba(232,25,44,.35);
  color: #ff6b7a;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.nx-promo-banner-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #E8192C;
  border-radius: 50%;
  animation: nx-pulse 1.4s ease infinite;
}
@keyframes nx-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(1.4); }
}
.nx-promo-banner-title {
  font-size: 1.75rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -.02em;
}
.nx-promo-banner-title span { color: #E8192C; }
.nx-promo-banner-desc {
  font-size: .9rem;
  color: rgba(255,255,255,.6);
  margin: 0;
  max-width: 420px;
  line-height: 1.55;
}
.nx-promo-banner-right {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}
.nx-promo-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #E8192C;
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  padding: 13px 26px;
  border-radius: 9px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(232,25,44,.4);
  white-space: nowrap;
}
.nx-promo-banner-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(232,25,44,.5);
  color: #fff;
}
.nx-promo-banner-cta svg { flex-shrink: 0; }
.nx-promo-banner-note {
  font-size: .75rem;
  color: rgba(255,255,255,.35);
  text-align: right;
}
.nx-promo-banner-stats {
  display: flex;
  gap: 28px;
  margin-top: 20px;
}
.nx-promo-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nx-promo-stat-num {
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.02em;
}
.nx-promo-stat-label {
  font-size: .72rem;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}

@media (max-width: 680px) {
  .nx-promo-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 22px;
  }
  .nx-promo-banner-right { align-items: flex-start; width: 100%; }
  .nx-promo-banner-cta { width: 100%; justify-content: center; }
  .nx-promo-banner-title { font-size: 1.3rem; }
  .nx-promo-banner-stats { gap: 20px; }
}

/* ── Banner email input placeholder color ── */
.nx-promo-banner input::placeholder { color: rgba(255,255,255,.55); }
.nx-promo-banner input:focus {
  border-color: rgba(255,255,255,.6) !important;
  background: rgba(255,255,255,.18) !important;
  outline: none;
}

/* ── Banner right column layout fix ── */
.nx-promo-banner-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 680px) {
  .nx-promo-banner-right { align-items: stretch; width: 100%; }
  .nx-promo-banner-right > div { flex-direction: column; }
  .nx-promo-banner-right input,
  .nx-promo-banner-right button { width: 100%; }
}

/* ── Subcat bar body offset when fixed ── */
.nx-subcat-bar[style*="position: fixed"] + * { /* handled by JS */ }

/* ── Newsletter widget highlight on scroll-to ── */
#nx-newsletter-section {
  transition: box-shadow .4s ease;
  scroll-margin-top: 24px;
}
#nx-newsletter-section:target,
#nx-newsletter-section.nx-highlight {
  box-shadow: 0 0 0 3px var(--nx-red);
  border-radius: var(--nx-radius-lg);
}