/* Totum Nexum — pagina-onderdelen uit het nieuwe ontwerp (home, TN-knop, over, contact).
   Laad na base.css. Kleuren die per thema verschillen staan als variabelen in base.css. */

/* Links in de inhoud */
#main a:not(.tn-btn):not(.tn-btn2) { color: var(--accent-text); }
#main a:not(.tn-btn):not(.tn-btn2):hover { color: var(--link-hover); }
#main a:focus-visible, #main button:focus-visible, #main summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }

/* Secundaire knop op Over */
.tn-btn2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 22px; box-sizing: border-box;
  border: 1px solid var(--line-control); border-radius: 8px;
  color: var(--text-strong); font-size: 16px; font-weight: 500; text-decoration: none;
  transition: border-color 0.15s ease;
}
.tn-btn2:hover { border-color: var(--accent-text); color: var(--text-strong); }

/* Decoratieve haakjes verdwijnen op telefoon */
@media (max-width: 560px) { .tn-deco-big { display: none !important; } }

/* Diagram: losse onderdelen worden één klik */
@media (max-width: 560px) {
  .tn-flow { flex-direction: column; align-items: stretch; }
  .tn-flow-deco { display: none; }
  .tn-flow-chips { width: auto !important; }
}
@keyframes tn-flow { to { stroke-dashoffset: -16; } }
.tn-flow-lines path { animation: tn-flow 1s linear infinite; }
.tn-flow-out path { animation: tn-flow 0.6s linear infinite; }
@keyframes tn-ring { 0%, 55% { transform: scale(1); opacity: 0; } 62% { opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
.tn-ring { animation: tn-ring 3.2s ease-out infinite; }
@keyframes tn-flash { 0%, 50%, 68%, 100% { filter: brightness(1); } 58% { filter: brightness(1.35); } }
.tn-flash { animation: tn-flash 3.2s ease-in-out infinite; }
@keyframes tn-done { 0%, 72%, 100% { background-color: var(--done-a); } 84% { background-color: var(--done-b); } }
.tn-done { animation: tn-done 3.2s ease-in-out infinite; }
@keyframes tn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.tn-dot { animation: tn-pulse 2s ease-in-out infinite; }
@keyframes tn-merge {
  0%, 12% { transform: none; opacity: 1; }
  46% { transform: translate(64px, var(--dy)) scale(0.4); opacity: 0; }
  82% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.tn-merge > li { animation: tn-merge 3.2s cubic-bezier(0.6, 0, 0.4, 1) infinite; }
.tn-merge > li:nth-child(1) { --dy: 100px; }
.tn-merge > li:nth-child(2) { --dy: 50px; }
.tn-merge > li:nth-child(3) { --dy: 0px; }
.tn-merge > li:nth-child(4) { --dy: -50px; }
.tn-merge > li:nth-child(5) { --dy: -100px; }
@media (max-width: 560px) { .tn-merge > li { animation: none; } }

/* Balken "toen / nu" */
.tn-fill { transform: none; }
@keyframes tn-stripes { to { background-position: 17px 0; } }
.tn-fill-slow { animation: tn-stripes 1.6s linear infinite; }
@keyframes tn-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.tn-fill-fast { position: relative; overflow: hidden; }
.tn-fill-fast::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); animation: tn-shine 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tn-fill-fast::after { display: none; } }

/* Contactformulier */
.tn-input {
  width: 100%; height: 48px; box-sizing: border-box; padding: 0 14px;
  border-radius: 8px; background: var(--surface); color: var(--text-strong);
  font: 400 16px/1.4 var(--font-sans);
  transition: border-color 0.15s ease;
}
.tn-input:hover { border-color: var(--input-hover) !important; }
.tn-input:focus { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.tn-submit {
  width: 100%; height: 52px; border: 0; border-radius: 8px;
  background: var(--action); color: #ffffff;
  font: 600 16px/1 var(--font-sans); cursor: pointer; transition: filter 0.15s ease;
}
.tn-submit:hover { filter: brightness(1.08); }
.tn-submit:disabled { opacity: 0.6; cursor: progress; }
@keyframes tn-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tn-in { animation: tn-in 0.2s ease-out; }
.tn-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* TN-knop: schermafbeelding en rondleiding */
.tn-win { width: 332px; max-width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #1e1f22; }
.tn-win img { display: block; width: 100%; height: auto; aspect-ratio: 415 / 880; }
.tn-step {
  width: 100%; box-sizing: border-box; text-align: left; border: 0; cursor: pointer;
  color: inherit; font: inherit;
  display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 16px; gap: 4px 20px;
  padding: 18px 14px; transition: background-color 0.15s ease;
}
.tn-step:hover h3 { color: var(--accent-text); }
@media (max-width: 560px) {
  .tn-step { grid-template-columns: minmax(0, 1fr) 16px; }
  .tn-step .tn-step-body { grid-column: 1 / -1; grid-row: 2; }
  .tn-step .tn-step-arrow { grid-column: 2; grid-row: 1; }
}

/* TN-knop: rondleiding (de actieve stap heeft een kaartachtergrond) */
.tn-step-label { padding-top: 3px; font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-muted); }
.tn-step-arrow { align-self: center; font-family: var(--font-mono); font-size: 14px; color: var(--accent-text); visibility: hidden; }
.tn-step { background: transparent; }
.tn-step[aria-pressed="true"] { background: var(--surface-raised); }
.tn-step[aria-pressed="true"] .tn-step-label { color: var(--accent-text); }
.tn-step[aria-pressed="true"] .tn-step-arrow { visibility: visible; }

/* Formulierstatus zonder JavaScript: contact.php stuurt terug naar #verzonden of #fout-... */
.tn-status { display: none; padding: 16px 18px; border-radius: 8px; font-size: 16px; line-height: 1.5; color: var(--text-strong); }
.tn-status:target { display: block; }
.tn-status-ok { border: 1px solid var(--success-line); background: var(--success-wash); }
.tn-status-err { border: 1px solid var(--danger); }

/* hidden moet altijd winnen, ook van inline display */
[hidden] { display: none !important; }

/* Privacyverklaring */
.tn-page { max-width: 1280px; margin: 0 auto; box-sizing: border-box; padding: clamp(56px, 8vw, 104px) clamp(24px, 5.5vw, 80px) clamp(72px, 10vw, 128px); }
.tn-legal-head { max-width: 720px; display: flex; flex-direction: column; gap: 20px; margin-bottom: 56px; }
.tn-legal-head h1 { margin: 0; font-size: clamp(38px, 5vw, 64px); line-height: 1.04; font-weight: 700; letter-spacing: -0.025em; color: var(--text-strong); text-wrap: balance; }
.tn-lead { margin: 0; font-size: 19px; line-height: 1.6; color: var(--text); }
.tn-legal { max-width: 720px; border-top: 1px solid var(--line); }
.tn-legal section { display: flex; flex-direction: column; gap: 12px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.tn-legal h2 { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--text-strong); }
.tn-legal p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--text); }
.tn-legal-meta { margin: 28px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }

/* Grote decoratieve haakjes: als pseudo-element, zodat ze geen tekst in de pagina zijn */
.tn-deco-big::before { content: "( )"; }

/* TN-knop: de schermafbeelding volgt het thema van de site */
.tn-win .tn-shot-light { display: none; }
:root[data-theme="light"] .tn-win .tn-shot-light { display: block; }
:root[data-theme="light"] .tn-win .tn-shot-dark { display: none; }
:root[data-theme="light"] .tn-win { background: #fafafa; }
.tn-for-light { display: none; }
:root[data-theme="light"] .tn-for-light { display: inline; }
:root[data-theme="light"] .tn-for-dark { display: none; }