/* ===================================================================
   ZOLTAN OLASZ — RESUME THEME
   Cleaned & organized CSS (grouped by: tokens → base → layout → UI →
   components → utilities → media → print)
   =================================================================== */

/* === TOKENS ======================================================= */
:root{
  /* Brand & color system */
  --accent:       #0ea5e9;    /* sky-500 */
  --accent-600:   #0284c7;    /* sky-600 */
  --bg:           #060a12;    /* darker page background */
  --card:         #0a1324;    /* darker cards */
  --muted:        #94a3b8;
  --text:         #e6e9ee;    /* slightly lighter text for contrast */
  --ring:         rgba(14,165,233,.35);
  --radius:       18px;

  color-scheme: light dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:   #f3f4f6;
    --card: #ffffff;
    --text: #0f172a;
    --muted:#475569;
    --ring: rgba(2,132,199,.25);
  }
}

/* === BASE ========================================================= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(124,92,255,.18), transparent 50%),
    radial-gradient(1200px 800px at 90% 90%, rgba(35,196,255,.18), transparent 50%),
    var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video{ max-width:100%; height:auto; }

/* === LAYOUT ======================================================= */
.page{ padding: clamp(16px, 3vw, 32px); }
.resume{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  grid-template-columns: 1fr; /* mobile-first */
}
@media (min-width: 900px){
  .resume{ grid-template-columns: 320px 1fr; align-items: start; }
  .sidebar.card{ grid-column: 1/2 }
  .content.card{ grid-column: 2/3 }
}

.card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.35);
  border: 1px solid rgba(148,163,184,.15);
  overflow: clip;
  content-visibility: auto;
  contain-intrinsic-size: 600px;
}

/* === SIDEBAR ====================================================== */
.sidebar{ position: sticky; top: clamp(12px, 2vh, 24px); align-self: start }
.sidebar .top{
  padding: 28px 24px 22px;
  background: linear-gradient(180deg, rgba(14,165,233,.12), transparent 60%);
}
.avatar{
  width: 140px; height:140px; /* centered & larger */
  margin-inline: auto;
  border-radius: 50%;
  overflow: hidden; border: 3px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px -12px rgba(14,165,233,.55);
}
.avatar img{ width:100%; height:100%; object-fit: cover }
.name{ font: 700 clamp(1.25rem, .9rem + 1.6vw, 1.9rem) Montserrat, Inter, sans-serif; margin:16px 0 2px }
.role{ color: var(--muted); margin-top:2px; font-weight:600 }

/* === SECTIONS / TYPOGRAPHY ======================================= */
.section{ padding: 24px }
.section + .section{ border-top: 1px dashed rgba(148,163,184,.2) }
.h{
  font: 700 clamp(1.05rem,.85rem + .6vw,1.25rem) Montserrat, Inter, sans-serif;
  letter-spacing:.2px;
  display:inline-flex; align-items:center; gap:.55ch;
}
.h .pill{
  font-size:.8rem; font-weight:700; color:var(--accent-600);
  background: rgba(14,165,233,.12); border:1px solid rgba(14,165,233,.25);
  padding:.2rem .55rem; border-radius:999px
}
.about p{ margin: .25rem 0 0; color: var(--muted); max-inline-size: 72ch; }

/* Contact */
.contact{ padding: 0 24px 20px }
.contact ul{ list-style:none; margin: 16px 0 0; padding:0; display:grid; gap:10px }
.contact li{ display:flex; gap:10px; align-items: start }
.contact li::before{ content: attr(data-emoji); font-size: 1.15rem; line-height:1.2 }
.contact a{ color: inherit; text-decoration: none }
.contact a:hover, .contact a:focus-visible{ color: var(--accent); outline: none }
.contact a{ overflow-wrap:anywhere; word-break: break-word; }

/* Skills */
.skills{ display:grid; gap:10px; margin-top:12px }
.skill{
  display:grid; grid-template-columns: 140px 1fr max-content; gap:10px; align-items:center
}
.skill-name{ font-weight:600 }
.meter{ height:10px; background:rgba(148,163,184,.25); border-radius:999px; position:relative; overflow:hidden }
.meter span{ position:absolute; inset:0; width: calc(var(--p, 0) * 1%); background: linear-gradient(90deg, var(--accent), var(--accent-600)); }
.pct{ font-variant-numeric: tabular-nums; color: var(--muted); font-weight:600 }

/* Chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }
.chip{ padding:.35rem .6rem; border-radius:999px; border:1px solid rgba(148,163,184,.28); background: rgba(148,163,184,.08); font-weight:600; font-size:.9rem }

/* Timeline */
.timeline{ margin-top:12px; display:grid; gap:18px }
.item{ display:grid; gap:6px; position:relative; padding-left:22px }
.item::before{ content:""; position:absolute; left:7px; top:.4rem; width:8px; height:8px; border-radius:50%; background: var(--accent) }
.item::after{ content:""; position:absolute; left:10px; top:1.2rem; bottom:-10px; width:2px; background: rgba(148,163,184,.25) }
.item:last-child::after{ display:none }
.date{ font-weight:700; color: var(--accent-600) }
.title{ font-weight:700 }
.org{ color: var(--muted); font-weight:600 }

/* Main content layout */
.content{ display:grid; gap: clamp(18px, 2vw, 24px) }

/* === VISITOR COUNTER ============================================= */
.counter-card{
  width: 100%; /* fill the sidebar */
  background: linear-gradient(180deg, color-mix(in oklab, var(--card), #000 10%), var(--card));
  border: 1px solid color-mix(in oklab, var(--card), #fff 12%);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(8,10,20,.35);
  padding:24px;
  position:relative;
  overflow: hidden;
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
@supports not (color: color-mix(in oklab, #000, #fff)){
  .counter-card{ background: var(--card); border: 1px solid rgba(148,163,184,.2); }
}
.counter-card::after{
  content:""; position:absolute; inset:-40% -20% auto -20%; height:160px;
  background: linear-gradient(90deg, transparent, rgba(124,92,255,.18), rgba(35,196,255,.18), transparent);
  transform: rotate(-6deg);
  filter: blur(20px); pointer-events:none;
}
.row{display:flex; align-items:center; gap:14px;}
.badge{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); border:1px solid color-mix(in oklab, var(--card), #fff 20%);
  padding:6px 10px; border-radius:999px; background: color-mix(in oklab, var(--card), #000 6%);
}
.title{ margin:8px 0 2px; font-size:14px; color:var(--muted); }
.value{
  font-variant-numeric: tabular-nums;
  font-size: clamp(36px, 6.2vw, 56px);
  line-height:1.05; font-weight:800;
  background: linear-gradient(90deg, var(--text), color-mix(in oklab, var(--text), var(--accent) 18%));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sub{ font-size:13px; color:var(--muted); }
.dot{
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, white, var(--accent)) ;
  box-shadow: 0 0 16px var(--accent);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(.9); opacity:.75}
  50%{ transform:scale(1.15); opacity:1}
}
.skeleton{
  display:inline-block; width:8ch; height:1em; border-radius:6px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.18), rgba(255,255,255,.08));
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer{ to{ background-position: -200% 0; } }
.cta{ margin-top:14px; display:flex; gap:12px; align-items:center; justify-content:space-between; }
.cta .tip{ font-size:12px; color:var(--muted); }
.hidden{ display:none !important; }
button.counter-refresh{
  appearance:none; border:1px solid color-mix(in oklab, var(--card), #fff 20%);
  background: color-mix(in oklab, var(--card), #000 6%); color:var(--text);
  padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:600;
}
button.counter-refresh:hover,
button.counter-refresh:focus-visible{ border-color: rgba(14,165,233,.4); outline: none }

/* === UTILITIES ==================================================== */
.muted{ color: var(--muted) }
.spacer{ height: 4px }
.btn{
  display:inline-flex; align-items:center; gap:.6ch; padding:.6rem .9rem;
  border-radius: 12px; border:1px solid rgba(148,163,184,.2);
  background: rgba(148,163,184,.08); color:inherit; text-decoration:none;
  font-weight:600; box-shadow: 0 6px 16px -12px rgba(14,165,233,.8);
}
.btn:hover, .btn:focus-visible{ border-color: rgba(14,165,233,.4); outline: none }
:where(a, button):focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 10px;
}

/* === MEDIA QUERIES ================================================ */
/* Turn off sticky sidebar on mobile so main content scrolls naturally */
@media (max-width: 899px){
  .sidebar{ position: static; top:auto; }
}
/* Make skill rows wrap cleanly on narrow screens */
@media (max-width: 520px){
  .skill{
    grid-template-columns: 1fr max-content;
    grid-template-areas:
      "name pct"
      "meter meter";
  }
  .skill-name{ grid-area: name; }
  .meter{ grid-area: meter; }
  .pct{ grid-area: pct; }
}

/* === ALIGNMENTS / SPECIAL CASES ================================== */
:root{ --axis: 22px; } /* same indent used by .item */
section[aria-label="Education"] .timeline{ margin-left: 0; }
section[aria-label="Education"] .timeline .item{ padding-left: 0; margin-left: var(--axis); }
section[aria-label="Education"] .timeline .item::before,
section[aria-label="Education"] .timeline .item::after{ display: none; }

section[aria-label="Other qualifications"] .bullets{
  margin-left: var(--axis);
  padding-left: 0;
  list-style-position: outside;
}
section[aria-label="Other qualifications"] ul{ margin-left: 22px; }

/* Force consistent text color in main content as requested */
.content p,
.content li,
.content .org,
.content .role,
.content .muted,
.content .sub,
.content .desc,
.content .title,
.content .text { color: var(--text) !important; }

/* === PRINT ======================================================== */
@media print{
  body{ background:#fff }
  .page{ padding:0 }
  .card{ box-shadow:none; border-color:#e5e7eb }
  .sidebar{ position:static }
  .contact a{ color: inherit; text-decoration: underline }
  .no-print{ display:none !important }
}