/* =========================================================
   NEO BRUTAL CSS
   A lightweight neo-brutalism framework
   ========================================================= */

/* =========================================================
   1. ROOT TOKENS
   ========================================================= */

:root {
  --nb-bg: #e8e4d4;
  --nb-surface: #f5f5f2;
  --nb-surface-2: #ffffff;
  --nb-text: #111111;
  --nb-text-soft: #334155;
  --nb-border-color: #111111;

  --nb-yellow: #ffe100;
  --nb-pink: #ff2ea6;
  --nb-blue: #4cc9ff;
  --nb-green: #b7ff00;
  --nb-red: #ff5c5c;
  --nb-black: #111111;
  --nb-white: #ffffff;

  --nb-border-width: 4px;
  --nb-border: var(--nb-border-width) solid var(--nb-border-color);

  --nb-shadow-xs: 2px 2px 0 var(--nb-border-color);
  --nb-shadow-sm: 4px 4px 0 var(--nb-border-color);
  --nb-shadow-md: 6px 6px 0 var(--nb-border-color);
  --nb-shadow-lg: 8px 8px 0 var(--nb-border-color);

  --nb-radius: 0px;

  --nb-font-sans: Inter, Arial, Helvetica, sans-serif;
  --nb-font-display: Arial Black, Inter, Arial, Helvetica, sans-serif;

  --nb-container: 1240px;

  --nb-space-1: 0.25rem;
  --nb-space-2: 0.5rem;
  --nb-space-3: 0.75rem;
  --nb-space-4: 1rem;
  --nb-space-5: 1.25rem;
  --nb-space-6: 1.5rem;
  --nb-space-8: 2rem;
  --nb-space-10: 2.5rem;
  --nb-space-12: 3rem;

  --nb-text-xs: 0.75rem;
  --nb-text-sm: 0.875rem;
  --nb-text-base: 1rem;
  --nb-text-lg: 1.125rem;
  --nb-text-xl: 1.25rem;
  --nb-text-2xl: 1.5rem;
  --nb-text-3xl: 2rem;
  --nb-text-4xl: 2.75rem;
  --nb-text-5xl: 4rem;

  --nb-transition-fast: 120ms ease;
}

/* =========================================================
   2. RESET
   ========================================================= */

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

html {
  font-size: 16px;
}

body {
  margin: 0;
  background: var(--nb-bg);
  color: var(--nb-text);
  font-family: var(--nb-font-sans);
  line-height: 1.45;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

/* =========================================================
   3. BASE TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--nb-space-4);
  font-family: var(--nb-font-display);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(2.6rem, 6vw, var(--nb-text-5xl));
}

h2 {
  font-size: clamp(2rem, 4vw, var(--nb-text-4xl));
}

h3 {
  font-size: clamp(1.4rem, 2.5vw, var(--nb-text-3xl));
}

h4 {
  font-size: var(--nb-text-xl);
}

p {
  margin: 0 0 var(--nb-space-4);
  color: var(--nb-text-soft);
  font-size: var(--nb-text-base);
}

small {
  font-size: var(--nb-text-sm);
}

.nb-lead {
  font-size: var(--nb-text-xl);
  max-width: 65ch;
}

.nb-kicker {
  font-size: var(--nb-text-xs);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

/* =========================================================
   4. LAYOUT
   ========================================================= */

.nb-container {
  width: min(100% - 2rem, var(--nb-container));
  margin-inline: auto;
}

.nb-section {
  padding-block: var(--nb-space-12);
}

.nb-panel {
  background: var(--nb-surface);
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-lg);
  padding: var(--nb-space-8);
}

.nb-grid {
  display: grid;
  gap: var(--nb-space-5);
}

.nb-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nb-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nb-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nb-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nb-space-4);
}

.nb-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-space-4);
}

.nb-stack > * + * {
  margin-top: var(--nb-space-4);
}

.nb-stack-sm > * + * {
  margin-top: var(--nb-space-3);
}

.nb-stack-lg > * + * {
  margin-top: var(--nb-space-6);
}

/* =========================================================
   5. SURFACES
   ========================================================= */

.nb-card,
.nb-box {
  background: var(--nb-surface);
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-md);
  padding: var(--nb-space-6);
}

.nb-card-white {
  background: var(--nb-white);
}

.nb-card-dark {
  background: var(--nb-black);
  color: var(--nb-white);
}

.nb-card-dark p {
  color: rgba(255, 255, 255, 0.82);
}

/* =========================================================
   6. LABELS / TAGS / BADGES
   ========================================================= */

.nb-label,
.nb-tag,
.nb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-sm);
  font-weight: 900;
  text-transform: uppercase;
}

.nb-label {
  padding: 0.45rem 0.8rem;
  font-size: var(--nb-text-xs);
  letter-spacing: 0.2em;
  background: var(--nb-yellow);
}

.nb-tag,
.nb-badge {
  min-height: 42px;
  padding: 0.55rem 0.9rem;
  font-size: var(--nb-text-sm);
  letter-spacing: 0.08em;
  background: var(--nb-white);
}

.nb-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nb-space-3);
}

/* =========================================================
   7. BUTTONS
   ========================================================= */

.nb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0.85rem 1.25rem;
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-md);
  background: var(--nb-white);
  color: var(--nb-text);
  font-weight: 900;
  text-transform: none;
  cursor: pointer;
  transition:
    transform var(--nb-transition-fast),
    box-shadow var(--nb-transition-fast),
    background var(--nb-transition-fast);
}

.nb-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: var(--nb-shadow-sm);
}

.nb-btn:active {
  transform: translate(6px, 6px);
  box-shadow: none;
}

.nb-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.nb-btn-block {
  width: 100%;
}

.nb-btn-yellow {
  background: var(--nb-yellow);
}

.nb-btn-pink {
  background: var(--nb-pink);
  color: var(--nb-white);
}

.nb-btn-blue {
  background: var(--nb-blue);
}

.nb-btn-green {
  background: var(--nb-green);
}

.nb-btn-red {
  background: var(--nb-red);
  color: var(--nb-white);
}

.nb-btn-dark {
  background: var(--nb-black);
  color: var(--nb-white);
  
}

/* Blog post styling for CMS-generated plain HTML */

.blog-post {
  background: var(--nb-surface);
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-lg);
  padding: var(--nb-space-8);
  padding-block: var(--nb-space-10);
  width: min(100% - 2rem, 900px);
  margin: var(--nb-space-12) auto;
  display: block;
  text-transform: none;
}

/* Make CMS-generated article content flow like nb-stack */
.blog-post article > * + * {
  margin-top: var(--nb-space-4);
}

/* Override global uppercase heading style inside blog posts */
.blog-post h1,
.blog-post h2,
.blog-post h3,
.blog-post h4,
.blog-post h5,
.blog-post h6 {
  text-transform: none;
}

/* Heading spacing */
.blog-post h1 {
  margin-bottom: var(--nb-space-8);
}

.blog-post h2,
.blog-post h3,
.blog-post h4,
.blog-post h5,
.blog-post h6 {
  margin-top: var(--nb-space-8);
}

/* Paragraph styling */
.blog-post p {
  max-width: 75ch;
}

/* Hide empty paragraphs generated by some editors */
.blog-post p:empty {
  display: none;
}

/* Lead-style first paragraph */
.blog-post article > p:first-of-type {
  font-size: var(--nb-text-xl);
  max-width: 65ch;
}

/* Links = same visual language as nb-link */
.blog-post a {
  font-weight: 900;
  border-bottom: 3px solid var(--nb-pink);
}

.blog-post a:hover {
  background: var(--nb-pink);
  color: var(--nb-white);
}

/* Strong emphasis */
.blog-post strong {
  color: var(--nb-text);
  font-weight: 900;
}

/* Lists */
.blog-post ul,
.blog-post ol {
  margin: 0 0 var(--nb-space-4);
  padding-left: var(--nb-space-8);
  color: var(--nb-text-soft);
}

.blog-post li {
  margin-bottom: var(--nb-space-2);
}

.blog-post li p {
  margin-bottom: 0;
}

/* Code styling */
.blog-post pre,
.blog-post code {
  font-family: Consolas, Monaco, monospace;
}

.blog-post pre {
  background: var(--nb-white);
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-md);
  padding: var(--nb-space-5);
  overflow-x: auto;
  white-space: pre-wrap;
}

.blog-post code {
  background: var(--nb-yellow);
  padding: 0.1em 0.25em;
  border: 2px solid var(--nb-black);
}

/* =========================================================
   8. LINKS
   ========================================================= */

.nb-link {
  font-weight: 900;
  border-bottom: 3px solid var(--nb-pink);
}

.nb-link:hover {
  background: var(--nb-pink);
  color: var(--nb-white);
}

/* =========================================================
   9. NAV
   ========================================================= */

.nb-nav {
  background: var(--nb-white);
  border-bottom: var(--nb-border);
}

.nb-nav-inner {
  width: min(100% - 2rem, var(--nb-container));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-space-4);
  padding: var(--nb-space-5) 0;
}

.nb-nav-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nb-space-4);
}

.nb-logo-stack {
  display: inline-flex;
  flex-direction: column;
}

.nb-logo-top,
.nb-logo-bottom {
  padding: 0.7rem 1rem;
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-sm);
  font-family: var(--nb-font-display);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.nb-logo-top {
  background: var(--nb-black);
  color: var(--nb-white);
}

.nb-logo-bottom {
  margin-top: -2px;
  background: var(--nb-yellow);
  color: var(--nb-text);
}

/* =========================================================
   10. HERO
   ========================================================= */

.nb-hero {
  padding-block: var(--nb-space-10);
}

.nb-hero-card {
  background: var(--nb-surface);
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-lg);
  padding: clamp(1.5rem, 3vw, 3rem);
}

.nb-highlight {
  display: inline-block;
  background: var(--nb-pink);
  color: var(--nb-white);
  padding: 0.05em 0.18em 0.12em;
  line-height: 1;
}

.nb-highlight-yellow {
  background: var(--nb-yellow);
  color: var(--nb-text);
}

.nb-highlight-blue {
  background: var(--nb-blue);
  color: var(--nb-text);
}

/* =========================================================
   11. SEARCH / INPUT GROUPS
   ========================================================= */

.nb-search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--nb-space-3);
}

.nb-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--nb-space-3);
  min-height: 60px;
  padding-inline: 1rem;
  background: var(--nb-white);
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-md);
}

.nb-input-wrap input,
.nb-input-wrap textarea,
.nb-input-wrap select {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--nb-text);
}

.nb-input-wrap input::placeholder,
.nb-input-wrap textarea::placeholder {
  color: #667085;
}

/* =========================================================
   12. FORMS
   ========================================================= */

.nb-input,
.nb-select,
.nb-textarea {
  width: 100%;
  padding: 1rem;
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-sm);
  background: var(--nb-white);
  color: var(--nb-text);
  outline: none;
  border-radius: 0;
}

.nb-textarea {
  resize: vertical;
  min-height: 140px;
}

.nb-input:focus,
.nb-select:focus,
.nb-textarea:focus {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--nb-border-color);
}

.nb-field {
  display: grid;
  gap: 0.55rem;
}

.nb-field label {
  font-weight: 900;
  font-size: var(--nb-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* =========================================================
   13. STATS
   ========================================================= */

.nb-stat {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--nb-surface);
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-md);
  padding: var(--nb-space-6);
}

.nb-stat-number {
  font-family: var(--nb-font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.nb-stat-label {
  align-self: flex-start;
}

/* =========================================================
   14. TABLES
   ========================================================= */

.nb-table-wrap {
  overflow-x: auto;
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-md);
  background: var(--nb-white);
}

.nb-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.nb-table th,
.nb-table td {
  padding: 1rem;
  border-bottom: var(--nb-border);
  text-align: left;
}

.nb-table th {
  background: var(--nb-yellow);
  font-size: var(--nb-text-sm);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nb-table tr:last-child td {
  border-bottom: none;
}

/* =========================================================
   15. ALERTS
   ========================================================= */

.nb-alert {
  padding: 1rem 1.1rem;
  border: var(--nb-border);
  box-shadow: var(--nb-shadow-sm);
  font-weight: 700;
  background: var(--nb-white);
}

.nb-alert-yellow {
  background: var(--nb-yellow);
}

.nb-alert-pink {
  background: var(--nb-pink);
  color: var(--nb-white);
}

.nb-alert-blue {
  background: var(--nb-blue);
}

.nb-alert-dark {
  background: var(--nb-black);
  color: var(--nb-white);
}

/* =========================================================
   16. UTILITIES
   ========================================================= */

.nb-text-center {
  text-align: center;
}

.nb-text-left {
  text-align: left;
}

.nb-text-right {
  text-align: right;
}

.nb-uppercase {
  text-transform: uppercase;
}

.nb-w-full {
  width: 100%;
}

.nb-hidden {
  display: none !important;
}

.nb-mt-0 { margin-top: 0; }
.nb-mt-2 { margin-top: var(--nb-space-2); }
.nb-mt-4 { margin-top: var(--nb-space-4); }
.nb-mt-6 { margin-top: var(--nb-space-6); }
.nb-mt-8 { margin-top: var(--nb-space-8); }

.nb-mb-0 { margin-bottom: 0; }
.nb-mb-2 { margin-bottom: var(--nb-space-2); }
.nb-mb-4 { margin-bottom: var(--nb-space-4); }
.nb-mb-6 { margin-bottom: var(--nb-space-6); }
.nb-mb-8 { margin-bottom: var(--nb-space-8); }

.nb-p-4 { padding: var(--nb-space-4); }
.nb-p-6 { padding: var(--nb-space-6); }
.nb-p-8 { padding: var(--nb-space-8); }

.nb-bg-white { background: var(--nb-white); }
.nb-bg-yellow { background: var(--nb-yellow); }
.nb-bg-pink { background: var(--nb-pink); color: var(--nb-white); }
.nb-bg-blue { background: var(--nb-blue); }
.nb-bg-green { background: var(--nb-green); }
.nb-bg-dark { background: var(--nb-black); color: var(--nb-white); }

.nb-shadow-sm { box-shadow: var(--nb-shadow-sm); }
.nb-shadow-md { box-shadow: var(--nb-shadow-md); }
.nb-shadow-lg { box-shadow: var(--nb-shadow-lg); }

.nb-border {
  border: var(--nb-border);
}

/* =========================================================
   17. RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
  .nb-grid-4,
  .nb-grid-3,
  .nb-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nb-search-row {
    grid-template-columns: 1fr;
  }

  .nb-nav-inner {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .nb-grid-4,
  .nb-grid-3,
  .nb-grid-2 {
    grid-template-columns: 1fr;
  }

  .nb-panel,
  .nb-card,
  .nb-box,
  .nb-hero-card,
  .nb-stat {
    padding: var(--nb-space-5);
  }

  .nb-btn {
    width: 100%;
  }

  .nb-nav-group {
    width: 100%;
  }
}