/* Lipotris – WordPress additions on top of style.css (which stays identical to the static site) */

/* Media Library images carry width/height attributes; let the design's aspect ratios win */
.art-img,.pack,.treat-img{height:auto}

/* Bold words in intro texts (**vet** in ACF) */
.lead strong{color:#14284D}
.dark .lead strong{color:#fff}

/* Text pages (privacy, cookies) */
.prose{display:flex;flex-direction:column;gap:16px;color:#152238}
.prose h2{font-size:clamp(1.375rem,1.1rem + 1.1vw,2rem);margin-top:16px}
.prose h3{margin-top:8px}
.prose ul,.prose ol{margin:0;padding-left:1.25em;display:flex;flex-direction:column;gap:6px}
.prose a{font-weight:600}

/* FAQ answers come from the editor and are wrapped in <p> */
.faq-a > :first-child{margin-top:0}
.faq-a ul,.faq-a ol{margin:10px 0 0;padding-left:1.25em}

/* ---------- Fluent Forms, styled like the original form ---------- */
.contact-r .fluentform .ff-el-group{margin:0}
.contact-r .fluentform fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;margin:0;padding:0;border:0;min-width:0}
.contact-r .fluentform .lp-full,
.contact-r .fluentform .ff_submit_btn_wrapper,
.contact-r .fluentform .ff-el-group:has(textarea),
.contact-r .fluentform .ff-el-group:has(.ff-el-form-check){grid-column:1/-1}
.contact-r .fluentform .ff-el-input--label{display:block;margin:0 0 6px;padding:0;font-size:.875rem;line-height:1.6}
.contact-r .fluentform .ff-el-input--label label{display:block;font-family:'Inter',sans-serif;font-weight:600;font-size:.875rem;color:#14284D;margin:0;line-height:1.6}
.contact-r .fluentform .ff-el-is-required.asterisk-right label:after,
.contact-r .fluentform .ff-el-is-required.asterisk-left label:before{display:none}
.contact-r .fluentform .ff-el-form-control{display:block;font:inherit;font-size:1rem;line-height:1.6;color:#152238;min-height:48px;height:auto;padding:12px 14px;border:1.5px solid #CBD8E6;border-radius:10px;background-color:#fff;width:100%;box-shadow:none}
.contact-r .fluentform textarea.ff-el-form-control{min-height:120px;resize:vertical}
.contact-r .fluentform .ff-el-form-control:focus{outline:none;border-color:#2369AD;box-shadow:0 0 0 4px rgba(35,105,173,.15)}
.contact-r .fluentform .ff-el-form-check{margin:0}
.contact-r .fluentform .ff-el-input--content{line-height:1.6}
.contact-r .fluentform .ff-el-form-check-label{display:flex;gap:10px;align-items:flex-start;font-size:clamp(.875rem,.85rem + .12vw,.9375rem);color:#4A5B70;line-height:1.6;margin:0;padding:0}
/* GDPR checkbox: Fluent Forms lays this out as a table with strong selectors */
.contact-r .fluentform .ff-el-tc,.contact-r .fluentform .ff-el-tc .ff-el-form-check-label{display:flex !important}
.contact-r .fluentform .ff-el-tc .ff_tc_checkbox,.contact-r .fluentform .ff-el-tc .ff_t_c{display:block !important;padding:0 !important;margin:0 !important}
.contact-r .fluentform .ff-el-form-check-input{width:20px;height:20px;margin:2px 0 0;accent-color:#2369AD;flex:none}
.contact-r .fluentform .ff-el-form-check-label a{color:#2369AD}
.contact-r .fluentform .ff_submit_btn_wrapper{margin:0}
.contact-r .fluentform .ff-btn-submit{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 clamp(20px,2vw,28px);border-radius:10px;border:1.5px solid transparent;background:#2369AD !important;color:#fff !important;font-family:'Inter',sans-serif;font-weight:600;font-size:clamp(.9375rem,.9rem + .15vw,1rem);line-height:1;cursor:pointer;transition:background .2s,transform .2s;box-shadow:none}
.contact-r .fluentform .ff-btn-submit:hover{background:#1C355E !important;opacity:1}
.contact-r .fluentform .ff-btn-submit:active{transform:translateY(1px)}
.contact-r .fluentform .ff-btn-submit::after{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.contact-r .fluentform .error,.contact-r .fluentform .text-danger{color:#B42318;font-size:.8125rem;margin-top:4px}
.contact-r .ff-message-success{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:24px;border-radius:14px;background:#EAF3FB;border:0;box-shadow:none;color:#4A5B70;margin:0}
.contact-r .ff-message-success h3,.contact-r .ff-message-success strong{font-family:'Inter',sans-serif;color:#14284D;font-size:clamp(1.125rem,1rem + .55vw,1.4rem)}
@media (max-width:640px){
  .contact-r .fluentform fieldset{grid-template-columns:minmax(0,1fr)}
}

/* Video: consent message before YouTube loads (no marketing consent yet) */
/* Video with YouTube thumbnail: the whole 16:9 image on top, title and text below it.
   Percentage padding/margins follow the card's width, so they match the image height. */
.video.has-thumb{min-height:0;justify-content:flex-start;padding-top:calc(56.25% + clamp(20px,2vw,28px))}
.video .video-thumb{position:absolute;top:0;left:0;width:100%;aspect-ratio:16/9;object-fit:cover}
.video .video-shade{position:absolute;top:0;left:0;width:100%;aspect-ratio:16/9;background:rgba(20,40,77,.12)}
.video.has-thumb .ball{display:none}
.video.has-thumb .play{top:0;margin-top:calc(28.125% - 42px)}
.video.video-consent .video-thumb,.video.video-consent .video-shade{height:100%;aspect-ratio:auto}
.video.video-consent .video-thumb{filter:blur(8px);transform:scale(1.08)}
.video.video-consent .video-shade{background:rgba(20,40,77,.9)}
.video.video-consent{cursor:default;justify-content:center;gap:14px}
.video.video-consent p{position:relative;max-width:46ch}
.video.video-consent .cta-row{position:relative;margin-top:4px}
.video.video-consent.has-thumb{padding-top:clamp(24px,3vw,40px);min-height:clamp(340px,30vw,460px);justify-content:center}

/* Homepage > Werking: cartilage layers infographic (template-parts/kraakbeen.php) */
.kb{margin-top:clamp(48px,6vw,88px);align-items:center;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.kb-text{display:flex;flex-direction:column;gap:14px}
.kb-text h3{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem)}
.kb-text h3 em{font-style:normal;color:#2369AD}
.kb-text strong{color:#14284D}
.kb-fig{margin:0;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(18px,2vw,28px);align-items:center}
.kb-svg{display:block;width:100%;height:auto}
.kb-m circle{fill:#fff;stroke:#14284D;stroke-width:1.5}
.kb-m text{font:700 13px Inter,system-ui,sans-serif;fill:#14284D}
.kb-m.is-key circle{fill:#0A93D6;stroke:#fff;stroke-width:2}
.kb-m.is-key text{fill:#fff}
.kb-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:var(--fs-sm);line-height:1.35}
.kb-legend li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:center}
.kb-legend strong{font-weight:600;color:#152238}
.kb-legend small{display:block;color:#4A5B70;font-size:.8125rem;margin-top:2px}
.kb-n{width:26px;height:26px;border-radius:50%;border:1.5px solid #14284D;color:#14284D;font:700 .75rem/23px Inter,system-ui,sans-serif;text-align:center}
.kb-legend .is-key{background:#EAF3FB;border-radius:12px;padding:10px 12px;margin:0 -12px}
.kb-legend .is-key strong{color:#14284D;font-weight:700}
.kb-legend .is-key .kb-n{background:#0A93D6;border-color:#0A93D6;color:#fff}
.kb-sw{width:26px;height:14px;border-radius:4px;background:#243F6E}
.kb-bone{color:#4A5B70}
.kb-cap{grid-column:1/-1;margin:0;font-size:.8125rem;color:#4A5B70}
@media (max-width:900px){.kb.g2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.kb-fig{grid-template-columns:minmax(0,1fr)}.kb-legend .is-key{margin:0}}