@font-face { font-family:'ThmanyahSans'; src:url('/fonts/thmanyah/thmanyahsans-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'ThmanyahSans'; src:url('/fonts/thmanyah/thmanyahsans-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'ThmanyahSans'; src:url('/fonts/thmanyah/thmanyahsans-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'ThmanyahSans'; src:url('/fonts/thmanyah/thmanyahsans-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'ThmanyahSans'; src:url('/fonts/thmanyah/thmanyahsans-Black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'ThmanyahSerifDisplay'; src:url('/fonts/thmanyah/thmanyahserifdisplay-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'ThmanyahSerifDisplay'; src:url('/fonts/thmanyah/thmanyahserifdisplay-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'ThmanyahSerifDisplay'; src:url('/fonts/thmanyah/thmanyahserifdisplay-Black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }

:root{
    /* Prime Jobs — Material Design 3 tokens (shared with the rest of the site) */
    --md-primary:                  #032543;
    --md-on-primary:               #ffffff;
    --md-primary-container:        #c5dcf4;
    --md-on-primary-container:     #001e36;
    --md-secondary:                #a67d2d;
    --md-on-secondary:             #ffffff;
    --md-secondary-container:      #fce8ba;
    --md-on-secondary-container:   #2c1800;
    --md-surface:                  #f6f4ee;
    --md-on-surface:               #111E2E;
    --md-on-surface-variant:       #3A4D63;
    --md-surface-container-lowest: #ffffff;
    --md-surface-container-low:    #f0eee6;
    --md-surface-container:        #eae7df;
    --md-surface-container-highest:#dedcd4;
    --md-outline:                  #5A6E84;
    --md-outline-variant:          #BCC7D5;
    --md-error:                    #B3261E;
    --md-on-error:                 #ffffff;
    --md-error-container:          #F9DEDC;
    --md-on-error-container:       #410E0B;

    --md-shape-extra-small: 4px;
    --md-shape-small:       8px;
    --md-shape-medium:      12px;
    --md-shape-large:       16px;
    --md-shape-extra-large: 28px;
    --md-shape-full:        9999px;

    --md-elevation-1: 0px 1px 2px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15);
    --md-elevation-2: 0px 1px 2px rgba(0,0,0,.3), 0px 2px 6px 2px rgba(0,0,0,.15);
    --md-elevation-3: 0px 4px 8px 3px rgba(0,0,0,.15), 0px 1px 3px rgba(0,0,0,.3);

    --md-motion-standard: cubic-bezier(.2,0,0,1);
    --md-motion-short:  200ms;
    --md-motion-medium: 300ms;

    --font-display: 'ThmanyahSerifDisplay', serif;
    --font-body:    'ThmanyahSans', sans-serif;
    --transition: all 300ms ease-in-out;
}

*, *::before, *::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    transition: background-color var(--md-motion-medium) var(--md-motion-standard),
                color var(--md-motion-medium) var(--md-motion-standard),
                border-color var(--md-motion-medium) var(--md-motion-standard),
                box-shadow var(--md-motion-medium) var(--md-motion-standard);
}

html{
    font-size: 10px;
    scroll-behavior: smooth;
}

body{
    font-size: 1.6rem;
    line-height: 1.6;
    font-family: var(--font-body);
    color: var(--md-on-surface);
    background-color: var(--md-surface);
    -webkit-font-smoothing: antialiased;
}

button{
    border: none;
    background-color: transparent;
    outline: 0;
    cursor: pointer;
    font-family: inherit;
}

img{
    width: 100%;
    display: block;
}

a{
    text-decoration: none;
    color: inherit;
}

/* ripple (shared site-wide interaction pattern) */
.ripple-container{ position: relative; overflow: hidden; }
.ripple{
    position: absolute; border-radius: 50%; background: currentColor;
    opacity: .2; transform: scale(0);
    animation: ripple-anim 600ms var(--md-motion-standard) forwards;
    pointer-events: none; transition: none !important;
}
@keyframes ripple-anim{ to { transform: scale(4); opacity: 0; } }

.container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.6rem;
}

.text-center{ text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}
.text-uppercase{text-transform: uppercase;}

.fw-6{font-weight: 600;}

/* ════════════════════════════════════════════
   TOP APP BAR
════════════════════════════════════════════ */
.navbar{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    height: 64px;
    display: flex;
    align-items: center;
    background: transparent;
    box-shadow: none;
    backdrop-filter: blur(0);
}
.navbar.scrolled{
    background: color-mix(in srgb, var(--md-surface) 78%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--md-elevation-2);
}

.navbar .container{
    width: 100%;
    display: flex;
    align-items: center;
}

.navbar-content{ width: 100%; }

.navbar-brand{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 1.8rem;
}
.navbar-brand-text{
    font-family: var(--font-body);
    color: var(--md-on-surface);
    font-weight: 700;
}
.navbar-brand-text span{
    color: var(--md-secondary);
}
.navbar-brand-icon{
    width: 34px;
    margin-right: 8px;
}
.brand-and-toggler{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ════════════════════════════════════════════
   RESUME BUILDER PAGE
════════════════════════════════════════════ */
#about-sc{
    padding: 112px 0 64px;
}

.cv-form-blk{
    margin: 0 0 32px;
}

.cv-form-row-title{
    background: var(--md-primary);
    padding: 14px 24px;
    border-radius: var(--md-shape-large) var(--md-shape-large) 0 0;
}

.cv-form-row-title h3{
    color: var(--md-on-primary);
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.4rem;
}

.cv-form-row{
    background: var(--md-surface-container-lowest);
    border: 1px solid var(--md-outline-variant);
    border-top: none;
    border-radius: 0 0 var(--md-shape-large) var(--md-shape-large);
    padding: 32px 24px 8px;
    position: relative;
}

textarea{ resize: none; }

.form-elem{
    margin-bottom: 26px;
    position: relative;
}

.form-label{
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--md-on-surface);
    margin-bottom: 8px;
}
.form-label .opt-text{
    font-weight: 400;
    color: var(--md-on-surface-variant);
}

.form-control{
    font-family: var(--font-body);
    font-size: 1.5rem;
    color: var(--md-on-surface);
    background: var(--md-surface-container-lowest);
    border: 1.5px solid var(--md-outline-variant);
    border-radius: var(--md-shape-medium);
    padding: 11px 16px;
    width: 100%;
    outline: 0;
    transition: border-color var(--md-motion-short), box-shadow var(--md-motion-short);
}
.form-control::placeholder{ color: var(--md-outline); }
.form-control:focus{
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary) 15%, transparent);
}

.form-text{
    color: var(--md-error);
    font-size: 1.2rem;
    position: absolute;
    letter-spacing: 0.3px;
    top: calc(100% + 2px);
    left: 0;
    width: 100%;
}

.cols-3, .cols-2{ display: grid; gap: 20px; }

/* Add-row button — MD3 tonal icon button */
.repeater-add-btn{
    width: 40px; height: 40px;
    border-radius: var(--md-shape-full);
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    font-size: 2rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin: 8px 0 24px;
    transition: box-shadow var(--md-motion-short), transform 120ms;
}
.repeater-add-btn:hover{ box-shadow: var(--md-elevation-1); }
.repeater-add-btn:active{ transform: scale(.94); }

/* Remove-row button — MD3 tonal error icon button */
.repeater-remove-btn{
    position: absolute;
    top: 12px; right: 12px;
    z-index: 5;
    width: 34px; height: 34px;
    border-radius: var(--md-shape-full);
    background: var(--md-error-container);
    color: var(--md-error);
    border: 1px solid color-mix(in srgb, var(--md-error) 25%, transparent);
    display: flex; align-items: center; justify-content: center;
    transition: box-shadow var(--md-motion-short), transform 120ms, background var(--md-motion-short);
}
.repeater-remove-btn svg{ pointer-events: none; }
.repeater-remove-btn:hover{
    background: var(--md-error);
    color: var(--md-on-error);
    box-shadow: var(--md-elevation-1);
    transform: scale(1.06);
}
.repeater-remove-btn:active{ transform: scale(.96); }

/* ── Preview panel ──
   The generated CV is a printable document, not app chrome — its colors
   stay fixed regardless of the site's light/dark toggle, the same way a
   real resume builder keeps the page canvas consistent either way. */
.preview-cnt{
    border-radius: var(--md-shape-extra-large);
    display: grid;
    grid-template-columns: 32% auto;
    box-shadow: var(--md-elevation-2);
    overflow: hidden;
}

.preview-cnt-l{
    padding: 3rem 3rem 2rem 3rem;
    background: #032543;
    color: #ffffff;
}
.preview-cnt-r{
    padding: 3rem 3rem 3rem 4rem;
    background: #ffffff;
    color: #111E2E;
}
.preview-cnt-l .preview-blk:nth-child(1){ text-align: center; }
.preview-image{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
    background: rgba(255,255,255,.08);
}
.preview-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.preview-item-name{
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    margin: 1.8rem 0;
    position: relative;
}
.preview-item-name::after{
    position: absolute;
    content: "";
    bottom: -10px;
    width: 50px;
    height: 1.5px;
    background-color: rgba(255, 255, 255, 0.5);
    left: 50%;
    transform: translateX(-50%);
}
.preview-blk{
    padding: 1rem 0;
    margin-bottom: 1rem;
}
.preview-blk-title h3{
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 0.5rem;
}
.preview-cnt-l .preview-blk-title h3{ border-bottom-color: rgba(255,255,255,.15); }
.preview-blk-title{ margin-bottom: 1rem; }
.preview-blk-list .preview-item{
    font-size: 1.5rem;
    margin-bottom: 0.2rem;
    opacity: 0.95;
}
.preview-cnt-r .preview-blk-title{ color: #111E2E; }
.preview-cnt-r .preview-blk-list .preview-item{ margin-top: 1.8rem; }

.achievements-items.preview-blk-list .preview-item span:first-child,
.educations-items.preview-blk-list .preview-item span:first-child,
.experiences-items.preview-blk-list .preview-item span:first-child{
    display: block;
    font-weight: 600;
    margin-bottom: 1rem;
    background-color: rgba(0, 0, 0, 0.03);
}

.educations-items.preview-blk-list .preview-item span:nth-child(2),
.experiences-items.preview-blk-list .preview-item span:nth-child(2){
    font-weight: 600;
    margin-right: 1rem;
}

.educations-items.preview-blk-list .preview-item span:nth-child(3),
.experiences-items.preview-blk-list .preview-item span:nth-child(3){
    font-style: italic;
    margin-right: 1rem;
}

.educations-items.preview-blk-list .preview-item span:nth-child(4),
.educations-items.preview-blk-list .preview-item span:nth-child(5),
.experiences-items.preview-blk-list .preview-item span:nth-child(4),
.experiences-items.preview-blk-list .preview-item span:nth-child(5){
    margin-right: 1rem;
    background-color: #032543;
    color: #ffffff;
    padding: 0 1rem;
    border-radius: var(--md-shape-small);
}

/* An empty date (left blank on purpose, e.g. "present") should disappear
   entirely rather than show as a floating colored blob with no text. */
.educations-items.preview-blk-list .preview-item span:nth-child(4):empty,
.educations-items.preview-blk-list .preview-item span:nth-child(5):empty,
.experiences-items.preview-blk-list .preview-item span:nth-child(4):empty,
.experiences-items.preview-blk-list .preview-item span:nth-child(5):empty{
    display: none;
}

.educations-items.preview-blk-list .preview-item span:nth-child(6),
.experiences-items.preview-blk-list .preview-item span:nth-child(6){
    font-size: 13.5px;
    display: block;
    opacity: 0.8;
    margin-top: 1rem;
}
.projects-items.preview-blk-list .preview-item span{ display: block; }

@media screen and (min-width: 768px){
    .cols-3{ grid-template-columns: repeat(3, 1fr); }
    .cols-2{ grid-template-columns: repeat(2, 1fr); }
}

@media screen and (min-width: 992px){
    .cv-form-row{ padding: 32px 32px 8px; }
    .cols-3{ grid-template-columns: repeat(3, 1fr); }
}

.print-btn-sc{
    margin: 2rem 0 6rem 0;
}

/* Print CV — MD3 filled button */
.print-btn{
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--md-primary);
    color: var(--md-on-primary);
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: var(--md-shape-full);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--md-primary) 28%, transparent);
    transition: box-shadow var(--md-motion-short), transform var(--md-motion-short);
}
.print-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--md-primary) 36%, transparent);
}
.print-btn:active{ transform: translateY(0); }

/* print section */
@media print{
    /* Hide everything except the CV itself. display:none (not
       visibility:hidden) removes these from layout entirely — otherwise
       the long form still reserves its full height and the print engine
       pads out several blank pages before ever reaching the CV. */
    .navbar,
    #about-sc,
    .print-btn-sc{
        display: none !important;
    }

    body{ background: #fff; }

    .print_area{ margin: 0; }

    /* CSS Grid has no sensible notion of "stretch to match sibling" once
       content spans multiple physical pages — the sidebar's background
       renders as a short, broken strip on page 2+. Stacking the two
       columns as plain blocks instead is what makes print pagination
       reliable: the sidebar prints in full on page 1, then the main
       content continues alone across as many pages as it needs. */
    .preview-cnt{
        display: block;
        border-radius: 0;
        box-shadow: none;
    }
    .preview-cnt-l, .preview-cnt-r{ width: 100%; }

    /* Never split a single entry across a page break */
    .preview-blk{ break-inside: avoid; }
}