/* Shared styles for the Elementor content pages (elementor/build-*.php). Layout, colours and
   typography live in Elementor's own widget settings; this file only styles what Elementor can't:
   lists inside text blocks, the Contact Form 7 form, the downloads password form, legal texts and
   the automatic table of contents ([hipp_toc]). Enqueued on Elementor pages by hipp_enqueue_elementor_page_assets(). */

body.elementor-page {
  --paper: #F6F0F2; --ink-50: #EFE8EA; --ink-100: #E5DDDF; --ink-200: #D5CBCE; --ink-300: #B4AAAC; --ink-400: #898182;
  --ink-500: #575756; --ink-700: #3E3D3D; --ink-800: #2B2A2A; --ink-900: #1D1C1C;
  --red-50: #FDF4F4; --red-100: #FDECEC; --red-500: #FF3540; --red-600: #E30613; --red-700: #B70410;
  --dark-canvas: #575756; --dark-text: #F5F1F2; --dark-muted: #C9C1C3;
}
.elementor-page .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
/* Links in text blocks: the theme's base link colour is meant for its dark background */
.elementor-page .elementor-widget-text-editor a { color: var(--red-600); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(227,6,19,.35); }
.elementor-page .elementor-widget-text-editor a:hover { color: var(--red-700); text-decoration-color: currentColor; }

/* Check list in a text block: add the class "hipp-el-checks" (Geavanceerd → CSS-klassen) to a Tekst-editor
   with a bullet list. <strong> = item, a line break after it = smaller detail text. */
.hipp-el-checks ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.hipp-el-checks li { position: relative; padding-left: 32px; font-size: 13.5px; line-height: 1.55; color: var(--ink-500); }
.hipp-el-checks li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--red-600)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") no-repeat center;
}
.hipp-el-checks li strong { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink-900); }
.hipp-el-checks li ul { margin-top: 4px; gap: 0; }
.hipp-el-checks li li { padding-left: 0; }
.hipp-el-checks li li::before { display: none; }

/* Contact Form 7 inside a column with the class "hipp-el-form" */


.hipp-el-form .wpcf7 form {margin: 0; }
.hipp-el-form .wpcf7 form > p {margin: 0 0 16px; }
.hipp-el-form .wpcf7 label {display: block; font-size: 13px; font-weight: 600; color: var(--ink-800); }
.hipp-el-form .wpcf7 label br {display: none; }
.hipp-el-form .wpcf7-form-control-wrap {display: block; margin-top: 6px; }
.hipp-el-form .wpcf7 input[type=text], .hipp-el-form .wpcf7 input[type=email], .hipp-el-form .wpcf7 input[type=tel], .hipp-el-form .wpcf7 select, .hipp-el-form .wpcf7 textarea {display: block; width: 100%; height: 46px; padding: 0 14px; margin: 0;
  font: inherit; font-size: 15px; font-weight: 400; color: var(--ink-900); background: var(--paper);
  border: 1px solid var(--ink-200); border-radius: 4px; transition: border-color .15s, background .15s; }
.hipp-el-form .wpcf7 textarea {height: 160px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.hipp-el-form .wpcf7 input:focus, .hipp-el-form .wpcf7 textarea:focus {outline: none; border-color: var(--ink-700); background: #fff; }
.hipp-el-form .wpcf7 input.wpcf7-not-valid, .hipp-el-form .wpcf7 textarea.wpcf7-not-valid {border-color: var(--red-600); background: #FDF4F4; }
.hipp-el-form .wpcf7-not-valid-tip {display: block; margin-top: 6px; font-size: 12.5px; font-weight: 500; color: var(--red-700); }
.hipp-el-form .wpcf7 input[type=submit] {display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 50px; margin-top: 4px; padding: 0 26px;
  border: 0; border-radius: 4px; background: var(--red-600); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; }
.hipp-el-form .wpcf7 input[type=submit]:hover {background: var(--red-700); }
.hipp-el-form .wpcf7 .wpcf7-spinner {display: block; margin: 10px auto 0; }
.hipp-el-form .wpcf7 form .wpcf7-response-output {margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--ink-200); border-radius: 6px; background: var(--ink-50); font-size: 14px; color: var(--ink-900); }
.hipp-el-form .wpcf7 form.sent .wpcf7-response-output {background: #E3F1E4; border-color: #C9E3CC; color: #2F7A3A; }
.hipp-el-form .wpcf7 form.invalid .wpcf7-response-output, .hipp-el-form .wpcf7 form.failed .wpcf7-response-output, .hipp-el-form .wpcf7 form.spam .wpcf7-response-output {background: #FDF4F4; border-color: #FDECEC; color: var(--red-700); }
.hipp-el-form .grecaptcha-badge {z-index: 5; }
@media (max-width: 480px) {

}

/* Downloads password form ([hipp_downloads_form]) */
.hipp-dl-content {font-size: 15px; line-height: 1.65; color: var(--ink-700); }
.hipp-dl-content p {margin: 0 0 20px; }
.hipp-dl-content a {color: var(--red-600); }
.hipp-dl-content form {display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: end; margin: 8px 0 0; padding-top: 20px; border-top: 1px solid var(--ink-100); }
.hipp-dl-content form label {grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--ink-800); }
.hipp-dl-content input[type=password] {width: 100%; height: 46px; padding: 0 14px; margin: 0; font: inherit; font-size: 15px; color: var(--ink-900);
  background: var(--paper); border: 1px solid var(--ink-200); border-radius: 4px; transition: border-color .15s, background .15s; }
.hipp-dl-content input[type=password]:focus {outline: none; border-color: var(--ink-700); background: #fff; }
.hipp-dl-content input[type=submit] {height: 46px; padding: 0 22px; margin: 0; border: 0; border-radius: 4px; background: var(--red-600); color: #fff;
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .15s; }
.hipp-dl-content input[type=submit]:hover {background: var(--red-700); }
.hipp-dl-error {margin: 0 0 18px; padding: 14px 16px; border-radius: 6px; background: #FDF4F4; border: 1px solid #FDECEC; color: var(--red-700); font-size: 14px; line-height: 1.5; }
.hipp-dl-error a {color: var(--red-700); font-weight: 600; }
@media (max-width: 480px) {
  .hipp-dl-content form {grid-template-columns: 1fr; }
  .hipp-dl-content input[type=submit] {width: 100%; }
}

/* Legal texts: a Tekst-editor with the class "hipp-lg-prose"; [hipp_toc] builds the table of contents from its h2's */
.hipp-lg-toc {position: sticky; top: calc(var(--hipp-sticky-top, 0px) + 24px); max-height: calc(100vh - var(--hipp-sticky-top, 0px) - 48px); overflow-y: auto; padding: 18px 0 18px 18px; border-left: 2px solid var(--ink-200); }
.hipp-lg-toc ol {margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; counter-reset: toc; }
.hipp-lg-toc li {counter-increment: toc; }
.hipp-lg-toc a {display: flex; gap: 10px; padding: 5px 0; font-size: 13.5px; line-height: 1.35; color: var(--ink-700) !important; text-decoration: none; transition: color .15s; }
.hipp-lg-toc a::before {content: counter(toc, decimal-leading-zero); flex-shrink: 0; width: 20px; font-size: 11px; font-weight: 600; line-height: 1.7; color: var(--ink-400); }
.hipp-lg-toc a:hover {color: var(--red-600) !important; }
.hipp-lg-toc a:hover::before {color: var(--red-600); }
.hipp-lg-prose {max-width: 720px; font-size: 16px; line-height: 1.75; color: var(--ink-700); }
.hipp-lg-prose > *:first-child {margin-top: 0; }
.hipp-lg-prose p {margin: 0 0 16px; }
.hipp-lg-prose h2 {margin: 40px 0 12px; padding-top: 28px; border-top: 1px solid var(--ink-200);
  font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -.005em; color: var(--ink-900); }
.hipp-lg-prose h2:first-child {margin-top: 0; padding-top: 0; border-top: 0; }
.hipp-lg-prose ul, .hipp-lg-prose ol {margin: 0 0 18px; padding-left: 0; list-style: none; }
.hipp-lg-prose ul li {position: relative; margin: 0 0 8px; padding-left: 22px; }
.hipp-lg-prose ul li::before {content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--red-600); }
.hipp-lg-prose strong {color: var(--ink-900); font-weight: 600; }
.hipp-lg-prose a {color: var(--red-600); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(227,6,19,.35); overflow-wrap: anywhere; }
.hipp-lg-prose a:hover {color: var(--red-700); text-decoration-color: currentColor; }
.hipp-lg-download {display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; margin: 0 0 12px; padding: 16px 18px;
  background: #fff; border: 1px solid var(--ink-200); border-radius: 8px; text-decoration: none !important; color: var(--ink-900) !important;
  transition: border-color .15s, box-shadow .15s; }
.hipp-lg-download:hover {border-color: var(--ink-300); box-shadow: 0 10px 30px -14px rgba(29,28,28,.25); }
.hipp-lg-download-icon {display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 56px; border-radius: 4px;
  background: var(--red-50, #FDF4F4); border: 1px solid #F6D3D5; color: var(--red-700); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.hipp-lg-download-text {display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hipp-lg-download-text strong {font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.hipp-lg-download-text span {font-size: 13px; color: var(--ink-500); }
.hipp-lg-download-cta {display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink-50); color: var(--red-600); transition: background .15s, color .15s; }
.hipp-lg-download:hover .hipp-lg-download-cta {background: var(--red-600); color: #fff; }
.hipp-lg-contact {display: flex; flex-direction: column; gap: 4px; margin-top: 40px; padding: 18px 20px; background: var(--ink-50); border: 1px dashed var(--ink-300); border-radius: 8px; font-size: 14.5px; line-height: 1.55; }
.hipp-lg-contact strong {color: var(--ink-900); }
@media (max-width: 900px) {
  .hipp-lg-toc {position: static; padding: 16px 18px; border-left: 0; background: var(--ink-50); border-radius: 8px; }
  .hipp-lg-toc ol {display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
}
@media (max-width: 560px) {
  .hipp-lg-toc ol {grid-template-columns: 1fr; }
  .hipp-lg-prose {font-size: 15.5px; }
  .hipp-lg-download {grid-template-columns: 40px 1fr; }
  .hipp-lg-download-icon {width: 40px; height: 48px; }
  .hipp-lg-download-cta {display: none; }
}
.hipp-lg-toc:empty { display: none; }
@media (max-width: 1024px) {
  .hipp-lg-toc { position: static; max-height: none; padding: 16px 18px; border-left: 0; background: var(--ink-50); border-radius: 8px; }
}
.hipp-lg-toc .hipp-toc-label { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-500); }
.hipp-lg-toc[hidden] { display: none !important; }