/* Toppie extra 1.0.0 - stijl voor de nieuwe blokken (startblok, stoplicht, eerste week, zoeken, herinnering)
   Kleuren van de site: Topfit blauw #25358E, Topfit groen #62BB46, lichtgroen #E7F4E2, zonnegeel #F2B33D.
   Witte tekst alleen op donkere kleuren: Topfit blauw (10,6:1) en Topfit groen donker #407B2D (5,1:1). */
:root {
	--tpx-blauw: #25358E;
	--tpx-groen: #62BB46;
	--tpx-groen-donker: #407B2D;
	--tpx-lichtgroen: #E7F4E2;
	--tpx-geel: #F2B33D;
	--tpx-rood: #B42318;
	--tpx-rood-licht: #FDECEA;
	--tpx-oranje: #8A4B00;
	--tpx-oranje-licht: #FFF3DC;
	--tpx-groen-tekst: #2E5A20;
}

/* ---------- knoppen ---------- */
.tpx-knoppen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0 0; }
a.tpx-knop, button.tpx-knop, .tpx-knop .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 2px solid transparent;
	font-family: inherit; font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.tpx-knop-blauw, .tpx-knop-blauw .wp-block-button__link { background: var(--tpx-blauw) !important; color: #fff !important; }
.tpx-knop-groen, .tpx-knop-groen .wp-block-button__link { background: var(--tpx-groen-donker) !important; color: #fff !important; }
.tpx-knop-wit { background: #fff !important; color: var(--tpx-blauw) !important; }
.tpx-knop-rand { background: transparent !important; color: #fff !important; border-color: #fff !important; }
.tpx-knop-blauw:hover, .tpx-knop-groen:hover, .tpx-knop-blauw .wp-block-button__link:hover, .tpx-knop-groen .wp-block-button__link:hover { filter: brightness(1.15); }
.tpx-knop:focus-visible, .tpx-knop .wp-block-button__link:focus-visible { outline: 3px solid var(--tpx-geel); outline-offset: 2px; }
.tpx-linkknop { background: none; border: 0; padding: 6px 0; color: var(--tpx-blauw); text-decoration: underline; font: inherit; font-size: 15px; cursor: pointer; }
.tpx-linkknop-wit { color: #fff; }
.tpx-klein { font-size: 15px; margin: 6px 0 0; }
.tpx-knop[hidden], [hidden] { display: none !important; }
.tpx-schuif { display: none; font-size: 13.5px; color: #555; margin: 2px 0 0; }

/* ---------- startblok bovenaan een lichaamsdeelpagina ---------- */
.tpx-start { border: 3px solid var(--tpx-groen); border-radius: 20px; background: #fff; padding: 22px 22px 18px; margin: 28px auto 34px; box-shadow: 0 6px 22px rgba(37, 53, 142, .08); }
.tpx-start > * + * { margin-top: 14px; }
.tpx-start .tpx-start-kop { display: flex; gap: 16px; align-items: center; }
.tpx-start .tpx-start-kop img { width: 72px; height: auto; flex: 0 0 auto; }
.tpx-start h2.wp-block-heading { margin: 0; font-size: clamp(24px, 4vw, 34px); line-height: 1.15; color: var(--tpx-blauw); }
.tpx-start .tpx-sub { margin: 4px 0 0; color: #444; }
.tpx-kw { background: var(--tpx-lichtgroen); border-radius: 16px; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.tpx-kw p { margin: 0; color: #1f2a5c; font-weight: 600; }

/* stoplicht */
.tpx-stoplicht { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.tpx-licht { border-radius: 16px; padding: 14px 16px 12px; border: 2px solid transparent; position: relative; }
.tpx-licht h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.25; display: flex; gap: 10px; align-items: center; }
.tpx-licht h3::before { content: ""; width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.tpx-licht ul { margin: 0; padding-left: 20px; font-size: 15.5px; line-height: 1.5; }
.tpx-licht li + li { margin-top: 4px; }
.tpx-licht p { margin: 8px 0 0; font-size: 15px; }
.tpx-rood { background: var(--tpx-rood-licht); border-color: #F4B7B0; }
.tpx-rood h3 { color: var(--tpx-rood); }
.tpx-rood h3::before { background: #E5484D; }
.tpx-rood ul, .tpx-rood p { color: #5a1610; }
.tpx-oranje { background: var(--tpx-oranje-licht); border-color: #F6CF86; }
.tpx-oranje h3 { color: var(--tpx-oranje); }
.tpx-oranje h3::before { background: var(--tpx-geel); }
.tpx-oranje ul, .tpx-oranje p { color: #4d2c00; }
.tpx-groen { background: var(--tpx-lichtgroen); border-color: #B9DFAA; }
.tpx-groen h3 { color: var(--tpx-groen-tekst); }
.tpx-groen h3::before { background: var(--tpx-groen); }
.tpx-groen ul, .tpx-groen p { color: #1f3d15; }
.tpx-112 { font-weight: 700; }

/* begin met deze 3 oefeningen */
.tpx-drie h3 { margin: 6px 0 4px; font-size: 22px; color: var(--tpx-blauw); }
.tpx-drie .wp-block-columns { gap: 14px; margin: 8px 0 0; }
.tpx-drie .tpx-dosis { font-size: 14.5px; margin: 2px 0 0; color: #444; }
.tpx-pijnregel { background: #F5F7FF; border-left: 5px solid var(--tpx-blauw); border-radius: 10px; padding: 10px 14px; font-size: 15.5px; color: #1f2a5c; }
.tpx-pijnregel strong { color: var(--tpx-blauw); }

/* je eerste week */
details.tpx-week { border: 2px dashed #B9DFAA; border-radius: 16px; padding: 4px 14px; background: #FBFDF9; }
details.tpx-week > summary { cursor: pointer; font-weight: 700; color: var(--tpx-blauw); padding: 10px 0; list-style: none; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
details.tpx-week > summary::-webkit-details-marker { display: none; }
details.tpx-week > summary::after { content: "Open"; font-size: 14px; background: var(--tpx-blauw); color: #fff; border-radius: 999px; padding: 4px 12px; font-weight: 600; }
details.tpx-week[open] > summary::after { content: "Dicht"; }
.tpx-week-oef { margin: 4px 0 8px; padding-left: 22px; }
.tpx-week-oef li { margin: 2px 0; }
.tpx-tabel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; }
.tpx-tabel { border-collapse: separate; border-spacing: 4px; font-size: 14px; min-width: 520px; }
.tpx-tabel th { text-align: left; font-weight: 600; color: #1f2a5c; padding: 2px 4px; white-space: nowrap; }
.tpx-tabel thead th { font-size: 12.5px; text-align: center; color: #555; }
.tpx-tabel td { text-align: center; background: #fff; border: 1px solid #DCE7D6; border-radius: 8px; width: 44px; height: 40px; }
.tpx-tabel input { width: 24px; height: 24px; accent-color: var(--tpx-groen-donker); cursor: pointer; }
.tpx-week-start { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.tpx-week-start .tpx-klein { margin: 0; }
.tpx-teller { font-weight: 600; color: var(--tpx-groen-tekst); margin: 8px 0 0; }
.tpx-week-acties { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 8px; }

/* afspraak + vergoeding */
.tpx-afspraak { background: var(--tpx-blauw); color: #fff; border-radius: 18px; padding: 18px 20px; }
.tpx-afspraak h3 { color: #fff; margin: 0 0 6px; font-size: 22px; }
.tpx-afspraak p { color: #fff; margin: 0; }
.tpx-afspraak a:not(.tpx-knop):not(.wp-block-button__link) { color: #fff; }
.tpx-afspraak .tpx-knop-wit .wp-block-button__link, .tpx-afspraak a.tpx-knop-wit { background: #fff !important; color: var(--tpx-blauw) !important; }
.tpx-afspraak .tpx-knop-groen .wp-block-button__link { background: var(--tpx-groen-donker) !important; }
.tpx-vergoeding { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 12px; font-size: 15.5px; }
.tpx-vergoeding p { margin: 0; color: #fff; }
.tpx-vergoeding strong { color: #CFEFC2; }

/* ---------- zoeken ---------- */
.tpx-hulp { background: var(--tpx-lichtgroen); border-radius: 18px; padding: 18px 20px; margin: 14px 0; }
.tpx-hulp-kop { font-weight: 700; color: var(--tpx-blauw); margin: 0 0 10px; font-size: 18px; }
.tpx-hulp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tpx-hulp-tekst { margin: 12px 0 0; }
.tpx-tip { background: #F5F7FF; border-radius: 12px; padding: 10px 14px; margin: 10px 0; font-size: 15.5px; }

/* ---------- "nog steeds last?"-balk ---------- */
.tpx-balk { position: fixed; left: 12px; right: 12px; top: 12px; z-index: 99991; max-width: 760px; margin: 0 auto; background: var(--tpx-blauw); color: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(2, 27, 119, .35); display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; animation: tpx-in .35s ease-out; }
.tpx-balk-tekst { margin: 0; flex: 1 1 260px; font-size: 16px; }
.tpx-balk-knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-bar .tpx-balk { top: 44px; }
@keyframes tpx-in { from { transform: translateY(-20px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tpx-balk { animation: none; } }

/* ---------- telefoon ---------- */
@media (max-width: 781px) {
	.tpx-schuif { display: block; }
	.tpx-stoplicht { grid-template-columns: 1fr; }
	.tpx-vergoeding { grid-template-columns: 1fr; }
	.tpx-start { padding: 16px 14px 14px; border-radius: 16px; }
	.tpx-start .tpx-start-kop img { width: 56px; }
	.tpx-kw { flex-direction: column; align-items: stretch; }
	.tpx-kw .tpx-knop, .tpx-kw .wp-block-buttons, .tpx-kw .wp-block-button { width: 100%; }
	.tpx-kw .wp-block-button__link { width: 100%; }
	.tpx-drie .wp-block-columns { flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
	.tpx-drie .wp-block-column { flex: 0 0 74% !important; scroll-snap-align: start; }
}
@media print {
	.tpx-balk, .tpx-ics, .tpx-week-start button, .tpx-linkknop { display: none !important; }
}

/* 1.1.0: WhatsApp-knop. #25D366 met donkere tekst #111B21: contrast 8,7 : 1 */
a.tpx-knop-wa, .tpx-knop-wa { background: #25D366 !important; color: #111B21 !important; }
a.tpx-knop-wa:hover, a.tpx-knop-wa:focus { background: #1EBE5A !important; color: #111B21 !important; }