/* v0.5.2 - Resume Specific Styles */
/* This file manages the A4 paper layout, the resume header,
   the floating action dock, and print-specific rules.
*/

/* --- 1. RESUME PAGE CONTAINER (The Paper) --- */

body {
    /* REMOVED the large padding-bottom. The wrapper handles spacing now. */
    padding-bottom: 0; 
    padding-top: 20px;
    
    /* FIX: Restore document line-height (Global is 1.6, Resume needs 1.5) */
    line-height: 1.5; 
    
    /* Fade in animation */
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* NEW: Controls the layout flow */
.resume-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the Page and the Button horizontally */
    width: 100%;
    /* No height limit, allows scrolling */
}

[data-theme="dark"] .page {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Dark mode text corrections for nested elements */
[data-theme="dark"] .summary-text, 
[data-theme="dark"] .skill-list,
[data-theme="dark"] .education-details,
[data-theme="dark"] .role-desc,
[data-theme="dark"] .dates {
    color: var(--text-muted);
}

/* THE PAGE ITSELF */
.page {
    background: var(--page-bg);
    /* FLUID WIDTH: Allows shrinking on mobile, caps at A4 on desktop */
    width: 100%;
    max-width: 210mm; 
    min-height: 297mm;
    /* Flexbox handles horizontal centering, we just need the bottom gap */
    margin: 0 0 2rem 0; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden; 
    position: relative;
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* --- 2. BRANDED HEADER --- */
.resume-header {
    background: linear-gradient(135deg, var(--bg-header-start) 0%, var(--bg-header-end) 100%);
    color: var(--text-header);
    padding: 1.5rem 3rem; 
    display: flex;
    align-items: center;
    gap: 2rem; 
    border-bottom: 4px solid var(--primary); 
    transition: background 0.3s;
}

.header-photo {
    width: 110px; 
    height: 110px; 
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary); 
    flex-shrink: 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); 
}

.header-content {
    flex-grow: 1;
}

.resume-header h1 {
    font-family: var(--font-display);
    font-size: 2.2rem; 
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.2rem; 
    text-transform: uppercase;
    color: #FFFFFF; /* Always white in header */
}

.tagline {
    font-size: 1rem; 
    color: #E2E8F0; 
    font-weight: 500;
    margin-bottom: 0.6rem; 
    opacity: 0.9;
}

/* 2x2 Grid Layout for Contact Info */
.contact-info {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 0.4rem 2rem; 
    font-size: 0.85rem; 
    color: #CBD5E1;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem; 
    color: #CBD5E1;
    text-decoration: none;
    transition: all 0.2s;
    line-height: 1;
    white-space: nowrap; 
}

.contact-item:hover {
    border-bottom-color: rgba(255,255,255,0.5);
    color: #fff;
}

.resume-header .icon {
    width: 17px; 
    height: 17px; 
    fill: currentColor; 
    opacity: 0.9;
    flex-shrink: 0;
}

/* --- 3. RESUME CONTENT BODY --- */
.content {
    padding: 1.5rem 3rem; 
}

/* Section Headings */
.content h2 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-main);
    border-bottom: 2px solid var(--primary); 
    padding-bottom: 0.3rem; 
    margin-top: 0.75rem; 
    margin-bottom: 0.5rem; 
    display: inline-block; 
    padding-right: 1rem;
    break-after: avoid;
    page-break-after: avoid;
}

/* SUMMARY Text */
.summary-text {
    font-size: 0.925rem; 
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 0.8rem; 
}

/* Roles */
.role {
    margin-bottom: 0.75rem; 
    break-inside: avoid;
    page-break-inside: avoid;
    display: block; 
}

.role-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.2rem; 
}

.company {
    font-weight: 700;
    font-size: 1.05rem; 
    color: var(--text-main);
}

.role-desc {
    font-size: 0.88rem; 
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 0.4rem; 
}

.title {
    font-weight: 600;
    color: var(--text-muted);
}

.dates {
    font-size: 0.85rem; 
    color: var(--text-muted);
    font-weight: 500;
}

ul {
    list-style: none;
    margin-bottom: 0.1rem; 
}

li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.15rem; 
    font-size: 0.9rem; 
    color: var(--text-muted);
    line-height: 1.5; 
}

li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary); 
    font-weight: bold;
}

li strong {
    color: var(--text-main);
    font-weight: 600;
}

/* Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.5rem;
    margin-bottom: 0.35rem; 
    align-items: baseline;
    break-inside: avoid;
    page-break-inside: avoid;
}

.skill-cat {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-main);
}

.education-university-name-inter {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700; 
    font-size: 0.9rem; 
    color: var(--text-main);
    font-style: normal; 
}

.skill-list {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Education Block */
.education-item {
    margin-bottom: 0.5rem;
    break-inside: avoid;
    page-break-inside: avoid;
    display: block; 
}

.education-details {
    font-size: 0.9rem; 
    color: var(--text-muted);
}

/* --- 4. FLOATING ACTION DOCK */
.fab-dock {
    /* STICKY POSITIONING (Keep existing) */
    position: sticky;
    bottom: 2rem;
    margin-bottom: 2rem; /* Adjusted per previous step */
    z-index: 1000;
    
    /* SIZE & SHAPE (Updated to match Status Badge) */
    padding: 0.5rem 1.25rem; /* Reduced vertical padding to 0.5rem */
    gap: 1.5rem;             /* Reduced gap to fit smaller pill */
    border-radius: 9999px;
    max-width: 90%; 
    
    /* VISUALS (Keep existing) */
    background: rgba(10, 25, 41, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    
    /* ANIMATION */
    animation: slideUpStatic 0.5s ease-out 0.2s both;
}

/* Dark Mode: Header Gradient + Subtle Brand Ring */
[data-theme="dark"] .fab-dock {
    /* 1. Exact Gradient from Header */
    background: linear-gradient(135deg, var(--bg-header-start) 0%, var(--bg-header-end) 100%);
    
    /* 2. /* Slightly crisper border */
    border-color: rgba(255, 255, 255, 0.15); 
    
    /* 3. Deep Shadow for Elevation */
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

@keyframes slideUpStatic {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* BUTTON WRAPPERS */
.fab-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0; 
    
    /* RESIZE: Match badge content height */
    height: 20px; /* Reduced from 24px */
    width: 20px;  /* Reduced from 24px */
}

.fab-btn:hover {
    color: var(--primary);
    transform: scale(1.15);
}

.fab-btn:active {
    transform: scale(0.95);
}

/* ICON SCALING */
.fab-btn svg {
    /* RESIZE: Scale icons down proportionally */
    width: 20px;  /* Reduced from 24px */
    height: 20px; /* Reduced from 24px */
    stroke-width: 2;
}

/* Ensure the specific button overrides don't break size */
button.fab-btn svg {
    width: 20px;
    height: 20px;
}

@keyframes slideUp {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* --- 5. SNACKBAR UI --- */
#snackbar {
    visibility: hidden;
    min-width: 250px;
    background-color: #0A1929;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 12px 16px;
    position: fixed;
    z-index: 1001;
    left: 50%;
    bottom: 6rem; 
    transform: translateX(-50%);
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    transition: opacity 0.3s, bottom 0.3s;
}

#snackbar.show {
    visibility: visible;
    opacity: 1;
    bottom: 6.5rem; 
}

/* --- 6. RESPONSIVE MOBILE STYLES (Screen Only) --- */
@media screen and (max-width: 768px) {
    body { padding-top: 0; }
    
    /* On mobile, sometimes flex column is finicky with sticky, 
       but usually works. If issues, we fall back to block. */
    .resume-wrapper {
        display: flex; 
    }
    
    .page {
        margin: 0 0 2rem 0; 
        width: 100%;
        border-radius: 0;
        box-shadow: none;
    }
    
    .resume-header {
        flex-direction: column; 
        align-items: flex-start; 
        text-align: left;
        padding: 2rem 1.5rem; 
        gap: 1.5rem; 
    }

    .header-photo {
        width: 100px;
        height: 100px;
        margin-bottom: 0; 
    }

    .header-content { width: 100%; }

    .contact-info {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        justify-items: start;
    }

    .content { padding: 1.5rem; }
    
    .role-header {
        flex-direction: column;
        gap: 0.25rem;
    }

    .skills-grid {
        grid-template-columns: 1fr;
        gap: 0.2rem;
        margin-bottom: 1rem;
    }

    .skill-cat {
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 0.2rem;
        margin-bottom: 0.2rem;
        width: 100%;
    }

    .fab-dock {
        /* 1. We relax the container padding slightly */
        padding: 0.6rem 1.5rem;
        gap: 1.5rem;
        bottom: 1.5rem;
        margin-bottom: 2rem;
    }

    .fab-btn {
        /* 2. We add invisible padding to create a 44px+ touch target */
        padding: 12px;
        
        /* 3. We use negative margin to negate the visual size increase */
        /* This keeps your design looking "Small" but feeling "Big" */
        margin: -12px;
        box-sizing: content-box; /* Ensures padding adds to the 20px width */
    }
}

/* --- 7. PRINT STYLES (CRITICAL) --- */
@media print {
    /* FORCE VARIABLES TO LIGHT MODE */
    /* This fixes the University Name (and anything else) printing white in dark mode */
    :root, [data-theme="dark"] {
        --text-main: #0A1929 !important;
        --text-muted: #486581 !important;
        --bg-body: #FFFFFF !important;
        --surface: #FFFFFF !important;
        --border: rgba(0, 0, 0, 0.1) !important;
        --primary: #F0D722 !important; 
    }

    /* Basic Reset */
    @page { margin: 0; }
    body { margin: 0; padding: 0; background: white; }

    /* Container Reset */
    .page { 
        width: 100% !important; 
        max-width: none !important; 
        margin: 0 !important; 
        box-shadow: none !important; 
        border: none !important;
        background: white !important; 
    }

    /* HEADER RESTORATION: Deep Navy Background */
    .resume-header {
        background: linear-gradient(135deg, #0A1929 0%, #11263d 100%) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color: white !important; 
        border-bottom: 4px solid #F0D722 !important;
        
        display: flex !important; 
        flex-direction: row !important; 
        align-items: center !important; 
        text-align: left !important; 
        padding: 1.5rem 3rem !important; 
        gap: 2rem !important; 
    }

    .resume-header h1 { color: #FFFFFF !important; }
    .resume-header .tagline { color: #E2E8F0 !important; opacity: 0.9 !important; }
    
    .resume-header .contact-item,
    .resume-header a,
    .resume-header .contact-info {
        color: #CBD5E1 !important;
        text-decoration: none !important;
    }
    
    .resume-header .icon {
        fill: #CBD5E1 !important;
        opacity: 0.9 !important;
    }
    
    .header-photo {
         border-color: #F0D722 !important;
         width: 110px !important; 
         height: 110px !important; 
         margin-bottom: 0 !important;
    }

    /* CONTENT BODY COLORS */
    .content {
        background: white !important;
        padding: 1.5rem 3rem !important;
    }
    
    h2, .company, .skill-cat, strong, .education-university-name-inter {
        color: #0A1929 !important;
    }

    .summary-text, .role-desc, .education-details, .dates, li, .skill-list {
        color: #486581 !important; 
    }

    h2 {
        border-bottom-color: #F0D722 !important;
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important;
    }
    
    /* HIDE UI ELEMENTS */
    .fab-dock, #snackbar, #privacy-banner, .theme-toggle, footer {
        display: none !important;
    }
    
    /* LAYOUT FIXES */
    .contact-info { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.4rem 2rem !important; }
    .skills-grid { grid-template-columns: 140px 1fr !important; gap: 0.5rem !important; }
    .role-header { flex-direction: row !important; }
    
    .role, .skills-grid, .education-item { break-inside: avoid; }
    
    .page-break-margin {
        padding-top: 2rem !important; 
        margin-top: 0 !important; 
    }
}

/* --- THEME TOGGLE OVERRIDE (Resume Specific) --- */

/* 1. Button Container: Solid Bubble */
.theme-toggle {
    color: var(--text-main);
    background: #FFFFFF; /* Force White */
    border-color: var(--border);
    -webkit-tap-highlight-color: transparent;
}

/* 2. FIX: Lock Background on Tap/Focus (Prevents Grey State) */
.theme-toggle:active,
.theme-toggle:focus {
    background-color: #FFFFFF; /* Stays White even when pressed/selected */
    outline: none; /* Removes default focus ring if it clashes */
}

/* 3. Dark Mode Overrides (Default, Active & Focus) */
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .theme-toggle:active,
[data-theme="dark"] .theme-toggle:focus {
    background: var(--bg-header-start); /* Stays Dark Navy */
    border-color: var(--border);
    color: var(--text-main);
}

/* 4. Hover State (Desktop Only) */
@media (hover: hover) {
    .theme-toggle:hover {
        background-color: #FFFFFF; 
        border-color: var(--primary);
        color: var(--primary);
    }
    
    [data-theme="dark"] .theme-toggle:hover {
        background-color: var(--bg-header-start);
    }
}

/* 5. ICON LOGIC */
.theme-toggle .sun {
    stroke: currentColor;
    fill: none;
}

.theme-toggle .moon {
    stroke: none;
    fill: currentColor;
}