/*
 * Cobalt template — cream-and-cobalt single column, geometric square motif.
 * Shared by browser (edit) and mPDF (pdf). No flexbox, no CSS grid: floats /
 * tables / block layout only, so the two renderers agree.
 *
 * Header: one full-width two-cell table. The left cell nests a single-cell
 * table whose <td> carries a solid cobalt fill at a fixed 120x120 — mPDF paints
 * a td background as one contiguous rect with explicit width/height, while a
 * styled div collapses to shrink-to-content — with the 100px circle photo
 * centered on it. Body: a single column flowing directly in the page (not a
 * layout table) so mPDF paginates between blocks; this template is
 * multipage:true.
 *
 * Font stack leads with 'DejaVu Sans': mPDF substitutes Arial with DejaVu Sans
 * *Condensed* (no bold face), so bold weights would render as regular unless the
 * stack pins a face mPDF embeds. Every bold below is the KEYWORD `bold`, never a
 * numeric 600/700 (mPDF ignores numeric weights inside a table cell).
 */

/* PDF-only: paint the cream across the WHOLE sheet on every page. The
   .resume-page background only covers the flowed block, so on a second page it
   stops where the content ends and leaves the remainder white. @page is inert
   for browser screen rendering (so the builder chrome is untouched) but mPDF
   honors it.
   The margins are load-bearing too: PdfService gives mPDF margin_* = 0, so the
   wrapper's padding-top is the only vertical margin and it lands on page 1
   alone — page 2 started 1.1% from the sheet edge. `@page :first` zeroes the
   top margin so page 1 keeps using that wrapper padding and its output is
   unchanged; left/right stay 0 because the wrapper's horizontal padding
   already applies to every page. builder.js reads these values back out of
   CSSOM so its page-count model matches what mPDF actually does. */
@page {
    background-color: #fffdf7;
    margin: 44px 0 44px 0;
}
@page :first {
    margin-top: 0;
}

.resume-page.resume-cobalt {
    width: 794px;                /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    padding: 44px 52px 0;        /* zero bottom padding: real trailing space opens a blank final page in mPDF (multipage) */
    background: #fffdf7;         /* warm cream */
    color: #1f2937;
    font-family: 'DejaVu Sans', Arial, Helvetica, 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. This template's
   header, section titles, entry rows, bullets and chips are all tables, so the
   font must be declared at td level too. No-op in the browser. */
.resume-cobalt td {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    color: #1f2937;
}

/* ---- header -------------------------------------------------------------- */
.resume-cobalt .cv-head-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}
.resume-cobalt .cv-head-photo {
    width: 140px;
    vertical-align: middle;
    padding: 0;
}
/* Nested single-cell table = the solid cobalt square. td background + explicit
   width/height paints reliably in mPDF (a styled div would shrink to content). */
.resume-cobalt .cv-photo-block {
    border-collapse: collapse;
}
.resume-cobalt .cv-photo-block td {
    width: 120px;
    height: 120px;
    background: #1d4ed8;
    text-align: center;
    vertical-align: middle;
    padding: 0;
}
.resume-cobalt .cv-photo,
.resume-cobalt .cv-photo-initials {
    margin: 0 auto;
    display: block;
}
.resume-cobalt .cv-head-text {
    vertical-align: middle;
    padding-left: 28px;
}
/* Gaps inside the header cell are nested-table margins — block margins are
   dropped inside a <td> in mPDF. */
.resume-cobalt .cv-name-row {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 4px;
}
.resume-cobalt .cv-name-row td,
.resume-cobalt .cv-title-line-row td {
    padding: 0;
    background: transparent;
}
.resume-cobalt .cv-name {
    font-size: 27px;
    font-weight: bold;
    color: #111827;
    margin: 0;
    line-height: 1.15;
    letter-spacing: 0.3px;
}
.resume-cobalt .cv-title-line-row {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 8px;
}
.resume-cobalt .cv-jobtitle {
    font-size: 14.5px;
    font-weight: bold;
    color: #1d4ed8;
    margin: 0;
}
.resume-cobalt .cv-contact {
    font-size: 10.5px;
    color: #4b5563;
    line-height: 1.6;
}
/* Keeps each icon+value pair atomic so a wrap never strands a glyph (or the
   linkedin "in" badge) at a line end with its value on the next. */
.resume-cobalt .cv-contact-item {
    white-space: nowrap;
}
.resume-cobalt .cv-contact-sep {
    color: #1d4ed8;
}
.resume-cobalt .cv-icon {
    display: inline-block;
    color: #1d4ed8;
}
.resume-cobalt .cv-icon.cv-icon-linkedin {
    color: #ffffff;
    padding: 0 3px;
    font-size: 9px;
}

/* ---- sections ------------------------------------------------------------ */
.resume-cobalt .cv-section {
    margin-bottom: 11px;
}
.resume-cobalt .cv-section:last-child {
    margin-bottom: 0;
}
/* pdf mode: mPDF doesn't reliably honor :last-child, so the server marks
   whichever section/item renders last with this plain class instead. Unscoped
   on purpose — it applies to whichever element carries it. */
.resume-cobalt .is-last {
    margin-bottom: 0;
}

/* Section title: ■ marker + uppercase label, with a hairline rule to the right
   edge (a full-width bottom border). A block <h2> — not a table — because mPDF
   inflates the vertical space of many small tables and, unlike a block, mPDF
   also chokes on page-break-after applied to a <table>. The ■ marker is real
   HTML text, never a CSS ::before/content: value (which mPDF drops). */
.resume-cobalt .cv-sec-title {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #111827;
    margin: 13px 0 7px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e0d5;
    page-break-after: avoid;
}
.resume-cobalt .cv-sec-mk {
    color: #1d4ed8;
    font-size: 11px;
}

.resume-cobalt .cv-summary {
    font-size: 13px;
    color: #374151;
    line-height: 1.55;
    text-align: left;
}

/* ---- section head group (multipage: keep title with its first entry) -----
 * page-break-after:avoid lives on this block (a div), NOT on the title table:
 * mPDF chokes on page-break-after applied to a <table> (floods BlockTag
 * "Undefined array key" warnings), whereas the block form is handled cleanly
 * and still keeps the header grouped with the content that follows. The
 * page-break-inside:avoid is what actually holds the title and its first entry
 * together on one page. */
.resume-cobalt .cv-section-head-group {
    page-break-inside: avoid;
}

/* ---- entries ------------------------------------------------------------- */
/* Inter-entry spacing is an UNCONDITIONAL margin-top on every entry (never
   margin-bottom, which double-counts in mPDF's pagination estimate and opens a
   blank page; and never a `+` sibling selector, which mPDF silently drops —
   both confirmed on real exports). Unconditional + no competing override is the
   only form mPDF honors without reviving the nested-avoid-block bug. The small
   extra top margin on a section's first entry (after the title) is harmless. */
.resume-cobalt .cv-item {
    position: relative;
    page-break-inside: avoid;
    margin-top: 12px;
}

/* Two-column "title left / dates right" via table (mPDF-safe, no float). */
.resume-cobalt .cv-row {
    width: 100%;
    border-collapse: collapse;
}
.resume-cobalt .cv-row td {
    vertical-align: top;
    padding: 0;
}
.resume-cobalt .cv-row-main {
    text-align: left;
}
.resume-cobalt .cv-row-side {
    text-align: right;
    white-space: nowrap;
    width: 30%;
}
.resume-cobalt .cv-item-title {
    font-weight: bold;
    color: #111827;
}
.resume-cobalt .cv-item-org {
    font-style: italic;
    color: #374151;
}
.resume-cobalt .cv-item-sep {
    color: #374151;
    font-style: normal;
}
.resume-cobalt .cv-item-field {
    color: #374151;
}
.resume-cobalt .cv-item-loc {
    font-style: italic;
    color: #6b7280;
    font-size: 12px;
}
.resume-cobalt .cv-dates {
    font-weight: bold;
    color: #1d4ed8;
    font-size: 12px;
}
.resume-cobalt .cv-item-details {
    margin-top: 3px;
    color: #374151;
    font-size: 12.5px;
}

/* Bullets: native <ul>/<li> with a ■ marker span and a hanging indent
   (padding-left + negative text-indent). Native list items let mPDF estimate
   the enclosing page-break-inside:avoid entry's height accurately — nested
   <table> bullets inflated that estimate and wasted whole pages. The ■ marker
   is real HTML text, never a CSS content: value (which mPDF drops). */
.resume-cobalt .cv-bullets {
    margin: 5px 0 0;
    padding-left: 0;
    list-style: none;
}
.resume-cobalt .cv-bullets li {
    position: relative;
    padding-left: 15px;
    text-indent: -15px;
    margin-bottom: 2px;
    color: #374151;
    font-size: 13px;
}
.resume-cobalt .cv-bk {
    color: #1d4ed8;
    font-size: 7px;
    margin-right: 7px;
}

/* ---- skills: bordered cobalt chips on cream, wrapping full width ---------- */
.resume-cobalt .cv-chips {
    line-height: 2.2;
}
.resume-cobalt .cv-chip {
    display: inline-block;
    position: relative;
    margin: 0 6px 6px 0;
    padding: 2px 10px;
    border: 1px solid #1d4ed8;
    border-radius: 3px;
    background: transparent;
    color: #1e40af;
    font-size: 12px;
}

/* ---- languages / certifications ------------------------------------------ */
.resume-cobalt .cv-inline-item {
    position: relative;
    page-break-inside: avoid;
    margin-top: 3px;
}
.resume-cobalt .cv-muted {
    color: #9ca3af;
}
.resume-cobalt .cv-level {
    font-size: 10px;
    letter-spacing: 1px;
    white-space: nowrap;
}
.resume-cobalt .cv-dot-on {
    color: #1d4ed8;
}
.resume-cobalt .cv-dot-off {
    color: #cdd5e3;
}

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

.resume-cobalt [contenteditable][data-ph]:empty:before {
    content: attr(data-ph);
    color: #b7b7b7;
    font-style: italic;
    pointer-events: none;
}
.resume-cobalt [contenteditable] {
    outline: none;
    border-radius: 2px;
    transition: box-shadow 0.12s ease, background 0.12s ease;
}
.resume-cobalt [contenteditable]:hover {
    box-shadow: 0 0 0 1px #c7d6fb;
}
.resume-cobalt [contenteditable]:focus {
    box-shadow: 0 0 0 2px #1d4ed8;
    background: #f4f7ff;
}
.resume-cobalt .cv-contact [contenteditable] {
    display: inline-block;
    min-width: 40px;
}

.resume-cobalt .edit-controls {
    position: absolute;
    top: -2px;
    right: -44px;
    opacity: 0;
    transition: opacity 0.12s ease;
    white-space: nowrap;
    z-index: 5;
}
.resume-cobalt .edit-controls--inline {
    position: absolute;
    left: -26px;
    right: auto;
    top: 0;
}
.resume-cobalt .cv-item:hover > .edit-controls,
.resume-cobalt .cv-inline-item:hover > .edit-controls,
.resume-cobalt .cv-bullets li:hover > .edit-controls,
.resume-cobalt .edit-controls:hover {
    opacity: 1;
}
.resume-cobalt .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;
}
.resume-cobalt .edit-controls button:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.resume-cobalt .cv-add {
    font-family: inherit;
    font-size: 12.5px;
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px dashed #a9c0f6;
    background: #fff;
    color: #1d4ed8;
    border-radius: 4px;
    cursor: pointer;
}
.resume-cobalt .cv-add:hover {
    background: #f4f7ff;
    border-color: #1d4ed8;
}
.resume-cobalt .cv-add--sm {
    font-size: 11.5px;
    padding: 2px 8px;
}

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

.resume-cobalt .cv-chip-x {
    font-family: inherit;
    border: none;
    background: none;
    color: #b00;
    cursor: pointer;
    padding: 0 0 0 4px;
    opacity: 0;
    font-size: 13px;
}
.resume-cobalt .cv-chip:hover .cv-chip-x {
    opacity: 1;
}

.resume-cobalt .cv-item-side {
    color: #1d4ed8;
    font-size: 12px;
    margin-left: 6px;
}

.resume-cobalt .cv-dot-btn,
.resume-cobalt .cv-level-toggle {
    font-family: inherit;
    border: none;
    background: none;
    padding: 0 1px;
    cursor: pointer;
    font-size: 10px;
}
.resume-cobalt .cv-dot-btn.cv-dot-on {
    color: #1d4ed8;
}
.resume-cobalt .cv-dot-btn.cv-dot-off {
    color: #cdd5e3;
}
.resume-cobalt .cv-level-toggle {
    font-size: 9px;
    color: #9ca3af;
    margin-left: 4px;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.resume-cobalt .cv-inline-item:hover .cv-level-toggle {
    opacity: 1;
}