/*
 * Onyx template — dark full-height left sidebar, timeline main column.
 * Shared by browser (edit) and mPDF (pdf). No flexbox, no CSS grid: the two
 * columns are a floated sidebar (32%) + a margin-left main column (68%), so
 * the two renderers agree AND the layout can paginate (a two-cell table
 * could not — see .cv-layout).
 */

/* ---- page margins (multi-page) ---------------------------------------- *
 * PdfService gives mPDF margin_* = 0, so a PDF's only vertical margin is
 * this wrapper's own padding — and a wrapper's padding-top lands on page 1
 * alone, leaving every later page hard against the sheet edge.
 *
 * @page restores an identical margin on every page; `@page :first` zeroes
 * the top one so page 1 keeps using the wrapper padding it always had and
 * its output is unchanged. Left/right stay 0 — the wrapper's horizontal
 * padding already applies to every page. Inert in the browser (@page is
 * print-only), and builder.js reads these same values back out of CSSOM
 * so its page-count model matches what mPDF actually does. */
/* The dark rail. An @page background covers the FULL sheet — it ignores the
   page margins above and is repainted per page — so the band reaches the very
   bottom of every page including the last, which the old fixed-height <td>
   background could never do beyond page 1.
   The URL is basepath-relative because PdfService calls SetBasePath(public/):
   a root-relative '/assets/...' silently resolves to nothing and the band
   renders white. Regenerate the PNG with scripts/generate-band-assets.php —
   never hand-edit it, the band's x-position has to stay in lockstep with
   .cv-sidebar's width below. `background-image-resize: 6` stretches the
   794x1123 asset to the sheet. */
@page {
    margin: 40px 0 40px 0;
    background: url('assets/img/templates/bands/onyx.png');
    background-image-resize: 6;
}
@page :first {
    margin-top: 0;
}

/* Edit mode only: @page is print-only, so the builder canvas would show white
   behind the sidebar's white text. This paints the identical band for the
   browser, full-height whatever the canvas grows to, and is never emitted in
   pdf mode (onyx.php adds the class only when $edit). */
.cv-layout--edit {
    background-image: linear-gradient(to right, #262626 0, #262626 32%, #ffffff 32%);
}

.resume-page.resume-onyx {
    width: 794px;               /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    /* Deliberately NO background here. A background on this wrapper paints
       over the @page band for the whole extent of the flowed content, which
       hid the rail everywhere except the blank tail of the last page. In pdf
       mode the sheet colour comes from the band PNG (white outside the band);
       in edit mode it comes from .cv-layout--edit's gradient, whose right-hand
       stop is that same white. */
    color: #1a1a1a;
    font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
}

/* mPDF does NOT inherit font-family/size into table cells — anything inside
   a <td> silently falls back to the serif document default (in-td trap class,
   2026-07 slate rework). This template's row/column/band layout uses tables,
   so the font must be declared at td level too. No-op in the browser. */
.resume-onyx td {
    font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    color: #1a1a1a;
}


/* ---- two-column layout: float, NOT a table ----------------------------
 * This was a two-cell single-row <table> so the sidebar <td> could carry a
 * fixed `height` + `background` and paint the dark rail down the whole page.
 * That shape cannot paginate: mPDF only breaks a table between <tr>
 * boundaries, so a lone row has none, and a resume too long for one page was
 * silently font-shrunk to fit rather than flowed onto page 2.
 * A float has no such constraint — the main column now flows across as many
 * pages as it needs — and the rail's colour comes from the @page band below,
 * which paints on every page including the last. */
.cv-layout {
    width: 100%;
}
/* The floated sidebar must not escape the page wrapper when the sidebar is
   the taller column (short resume, long skills list). */
.cv-layout:after {
    content: "";
    display: table;
    clear: both;
}

/* ---- sidebar (left, 32%, dark) ----------------------------------------
 * No background and no height here any more: both used to be what painted the
 * rail, and both are what forced the un-paginatable table. The colour is now
 * the @page band, which is independent of how far the content reaches, so the
 * rail is full-height on a 1-page and a 4-page export alike. */
.cv-sidebar {
    float: left;
    width: 32%;
    box-sizing: border-box;
    padding: 16px;
    color: #ffffff;
}
.cv-sidebar-inner {
    box-sizing: border-box;
}
/* Sidebar cell text: the generic `.resume-onyx td` rule above would paint
   nested sidebar tables' cells near-black on the dark rail. */
.resume-onyx .cv-sidebar td {
    color: #e8e8e8;
    font-size: 12px;
    line-height: 1.45;
}

/* Photo slot: single-cell table so the slot keeps its geometry inside the
   sidebar cell (block margins are dropped there); the section gap below it
   comes from .cv-side-title-row's uniform margin-top. */
.cv-photo-wrap {
    border-collapse: collapse;
    margin: 0;
}
.cv-photo-wrap td {
    padding: 0;
}
.cv-photo,
.cv-photo-initials {
    display: block;
}

/* Side sections: the inter-section gap is the title row's uniform
   margin-top (block margins on the .cv-side-section div are dropped inside
   the sidebar cell in mPDF; a nested table's margin renders in both). */
.cv-side-section {
    margin-bottom: 0;
}
.cv-side-title-row {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0 10px;
}
.cv-side-title-row td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0 0 6px;
}
.cv-side-title {
    font-size: 11.5px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #ffffff;
    border-bottom: none;
    margin: 0;
    padding: 0;
}

/* Contact list: glyph + text, white, 12px. In pdf mode each item is a
   single-cell table (block margins are dropped inside the sidebar cell);
   in edit mode it stays a div — the shared class carries the margin, which
   both renderers honor on their respective element. */
.cv-contact-list {
    font-size: 12px;
}
.cv-contact-item {
    color: #e8e8e8;
    margin-bottom: 7px;
    word-wrap: break-word;
}
table.cv-contact-item {
    width: 100%;
    border-collapse: collapse;
}
.cv-contact-item td {
    padding: 0;
}
.cv-icon {
    display: inline-block;
    margin-right: 5px;
    color: #d4d4d4;
}
.cv-icon.cv-icon-linkedin {
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    font-size: 8px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    border-radius: 2px;
    margin-right: 5px;
}

/* Languages and skills moved OUT of the rail on 2026-08-05 (§7a.3): the rail is
   a float, and mPDF silently drops floated-column entries it will not carry
   onto the next page. Both now render in the main column as a real two-column
   table grid — mPDF does not pack repeated same-direction floats into rows
   (§5), so array_chunk + <table> is the only safe grid primitive. The old
   .cv-side-def rail rules went with them. */
.cv-skill-grid {
    width: 100%;
    border-collapse: collapse;
}
.cv-skill-col {
    width: 50%;
    padding: 0 10px 5px 0;
    vertical-align: top;
    font-size: 12.5px;
    line-height: 1.45;
    color: #262626;
}
/* The odd trailing filler cell carries no content and must not add height. */
.cv-skill-col.cv-skill-col--empty {
    padding: 0;
}

/* Edit-mode tag list for the same two sections. Browser-only markup, so the
   inline-block/table traps that govern pdf mode do not apply here. */
.cv-taglist {
    margin: 2px 0 0;
}
.cv-tag {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 3px 9px;
    border: 1px solid #d4d4d4;
    font-size: 12px;
    line-height: 1.3;
    color: #262626;
}
.cv-tag-lvl {
    color: #737373;
    margin-left: 5px;
}
.cv-tag-x {
    font-family: inherit;
    margin-left: 5px;
    border: none;
    background: none;
    color: #a3a3a3;
    cursor: pointer;
    opacity: 0;
}
.cv-tag:hover .cv-tag-x {
    opacity: 1;
}

/* ---- main column (right, 68%) ------------------------------------------
 * margin-left (not a width) keeps the column clear of the floated sidebar on
 * page 1 AND holds the same indent on pages 2+, where the float no longer
 * exists but the @page band still paints under that strip. */
.cv-main {
    margin-left: 32%;
    padding: 40px 40px 40px 32px;
}

.cv-header {
    margin-bottom: 18px;
}

/* pdf-mode section title rows: a heading's border-bottom shrinks to its
   text width and its margins are dropped inside a <td> in mPDF — the
   single-cell table's td carries both. The uniform margin-top doubles as
   the inter-section gap (.cv-section margins don't survive in mPDF; edit
   mode never renders .cv-title-row, so the browser is unaffected). */
.cv-title-row {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 10px;
}
.cv-title-row td {
    border-bottom: 2px solid #1a1a1a;
    padding: 0 0 4px;
}
.cv-title-row .cv-section-title {
    border-bottom: none;
    margin: 0;
    padding: 0;
}
.cv-name {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.15;
    margin: 0 0 4px;
    color: #1a1a1a;
}
.cv-jobtitle {
    font-size: 16px;
    font-weight: bold;
}

.cv-section {
    margin-bottom: 18px;
}
.cv-section-title {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #1a1a1a;
    border-bottom: 2px solid #1a1a1a;
    margin: 0 0 10px;
    padding: 0 0 4px;
}
.cv-summary {
    text-align: left;
}

/* ---- timeline (experience / education) ---------------------------------
 * A 2px gray rule down the left edge of the entries wrapper. A per-entry
 * accent-colored square marker overlapping the rule was tried and dropped:
 * mPDF silently drops empty absolute-positioned <span>s (confirmed via raw
 * PDF content-stream inspection — no fill rect ever emitted, in this
 * template or in isolation), so only the rule itself renders. */
/* Edit-mode wrapper only. The rail itself lives on each .cv-item below, so
   this no longer draws a border — a single wrapper around every entry is what
   used to force the un-paginatable one-row table in pdf mode. */
.cv-timeline {
    margin-left: 4px;
}
/* The timeline rail. Carried per entry rather than by a wrapper so that each
   entry stays an independent block mPDF can page-break between, and so the
   section heading can sit in the same avoid-group as the first entry.
   Spacing between entries is padding-top, NOT margin-bottom: padding sits
   inside the border box so the rail stays unbroken from one entry to the
   next, and it sidesteps the documented mPDF bug where a margin-bottom on a
   many-times-repeated page-break-inside:avoid block is double-counted in the
   pagination estimate and opens a blank trailing page. */
.cv-item {
    position: relative;
    border-left: 2px solid #d4d4d4;
    margin-left: 4px;
    padding-left: 20px;
    padding-top: 14px;
    page-break-inside: avoid;
}
/* mPDF ignores page-break-after:avoid on a heading by itself, so the heading
   and the first entry travel as one block instead. */
.cv-section-head-group {
    page-break-inside: avoid;
}
.cv-item:last-child {
    margin-bottom: 0;
}
table.cv-item {
    width: 100%;
    border-collapse: collapse;
}
.cv-item-cell {
    position: relative;
    padding: 0;
}

/* Two-column "title left / dates right" via table (mPDF-safe). */
.cv-row {
    width: 100%;
    border-collapse: collapse;
}
.cv-row td {
    vertical-align: top;
    padding: 0;
}
.cv-row-main {
    text-align: left;
}
.resume-onyx .cv-row-side {
    text-align: right;
    white-space: nowrap;
    width: 32%;
    color: #444;
    font-size: 12px;
}
.cv-item-title {
    font-weight: bold;
}
.cv-item-org {
    font-style: italic;
    color: #333;
}
.cv-item-sep {
    color: #333;
    font-style: normal;
}
.cv-item-loc {
    font-style: italic;
}
.cv-dates {
    font-weight: bold;
}
.cv-item-details {
    margin-top: 3px;
}

/* Bullets (edit mode: real ul; pdf mode: one two-cell table per bullet —
   the fixed-width marker cell gives a hanging indent that survives mPDF
   inside the layout cell, li padding-left does not). */
.cv-bullets {
    margin: 5px 0 0;
    padding-left: 18px;
}
.cv-bullets li {
    margin-bottom: 2px;
    position: relative;
}
.cv-bullet {
    width: 100%;
    border-collapse: collapse;
    margin-top: 3px;
}
.resume-onyx .cv-bullet-mk {
    width: 16px;
    vertical-align: top;
    padding: 0;
    color: #525252;
    font-size: 7px;
    line-height: 19px; /* centers the dot on the first 13.5px/1.45 text line */
}
.cv-bullet-tx {
    vertical-align: top;
    padding: 0;
}

/* Certifications (edit mode: ul + float date; pdf mode: two-cell table per
   cert — the float doesn't float inside the layout cell in mPDF). */
.cv-cert-list {
    margin: 0;
    padding-left: 18px;
}
.cv-cert-list li {
    position: relative;
    margin-bottom: 4px;
}
.cv-item-side {
    float: right;
    width: 70px;
    color: #444;
    font-size: 12px;
}
.cv-cert-row {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
}
.cv-cert-row td {
    vertical-align: top;
    padding: 0;
}
.resume-onyx .cv-cert-side {
    width: 70px;
    text-align: right;
    color: #444;
    font-size: 12px;
}
.cv-muted {
    color: #777;
}

/* =====================================================================
 * Edit-mode affordances (browser only — these elements are never
 * emitted in pdf mode, so none of this reaches mPDF).
 * ===================================================================== */

[contenteditable][data-ph]:empty:before {
    content: attr(data-ph);
    color: #b7b7b7;
    font-style: italic;
    pointer-events: none;
}
.cv-sidebar [contenteditable][data-ph]:empty:before {
    color: rgba(255, 255, 255, 0.55);
}
[contenteditable] {
    outline: none;
    border-radius: 2px;
    transition: box-shadow 0.12s ease, background 0.12s ease;
}
[contenteditable]:hover {
    box-shadow: 0 0 0 1px #d6e2ff;
}
[contenteditable]:focus {
    box-shadow: 0 0 0 2px #2563eb;
    background: #f5f9ff;
}
.cv-sidebar [contenteditable]:hover {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.cv-sidebar [contenteditable]:focus {
    box-shadow: 0 0 0 2px #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

/* add / remove / reorder controls */
.edit-controls {
    position: absolute;
    top: -2px;
    right: -44px;
    opacity: 0;
    transition: opacity 0.12s ease;
    white-space: nowrap;
    z-index: 5;
}
.edit-controls--inline {
    position: absolute;
    left: -26px;
    right: auto;
    top: 0;
}
.cv-sidebar .edit-controls--inline {
    left: auto;
    right: -20px;
}
.cv-item:hover > .edit-controls,

.cv-bullets li:hover > .edit-controls,
.cv-cert-list li:hover > .edit-controls,
.edit-controls:hover {
    opacity: 1;
}
.edit-controls button {
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    width: 20px;
    height: 20px;
    margin-left: 2px;
    padding: 0;
    border: 1px solid #ccc;
    background: #fff;
    color: #444;
    border-radius: 3px;
    cursor: pointer;
}
.edit-controls button:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.cv-add {
    font-family: inherit;
    font-size: 12.5px;
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px dashed #b7c4e0;
    background: #fff;
    color: #2563eb;
    border-radius: 4px;
    cursor: pointer;
}
.cv-add:hover {
    background: #f5f9ff;
    border-color: #2563eb;
}
.cv-add--sm {
    font-size: 11.5px;
    padding: 2px 8px;
}
.cv-add--side {
    border-color: rgba(255, 255, 255, 0.5);
    background: transparent;
    color: #ffffff;
}
.cv-add--side:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
}

.cv-current {
    display: block;
    font-family: inherit;
    font-size: 11px;
    font-weight: normal;
    color: #777;
    margin-top: 2px;
    white-space: nowrap;
    cursor: pointer;
}
.cv-current input {
    vertical-align: middle;
}