/* Nexbillio Accounts v1.1.0 — site header buttons + dark theme.
 *
 * The invoice tool is NEVER styled here. Its block is a Gutenberg Custom
 * HTML block (.wp-block-html); dark-theme text rules below deliberately
 * skip it, and a guard rule keeps its inherited text color dark-on-white.
 * The tool's own header (.app-header) is untouched by every rule here.
 */

/* ---------- Header layout: ONE row — logo + data left, actions right ----------
   Merged solution (owner 2026-11-05 + Muse): the logo and the data next to
   it move LEFT, the new buttons move UP into the same row, vertically
   centered. Why the high specificity: GeneratePress forces center-aligned
   headers into a COLUMN flex layout
   (.header-aligned-center:not([class*="nav-float-"]) .inside-header,
   specificity 0,3,0) — v1.1.0's .site-header .inside-header (0,2,0) lost,
   so the buttons fell onto a second row. These selectors (0,3,2) win.
   The tagline STAYS (owner: keep the logo's data with it); the bar's height
   is set by the smaller logo + tight padding instead. Target ~64-72px. */
@media (min-width: 769px) {
  html body.header-aligned-center .site-header .inside-header {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 8px 20px;
    gap: 16px;
  }
  html body.header-aligned-center .site-header .inside-header > *:not(:first-child) {
    margin-top: 0;
  }
  .site-header .site-logo img {
    max-width: 180px;
    height: auto;
  }
  .site-header .site-branding {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
  }
  .site-header .nxb-header-actions {
    margin-left: auto;
    flex: 0 0 auto;
  }
}

/* ---------- Header actions (Row 1, blue bar) ---------- */
.nxb-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nxb-header-actions .nxb-hdr-btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.nxb-header-actions .nxb-hdr-signup {
  background: #ffffff;
  color: #2563eb;
  border: 1px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}
.nxb-header-actions .nxb-hdr-signup:hover {
  background: #eff6ff;
  color: #1d4ed8;
}
/* Login is a solid button exactly like Sign Up (owner request, v1.1.6). */
.nxb-header-actions .nxb-hdr-login {
  background: #ffffff;
  color: #2563eb;
  border: 1px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}
.nxb-header-actions .nxb-hdr-login:hover {
  background: #eff6ff;
  color: #1d4ed8;
}
.nxb-header-actions .nxb-hdr-ghost {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.85);
}
.nxb-header-actions .nxb-hdr-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}
.nxb-header-actions .nxb-hdr-link {
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 4px;
}
.nxb-header-actions .nxb-hdr-link:hover {
  text-decoration: underline;
}

/* ---------- Dark-theme toggle: icon-only, never competes with text ---------- */
.nxb-theme-toggle {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: transparent;
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nxb-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- Mobile (<=768px): logo + toggle only in the header row ---------- */
@media (max-width: 768px) {
  .site-header .inside-header {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .site-header .site-branding {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
  }
  .site-header .main-title,
  .site-header .site-title,
  .site-header .site-description {
    display: none;
  }
  .site-header .site-logo img {
    max-width: 170px;
    height: auto;
  }
  .site-header .nxb-header-actions {
    margin-left: auto;
    flex: 0 0 auto;
  }
  .nxb-header-actions .nxb-hdr-btn,
  .nxb-header-actions .nxb-hdr-link {
    display: none;
  }
  .nxb-theme-toggle {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}

/* ---------- Sticky menu offset (v1.1.3) ----------
   The menu row is sticky below the header. The old Additional CSS offsets
   (108px desktop / 230px mobile) were set when the header was ~140px tall;
   v1.1.1 shrank it to ~68px, so a ~40px band of page content showed
   through between the header and the menu (owner screenshot 2026-11-05,
   image-11.png). These rules override Additional CSS (higher specificity,
   no !important) — Additional CSS still holds the old numbers, the plugin
   now owns the offsets. Mobile: also force the one-row header here — the
   theme's center-column rule otherwise still applies below 768px (logo
   centered, toggle below), which makes the mobile header height
   unpredictable. With one row it is ~56px, so the menu sits at 56px. */
#site-navigation.main-navigation {
  top: 68px;
}
@media (max-width: 768px) {
  html body.header-aligned-center .site-header .inside-header {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 8px 16px;
    gap: 12px;
  }
  html body.header-aligned-center .site-header .inside-header > *:not(:first-child) {
    margin-top: 0;
  }
  #site-navigation.main-navigation {
    top: 56px;
  }
}

/* ---------- Mobile menu auth items: hidden on desktop, first in menu on mobile ---------- */
@media (min-width: 769px) {
  .nxb-menu-auth {
    display: none !important;
  }
}

/* ==========================================================================
 * Dark theme — html[data-nxb-theme="dark"].
 * Covers site chrome (header, nav, articles, sidebar, footer, auth pages).
 * The invoice tool block (.wp-block-html) is EXCLUDED from every text rule
 * below; the guard rule at the end keeps its inherited color readable.
 * ========================================================================== */
html[data-nxb-theme="dark"] body {
  background-color: #0f172a;
}
html[data-nxb-theme="dark"] .site-header {
  background-color: #1e293b;
}
html[data-nxb-theme="dark"] #site-navigation {
  background-color: #1e293b;
}
html[data-nxb-theme="dark"] .site-content {
  background-color: #0f172a;
}
html[data-nxb-theme="dark"] .inside-article {
  background-color: #1e293b;
}
/* Guide/blog text: every direct child of the content except the tool block. */
html[data-nxb-theme="dark"] .entry-content > :not(.wp-block-html) {
  color: #e2e8f0;
}
html[data-nxb-theme="dark"] .entry-content > :not(.wp-block-html) h1,
html[data-nxb-theme="dark"] .entry-content > :not(.wp-block-html) h2,
html[data-nxb-theme="dark"] .entry-content > :not(.wp-block-html) h3,
html[data-nxb-theme="dark"] .entry-content > :not(.wp-block-html) h4,
html[data-nxb-theme="dark"] .entry-header .entry-title,
html[data-nxb-theme="dark"] .entry-header .entry-title a {
  color: #f1f5f9;
}
html[data-nxb-theme="dark"] .entry-content > :not(.wp-block-html) a {
  color: #7dd3fc;
}
html[data-nxb-theme="dark"] .entry-content > :not(.wp-block-html) table,
html[data-nxb-theme="dark"] .entry-content > :not(.wp-block-html) th,
html[data-nxb-theme="dark"] .entry-content > :not(.wp-block-html) td {
  border-color: #334155;
}
html[data-nxb-theme="dark"] .widget-area .widget {
  background-color: #1e293b;
  color: #e2e8f0;
}
html[data-nxb-theme="dark"] .widget-area .widget a {
  color: #7dd3fc;
}
html[data-nxb-theme="dark"] .site-footer {
  background-color: #0f172a;
  color: #94a3b8;
}
html[data-nxb-theme="dark"] .site-footer a {
  color: #7dd3fc;
}
/* Dark mode: the site title keeps the theme's dark-navy color unless told
   otherwise — make it (and the tagline) white on the dark header. The
   footer widgets band and the bottom bar each carry their own background,
   so both need explicit dark rules (v1.1.0 only darkened .site-footer). */
html[data-nxb-theme="dark"] .site-header .main-title a,
html[data-nxb-theme="dark"] .site-header .site-title a,
html[data-nxb-theme="dark"] .site-header .site-description {
  color: #ffffff;
}
html[data-nxb-theme="dark"] .site-footer .footer-widgets,
html[data-nxb-theme="dark"] .site-footer .inside-site-info,
html[data-nxb-theme="dark"] .site-footer .site-info {
  background-color: #0f172a;
  color: #94a3b8;
}
html[data-nxb-theme="dark"] .site-footer .footer-widgets .widget-title,
html[data-nxb-theme="dark"] .site-footer .footer-widgets .widget {
  color: #e2e8f0;
}
/* Auth pages + My Invoices (plugin's own forms). */
html[data-nxb-theme="dark"] .nxb-card {
  background-color: #1e293b;
  color: #e2e8f0;
  border-color: #334155;
}
html[data-nxb-theme="dark"] .nxb-field label {
  color: #cbd5e1;
}
html[data-nxb-theme="dark"] .nxb-field input[type="text"],
html[data-nxb-theme="dark"] .nxb-field input[type="email"],
html[data-nxb-theme="dark"] .nxb-field input[type="password"] {
  background-color: #0f172a;
  color: #f1f5f9;
  border-color: #475569;
}
html[data-nxb-theme="dark"] .nxb-invoices,
html[data-nxb-theme="dark"] .nxb-table th,
html[data-nxb-theme="dark"] .nxb-table td {
  color: #e2e8f0;
  border-color: #334155;
}
/* Auth side panel (signup / login benefits). */
html[data-nxb-theme="dark"] .nxb-side-title {
  color: #f1f5f9;
}
html[data-nxb-theme="dark"] .nxb-side-text,
html[data-nxb-theme="dark"] .nxb-perks li {
  color: #cbd5e1;
}
html[data-nxb-theme="dark"] .nxb-eyebrow {
  color: #7dd3fc;
}
/* ---------- Dark theme: guide text preset colors (v1.1.6) ----------
   The guide paragraphs below the tool carry WordPress preset text
   colors (has-contrast-color / has-text-color), which WordPress sets
   with !important — so the v1.1.0 dark rule could not override them
   and the text stayed dark on the dark background (owner screenshot
   2026-11-05, image-12.png). Override the preset colors on article
   content (never inside the tool block), and cover nested paragraphs
   inside group blocks too. */
html[data-nxb-theme="dark"] .entry-content > :not(.wp-block-html) p,
html[data-nxb-theme="dark"] .entry-content > :not(.wp-block-html) li {
  color: #e2e8f0;
}
html[data-nxb-theme="dark"] .entry-content > :not(.wp-block-html).has-text-color,
html[data-nxb-theme="dark"] .entry-content > :not(.wp-block-html) .has-text-color {
  color: #e2e8f0 !important;
}
/* Guard: the invoice tool keeps its own look — inherited text stays dark. */
html[data-nxb-theme="dark"] .wp-block-html {
  color: #1f2937;
}