/* Loonix.dev — iOS-style overrides */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --lx-bg: #f5f5f7;
    --lx-card: #fff;
    --lx-border: #e5e5ea;
    --lx-text: #1d1d1f;
    --lx-text2: #6e6e73;
    --lx-text3: #aeaeb2;
    --lx-blue: #007AFF;
    --lx-font: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    --lx-r: 16px;
    --lx-max: 1120px;
}
[data-theme="dark"] {
    --lx-bg: #000;
    --lx-card: #1c1c1e;
    --lx-border: #38383a;
    --lx-text: #f5f5f7;
    --lx-text2: #98989d;
    --lx-text3: #636366;
}

/* === Loonix Header === */
.lx-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
    background: rgba(245,245,247,.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--lx-border);
    font-family: var(--lx-font);
}
[data-theme="dark"] .lx-header {
    background: rgba(0,0,0,.85);
}
.lx-header-inner {
    max-width: var(--lx-max);
    margin: 0 auto;
    padding: 0 24px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lx-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--lx-text);
    font-weight: 700;
    font-size: 1rem;
    font-family: var(--lx-font);
}
.lx-logo img {
    height: 28px;
    border-radius: 6px;
}
.lx-back {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--lx-blue);
    font-weight: 500;
    font-size: .9rem;
    font-family: var(--lx-font);
    transition: opacity .2s;
}
.lx-back:hover { opacity: .7; }
.lx-back svg { width: 20px; height: 20px; }

.lx-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}
.lx-nav a {
    color: var(--lx-text2);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    font-family: var(--lx-font);
    transition: color .2s;
}
.lx-nav a:hover { color: var(--lx-blue); }

/* Nav with icons */
.lx-nav-icons { gap: 16px; }
.lx-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--lx-card);
    border: 1px solid var(--lx-border);
    color: var(--lx-text2) !important;
    font-size: 1rem;
    transition: all .25s;
    text-decoration: none;
}
.lx-icon-link:hover {
    color: var(--lx-blue) !important;
    border-color: var(--lx-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,122,255,.15);
}

/* Logo dark mode invert */
.lx-logo-img {
    transition: filter .3s;
}
[data-theme="dark"] .lx-logo-img {
    filter: invert(1);
}

.lx-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lx-theme-btn {
    background: var(--lx-card);
    border: 1px solid var(--lx-border);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: .2s;
    padding: 0;
    font-family: var(--lx-font);
    color: var(--lx-text);
}
.lx-theme-btn:hover { background: var(--lx-bg); }

/* Mobile burger */
.lx-burger {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    cursor: pointer;
    background: none;
    border: none;
}
.lx-burger span {
    width: 20px; height: 2px;
    background: var(--lx-text);
    border-radius: 2px;
    transition: .3s;
}
.lx-burger.active span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
.lx-burger.active span:nth-child(2) { opacity: 0; }
.lx-burger.active span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }

.lx-mobile-nav {
    display: none;
    position: fixed;
    top: 56px; left: 0; right: 0;
    background: rgba(245,245,247,.97);
    backdrop-filter: blur(16px);
    z-index: 9998;
    padding: 16px 24px;
    border-bottom: 1px solid var(--lx-border);
    flex-direction: column;
    gap: 12px;
    font-family: var(--lx-font);
}
[data-theme="dark"] .lx-mobile-nav { background: rgba(0,0,0,.97); }
.lx-mobile-nav.open { display: flex; }
.lx-mobile-nav a {
    font-size: 1rem;
    font-weight: 500;
    color: var(--lx-text);
    text-decoration: none;
}

/* === Global overrides === */
body {
    padding-top: 56px !important;
    background: var(--lx-bg) !important;
    color: var(--lx-text) !important;
    font-family: var(--lx-font) !important;
}

/* Override Elementor backgrounds */
.elementor-section {
    background-color: transparent !important;
}

/* Override text colors for dark mode */
[data-theme="dark"] .elementor-heading-title,
[data-theme="dark"] .elementor-widget-text-editor,
[data-theme="dark"] .elementor-widget-text-editor p,
[data-theme="dark"] .elementor-widget-text-editor li,
[data-theme="dark"] .elementor-widget-heading .elementor-heading-title,
[data-theme="dark"] .elementor-icon-list-text,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] span {
    color: var(--lx-text) !important;
}
[data-theme="dark"] .elementor-widget-text-editor p,
[data-theme="dark"] .elementor-icon-list-text {
    color: var(--lx-text2) !important;
}

/* Override link colors */
[data-theme="dark"] a { color: var(--lx-blue) !important; }
[data-theme="dark"] a:hover { color: #4da3ff !important; }

/* Cards / boxes in dark */
[data-theme="dark"] .elementor-widget-wrap,
[data-theme="dark"] .elementor-element {
    background-color: transparent !important;
}

/* Buttons — iOS style */
.elementor-button {
    font-family: var(--lx-font) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    transition: all .25s !important;
}

/* Images — keep original sizing, just round corners */
.elementor-widget-image img {
    border-radius: var(--lx-r) !important;
    max-width: 100%;
    height: auto;
}
.elementor-widget-image-box img {
    border-radius: var(--lx-r) !important;
}

/* Portfolio — preserve original proportions */
.elementor-186 .elementor-widget-image img {
    width: auto !important;
    max-width: 100% !important;
}

/* Interactive cards (Transcribe-style) */
.elementor-widget-image-box .elementor-image-box-wrapper {
    background: var(--lx-card);
    border: 1px solid var(--lx-border);
    border-radius: 20px;
    padding: 24px;
    transition: all .35s;
    cursor: pointer;
}
.elementor-widget-image-box .elementor-image-box-wrapper:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0,0,0,.08);
    border-color: transparent;
}
[data-theme="dark"] .elementor-widget-image-box .elementor-image-box-wrapper:hover {
    box-shadow: 0 12px 36px rgba(0,0,0,.3);
}

/* Dashboard app cards — iOS style */
.elementor-1172 .elementor-widget-image-box .elementor-image-box-wrapper {
    text-align: center;
    padding: 28px 20px;
}
.elementor-1172 .elementor-image-box-title {
    font-family: var(--lx-font) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--lx-text) !important;
}
[data-theme="dark"] .elementor-1172 .elementor-image-box-title {
    color: var(--lx-text) !important;
}

/* Dashboard — tighter layout, buttons inside cards */
.elementor-1172 .elementor-widget-image img {
    border-radius: 20px !important;
    max-width: 100px !important;
    margin: 0 auto;
}
.elementor-1172 .elementor-section {
    margin-bottom: 0 !important;
}
.elementor-1172 .elementor-widget-button {
    margin-top: 8px !important;
}

/* ===== Portfolio — custom clean layout ===== */
.lx-portfolio {
    max-width: 895px;
    margin: 0 auto;
    padding: 24px 24px 60px;
    font-family: var(--lx-font);
}
.lx-section {
    background: var(--lx-card);
    border: 1px solid var(--lx-border);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 14px;
    transition: all .35s;
}
.lx-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    border-color: transparent;
}
[data-theme="dark"] .lx-section:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.lx-section h2 {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 16px;
    color: var(--lx-text);
}

/* Profile card */
.lx-profile-card { border-left: 4px solid var(--lx-blue); }
.lx-profile-row { display: flex; align-items: center; gap: 28px; }
.lx-avatar { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lx-profile-info h1 { font-size: 2.6rem; font-weight: 800; margin-bottom: 8px; color: var(--lx-text); }
.lx-subtitle { color: #FF8F83; font-size: 1.5rem; font-weight: 600; margin-bottom: 12px; }
.lx-contact { color: var(--lx-text2); font-size: 1.15rem; margin-bottom: 18px; }
.lx-contact a { color: var(--lx-blue); text-decoration: none; }
.lx-resume-btn {
    display: inline-block;
    background: var(--lx-blue);
    color: #fff !important;
    padding: 14px 32px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .25s;
}
.lx-resume-btn:hover { background: #0071e3; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,122,255,.25); }
[data-theme="dark"] .lx-resume-btn { color: #fff !important; }

/* Timeline */
.lx-timeline-img { width: 100%; max-height: 100px; object-fit: contain; border-radius: 8px; transition: filter .3s; }
[data-theme="dark"] .lx-timeline-img { filter: invert(1); }

/* Certificates grid */
.lx-cert-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.lx-cert-grid img { width: 100%; border-radius: 14px; }
.lx-ieee-link { display: block; border-radius: 14px; overflow: hidden; }
.lx-ieee-canvas { width: 100%; height: auto; display: block; border-radius: 14px; }

/* Skills grid */
.lx-skills-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.lx-skill { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.lx-skill img { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; }
.lx-skill span { font-size: 1rem; color: var(--lx-text2); font-weight: 500; }

/* Checklist */
.lx-checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lx-check-item {
    font-size: 1.1rem;
    color: var(--lx-text2);
    padding: 8px 12px;
    background: var(--lx-bg);
    border-radius: 10px;
}
.lx-check-item::first-letter { color: #34C759; }

@media (max-width: 768px) {
    .lx-profile-row { flex-direction: column; text-align: center; }
    .lx-avatar { width: 100px; height: 100px; }
    .lx-skills-grid { grid-template-columns: repeat(4, 1fr); }
    .lx-checklist { grid-template-columns: 1fr; }
    .lx-cert-grid { grid-template-columns: 1fr; }
}

/* OLD Portfolio Elementor overrides — keep for hidden fallback */
/* Portfolio — constrain widths, compact layout */
.elementor-186 .elementor-section > .elementor-container {
    max-width: 820px !important;
    margin: 0 auto !important;
}
.elementor-186 .elementor-widget-image img {
    border-radius: 12px !important;
    max-width: 100% !important;
    height: auto !important;
}
/* Constrain images — 30% smaller */
.elementor-186 .elementor-image-box-img img,
.elementor-186 .elementor-widget-image img {
    max-height: 280px !important;
    object-fit: contain !important;
}
/* Portfolio sections — card style */
.elementor-186 .elementor-top-section {
    background: var(--lx-card) !important;
    border: 1px solid var(--lx-border) !important;
    border-radius: 20px !important;
    margin: 8px 24px !important;
    padding: 20px !important;
    transition: all .35s !important;
}
.elementor-186 .elementor-top-section:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    border-color: transparent !important;
}
[data-theme="dark"] .elementor-186 .elementor-top-section:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
/* Remove nested backgrounds */
.elementor-186 .elementor-inner-section {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
/* Hide ALL dividers */
.elementor-186 .elementor-widget-divider {
    display: none !important;
}
/* Sections with only divider — collapse */
.elementor-186 .elementor-top-section:has(.elementor-widget-divider:only-child) {
    display: none !important;
}
/* Compact section spacing */
.elementor-186 .elementor-section {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
/* Headings tighter */
.elementor-186 .elementor-heading-title {
    margin-bottom: 8px !important;
}
/* Experience timeline — smaller */
.elementor-186 .elementor-widget-image img[src*="experience"],
.elementor-186 .elementor-widget-image img[src*="Experience"],
.elementor-186 .elementor-widget-image img[src*="Line"],
.elementor-186 .elementor-widget-image img[src*="line"] {
    max-height: 160px !important;
}
/* Tech icons — constrain */
.elementor-186 .elementor-icon-list-icon img {
    max-width: 40px !important;
}
/* Carousel — restore */
.elementor-186 .owl-carousel,
.elementor-186 .premium-carousel-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* Hide empty sections (no visible content) */
.elementor-186 .elementor-top-section .elementor-widget-wrap:empty {
    display: none !important;
}
/* Hide divider-only sections, empty last section */
.elementor-186 [data-id="722648b"],
.elementor-186 [data-id="9c7aed8"],
.elementor-186 [data-id="19f0b5a"] {
    display: none !important;
}
/* Heading-only sections — merge visually with next card */
.elementor-186 [data-id="79b703a"],
.elementor-186 [data-id="6d9cf32"] {
    border: none !important;
    background: transparent !important;
    margin-bottom: -8px !important;
    padding-bottom: 0 !important;
}
/* Experience timeline — smaller height */
.elementor-186 [data-id="623973a"] img {
    max-height: 120px !important;
}
/* IEEE section — if PDFs don't render, hide broken images */
.elementor-186 img[alt="IEEE5"] {
    display: none !important;
}
/* Tech icons — constrain sizes for skills rows */
.elementor-186 [data-id="7778f47"] img,
.elementor-186 [data-id="df1570d"] img,
.elementor-186 [data-id="feedf93"] img {
    max-width: 56px !important;
    max-height: 56px !important;
}
/* Merge Programming skills sections into one visual group */
.elementor-186 [data-id="7778f47"],
.elementor-186 [data-id="df1570d"],
.elementor-186 [data-id="feedf93"] {
    margin-top: -8px !important;
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
/* Certificate images smaller */
.elementor-186 [data-id="5c65b6d"] img {
    max-height: 200px !important;
}

/* Section spacing consistency */
.elementor-section.elementor-top-section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* Headings — Inter font */
.elementor-heading-title {
    font-family: var(--lx-font) !important;
    letter-spacing: -.02em !important;
}

/* Text — Inter font */
.elementor-widget-text-editor {
    font-family: var(--lx-font) !important;
}

/* Hide original back buttons on subpages (replaced by lx-header) */
body:not(.lx-home) .elementor-top-section:first-child {
    display: none !important;
}
/* Hide original social icons on homepage (moved to header) */
body.lx-home .zoom-social-icons-list {
    display: none !important;
}
/* Hide original logo on homepage (moved to header) */
body.lx-home .elementor-widget-theme-site-logo,
body.lx-home .elementor-element-a42330a {
    display: none !important;
}
/* Reduce spacer before iOS Senior heading */
body.lx-home .elementor-element-047e5aa .elementor-spacer-inner {
    height: 60px !important;
}
/* Align homepage content with header */
body.lx-home .elementor-section > .elementor-container {
    max-width: var(--lx-max) !important;
    padding: 0 24px !important;
}

/* Dividers — subtle */
.elementor-divider-separator {
    border-color: var(--lx-border) !important;
}

/* ===== Dashboard — custom cards ===== */
.lx-dashboard {
    max-width: var(--lx-max);
    margin: 0 auto;
    padding: 24px 24px 60px;
    font-family: var(--lx-font);
}
.lx-dash-title {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: 24px;
    color: var(--lx-text);
}
.lx-dash-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.lx-app-card {
    background: var(--lx-card);
    border: 1px solid var(--lx-border);
    border-left: 4px solid var(--lx-blue);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all .35s;
}
.lx-app-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0,0,0,.08);
    border-color: transparent;
    border-left-color: transparent;
}
[data-theme="dark"] .lx-app-card:hover {
    box-shadow: 0 12px 36px rgba(0,0,0,.3);
}
.lx-app-card[data-color="orange"] { border-left-color: #FF9500; }
.lx-app-card[data-color="blue"] { border-left-color: #007AFF; }
.lx-app-card[data-color="purple"] { border-left-color: #AF52DE; }
.lx-app-card[data-color="green"] { border-left-color: #34C759; }
.lx-app-card[data-color="red"] { border-left-color: #FF3B30; }
.lx-app-card[data-color="teal"] { border-left-color: #5AC8FA; }

.lx-app-icon {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    object-fit: cover;
    flex-shrink: 0;
}
.lx-app-info {
    flex: 1;
    min-width: 0;
}
.lx-app-info h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--lx-text);
}
.lx-app-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.lx-app-btn {
    font-size: .78rem;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 10px;
    text-decoration: none;
    transition: all .25s;
    color: var(--lx-blue);
    background: rgba(0,122,255,.08);
}
.lx-app-btn:hover {
    background: rgba(0,122,255,.15);
    color: var(--lx-blue) !important;
}
.lx-app-btn-store {
    background: var(--lx-blue);
    color: #fff !important;
}
.lx-app-btn-store:hover {
    background: #0071e3;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,122,255,.25);
}
/* Dashboard dark mode fixes */
.lx-app-btn-store,
[data-theme="dark"] .lx-app-btn-store,
[data-theme="dark"] .lx-app-btn-store:hover {
    color: #fff !important;
}
[data-theme="dark"] .lx-app-info h3 {
    color: var(--lx-text) !important;
}
[data-theme="dark"] .lx-dash-title {
    color: var(--lx-text) !important;
}

@media (max-width: 768px) {
    .lx-dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) and (min-width: 769px) {
    .lx-dash-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Dashboard buttons — iOS style */
.elementor-1172 .elementor-button {
    background: var(--lx-blue) !important;
    border-color: var(--lx-blue) !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
    font-size: .85rem !important;
    box-shadow: 0 2px 8px rgba(0,122,255,.2);
}
.elementor-1172 .elementor-button:hover {
    background: #0071e3 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,122,255,.3);
}

/* Portfolio buttons */
.elementor-186 .elementor-button {
    border-radius: 12px !important;
}

/* Responsive portfolio fix */
@media (min-width: 769px) {
    .elementor-186 .elementor-section > .elementor-container {
        max-width: 1140px !important;
    }
}

/* === Responsive === */
@media (max-width: 768px) {
    .lx-nav:not(.lx-nav-icons) { display: none; }
    .lx-burger { display: flex; }
    /* Icons nav stays visible but smaller on mobile */
    .lx-nav-icons { gap: 8px; }
    .lx-icon-link { width: 32px; height: 32px; border-radius: 8px; }
    .lx-icon-link svg { width: 14px; height: 14px; }

    .elementor-section > .elementor-container {
        padding: 0 16px !important;
    }
}

@media (max-width: 480px) {
    .lx-logo span { display: none; }
}