/*
Theme Name:   Nerdconomy
Theme URI:    https://nerdconomy.com/
Description:  Child theme van hello-elementor. Bevat de Nerdconomy-ontwerptokens en de
              onderdelen die Elementor's Global Settings niet kunnen uitdrukken.
Author:       Nerdconomy B.V.
Template:     hello-elementor
Version:      1.0.0
Text Domain:  nerdconomy
*/

/* ==========================================================================
   1. Tokens
   Dezelfde waarden als in Elementor Site Settings. Die zijn leidend voor alles
   wat je in de builder instelt; deze variabelen zijn er voor de CSS hieronder
   en voor handmatige overrides.
   ========================================================================== */

:root {
  --nc-rood:        #E00000;  /* vlakken, beeldmerk, primaire knop — 5.0:1 op wit */
  --nc-rood-diep:   #B3000C;  /* kleine tekst en links — 7.2:1 op wit */
  --nc-rood-donker: #7D0009;  /* hover op links */
  --nc-inkt:        #15161C;  /* koppen, donkere banden */
  --nc-grijs-700:   #3F4452;  /* lopende tekst */
  --nc-grijs-600:   #5A5F6E;  /* bijschriften, labels */
  --nc-grijs-300:   #C3C7D1;  /* randen met nadruk */
  --nc-grijs-200:   #E3E5EB;  /* standaard randen, scheidingslijnen */
  --nc-grijs-100:   #F4F5F7;  /* lichte secties */
  --nc-wit:         #FFFFFF;

  --nc-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nc-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ==========================================================================
   2. Basis
   ========================================================================== */

body {
  font-family: var(--nc-sans);
  color: var(--nc-grijs-700);
  background: var(--nc-wit);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--nc-inkt);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

a            { color: var(--nc-rood-diep); }
a:hover      { color: var(--nc-rood-donker); }

/* Zichtbare toetsenbordfocus. Elementor levert die niet consequent. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.elementor-button:focus-visible {
  outline: 3px solid var(--nc-rood);
  outline-offset: 2px;
}

/*
   Geen cursief. Dit is een bewuste merkregel, geen vergissing: handgeschreven
   en schuingedrukte tekst past niet bij Nerdconomy. Wil je het toch, verwijder
   dit blok.
*/
em, i, cite, blockquote em {
  font-style: normal;
  font-weight: 600;
}

/* Cijfers die onder elkaar moeten uitlijnen. */
table, .nc-cijfers {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   3. Identiteitselementen
   Toe te passen via het veld "CSS Classes" op een Elementor-widget, of in een
   HTML-widget.
   ========================================================================== */

/* Rode markering midden in een kop: <span class="nc-mark">af</span> */
.nc-mark {
  background: var(--nc-rood);
  color: var(--nc-wit);
  padding: 0 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Puntraster op een donkere sectie. Zet op de section zelf. */
.nc-dots {
  background-color: var(--nc-inkt);
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 13px 13px;
}
.nc-dots,
.nc-dots h1, .nc-dots h2, .nc-dots h3, .nc-dots h4 { color: var(--nc-wit); }
.nc-dots p, .nc-dots li                            { color: var(--nc-grijs-300); }

/* Monospace-accent: jaartallen, poorten, doorlooptijden, reactietijden. */
.nc-mono {
  font-family: var(--nc-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--nc-rood-diep);
}

/* Citaat met rode liniaal. Nooit cursief. */
.nc-citaat {
  font-family: var(--nc-sans);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--nc-inkt);
  border-left: 4px solid var(--nc-rood);
  padding-left: 20px;
  margin: 0;
}

/*
   Prioriteitslabels. Ze verschillen in lichtheid én dragen een cijfer, zodat
   kleur nooit alleen de informatie draagt.
*/
.nc-p1, .nc-p2, .nc-p3, .nc-p4 {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-family: var(--nc-mono);
  font-size: 0.8125rem;
  font-weight: 500;
}
.nc-p1 { background: var(--nc-rood-diep); color: var(--nc-wit); }
.nc-p2 { background: #F7CFD2;             color: var(--nc-rood-donker); }
.nc-p3 { background: var(--nc-grijs-200); color: #2B303C; }
.nc-p4 { background: var(--nc-grijs-100); color: #4A4F5E; }

/* ==========================================================================
   4. Formulieren (JetFormBuilder)
   ========================================================================== */

.jet-form-builder__field,
.jet-form-builder input[type="text"],
.jet-form-builder input[type="email"],
.jet-form-builder textarea {
  border: 1px solid var(--nc-grijs-300);
  min-height: 46px;
  font-family: var(--nc-sans);
  font-size: 1rem;
  color: var(--nc-inkt);
  background: var(--nc-wit);
}

.jet-form-builder__submit,
.jet-form-builder button[type="submit"] {
  background: var(--nc-rood);
  color: var(--nc-wit);
  border: none;
  min-height: 50px;
  padding: 0 24px;
  font-family: var(--nc-sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.jet-form-builder__submit:hover,
.jet-form-builder button[type="submit"]:hover { background: var(--nc-rood-diep); }

/* Verplichte velden markeren met meer dan een kleur. */
.jet-form-builder__label-text .jet-form-builder__required {
  color: var(--nc-rood-diep);
  font-weight: 700;
}

/* ==========================================================================
   5. Mobiel
   ========================================================================== */

@media (max-width: 767px) {
  body { font-size: 1rem; }
  .nc-citaat { font-size: 1.1875rem; padding-left: 16px; }
}