/* The live on-screen CV preview is built by script.js as plain HTML
   (h2/h3/p/strong), not Tailwind-classed markup, since it's generated at
   runtime rather than living in a scanned source file — Tailwind's build
   never sees these classes. Plain CSS scoped to .cv-builder__preview, per
   the CLAUDE.md CSS-only exception for generated/WYSIWYG-style output.
   The actual PDF is now built server-side by the cv-generator plugin
   (mPDF, see cv-templates/layouts/cv-deluxe.php) and doesn't touch this
   markup at all — this preview is a viewing convenience only.

   Proportional sizing (padding, gaps, font-sizes, the sidebar's width) is
   NOT done with cqw/container queries — an earlier version of this preview
   used html2canvas to rasterize it for export, which didn't resolve cqw
   the same way a real browser does. That rasterization approach is gone
   now, but the plain-px approach stayed since it works everywhere with no
   caveats. script.js's applyPreviewScale() computes the Figma-derived
   proportions in JS from the preview box's live pixel width and applies
   them as inline px styles. */

.cv-builder__preview-viewport {
    aspect-ratio: 210 / 297;
}

/* Not the site's Nunito — the real PDF (cv-templates/layouts/cv-deluxe.php
   in the cv-generator plugin) renders with mPDF's embedded Roboto-Regular/
   Roboto-Bold.ttf. A "Roboto, ..." font-STACK isn't enough on its own: most
   visitors' OSes don't have Roboto installed (it's not a Windows or macOS
   system font), so the browser was silently falling back to a completely
   different font — different line-wrap points, different ascent/descent —
   which is exactly why the preview's pagination could drift from the real
   PDF the longer the CV got. Self-hosting the SAME .ttf files mPDF embeds
   (copied into assets/fonts/) guarantees byte-identical metrics instead. */
@font-face {
    font-family: 'CV Roboto';
    src: url('../../assets/fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: block;
}

@font-face {
    font-family: 'CV Roboto';
    src: url('../../assets/fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: block;
}

.cv-builder__preview,
.cv-builder__page {
    display: flex;
    font-family: 'CV Roboto', Roboto, -apple-system, 'Segoe UI', Arial, sans-serif;
    color: #032B36;
    /* Matches cv-deluxe.php's body{line-height:1.3} as the base for
       everything (sidebar values included) — headings override this with
       their own explicit line-height where cv-deluxe.php's h1/h2/etc do. */
    line-height: 1.3;
}

/* The full, unpaginated CV — measured (per-section offsetHeight) to split
   into the page-sized .cv-builder__page copies below, for on-screen viewing
   only now (see the module docblock in template.php for why the PDF export
   doesn't use this markup at all). Stays at its natural on-screen position
   (0,0); .cv-builder__page below is given an opaque background so it fully
   occludes this layer rather than this needing to be hidden itself. */
.cv-builder__preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.cv-builder__preview-pages {
    position: absolute;
    inset: 0;
}

.cv-builder__page {
    position: absolute;
    inset: 0;
    display: none;
    overflow: hidden;
    background: #FFFFFF;
}

.cv-builder__page.is-active {
    display: flex;
}

/* Full-bleed to the page edges, matching cv-deluxe.php's .left-column —
   Cv_Ab's mpdf config sets margin_top/margin_bottom/margin_left/margin_right
   all to 0, so there's no page margin on any side. */
.cv-builder__preview-sidebar {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: break-word;
    background-color: #032B36;
    box-sizing: border-box;
}

.cv-builder__preview-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: #032B36;
    border: 3px solid #D4A24C;
    overflow: hidden;
    margin: 0 auto;
    box-sizing: border-box;
}

.cv-builder__preview-photo svg {
    width: 100%;
    height: 100%;
}

.cv-builder__preview-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sidebar label/value pairs (Adres, Telefoon, E-mail, Geboren op, Sociale
   vaardigheden) — matches cv-deluxe.php's .left-section-title (gold) /
   .left-section-value (white) exactly, including the "Persoonsgegevens"
   heading above the first pair. font-size/margins are set inline by
   applyPreviewScale() (LAYOUT.contactFontSize/contactFieldGap etc). */
.cv-builder__preview-sidebar-inner {
    display: flex;
    flex-direction: column;
}

.cv-builder__preview-label {
    color: #D4A24C;
    font-weight: 700;
}

.cv-builder__preview-value {
    margin: 0;
    color: #FFFFFF;
    font-weight: 400;
}

.cv-builder__preview-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
}

/* h1 = the visitor's name (cv-deluxe.php's <h1>), h2 = section headings
   (Opleidingen/Werkervaring/…, gold, matches <h2>), h3 = each entry's own
   title (dark, matches <h3>) — this hierarchy mirrors the real PDF's
   exactly, unlike this preview's previous flatter structure. */
.cv-builder__preview-main h1 {
    margin: 0;
    line-height: 1.2;
    font-weight: 700;
    color: #032B36;
}

.cv-builder__preview-main h2 {
    margin: 0;
    font-weight: 700;
    color: #D4A24C;
}

.cv-builder__preview-main h3 {
    margin: 0;
    font-weight: 700;
    color: #032B36;
}

.cv-builder__preview-entry-date {
    color: #666666;
}

.cv-builder__preview-main p {
    margin: 0;
    font-weight: 400;
    /* Matches cv-deluxe.php's body{line-height:1.3} exactly — this was 1.4
       before, and that extra 0.1 compounds across every wrapped line of
       every paragraph on the page, so by the time pagination reaches a
       section near the bottom the preview has already "used up" more
       vertical space than the real PDF actually needs, cutting off text
       earlier than the real PDF does. */
    line-height: 1.3;
}

/* Accordion — same visual language as modules/faq's toggle/body, this
   module just uses its own class prefix since it isn't the FAQ block. */
.cv-builder__item {
    border-radius: 4px;
}

/* ── CF7-rendered form reskin ──────────────────────────────────────────
   The CV Builder form's fields/accordion are real Contact Form 7 markup
   (see includes/functions/seed-cf7-forms.php), so — per the CLAUDE.md
   CSS-only exception for GF/CF7-generated markup — this is plain CSS
   rather than Tailwind classes on a PHP template. CF7 wraps every field
   in its own <span class="wpcf7-form-control-wrap"> — kept as a real
   block box (not display:contents) so a field's own validation-error tip
   stays grouped with it as one flex item. Unwrapping it with
   display:contents was tried first, but that puts the input AND its
   error tip as two SEPARATE direct children of whatever flex container
   they sit in — inheriting that container's own item-to-item `gap`
   between the input and its own error message, not just between fields. */

.cv-builder__form-wrap .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* The hidden vaardigheden field has no visual box either way, but as a
   real block-level flex item it still claims a `gap` slot in the
   accordion body's flex column — collapse it out of the layout instead. */
.cv-builder__form-wrap .wpcf7-form-control-wrap[data-name="vaardigheden"] {
    display: none;
}

.cv-builder__form-wrap {
    font-family: 'Nunito', system-ui, sans-serif;
}

.cv-builder__form-wrap form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* CF7 always appends .wpcf7-response-output as the LAST element in the
   form, after the submit button — there's no markup-order way to place it
   earlier. Reordered visually via flex `order` instead of fighting that. */
.cv-builder__form-wrap form > .cv-builder__accordion {
    order: 1;
}

.cv-builder__form-wrap form > .cv-builder__consent {
    order: 2;
}

.cv-builder__form-wrap form > .wpcf7-response-output {
    order: 3;
}

.cv-builder__form-wrap form > .cv-builder__submit {
    order: 4;
}

.cv-builder__accordion {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cv-builder__item {
    border-radius: 4px;
}

.cv-builder__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 20px;
    border: 1px solid #D4A24C;
    border-radius: 4px;
    background: #F4F2EE;
    text-align: left;
    cursor: pointer;
}

.cv-builder__toggle-label {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: #032B36;
}

@media (min-width: 1024px) {
    .cv-builder__toggle-label {
        font-size: 26px;
    }
}

.cv-builder__icon {
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: #FFFFFF;
}

.cv-builder__icon-horizontal,
.cv-builder__icon-vertical {
    position: absolute;
    inset: 0;
    margin: auto;
    background: #032B36;
}

.cv-builder__icon-horizontal {
    width: 18px;
    height: 2px;
}

.cv-builder__icon-vertical {
    width: 2px;
    height: 18px;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Not named "rotate-90" — that literal class name collides with Tailwind's
   own rotate-90 utility (compiled site-wide since some other module uses
   it), which sets the standalone CSS `rotate` property rather than
   `transform`. The two compose additively instead of one overriding the
   other, so an element with both ends up rotated 90+90=180deg — visually
   identical to 0deg for this symmetric bar, which is why the accordion
   icon looked stuck on "+" no matter its open/closed state. */
.cv-builder__icon-vertical--open {
    transform: rotate(90deg);
}

.cv-builder__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

.cv-builder__body--hidden {
    display: none;
}

.cv-builder__row-pair {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 1024px) {
    .cv-builder__row-pair {
        flex-direction: row;
    }

    /* flex:1 1 0, not width:50% — an <input> as a flex item doesn't split
       evenly against a sibling <div> even with matching width values, a
       browser quirk where a form control's own intrinsic sizing still
       leaks into flex-basis calculation. Explicit flex-basis:0 on both
       sidesteps it. */
    .cv-builder__row-pair > * {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }
}

.cv-input,
.cv-row-field {
    display: block;
    width: 100%;
    min-width: 0;
    height: 60px;
    padding: 0 24px;
    border-radius: 8px;
    border: none;
    font-size: 16px;
    color: #032B36;
}

.cv-input {
    background: #FFFFFF;
}

/* Row fields sit on the row card's own white background (.cv-cf7-row), so
   they get the cream-light shade instead, at the smaller size the pre-CF7
   version of this module used for row fields specifically (h-13/px-5 vs
   the top-level fields' h-15/px-6). */
.cv-row-field {
    background: #F4F2EE;
    height: 52px;
    padding: 0 20px;
}

textarea.cv-input,
textarea.cv-row-field {
    height: auto;
    min-height: 52px;
    resize: vertical;
}

textarea.cv-input {
    padding: 12px 24px;
}

textarea.cv-row-field {
    padding: 12px 20px;
}

.cv-input:focus,
.cv-row-field:focus {
    outline: 2px solid #032B36;
}

/* Browsers default placeholder text to a faded gray (often via a reduced
   opacity on ::placeholder) — the Figma design uses plain solid dark text
   for placeholders here, so both need to be set explicitly. */
.cv-input::placeholder,
.cv-row-field::placeholder {
    color: #032B36;
    opacity: 1;
}

/* ── Geboortedatum — native <input type="date"> ignores the placeholder
   attribute and always renders its own locale-format template and
   calendar icon, so it's hidden (opacity-0, still clickable/focusable on
   top of the styled box) and a custom label shows the placeholder or the
   chosen date instead — matches the Figma design and the pre-CF7 version
   of this module (see modules/cv-builder/script.js's date handling). */
.cv-builder__date-wrap {
    position: relative;
    width: 100%;
}

/* CF7's own bundled stylesheet sets .wpcf7-form-control-wrap to
   position:relative — combined with this module's own display:block
   override (see the CF7-rendered form reskin section), that zero-height
   wrapper becomes the absolutely-positioned date <input>'s containing
   block instead of .cv-builder__date-wrap, collapsing the input (and its
   click target) to zero height. Force it back to static so inset:0 skips
   past it to .cv-builder__date-wrap, same as everywhere else in the form. */
.cv-builder__date-wrap .wpcf7-form-control-wrap {
    position: static;
}

.cv-builder__date-display {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 48px 0 24px;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: 16px;
    color: #032B36;
    pointer-events: none;
}

.cv-builder__date-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.cv-builder__date-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 22px;
    pointer-events: none;
}

.cv-builder__fileupload {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 60px;
    padding: 12px 24px 12px 12px;
    border-radius: 8px;
    background: #FFFFFF;
}

.cv-builder__file-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 6px;
    background: #032B36;
    color: #FFFFFF;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    transition: background-color 200ms ease-in-out;
}

.cv-builder__file-label:hover {
    background: #D4A24C;
}

.cv-builder__fileupload .wpcf7-form-control-wrap {
    display: none;
}

.cv-builder__file-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    color: #032B36;
}

.cv-builder__rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cv-cf7-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    background: #FFFFFF;
}

.cv-cf7-row__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cv-cf7-row__header span {
    font-weight: 700;
    font-size: 14px;
    color: #032B36;
}

.cv-cf7-row__remove {
    font-size: 14px;
    color: #D4A24C;
    cursor: pointer;
    transition: color 200ms ease-in-out;
}

.cv-cf7-row__remove:hover {
    color: #000000;
}

/* Startjaar/Eindjaar sit side by side always, even on narrow screens —
   unlike .cv-builder__row-pair (which stacks below 1024px), matching the
   pre-CF7 version of this module's repeatable rows. flex:1 1 0/min-width:0
   for the same reason .cv-builder__row-pair uses it — see its comment. */
.cv-cf7-row-pair {
    display: flex;
    gap: 12px;
}

.cv-cf7-row-pair > .wpcf7-form-control-wrap {
    flex: 1 1 0;
    min-width: 0;
}

.cv-builder__add {
    align-self: flex-start;
    font-weight: 700;
    font-size: 16px;
    color: #D4A24C;
    cursor: pointer;
    transition: color 200ms ease-in-out;
}

.cv-builder__add:hover {
    color: #000000;
}

.cv-builder__skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cv-builder__skill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 14px;
    color: #032B36;
}

.cv-builder__skill-remove {
    font-weight: 700;
    color: #D4A24C;
    cursor: pointer;
    transition: color 200ms ease-in-out;
}

.cv-builder__skill-remove:hover {
    color: #000000;
}

.cv-builder__skill-form {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

/* Outlined button, not the plain text-link style .cv-builder__add uses for
   "+ Opleiding toevoegen" etc. — matches the pre-CF7 version of this
   module, where the skill "Toevoegen" button was its own bordered button
   rather than a plus-prefixed text link. */
.cv-builder__skill-add-btn {
    flex-shrink: 0;
    padding: 0 24px;
    height: 60px;
    border-radius: 8px;
    border: 1px solid #D4A24C;
    background: transparent;
    font-weight: 700;
    font-size: 16px;
    color: #D4A24C;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
}

.cv-builder__skill-add-btn:hover {
    background: #D4A24C;
    color: #FFFFFF;
}

.cv-builder__skill-form .cv-input {
    flex: 1 1 auto;
    min-width: 0;
}

.cv-builder__consent {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #032B36;
}

/* CF7's [acceptance] tag already renders its own <label> around the
   checkbox + text (see the rendered markup), so .cv-builder__consent is a
   plain wrapping <div> rather than a second, redundant <label> — nesting
   two labels around one checkbox makes some browsers toggle it twice per
   click. */
.cv-builder__consent label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

/* Round checkbox — matches the pre-CF7 version of this module
   (w-6 h-6 rounded-full bg-white). */
.cv-builder__consent input[type="checkbox"] {
    appearance: none;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cv-builder__consent input[type="checkbox"]:hover {
    border-color: #D4A24C;
}

.cv-builder__consent input[type="checkbox"]:checked {
    background: #D4A24C;
}

.cv-builder__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 60px;
    padding: 0 16px;
    border-radius: 8px;
    border: none;
    background: #00A6A6;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 200ms ease-in-out;
}

.cv-builder__submit:hover {
    background: #D4A24C;
}

.wpcf7-not-valid-tip {
    font-size: 13px;
    color: #C0392B;
}

/* Hide a field's error tip until that specific field has been touched
   (see script.js's 'blur'/'submit' listeners) — CF7 re-validates every
   field on any single field's change, so without this, editing one field
   would light up "required" errors on every other untouched field too. */
.wpcf7-form-control-wrap:not(.cv-touched) .wpcf7-not-valid-tip {
    display: none;
}

/* Hidden by default — for most invalid states (required text fields left
   empty, etc.) the per-field .wpcf7-not-valid-tip already covers it, and
   this banner would just repeat that. The one real gap: acceptance/consent
   fields have no per-field tip mechanism at all, so a missing consent
   check needs this generic banner to say anything — CF7 sets the form's
   data-status to "unaccepted" for exactly that case. */
.wpcf7-response-output {
    display: none;
}

.cv-builder__form-wrap form[data-status="unaccepted"] .wpcf7-response-output {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: #C0392B;
}