/* ==========================================================================
   Resume Builder Styles
   ========================================================================== */

/* Font Family Utility Classes */
.font-inter {
    font-family: 'Inter', sans-serif !important;
}

.font-roboto {
    font-family: 'Roboto', sans-serif !important;
}

.font-outfit {
    font-family: 'Outfit', sans-serif !important;
}

.font-poppins {
    font-family: 'Poppins', sans-serif !important;
}

.font-montserrat {
    font-family: 'Montserrat', sans-serif !important;
}

.font-merriweather {
    font-family: 'Merriweather', serif !important;
}

.font-playfair {
    font-family: 'Playfair Display', serif !important;
}

.font-lora {
    font-family: 'Lora', serif !important;
}

.font-fira {
    font-family: 'Fira Code', monospace !important;
}

.font-cinzel {
    font-family: 'Cinzel', serif !important;
}

/* Typography Canvas Modifiers */
.canvas-bold h1,
.canvas-bold h3,
.canvas-bold h4,
.canvas-bold span {
    font-weight: 800 !important;
}

.canvas-italic p,
.canvas-italic span,
.canvas-italic li {
    font-style: italic !important;
}

.canvas-underline h3:not(.resume-item-title) {
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

/* Job / project item titles — larger than body, scales with canvas font */
.resume-item-title {
    font-weight: 700 !important;
    line-height: 1.35 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: 0;
    display: block;
}

/* Dynamic Font Sizing Classes */
.canvas-font-10 p,
.canvas-font-10 span,
.canvas-font-10 li,
.canvas-font-10 div,
.canvas-font-10 a {
    font-size: 10px !important;
}

.canvas-font-10 h3:not(.resume-item-title) {
    font-size: 11px !important;
}

.canvas-font-10 h3.resume-item-title,
.canvas-font-10 .resume-item-title {
    font-size: 12.5px !important;
}

.canvas-font-10 h1 {
    font-size: 14px !important;
}

.canvas-font-12 p,
.canvas-font-12 span,
.canvas-font-12 li,
.canvas-font-12 div,
.canvas-font-12 a {
    font-size: 11.5px !important;
}

.canvas-font-12 h3:not(.resume-item-title) {
    font-size: 12.5px !important;
}

.canvas-font-12 h3.resume-item-title,
.canvas-font-12 .resume-item-title {
    font-size: 13.5px !important;
}

.canvas-font-12 h1 {
    font-size: 15.5px !important;
}

.canvas-font-14 p,
.canvas-font-14 span,
.canvas-font-14 li,
.canvas-font-14 div,
.canvas-font-14 a {
    font-size: 13px !important;
}

.canvas-font-14 h3:not(.resume-item-title) {
    font-size: 14px !important;
}

.canvas-font-14 h3.resume-item-title,
.canvas-font-14 .resume-item-title {
    font-size: 15px !important;
}

.canvas-font-14 h1 {
    font-size: 17px !important;
}

.canvas-font-16 p,
.canvas-font-16 span,
.canvas-font-16 li,
.canvas-font-16 div,
.canvas-font-16 a {
    font-size: 14.5px !important;
}

.canvas-font-16 h3:not(.resume-item-title) {
    font-size: 15.5px !important;
}

.canvas-font-16 h3.resume-item-title,
.canvas-font-16 .resume-item-title {
    font-size: 16.5px !important;
}

.canvas-font-16 h1 {
    font-size: 18.5px !important;
}

.canvas-font-18 p,
.canvas-font-18 span,
.canvas-font-18 li,
.canvas-font-18 div,
.canvas-font-18 a {
    font-size: 16px !important;
}

.canvas-font-18 h3:not(.resume-item-title) {
    font-size: 17px !important;
}

.canvas-font-18 h3.resume-item-title,
.canvas-font-18 .resume-item-title {
    font-size: 18px !important;
}

.canvas-font-18 h1 {
    font-size: 20px !important;
}

/* === A4 Page Dimensions & Multi-Page Flow Rules === */
:root {
    --a4-width: 794px;
    --a4-height: 1123px;
    --a4-page-gap: 24px;
    /* Continuation pages (2+) use this top inset; page 1 uses template padding */
    --a4-page-pad-top: 36px;
    --a4-page-pad-bottom: 15px;
    /* Template content inset (matches continuation page top pad) */
    --resume-inset: 36px;
}

.resume-template {
    width: 100%;
    max-width: var(--a4-width) !important;
    min-height: var(--a4-height) !important;
    height: auto !important;
    box-sizing: border-box;
}

/* Single-column templates: equal padding on all sides */
.resume-template.template-classic-ats,
.resume-template.template-compact,
.resume-template.template-minimal {
    padding: var(--resume-inset) !important;
}

/* Two-column / sidebar templates: pad content columns evenly */
.resume-template #preview-sidebar,
.resume-template #preview-body {
    box-sizing: border-box;
    padding: var(--resume-inset) !important;
}

/* Classic band header: keep full-bleed background, pad text inset */
.resume-template.template-classic-ats-v2 > div:first-child {
    padding: var(--resume-inset) !important;
}

.resume-template.template-classic-ats-v2 > div:last-child {
    padding: var(--resume-inset) !important;
}

/* Hidden measurement / print source on preview page */
.resume-print-source {
    position: absolute;
    left: -9999px;
    top: 0;
    width: var(--a4-width);
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
}

/* Off-screen A4 pages for direct PDF capture (html2canvas) */
#print-resume-wrapper.is-pdf-capture {
    display: block !important;
    position: fixed;
    left: -10000px;
    top: 0;
    width: var(--a4-width);
    margin: 0;
    padding: 0;
    background: #ffffff;
    pointer-events: none;
    z-index: -1;
}

#print-resume-wrapper.is-pdf-capture #print-canvas-clone {
    width: var(--a4-width);
    margin: 0;
    padding: 0;
}

.print-a4-page {
    position: relative;
    width: var(--a4-width);
    height: var(--a4-height);
    overflow: hidden;
    background: #ffffff;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    flex-shrink: 0;
}

.print-a4-page-viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.print-a4-page-content {
    width: var(--a4-width) !important;
    max-width: var(--a4-width) !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.resume-a4-source {
    width: var(--a4-width) !important;
    max-width: var(--a4-width) !important;
}

/* Stacked A4 page frames for on-screen preview */
.resume-preview-wrapper {
    position: relative;
    width: 100%;
    min-height: 200px;
}

.resume-preview-carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    transform-origin: top center;
}

.resume-preview-view-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
}

.resume-pages-viewport {
    flex-shrink: 0;
}

.resume-a4-pages-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--a4-width);
    gap: 0;
}

.resume-a4-page-frame {
    display: none;
    position: relative;
    width: var(--a4-width);
    height: var(--a4-height);
    background: #ffffff;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    flex-shrink: 0;
    border: 0;
    outline: none;
}

.resume-a4-page-frame.is-active {
    display: block;
}

/* Preview page: left resume column scrolls through all stacked pages */
@media (min-width: 1024px) {
    #preview-customize-stage #resume-left-col {
        overscroll-behavior: contain;
    }
}

/* Editor: stack every A4 page vertically (page 1, then page 2 below, …) */
.resume-preview-carousel.is-stacked .resume-a4-pages-stack {
    gap: var(--a4-page-gap);
}

.resume-preview-carousel.is-stacked .resume-a4-page-frame {
    display: block;
}

.resume-preview-carousel.is-stacked .resume-page-nav-btn,
.resume-preview-carousel.is-stacked .resume-page-indicator {
    display: none !important;
}

.resume-preview-carousel.is-stacked .resume-a4-page-label {
    bottom: 12px;
    right: 14px;
}

.resume-page-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.45);
    color: #475569;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    transition: all 0.2s ease;
}

.resume-page-nav-btn:hover:not(:disabled) {
    background: #f5f3ff;
    border-color: #7c3aed;
    color: #7c3aed;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.15);
}

.resume-page-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}

.resume-page-indicator {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.01em;
    margin: 0;
    min-height: 1.25rem;
}

.resume-preview-carousel.is-single-page .resume-page-nav-btn {
    visibility: hidden;
    pointer-events: none;
}

.resume-preview-carousel.is-single-page .resume-page-indicator {
    visibility: hidden;
}

.resume-a4-page-viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Content window: no top pad, 15px bottom gap on every A4 page */
.resume-a4-page-clip,
.print-a4-page-clip {
    position: absolute;
    top: var(--a4-page-pad-top);
    left: 0;
    right: 0;
    height: calc(var(--a4-height) - var(--a4-page-pad-top) - var(--a4-page-pad-bottom));
    overflow: hidden;
}

.resume-a4-page-content {
    width: var(--a4-width) !important;
    max-width: var(--a4-width) !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Template only — strip decorative card chrome inside A4 pages */
.resume-a4-page-content .resume-template,
.print-a4-page-content .resume-template,
.resume-a4-source .resume-template {
    box-shadow: none !important;
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    outline: none !important;
    background-image: none !important;
}

.resume-a4-page-label {
    position: absolute;
    bottom: 10px;
    right: 14px;
    font-size: 10px;
    line-height: 1;
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: 0.02em;
    pointer-events: none;
    z-index: 2;
    background: rgba(255, 255, 255, 0.85);
    padding: 4px 8px;
    border-radius: 9999px;
}

#preview-sidebar,
#preview-body {
    min-height: 100%;
}

.resume-template div[id^="sec-preview-"],
.resume-template div.relative,
.resume-template li,
.resume-template .space-y-3>div,
.resume-template .space-y-4>div {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}

.resume-template h1,
.resume-template h2,
.resume-template h3,
.resume-template h4 {
    page-break-after: avoid !important;
    break-after: avoid !important;
}

/* Layout Mode Transformations */
.resume-template.layout-top-header,
#preview-document-container.layout-top-header {
    flex-direction: column !important;
}

.layout-top-header #preview-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
    min-height: auto !important;
}

.layout-top-header #preview-body {
    width: 100% !important;
    max-width: 100% !important;
    order: 2 !important;
}

.resume-template.layout-right-sidebar,
#preview-document-container.layout-right-sidebar {
    flex-direction: row !important;
}

.layout-right-sidebar #preview-sidebar {
    width: 41.666667% !important;
    order: 2 !important;
}

.layout-right-sidebar #preview-body {
    width: 58.333333% !important;
    order: 1 !important;
}

.resume-template.layout-left-sidebar,
#preview-document-container.layout-left-sidebar {
    flex-direction: row !important;
}

.layout-left-sidebar #preview-sidebar {
    width: 41.666667% !important;
    order: 1 !important;
}

.layout-left-sidebar #preview-body {
    width: 58.333333% !important;
    order: 2 !important;
}

.resume-template.layout-two-column,
#preview-document-container.layout-two-column {
    flex-direction: row !important;
}

.layout-two-column #preview-sidebar {
    width: 50% !important;
    order: 1 !important;
}

.layout-two-column #preview-body {
    width: 50% !important;
    order: 2 !important;
}

/* Print Rules — resume pages only, edge-to-edge A4 (no top/bottom grey margins) */
@media print {
    @page {
        size: A4 portrait;
        margin: 0 !important;
    }

    html {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        width: 210mm !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Remove all page UI from layout — visibility:hidden still creates blank pages */
    body>*:not(#print-resume-wrapper) {
        display: none !important;
    }

    #print-resume-wrapper {
        display: block !important;
        position: static !important;
        width: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }

    #print-canvas-clone {
        width: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .print-a4-page {
        width: 210mm !important;
        height: 297mm !important;
        overflow: hidden !important;
        page-break-after: always !important;
        break-after: page !important;
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        position: relative !important;
    }

    .print-a4-page:last-child {
        page-break-after: auto !important;
        break-after: auto !important;
    }

    .print-a4-page-viewport {
        width: 210mm !important;
        height: 297mm !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .print-a4-page-clip {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 297mm !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .print-a4-page-content {
        width: var(--a4-width) !important;
        max-width: var(--a4-width) !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        transform: none !important;
        overflow: visible !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .print-a4-page-content .resume-template,
    #print-canvas-clone .resume-template {
        width: var(--a4-width) !important;
        max-width: var(--a4-width) !important;
        min-height: auto !important;
        height: auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        overflow: visible !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    #print-canvas-clone #preview-sidebar,
    #print-canvas-clone #preview-body {
        min-height: auto !important;
        height: auto !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .resume-a4-page-label {
        display: none !important;
    }
}

/* Custom Thin Brand-Themed (Violet) Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
    background: #7c3aed;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6d28d9;
}

/* Firefox Scrollbar Support */
* {
    scrollbar-width: thin;
    scrollbar-color: #7c3aed #f1f5f9;
}

/* ============================================================
   Mobile Responsive: Editor Layout
   ============================================================ */

/* Utility: hidden by JS toggle — only on mobile/tablet, never on desktop */
@media (max-width: 1023px) {
    .mobile-hidden {
        display: none !important;
    }
}

/* Editor preview: allow full-width template on mobile */
@media (max-width: 1023px) {
    #editor-preview-aside .resume-template {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    #editor-preview-aside #preview-sidebar,
    #editor-preview-aside #preview-body {
        min-height: auto !important;
    }

    #editor-preview-aside #resume-canvas-card {
        width: 100% !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    #editor-preview-aside {
        max-height: none !important;
        overflow-y: auto !important;
        padding-bottom: 4rem;
        background: #ffffff !important;
    }

    /* Show aside on mobile when not hidden */
    #editor-preview-aside:not(.mobile-hidden) {
        display: flex !important;
    }
}

@media (max-width: 1023px) {
    .resume-a4-page-frame {
        border-radius: 0;
        border: 0;
        box-shadow: none;
    }
}

@media (max-width: 639px) {
    .resume-preview-wrapper {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .resume-preview-view-row {
        gap: 0.5rem;
    }

    .resume-page-nav-btn {
        width: 2.25rem;
        height: 2.25rem;
    }

    .resume-a4-page-frame {
        border-radius: 0;
        border: 0;
        box-shadow: none;
    }
}

/* Hide scrollbar utility on mobile icon-only nav */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Resume icons — flex-centered badges + contact rows */
.resume-template .resume-icon-badge,
.resume-template .rounded-full.flex.items-center.justify-center {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    line-height: 0 !important;
    overflow: hidden;
}

.resume-template .resume-icon-badge > i[class*="ph-"],
.resume-template .resume-icon-badge > .resume-pdf-icon,
.resume-template .rounded-full.flex.items-center.justify-center > i[class*="ph-"],
.resume-template .rounded-full.flex.items-center.justify-center > .resume-pdf-icon {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    object-fit: contain;
}

.resume-template .resume-icon-badge.w-7 > i[class*="ph-"],
.resume-template .resume-icon-badge.w-7 > .resume-pdf-icon {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}

.resume-template #sec-preview-contact .flex > i[class*="ph-"],
.resume-template #sec-preview-contact .flex > .resume-pdf-icon,
.resume-template #preview-links-container .flex > i[class*="ph-"],
.resume-template #preview-links-container .flex > .resume-pdf-icon {
    flex-shrink: 0;
    align-self: center !important;
    margin: 0 !important;
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    object-fit: contain;
}

.resume-template #wrap-preview-photo .rounded-full {
    border-radius: 9999px !important;
    overflow: hidden !important;
}

.resume-template #wrap-preview-photo img,
.resume-template #preview-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 9999px !important;
}