/* ============================================================
   Two-column resume (sidebar + main). One markup, themed by
   .theme-<key>. Sidebar side via .side-left / .side-right.

   The sidebar colour is painted as a full-height gradient band on
   the .resume container (driven by the per-theme --side-bg var) so
   it always reaches the bottom of the page — on screen and in print,
   even if the main column is taller or content breaks across pages.
   ============================================================ */

.resume, .resume * { box-sizing: border-box; }
.resume {
    --side-w: 268px;
    --side-bg: #1f2a37;          /* overridden per theme */
    display: flex;
    width: 794px;                 /* ~A4 at 96dpi */
    min-height: 1123px;           /* ~A4 height at 96dpi */
    background-color: #fff;
    background-image: linear-gradient(
        to right, var(--side-bg) 0, var(--side-bg) var(--side-w), #fff var(--side-w));
    background-repeat: no-repeat;
    color: #1f2937;
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    box-shadow: 0 4px 24px rgba(16, 24, 40, .12);
    transform-origin: top center;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.resume.side-right {
    flex-direction: row-reverse;
    background-image: linear-gradient(
        to left, var(--side-bg) 0, var(--side-bg) var(--side-w), #fff var(--side-w));
}

/* Scale the live preview down to fit the pane */
.preview-scroll .resume {
    transform: scale(.66);
    margin-bottom: -382px;
}

/* ---- Sidebar (background comes from the container gradient) ---- */
.r-side {
    width: var(--side-w);
    flex-shrink: 0;
    padding: 32px 26px;
    color: #fff;
}
.r-photo img {
    width: 124px; height: 124px; border-radius: 50%;
    object-fit: cover; display: block; margin: 0 auto 18px;
    border: 3px solid rgba(255, 255, 255, .55);
}
.r-side-name { display: none; text-align: center; margin-bottom: 18px; }
.r-side-name .r-name { font-size: 22px; line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
.r-side-name .r-title { font-size: 12.5px; margin: 4px 0 0; letter-spacing: .04em; }

.r-side-section { margin-bottom: 20px; }
.r-side-section:last-child { margin-bottom: 0; }
.r-side-section h3 {
    font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
    margin: 0 0 9px; padding-bottom: 4px;
    color: rgba(255, 255, 255, .9); border-bottom: 1px solid rgba(255, 255, 255, .3);
}
.r-contact-list, .r-plain-list { list-style: none; padding: 0; margin: 0; }
.r-contact-list li {
    display: flex; gap: 8px; align-items: flex-start;
    font-size: 12px; margin-bottom: 7px; word-break: break-word;
}
.r-ic { width: 15px; flex-shrink: 0; text-align: center; opacity: .9; }
.r-plain-list li { font-size: 12px; margin-bottom: 6px; }

/* Personal Details (market-specific) sidebar block */
.r-detail-list { list-style: none; padding: 0; margin: 0; }
.r-detail-list li { font-size: 12px; margin-bottom: 7px; display: flex; flex-direction: column; }
.r-detail-label { opacity: .7; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.r-detail-value { word-break: break-word; }
.r-detail-bool { font-style: italic; opacity: .92; }
.r-tag-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.r-tag-list li { font-size: 11.5px; padding: 3px 10px; border-radius: 5px; background: rgba(255, 255, 255, .2); color: #fff; }

/* ---- Main column ---- */
.r-main { flex: 1; min-width: 0; padding: 38px 40px; }
.r-main-head { margin-bottom: 20px; }
.r-main-head .r-name { font-size: 28px; line-height: 1.1; margin: 0; }
.r-main-head .r-title { font-size: 15px; color: #6b7280; margin: 5px 0 0; letter-spacing: .03em; }

.r-section { margin-bottom: 20px; }
.r-section h2 {
    font-size: 14px; text-transform: uppercase; letter-spacing: .06em;
    margin: 0 0 11px; padding-bottom: 4px;
}
.r-item { margin-bottom: 13px; }
.r-item:last-child { margin-bottom: 0; }
.r-item-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.r-item-title { font-weight: 700; }
.r-item-dates { font-size: 11.5px; color: #6b7280; white-space: nowrap; }
.r-item-sub { font-style: italic; color: #4b5563; font-size: 12.5px; margin-top: 1px; }
.r-item-desc { margin: 6px 0 0; }

/* Templates whose name lives in the coloured sidebar: hide the main header
   name and reveal the sidebar one. */
.theme-teacher-elite .r-main-head,
.theme-creative-bold .r-main-head,
.theme-medical-elite .r-main-head,
.theme-engineer-elite .r-main-head { display: none; }
.theme-teacher-elite .r-side-name,
.theme-creative-bold .r-side-name,
.theme-medical-elite .r-side-name,
.theme-engineer-elite .r-side-name { display: block; }

/* ============================================================
   THEMES  (each sets --side-bg for the full-height band)
   ============================================================ */

/* ---- Teacher Elite : blue sidebar, name in sidebar ---- */
.theme-teacher-elite { --side-bg: #3b82f6; }
.theme-teacher-elite .r-side h3 { color: #dbeafe; }
.theme-teacher-elite .r-side-name .r-name { color: #fff; }
.theme-teacher-elite .r-side-name .r-title { color: #dbeafe; }
.theme-teacher-elite .r-section h2 { color: #2563eb; border-bottom: 2px solid #2563eb; }
.theme-teacher-elite .r-item-title { color: #1e3a8a; }

/* ---- Clean Professional : light grey sidebar, dark text, name in main ---- */
.theme-clean-pro { --side-bg: #eef2f7; }
.theme-clean-pro .r-side { color: #334155; }
.theme-clean-pro .r-side h3 { color: #1f3a5f; border-bottom: 1px solid #cbd5e1; }
.theme-clean-pro .r-tag-list li { background: #dbe3ef; color: #1f3a5f; }
.theme-clean-pro .r-name { color: #1f3a5f; }
.theme-clean-pro .r-main-head { border-bottom: 2px solid #1f3a5f; padding-bottom: 12px; }
.theme-clean-pro .r-section h2 { color: #1f3a5f; border-bottom: 1px solid #d3d9e3; }

/* ---- Creative Bold : red sidebar, name in sidebar ---- */
.theme-creative-bold { --side-bg: #e23b2e; }
.theme-creative-bold .r-side h3 { color: #ffe0dc; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.theme-creative-bold .r-side-name .r-name { color: #fff; font-size: 24px; letter-spacing: .03em; }
.theme-creative-bold .r-side-name .r-title { color: #ffe0dc; text-transform: uppercase; }
.theme-creative-bold .r-tag-list li { background: rgba(255, 255, 255, .22); color: #fff; }
.theme-creative-bold .r-section h2 { color: #e23b2e; letter-spacing: .1em; }
.theme-creative-bold .r-item-title { color: #b91c1c; }

/* ---- Minimal Accent : right-side blue sidebar, name in main ---- */
.theme-minimal-accent { --side-bg: #1e4fd6; }
.theme-minimal-accent .r-side h3 { color: #dbe4ff; }
.theme-minimal-accent .r-main-head { text-align: center; }
.theme-minimal-accent .r-name { color: #1e293b; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.theme-minimal-accent .r-main-head .r-title { color: #1e4fd6; }
.theme-minimal-accent .r-section h2 {
    color: #1e293b; letter-spacing: .14em; text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

/* ---- Elegant Classic : dark navy serif sidebar, name in main ---- */
.theme-elegant-classic { --side-bg: #1f2a37; font-family: Georgia, "Times New Roman", serif; }
.theme-elegant-classic .r-side { color: #e5e7eb; }
.theme-elegant-classic .r-side h3 { color: #cbd5e1; border-bottom: 1px solid rgba(255, 255, 255, .25); letter-spacing: .14em; }
.theme-elegant-classic .r-tag-list li { background: rgba(255, 255, 255, .14); color: #fff; }
.theme-elegant-classic .r-main-head { text-align: center; border-bottom: 2px solid #1f2a37; padding-bottom: 12px; }
.theme-elegant-classic .r-name { color: #1f2a37; letter-spacing: .1em; font-weight: 400; }
.theme-elegant-classic .r-section h2 { color: #1f2a37; font-weight: 400; letter-spacing: .16em; border-bottom: 1px solid #d1d5db; }

/* ---- Medical Elite : teal sidebar, name in sidebar ---- */
.theme-medical-elite { --side-bg: #0e7490; }
.theme-medical-elite .r-side h3 { color: #cffafe; }
.theme-medical-elite .r-side-name .r-name { color: #fff; }
.theme-medical-elite .r-side-name .r-title { color: #cffafe; text-transform: uppercase; letter-spacing: .1em; }
.theme-medical-elite .r-section h2 { color: #0e7490; border-bottom: 2px solid #0e7490; }
.theme-medical-elite .r-item-title { color: #0f5b73; }

/* ---- Engineer Elite : slate sidebar, name in sidebar, mono dates ---- */
.theme-engineer-elite { --side-bg: #334155; }
.theme-engineer-elite .r-side { color: #e2e8f0; }
.theme-engineer-elite .r-side h3 { color: #cbd5e1; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.theme-engineer-elite .r-side-name .r-name { color: #fff; }
.theme-engineer-elite .r-side-name .r-title { color: #cbd5e1; }
.theme-engineer-elite .r-tag-list li {
    background: rgba(255, 255, 255, .12); color: #fff;
    font-family: "Consolas", "Courier New", monospace;
}
.theme-engineer-elite .r-section h2 { color: #334155; border-bottom: 2px solid #334155; }
.theme-engineer-elite .r-item-dates { font-family: "Consolas", "Courier New", monospace; }

/* ---- Soft-Tech : blue sidebar, name in main, mono headings ---- */
.theme-soft-tech { --side-bg: #1d4ed8; }
.theme-soft-tech .r-side h3 {
    color: #dbe4ff; font-family: "Consolas", "Courier New", monospace;
}
.theme-soft-tech .r-tag-list li {
    background: rgba(255, 255, 255, .2); color: #fff;
    font-family: "Consolas", "Courier New", monospace; border-radius: 4px;
}
.theme-soft-tech .r-name { color: #1e293b; }
.theme-soft-tech .r-main-head .r-title { color: #1d4ed8; }
.theme-soft-tech .r-section h2 {
    color: #1d4ed8; font-family: "Consolas", "Courier New", monospace;
    text-transform: lowercase; letter-spacing: 0;
}
.theme-soft-tech .r-section h2::before { content: "// "; opacity: .5; }

/* ============================================================
   PRINT — fill the full page so the sidebar band reaches the bottom
   ============================================================ */
@media print {
    .resume {
        box-shadow: none; width: 100%; min-height: 100vh;
        transform: none; margin: 0;
    }
    @page { size: A4; margin: 0; }
}