/* ================================================
   NATÁLIA KURQUIEVICZ — Portfolio
   Faithful to Home-Laptop1024px.svg design file
   Satoshi Variable · Accessible · Keyboard-first
   ================================================ */

@font-face {
    font-family: 'Satoshi';
    src: url('../assets/Satoshi-Variable.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

/* ─── DESIGN TOKENS ─────────────────────────── */
:root {
    --bg:           #121212;
    --surface:      #1E1E1E;       /* hero panels, tabs bar — exact from SVG fill */
    --border-soft:  #2C2C2C;       /* hero / tabs stroke — exact from SVG */
    --border-card:  #3E3E3E;       /* card strokes — exact from SVG */
    --white:        #ffffff;
    --muted:        rgba(255,255,255,0.72); /* WCAG AA: ~5.5:1 on #121212 (era 0.48 → ~3.1:1) */
    --pink:         #FFB7C5;
    --font:         'Satoshi', sans-serif;
    --stroke:       0.75px;        /* all border widths match SVG stroke-width="0.75" */
    --r:            2px;           /* rx="2" from SVG */
    --gap:          10px;
    --pad:          23px;          /* side margins */
    --col-w:        484px;
    --max-w:        1001px;        /* 23 + 484 + 10 + 484 + 23 – 23 = 1001 */
    --focus:        0 0 0 2px var(--pink);
}

/* ─── RESET ──────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--white);
    font-family: var(--font);
    font-size: 1.05rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
}

/* ─── SR-ONLY (visually hidden, readable by screen readers) ─── */
.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;
}

/* ─── FOCUS ──────────────────────────────────── */
:focus-visible {
    outline: 2px solid transparent; /* becomes visible in Windows Forced Colors / High Contrast */
    outline-offset: 2px;
    box-shadow: var(--focus);
    border-radius: calc(var(--r) + 1px);
}
/* Override pink-on-pink on skip link */
.skip-link:focus-visible { box-shadow: 0 0 0 2px #000; outline-color: #000; }

/* ─── LINKS ──────────────────────────────────── */
a { color: var(--white); text-decoration: none; }
a:hover, a:focus-visible { color: var(--pink); font-weight: 700; }

/* ─── SKIP LINK ──────────────────────────────── */
.skip-link {
    position: absolute; top: -100px; left: var(--pad);
    background: var(--pink); color: #000;
    font-weight: 700; font-size: 0.82rem;
    padding: 7px 14px; border-radius: var(--r);
    z-index: 9999; transition: top 0.15s;
}
.skip-link:focus { top: 10px; color: #000; font-weight: 700; }

/* ─── CONTAINER ──────────────────────────────── */
.container {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--pad);
}

/* ================================================
   NAVBAR  (sticky, blurred, border-bottom)
   ================================================ */
.navbar {
    position: sticky; top: 0; z-index: 200;
    background: rgba(18,18,18,0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: var(--stroke) solid var(--border-soft);
}
.nav-inner {
    display: flex; align-items: center;
    justify-content: space-between; height: 44px;
}
.brand {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.9rem; font-weight: 800;
    letter-spacing: -0.02em; color: var(--white);
}
.brand:hover, .brand:focus-visible { color: var(--pink); font-weight: 800; }
.nav-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    border: var(--stroke) solid var(--border-soft);
    object-fit: cover; flex-shrink: 0;
}
.nav-links { list-style: none; display: flex; gap: 24px; }
.nav-links a { font-size: 0.85rem; font-weight: 500; }

/* ─── HAMBURGER ──────────────────────────────── */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px; height: 44px;           /* WCAG 2.5.5 — 44×44 touch target */
    background: none; border: none;
    cursor: pointer; padding: 8px;
    border-radius: var(--r);
    color: var(--white);
    flex-shrink: 0;
}
.hamburger:focus-visible { box-shadow: var(--focus); outline: none; }
.ham-bar {
    display: block; width: 18px; height: 1.5px;
    background: currentColor; border-radius: 1px;
    transition: transform 0.22s ease, opacity 0.22s ease;
    transform-origin: center;
}
.hamburger[aria-expanded="true"] .ham-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] .ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger[aria-expanded="true"] .ham-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── NAV DROPDOWN ───────────────────────────── */
.nav-item { position: relative; }

.dropdown-toggle {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.85rem; font-weight: 500;
    color: var(--white); cursor: pointer;
    padding: 4px 0; border-radius: var(--r);
    background: none; border: none; font-family: var(--font);
    transition: color 0.15s;
}
.dropdown-toggle:hover,
.dropdown-toggle[aria-expanded="true"] { color: var(--pink); font-weight: 700; }
.dropdown-toggle:focus-visible { box-shadow: var(--focus); outline: none; }

.chevron {
    display: inline-block; width: 10px; height: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s;
    flex-shrink: 0; margin-top: 1px;
}
.dropdown-toggle[aria-expanded="true"] .chevron {
    transform: rotate(-135deg) translateY(-2px);
}

.dropdown-menu {
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 210px;
    background: var(--surface);
    border: var(--stroke) solid var(--border-soft);
    border-radius: var(--r);
    padding: 6px 0;
    list-style: none;
    display: none;
    z-index: 300;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.dropdown-menu.open { display: block; }

.dropdown-menu li a {
    display: flex; align-items: center; padding: 10px 16px;
    min-height: 44px;                  /* WCAG 2.5.5 touch target */
    font-size: 0.83rem; font-weight: 500;
    color: var(--white); transition: background 0.12s, color 0.12s;
    border-radius: 0;
}
.dropdown-menu li a .lock-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    font-size: 0.9rem;
    line-height: 1;
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus-visible {
    background: rgba(255,183,197,0.08);
    color: var(--pink); font-weight: 700;
}
.dropdown-menu li + li {
    border-top: var(--stroke) solid var(--border-soft);
}

/* ================================================
   HERO  (two panels: left title+socials | right bio)
   SVG: outer box #1E1E1E stroke #2C2C2C 0.75
        left panel x=22 y=52 w=376 h=154
        right panel x=410 y=52 w=592 h=92
   ================================================ */
.hero {
    border: var(--stroke) solid var(--border-soft);
    background: var(--surface);
    border-radius: var(--r);
    margin-top: 14px;
    display: flex;
    flex-direction: column;
}
@media (min-width: 768px) {
    .hero { flex-direction: row; }
    .hero-left {
        flex: 0 0 376px;
        border-right: var(--stroke) solid var(--border-soft);
    }
    .hero-right { flex: 1; }
}
.hero-left  { padding: 24px; }
.hero-right { padding: 24px 28px; display: flex; align-items: flex-start; }

.hero-title {
    font-size: 1.35rem; font-weight: 800;
    line-height: 1.2; letter-spacing: -0.03em;
    color: var(--white); margin-bottom: 20px;
}
.social-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.social-list a {
    display: flex; align-items: center; gap: 9px;
    font-size: 0.78rem; font-weight: 400;
    color: var(--white); padding: 8px 0; border-radius: var(--r);
    min-height: 44px;                  /* WCAG 2.5.5 touch target */
}
.social-list a:hover, .social-list a:focus-visible { color: var(--pink); font-weight: 700; }
.icon-social {
    width: 14px; height: 14px; flex-shrink: 0;
    filter: brightness(0) invert(1);
}
.social-list a:hover .icon-social,
.social-list a:focus-visible .icon-social {
    filter: invert(85%) sepia(20%) saturate(600%) hue-rotate(300deg);
}
.hero-right p {
    font-size: 0.85rem; color: var(--muted);
    line-height: 1.78; max-width: 500px;
}

/* ================================================
   TABS BAR  (y=218 in SVG, #1E1E1E, stroke #2C2C2C 0.75)
   "Projects" label + 3 tab buttons
   ================================================ */
.tabs-bar {
    margin-top: 10px;
    background: var(--surface);
    border: var(--stroke) solid var(--border-soft);
    border-radius: var(--r);
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 12px;
    height: 38px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs-bar::-webkit-scrollbar { display: none; }

.tabs-label {
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); margin-right: 16px;
    white-space: nowrap; flex-shrink: 0;
}

.tab-btn {
    background: none; border: none;
    font-family: var(--font);
    font-size: 0.82rem; font-weight: 500;
    color: var(--muted); cursor: pointer;
    padding: 0 14px; height: 100%;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap; flex-shrink: 0;
    border-radius: 0;
}
.tab-btn:hover { color: var(--white); }
.tab-btn.active {
    color: var(--pink);
    font-weight: 700;
    border-bottom-color: var(--pink);
}
.tab-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus);
    border-radius: var(--r);
}

/* ================================================
   MASONRY GRID  (3 cards only, with previews)
   Left col: card-a (tall) · card-c (tall)
   Right col: card-b (tall, same height as a+c+gap)
   SVG layout preserved
   ================================================ */
.masonry-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
    padding-bottom: 80px;
    margin-top: var(--gap);
}
@media (min-width: 768px) {
    .masonry-grid {
        grid-template-columns: 1fr 1fr;
    }
    /* Left col: two stacked cards; Right col: one tall card */
    .card-b { grid-column: 1; grid-row: 1; }      /* Design System — left, row 1 */
    .card-c { grid-column: 2; grid-row: 1 / 3; } /* HR Forms — right, spans rows 1+2 */
    .card-a { grid-column: 1; grid-row: 2; }      /* DM Search — left, row 2 (last) */
}

/* card hidden by tab filter */
.card-link[hidden] { display: none; }

/* ─── CARD ───────────────────────────────────── */
.card-link {
    display: flex; flex-direction: column;
    border: var(--stroke) solid var(--border-card);
    border-radius: var(--r);
    background: var(--surface);
    transition: border-color 0.18s;
    color: var(--white); height: 100%;
}
.card-link:hover { border-color: var(--pink); }
.card-link:focus-visible {
    border-color: var(--pink);
    box-shadow: var(--focus); outline: none;
}

.card {
    padding: 16px; flex: 1;
    display: flex; flex-direction: column;
}

.card-header {
    display: flex; align-items: center;
    gap: 10px; margin-bottom: 6px;
}
.card-icon { width: 20px; height: 20px; flex-shrink: 0; object-fit: contain; }
.card-header h3 {
    font-size: 0.9rem; font-weight: 700;
    color: var(--white); letter-spacing: -0.01em;
    transition: color 0.15s;
}
.card-link:hover .card-header h3,
.card-link:focus-visible .card-header h3 { color: var(--pink); }

.card-url {
    font-size: 1rem; color: var(--pink);
    display: inline-flex; align-items: center; margin-top: 10px;
    padding: 12px 18px; min-height: 44px; /* WCAG 2.5.5 touch target */
    background: var(--surface);
    border: var(--stroke) solid var(--border-soft);
    border-radius: var(--r);
    word-break: break-all; font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.card-url:hover, .card-url:focus-visible {
    background: rgba(255,183,197,0.08);
    color: var(--white);
}
.card-tagline {
    font-size: 0.72rem; color: var(--muted); margin-bottom: 10px;
}
.card-desc {
    font-size: 0.8rem; color: var(--muted); line-height: 1.65;
    margin-top: auto; padding-top: 10px;
}
.preview-img {
    width: 100%; display: block;
    border-radius: var(--r);
    border: var(--stroke) solid var(--border-soft);
    margin-top: 12px;
}

/* ================================================
   DETAIL PAGES
   ================================================ */
.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 24px; font-size: 0.8rem;
    color: var(--muted); border-radius: var(--r); padding: 10px 4px;
    min-height: 44px;                  /* WCAG 2.5.5 touch target */
}
.back-link:hover, .back-link:focus-visible { color: var(--pink); font-weight: 700; }

.detail-header {
    padding: 32px 0 24px;
    border-bottom: var(--stroke) solid var(--border-card);
    margin-bottom: 28px;
}
.detail-header h1 {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    font-weight: 800; letter-spacing: -0.04em;
    color: var(--white); margin-bottom: 12px; line-height: 1.1;
}
.detail-header p {
    font-size: 0.9rem; color: var(--muted);
    line-height: 1.75;
}
.gallery {
    display: grid; grid-template-columns: 1fr;
    gap: var(--gap); padding-bottom: 80px;
}
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* ================================================
   RESPONSIVE  ≤ 767px: mobile nav + single column
   ================================================ */
@media (max-width: 767px) {
    .hero { flex-direction: column; }
    .hero-left { border-right: none; border-bottom: var(--stroke) solid var(--border-soft); }
    .tabs-bar { padding: 0 8px; }

    /* Hamburger + collapsible nav panel (in-flow, no absolute) */
    .nav-inner {
        height: auto;
        min-height: 44px;
        flex-wrap: wrap;
    }
    .hamburger { display: flex; order: 1; }

    .nav-links {
        display: none;
        flex-direction: column;
        gap: 0;
        width: 100%;
        order: 2;
        border-top: var(--stroke) solid var(--border-soft);
        padding: 8px 0 12px;
    }
    .nav-links.open { display: flex; }

    .nav-links > li { width: 100%; }

    .nav-links > li > a,
    .nav-links .dropdown-toggle {
        display: flex; align-items: center;
        min-height: 44px;              /* WCAG 2.5.5 touch target */
        padding: 0 var(--pad);
        font-size: 0.9rem;
        width: 100%;
        text-align: left;
        border-radius: 0;
    }

    /* Mobile: dropdown expands inline, not absolute */
    .nav-item { position: static; flex-direction: column; }
    .dropdown-menu {
        position: static;
        min-width: 0; width: 100%;
        box-shadow: none;
        border: none;
        border-top: var(--stroke) solid var(--border-soft);
        border-radius: 0;
        background: rgba(255,255,255,0.04);
        padding: 4px 0;
    }
    .dropdown-menu li + li { border-top: none; }
    .dropdown-menu li a {
        min-height: 44px;              /* WCAG 2.5.5 touch target */
        padding: 0 var(--pad) 0 calc(var(--pad) + 16px);
    }
}

/* ─── REDUCED MOTION (EAA / WCAG 2.3.3) ─────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    html { scroll-behavior: auto; }
}