/* ==========================================================================
   The Athletes Hub, gedeelde stijl voor alle tools
   Navigatie, kop, footer en huisstijl (zelfde als theathleteshub.nl)
   ========================================================================== */
:root{
  --tah-coral:#FF5757;
  --tah-coral-hover:#E64545;
  --tah-coral-dim:rgba(255,87,87,.14);
  --tah-black:#1A1A1A;
  --tah-black-2:#212121;
  --tah-line-dark:#2C2C2C;
  --tah-grey:#545454;
  --tah-light-1:#F4F4F4;
  --tah-light-2:#F8F8F8;
  --tah-white:#FFFFFF;
  --tah-r:2px;
  --tah-w:960px;
  --tah-font-display:'Bebas Neue',sans-serif;
  --tah-font-body:'Work Sans',sans-serif;
  --tah-font-mono:'JetBrains Mono',monospace;
}
::selection{ background:var(--tah-coral); color:#fff; }

/* ---------- Navigatie: maat voor maat gelijk aan assets/site.css ---------- */
.tah-nav{ background:var(--tah-black); width:100%; position:relative; z-index:50; font-family:var(--tah-font-body); line-height:1.5; }
.tah-nav-inner{
  max-width:1200px; margin:0 auto; padding:18px 32px; min-height:83px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; box-sizing:border-box;
}
.tah-logo{ display:flex; align-items:center; gap:8px; text-decoration:none; flex-shrink:0; }
.tah-logo-dot{ width:10px; height:10px; border-radius:50%; background:var(--tah-coral); display:inline-block; }
.tah-logo-word{ font-family:var(--tah-font-display); font-size:26px; letter-spacing:1px; color:#fff; line-height:1; }
.tah-links{ display:flex; align-items:center; gap:32px; }
.tah-links a{
  text-decoration:none; font-family:var(--tah-font-body); font-size:15px; font-weight:600; line-height:1.5;
  color:#fff; letter-spacing:.3px; transition:color .15s;
}
.tah-links a:hover, .tah-links a.active{ color:var(--tah-coral); }
.tah-actions{ display:flex; align-items:center; }
.tah-cta{
  display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-height:44px;
  padding:12px 22px; border:1.5px solid transparent; border-radius:var(--tah-r);
  text-decoration:none; background:var(--tah-coral); color:var(--tah-black); font-family:var(--tah-font-body);
  font-weight:700; font-size:14px; line-height:1.5; letter-spacing:.4px; text-transform:uppercase;
  white-space:nowrap; transition:background .15s;
}
.tah-cta:hover{ background:#FF7070; color:var(--tah-black); }
.tah-menu{ display:none; }
.tah-menu > summary{
  list-style:none; cursor:pointer; color:#fff; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center; user-select:none;
}
.tah-menu > summary::-webkit-details-marker{ display:none; }
.tah-menu > summary svg{ width:26px; height:26px; }
.tah-menu[open] > summary .tah-burger{ display:none; }
.tah-menu:not([open]) > summary .tah-close{ display:none; }
.tah-menu-panel{
  position:absolute; left:0; right:0; top:100%;
  background:var(--tah-black); border-top:1px solid var(--tah-line-dark);
  display:flex; flex-direction:column; gap:6px; padding:16px 20px 24px; box-sizing:border-box;
}
.tah-menu-panel a{ text-decoration:none; font-family:var(--tah-font-body); font-size:17px; font-weight:600; color:#fff; padding:10px 0; }
.tah-menu-panel a.active{ color:var(--tah-coral); }
.tah-menu-panel .tah-cta{ margin-top:10px; min-height:48px; padding:15px 28px; font-size:15px; color:var(--tah-black); }
@media (max-width:900px){
  .tah-links, .tah-actions{ display:none; }
  .tah-menu{ display:block; }
  .tah-nav-inner{ padding-top:12px; padding-bottom:12px; min-height:72px; }
}
@media (max-width:640px){
  .tah-nav-inner{ padding-left:20px; padding-right:20px; }
}

/* ---------- Kop per tool ---------- */
.tah-hero{
  background:var(--tah-black); color:#fff; position:relative; overflow:hidden;
  padding:32px 24px 44px; font-family:var(--tah-font-body);
}
.tah-hero::after{
  content:""; position:absolute; right:-140px; top:-160px; width:440px; height:440px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--tah-coral) 0%, transparent 70%); opacity:.18; pointer-events:none;
}
.tah-hero-inner{ max-width:var(--tah-w); margin:0 auto; position:relative; z-index:1; }
.tah-eyebrow{
  display:flex; align-items:center; gap:8px; margin:0 0 14px;
  font-family:var(--tah-font-mono); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tah-coral);
}
.tah-eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--tah-coral); display:inline-block; }
.tah-hero h1.tah-title{
  font-family:var(--tah-font-display); font-weight:400; font-size:clamp(40px,5.4vw,64px);
  line-height:.98; letter-spacing:1px; margin:0 0 12px; color:#fff;
}
.tah-hero h1.tah-title span{ color:var(--tah-coral); }
.tah-lead{ font-size:16px; line-height:1.6; color:#E4E4E4; max-width:none; margin:0; }
.tah-lead b{ color:#fff; font-weight:600; }
.tah-stats{ margin-top:22px; display:flex; gap:28px; flex-wrap:wrap; }
.tah-stat{ font-family:var(--tah-font-mono); font-size:24px; font-weight:700; color:#fff; }
.tah-stat small{
  display:block; font-family:var(--tah-font-body); font-weight:500; font-size:12.5px; color:#9a9a9a;
  letter-spacing:.02em; margin-top:2px;
}
@media (max-width:640px){
  .tah-hero{ padding:22px 20px 32px; }
  .tah-lead{ font-size:15px; }
  .tah-stats{ display:none; }
}

/* ---------- Sectiekoppen binnen tools ---------- */
.tah-h2{
  font-family:var(--tah-font-display) !important; font-weight:400 !important;
  letter-spacing:.5px !important; line-height:1.05 !important;
}

/* ---------- Footer (gelijk aan de site) ---------- */
.tah-foot{ background:var(--tah-black); padding:48px 32px 32px; font-family:var(--tah-font-body); text-align:left; }
.tah-foot-inner{ max-width:1280px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px; }
.tah-foot-brand{ display:flex; flex-direction:column; gap:8px; }
.tah-foot-brand .tah-logo-word{ font-size:20px; }
.tah-foot p{ color:#9A9A9A; font-size:14px; line-height:1.6; max-width:340px; margin:0; }
.tah-foot-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.tah-foot-col{ display:flex; flex-direction:column; gap:10px; }
.tah-foot-col span{ color:#fff; font-weight:700; font-size:14px; }
.tah-foot-col a{ color:var(--tah-light-1); text-decoration:none; font-size:14px; transition:color .15s; }
.tah-foot-col a:hover{ color:var(--tah-coral); }
.tah-foot-legal{
  max-width:1280px; margin:32px auto 0; border-top:1px solid var(--tah-line-dark); padding-top:20px;
  color:#9A9A9A; font-size:13px;
}
.tah-foot-legal a{ color:#9A9A9A; text-decoration:underline; }
@media (max-width:640px){ .tah-foot{ padding:40px 20px 28px; } .tah-foot-cols{ gap:40px; } }

/* ---------- Print: alleen de tool zelf ---------- */
@media print{
  .tah-nav, .tah-foot{ display:none !important; }
  .tah-hero{ background:#fff !important; color:#1A1A1A !important; padding:0 0 16px !important; }
  .tah-hero::after{ display:none; }
  .tah-hero h1.tah-title{ color:#1A1A1A !important; }
  .tah-lead{ color:#545454 !important; }
}

/* ---------- Export-balk (PDF) ---------- */
.tah-export{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:0 0 22px;
  background:var(--tah-white); border-radius:var(--tah-r); padding:16px 18px;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06);
}
.tah-export input{
  flex:1 1 220px; min-width:0; font-family:var(--tah-font-body); font-size:14px; padding:11px 12px;
  border:1.5px solid var(--tah-light-1); background:var(--tah-light-2); border-radius:var(--tah-r); color:var(--tah-black); outline:none;
}
.tah-export input:focus{ border-color:var(--tah-coral); background:#fff; }
.tah-btn{
  display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; white-space:nowrap;
  background:var(--tah-coral); color:var(--tah-black); font-family:var(--tah-font-body); font-weight:700; font-size:14px;
  letter-spacing:.3px; padding:12px 20px; border-radius:var(--tah-r); transition:background .15s;
}
.tah-btn:hover{ background:#FF7070; }
.tah-btn:disabled{ opacity:.65; cursor:wait; }
.tah-btn svg{ width:16px; height:16px; }
@media print{ .tah-export{ display:none !important; } }

/* ---------- Actieknoppen in de kop: delen / wissen ---------- */
.tah-tool-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.tah-chip{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 16px; border-radius:var(--tah-r);
  background:transparent; border:1.5px solid #555555; color:#fff; font-family:var(--tah-font-body); font-weight:600; font-size:14px; cursor:pointer;
  transition:border-color .15s, color .15s;
}
.tah-chip:hover{ border-color:var(--tah-coral); color:var(--tah-coral); }
.tah-chip svg{ width:16px; height:16px; }
.tah-toast{
  position:fixed; left:16px; right:16px; bottom:24px; margin:0 auto; width:fit-content; transform:translateY(20px); opacity:0; pointer-events:none; z-index:200;
  background:var(--tah-black); color:#fff; font-family:var(--tah-font-body); font-size:14px; padding:12px 18px; border-radius:var(--tah-r);
  box-shadow:0 8px 24px rgba(0,0,0,.3); transition:opacity .2s, transform .2s; max-width:calc(100vw - 32px);
}
.tah-toast.show{ opacity:1; transform:translateY(0); }

/* ---------- Verder: andere tools + coaching ---------- */
.tah-next{ background:var(--tah-light-2); font-family:var(--tah-font-body); color:var(--tah-black); }
.tah-next-inner{ max-width:var(--tah-w); margin:0 auto; padding:48px 24px 56px; }
.tah-next h2{ font-family:var(--tah-font-display); font-weight:400; font-size:32px; letter-spacing:.5px; margin:0 0 18px; }
.tah-next-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.tah-next-card{
  text-decoration:none; color:var(--tah-black); background:#fff; border:1.5px solid #E4E4E4; border-radius:var(--tah-r);
  padding:20px 22px; display:flex; flex-direction:column; gap:6px; transition:border-color .15s;
}
.tah-next-card:hover{ border-color:var(--tah-coral); }
.tah-next-card small{ font-size:12px; letter-spacing:2px; font-weight:700; color:#D13636; text-transform:uppercase; }
.tah-next-card strong{ font-size:16px; }
.tah-next-card span{ color:var(--tah-grey); font-size:14px; line-height:1.5; }
.tah-next-card.dark{ background:var(--tah-black); border-color:var(--tah-black); color:#fff; }
.tah-next-card.dark small{ color:var(--tah-coral); }
.tah-next-card.dark span{ color:#C9C9C9; }
@media print{ .tah-tool-actions, .tah-next{ display:none !important; } }

/* ---------- Voorbeeldplan-balk en Mijn producten ---------- */
.tah-plan-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:0 0 22px;
  padding:14px 16px; background:var(--tah-light-2); border-radius:var(--tah-r);
}
.tah-plan-bar p{ margin:0; flex:1 1 260px; font-size:13.5px; line-height:1.5; color:var(--tah-grey); }
.tah-my-form{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:4px; }
.tah-my-form input{
  font-family:var(--tah-font-body); font-size:14px; padding:10px 11px; min-width:0;
  border:1.5px solid var(--tah-light-1); border-radius:var(--tah-r); background:var(--tah-light-2); color:var(--tah-black);
}
.tah-my-form input:focus{ outline:none; border-color:var(--tah-coral); background:#fff; }
.tah-my-form .w-name{ flex:2 1 180px; }
.tah-my-form .w-portion{ flex:1 1 120px; }
.tah-my-form .w-num{ flex:0 1 96px; width:96px; }
.tah-my-list{ margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.tah-my-empty{ margin:12px 0 0; font-size:13.5px; color:var(--tah-grey); }
.tah-save-mine{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--tah-grey); cursor:pointer; }
.tah-save-mine input{ accent-color:#D13636; }
@media (max-width:640px){ .tah-my-form .w-num{ flex:1 1 90px; } }

/* Plus/min-pijltjes in tijdvelden */
.tah-spin{position:relative;}
.tah-spin > input[type=number]{-moz-appearance:textfield;appearance:textfield;}
.tah-spin > input[type=number]::-webkit-inner-spin-button,.tah-spin > input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.tah-spin > input{padding-right:34px !important;}
.tah-spin-btns{position:absolute;top:1px;right:1px;bottom:1px;width:26px;display:flex;flex-direction:column;
  border-left:1px solid rgba(128,128,128,0.25);}
.tah-spin-btns button{flex:1;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;
  background:transparent;color:inherit;opacity:0.55;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;}
.tah-spin-btns button + button{border-top:1px solid rgba(128,128,128,0.25);}
.tah-spin-btns button + button svg{transform:rotate(180deg);}
.tah-spin-btns button svg{width:10px;height:6px;}
.tah-spin-btns button:hover{opacity:1;color:#FF5757;background:rgba(255,87,87,0.08);}
.tah-spin-btns button:active{background:rgba(255,87,87,0.16);}
.tah-spin:has(input:disabled) .tah-spin-btns{display:none;}
.tah-spin:has(input:disabled) > input{padding-right:12px !important;}
@media (pointer:coarse){
  .tah-spin > input{padding-right:42px !important;}
  .tah-spin-btns{width:34px;}
}