/*
Theme Name: LevaDev
Theme URI: https://levatech.info
Author: LevaTech
Description: A developer portfolio theme with eight visual styles: Linear, Apple, Brutalist, Teal Refined, Studio, IDE, Nova, and Pulse. Select a style in LevaDev → Theme Options.
Version: 3.15.6
Requires at least: 6.0
Requires PHP: 8.0
License: GPLv2
Text Domain: levadev
*/

/* ============================================
   SHARED BASE : loaded for all variants.
   Tokens, resets, typography fundamentals,
   utility primitives. Each variant stylesheet
   layers on top and defines its own aesthetic.
   ============================================ */

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }

/* Content stays visible before JavaScript loads and if it never runs. */
.reveal {
    opacity: 1;
}
.ld-enhanced .reveal-pending { opacity: 0; transform: translateY(20px); }
.reveal.visible { animation: ld-fadeUp 0.6s both; }

.stagger .reveal:nth-child(1) { animation-delay: 0s; }
.stagger .reveal:nth-child(2) { animation-delay: 0.05s; }
.stagger .reveal:nth-child(3) { animation-delay: 0.1s; }
.stagger .reveal:nth-child(4) { animation-delay: 0.15s; }
.stagger .reveal:nth-child(5) { animation-delay: 0.2s; }
.stagger .reveal:nth-child(6) { animation-delay: 0.25s; }

@keyframes ld-fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ld-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Icon primitive */
.ld-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Container primitive (variants can override width) */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.75rem;
    position: relative;
    z-index: 1;
}

/* Visually-hidden helper */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Variant-specific elements (studio shows these, others hide) */
.hero__photo { display: none; }
[data-style="studio"] .hero__photo { display: block; }
[data-style="studio"] .code-card { display: none; }

/* Social icons dock — only Pulse uses this */
.site-social { display: none; }
/* Pulse enables these duplicates only inside its mobile dropdown. */
.site-nav__socials,
.site-nav__cv { display: none !important; }
.site-nav__icon { display: none; }

/* Sidebar avatar — only Pulse uses this (rockets in when leaving Home).
   Hidden everywhere else so it never appears in the top-bar variants. */
.sidebar-avatar { display: none; }
[data-style="pulse"] .sidebar-avatar { display: block; }

/* Timeline structural baseline : cosmetics handled per variant */
.timeline-item__header { margin-bottom: 1.25rem; }
.timeline-item__roles { display: flex; flex-direction: column; }
.role { position: relative; }
.role__date { display: block; }
.role__title { margin-bottom: 0.35rem; }
.role p { margin: 0; }

/* Project cards are clickable via a stretched-link overlay.
   Inner anchors (live-site icons) stay on top via z-index. */
.project-card { position: relative; }
.project-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    text-indent: 100vw;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
}
.project-card__top,
.project-card__content,
.project-card__preview,
.project-card h3,
.project-card p,
.project-card .skill-tags,
.project-card__links,
.project-card__links a,
.project-card__links span { position: relative; z-index: 2; pointer-events: none; }
/* Override Nova/Pulse top-wrapper z-index so its external actions clear the overlay. */
html .project-card .project-card__top { z-index: 2; }
.project-card__links a, .project-card__links span[title] { pointer-events: auto; }
.project-card__overlay:focus-visible { outline-offset: -4px; }

/* ============================================
   SERVICES: shared structural baseline.
   Variants layer their own colours / borders /
   typography on top. This keeps the structure
   sane for variants without explicit overrides.
   ============================================ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.service-card { display: flex; flex-direction: column; }
.service-card__bullets { list-style: none; margin: 0; padding: 0; }
.service-card__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}
.service-card__bullet-icon {
    width: 14px; height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}
.services-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
@media (max-width: 860px) {
    .services-grid { grid-template-columns: 1fr; }
}

:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 4px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100000; padding: 0.75rem 1rem; background: var(--bg-card, #fff); color: var(--text, #111); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

.document-page { padding: calc(64px + 4rem) 0 4rem; }
.document-content { max-width: 760px; color: var(--text-2); line-height: 1.8; }
.document-content h1 { margin-bottom: 2rem; }
.document-content h2, .document-content h3 { margin: 1.5rem 0 0.75rem; }
.document-content p, .document-content ul, .document-content ol { margin-bottom: 1rem; }
.document-content ul { list-style: disc; padding-left: 1.5rem; }
.document-content ol { list-style: decimal; padding-left: 1.5rem; }
.document-content a { text-decoration: underline; text-underline-offset: 3px; }
.document-content pre { overflow: auto; padding: 1rem; background: var(--bg-card); }
.document-content input { max-width: 100%; font: inherit; padding: 0.5rem; }
.post-summary { padding-bottom: 2rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; }
.pagination .nav-links, .page-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* Readable fallback when scripting is disabled or initialization fails. */
html:is([data-style="ide"], [data-style="pulse"]):not(.ld-enhanced) body.home { overflow: auto; height: auto; }
html:is([data-style="ide"], [data-style="pulse"]):not(.ld-enhanced) .home main {
    position: relative; inset: auto; display: block; width: auto; max-width: none;
    height: auto; overflow: visible; margin: 110px 2rem 3rem 300px;
}
html:is([data-style="ide"], [data-style="pulse"]):not(.ld-enhanced) .home main::before,
html:is([data-style="ide"], [data-style="pulse"]):not(.ld-enhanced) .home main::after { display: none; }
html:is([data-style="ide"], [data-style="pulse"]):not(.ld-enhanced) .home .hero,
html:is([data-style="ide"], [data-style="pulse"]):not(.ld-enhanced) .home .section {
    position: relative; inset: auto; display: block; height: auto;
    min-height: 0; overflow: visible; padding: 2rem 1rem;
}
@media (max-width: 860px) {
    html:is([data-style="ide"], [data-style="pulse"]):not(.ld-enhanced) .home main { margin: 2rem 1rem; }
    html:not(.ld-enhanced) .site-header { position: relative !important; inset: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 1rem; }
    html:not(.ld-enhanced) .header-inner, html:not(.ld-enhanced) .header-right { flex-wrap: wrap; }
    html:not(.ld-enhanced) .site-nav { position: static !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap; width: auto !important; height: auto !important; max-height: none !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
}
html:not(.ld-enhanced) .menu-toggle { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
}

html.ld-menu-ready .site-nav.ld-dropdown:not(.open) { visibility: hidden; }

/* The head bootstrap selects the requested panel before footer initialization.
   The panel ids below mirror ld_home_panels() in functions.php (plus the hero,
   #home). Adding a homepage section means adding it in both places. */
html.ld-enhanced[data-initial-panel]:not(.ld-tabs-ready) .home .hero,
html.ld-enhanced[data-initial-panel]:not(.ld-tabs-ready) .home .section { display: none; }
html.ld-enhanced[data-initial-panel="home"]:not(.ld-tabs-ready) .home #home,
html.ld-enhanced[data-initial-panel="skills"]:not(.ld-tabs-ready) .home #skills,
html.ld-enhanced[data-initial-panel="projects"]:not(.ld-tabs-ready) .home #projects,
html.ld-enhanced[data-initial-panel="services"]:not(.ld-tabs-ready) .home #services,
html.ld-enhanced[data-initial-panel="experience"]:not(.ld-tabs-ready) .home #experience,
html.ld-enhanced[data-initial-panel="contact"]:not(.ld-tabs-ready) .home #contact { display: var(--ld-initial-display, flex); flex-direction: column; }
html[data-style="ide"] { --ld-initial-display: block; }
html .home .section.ld-initial-panel { animation: none !important; }
html.ld-enhanced[data-initial-panel="home"]:not(.ld-tabs-ready) .home #home { display: flex; }
html.ld-enhanced[data-style="pulse"][data-initial-panel]:not(.ld-tabs-ready) .home .section { justify-content: safe center; align-items: stretch; }
@media (max-width: 768px) {
    html.ld-enhanced[data-style="pulse"][data-initial-panel="contact"]:not(.ld-tabs-ready) .home #contact { justify-content: center; min-height: calc(100vh - 108px); }
    html[data-style="pulse"] .home :is(.hero, .section) { scroll-margin-top: 76px; }
    html.ld-enhanced:not(.ld-menu-ready):not([data-style="ide"]) .site-nav { visibility: hidden; }
    html.ld-enhanced[data-style="pulse"][data-mobile-nav="bottom_bar"]:not(.ld-menu-ready) .site-nav { visibility: visible; }
}

html:not([data-style="ide"]):not([data-style="pulse"]) section[id] { scroll-margin-top: 80px; }