/* ===== Reset and Base ===== */
* {
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1,
h2,
p,
nav {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

p {
  margin-bottom: 1.25rem;
}

p:last-child {
  margin-bottom: 0;
}

/* ===== Variables ===== */
:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

  --color-text: #e0e0e0;
  --color-subtext: #888888;
  --color-accent: #2a9d8f;
  --background-color: #111111;

  --radius-sm: 6px;
  --radius-md: 8px;

  --text-bread: #c9c9c9;
  /* description */
  --text-muted: #a9a9a9;
  /* badges/date/labels */

  --chip-fg: #e2e2e2;
  /* tech chips */
  --chip-bg: #1f1f1f;
  --chip-border: #2c2c2c;

  --badge-bg: #151515;
  /* badges (meta) */
  --badge-border: #262626;

  --duration: 20s;
  /* ticker speed */
}

/* ===== Body & Layout ===== */
body {
  background-color: var(--background-color);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1.2rem;
  margin: 0 auto;
  padding: 0;
  line-height: 1.8;
  overflow-y: scroll;
  /* Always show the scrollbar */
}

.container {
  display: flex;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.sidebar {
  width: 200px;
  padding: 1rem 20px;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

/* Core column behavior (single source of truth) */
.center {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* spacing between sections */
  padding: 0;
  /* sections provide their own padding if needed */
  flex: 0 0 700px;
  /* fixed content width */
  min-width: 0;
  /* allow internal content to shrink */
  width: 100%;
}

/* General section shell */
.content-section {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.content-section.hidden {
  display: none;
  opacity: 0;
}

.subtext {
  color: var(--color-subtext);
}

/* ===== Name (left sidebar) ===== */
.name {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-mono);
  margin-top: 2px;
  user-select: none;
  cursor: pointer;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.name-text {
  display: inline-block;
  transform: translateY(-7px);
}

.name-link {
  text-decoration: none;
  color: inherit;
}

.name-link h1:hover {
  color: var(--color-accent);
}

/* ===== Header & Nav ===== */
.custom-header {
  display: flex;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 0;
  width: 100%;
}

.custom-nav {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  align-items: center;
}

.custom-nav a {
  font-size: 1rem;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--font-mono);
  transition: color 0.3s ease;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.custom-nav a:hover {
  color: var(--color-accent);
}

.custom-nav a.active {
  font-weight: bold;
  transform: scale(1.05);
  color: var(--color-accent);
  display: inline-block;
}

.nav-link iconify-icon {
  margin-left: 4px;
  vertical-align: middle;
}

/* ===== motto Switcher (right sidebar) ===== */
.motto-switcher {
  display: flex;
  justify-content: center;
  align-items: baseline;
  width: 100%;
  text-align: center;
}

/* Invisible, fixed hitbox wrapper around the motto */
#motto-box {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  cursor: pointer;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  text-align: center;
}

/* Inner span (the motto) */
.motto-switcher #motto-button {
  font-size: 1rem;
  font-weight: 400;
  opacity: 0.8;
  color: var(--color-text);
  font-family: var(--font-mono);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: inline-block;
  text-align: center;
  line-height: 1;
}

/* Mirror hover/active from the hitbox to the inner span */
#motto-box:hover #motto-button {
  color: var(--color-accent);
}

#motto-box:active #motto-button {
  transform: scale(0.95);
  opacity: 0.9;
}

/* ===== Bio Box ===== */
.bio-box {
  position: relative;
  border: 1px solid #27272a;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.bio-box p {
  margin-bottom: 1.25rem;
}

#default-bio .bio-box p:last-child {
  margin-bottom: 0;
}

.icon-links {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 10px;
}

.icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #27272a;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.icon-link:hover {
  background: #1a1a1a;
}

.icon-link iconify-icon {
  font-size: 1.5rem;
  color: var(--color-text);
  transition: color 0.3s ease;
}

.icon-link:hover iconify-icon {
  color: var(--color-accent);
}

/* ===== Skills ===== */
#skills {
  padding: 20px 0;
  position: relative;
}

.skills-icons {
  position: relative;
  overflow: hidden;
  margin-top: -10px;
  width: 100%;
}

/* Fade edges */
.skills-icons::before,
.skills-icons::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}

.skills-icons::before {
  left: 0;
  background: linear-gradient(90deg, var(--background-color), transparent);
}

.skills-icons::after {
  right: 0;
  background: linear-gradient(270deg, var(--background-color), transparent);
}

/* Animation container */
.animate-ticker-scroll {
  display: inline-flex;
  animation: ticker-scroll var(--duration) linear infinite;
  will-change: transform;
  padding-right: 0;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Only pause on devices that support hover (desktop) */
@media (hover: hover) and (pointer: fine) {
  .skills-icons:hover .animate-ticker-scroll {
    animation-play-state: paused;
  }
}

.skill-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 20px;
  padding: 10px 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

.skill-item iconify-icon {
  font-size: 2rem;
  width: 2rem;
  height: 2rem;
  color: var(--color-text);
  transition: color 0.3s ease;
  flex-shrink: 0;
}

.skill-item span {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Non-selectable labels next to icons */
.skills-icons .skill-item span,
.icon-links .tooltip {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}


/* ===== Generic Content Box (if used elsewhere) ===== */
.content {
  max-width: 700px;
  margin: 2rem auto;
  border: 1px solid #27272a;
  border-radius: 10px;
  padding: 2rem;
  background-color: #1a1a1a;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  line-height: 1.6;
}

.content:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.content h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--color-text);
}

.content p {
  font-size: 1.1rem;
  color: var(--color-subtext);
  margin-bottom: 1.5rem;
}

/* ===== Experience (timeline) ===== */
.timeline {
  position: relative;
  padding-left: 40px;
}

.timeline-item {
  position: relative;
  margin-bottom: 40px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  top: 14px;
  left: -40px;
  width: 8px;
  height: 8px;
  background-color: var(--color-accent);
  border: 4px solid #ffffff;
  border-radius: 50%;
  z-index: 2;
}

.timeline-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 30px;
  left: -33px;
  width: 2px;
  height: calc(100% + 30px);
  background-color: #ffffff;
  z-index: 1;
}

.timeline-entry {
  position: relative;
}

.experience-subtext {
  font-size: 0.9rem;
  color: var(--color-subtext);
  margin-top: -1.6rem;
  margin-bottom: 1rem;
  display: block;
  line-height: 1.4;
}

/* ===== Contact Tab ===== */
.contact-bio {
  text-align: center;
  padding: 30px;
}

.contact-guidance {
  color: var(--color-subtext);
  margin-bottom: 25px;
  line-height: 1.6;
}

.contact-icons {
  display: flex;
  gap: 20px;
  justify-content: center;
  position: relative;
  margin-bottom: 20px;
}

.contact-bio .icon-link {
  width: 50px;
  height: 50px;
}

.contact-bio iconify-icon {
  font-size: 2rem;
}

.contact-bio h2 {
  text-align: center;
}

.contact-bio p {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.icon-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
  margin-top: 5px;
  z-index: 10;
}

.icon-link:hover .tooltip {
  opacity: 1;
}

.tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--color-accent) transparent;
}

/*
.email-icon {
  background: rgba(42, 157, 143, 0.1);
  border: 1px solid var(--color-accent);
}
*/

/* ===== Footer ===== */
.custom-footer {
  width: 100%;
  text-align: center;
  padding: 2rem 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-subtext);
}

.footer-border {
  width: 50%;
  margin: 0 auto 1rem;
  border-top: 1px solid #333;
}

/* ===== Column tweaks ===== */
/* Right sidebar should shrink aggressively to preserve the center column */
.sidebar.right {
  flex: 0 1000 auto;
  min-width: 60px;
}

/* ===== Projects ===== */
#projects .projects-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 20px;
  padding: 0;
}

.project-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: transparent;
  border: 1px solid #262626;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  box-shadow: none;
  transform: none;
}

.project-card:hover {
  border-color: #2a2a2a;
}

.project-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-content h3 {
  margin: 0;
  color: var(--color-text);
  position: relative;
}


.project-content h3::after {
  content: none;
}

.project-meta {
  display: block;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .6rem;
  margin: -0.6rem 0 1.25rem;
  color: var(--text-muted);
  font-size: .9rem;
}


.project-blurb {
  color: var(--text-bread);
  font-size: 1.06rem;
  line-height: 1.65;
  margin: 0 0 1rem;
}

.learned {
  color: #b7b7b7;
  font-size: .95rem;
  line-height: 1.55;
  margin: 0 0 1.6rem;
}

.learned strong {
  font-weight: 400;
  color: inherit;
}

.tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  list-style: none;
  margin: .25rem 0 .9rem;
  padding: 0;
}

.tech-chips li {
  color: var(--chip-fg);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  font-size: .78rem;
  padding: .25rem .55rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.project-actions {
  margin-top: 1rem;
  display: flex;
  gap: .6rem;
}

.project-cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem 1.05rem;
  border-radius: var(--radius-md);
  font-size: .92rem;
  font-weight: 600;

  text-decoration: none;
  color: var(--color-accent);
  border: 1.5px solid rgba(42, 157, 143, .6);
  background: transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;

  user-select: none;
  -webkit-user-select: none;
}

.project-cta:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #111;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .project-card,
  .project-cta {
    transition: none;
  }
}

/* ===== Responsive ===== */

/* Home bio: show full name by default (desktop/tablet) */
#default-bio .bio-name .name-short {
  display: none;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    align-items: center;
  }

  .sidebar {
    width: 100%;
    text-align: center;
    padding: 0.5rem 0;
  }

  .sidebar.right {
    order: 2;
    margin-top: 1rem;
    padding: 0.5rem 0;
    border-top: 1px solid #333;
  }

  .center {
    max-width: 100%;
    padding: 0 1rem;
    flex: 1 1 auto;
    /* allow to grow on small screens */
  }

  .motto-switcher {
    justify-content: center;
    padding: 0.5rem 0;
  }

  /* On mobile, show short name only */
  #default-bio .bio-name .name-full {
    display: none;
  }

  #default-bio .bio-name .name-short {
    display: inline;
  }

}

/* --- Project spacing polish --- */

/* Tighten spacing before chips */
.project-content .project-blurb {
  margin: 0 0 .7rem;
}

.project-content .learned {
  margin: 0 0 .7rem;
}

/* Chips sit a bit closer to the text */
.project-content .learned+.tech-chips,
.project-content .project-blurb+.tech-chips {
  margin-top: .3rem;
}

/* Keep the chips compact */
.tech-chips {
  margin-top: .3rem;
}

/* Subtle hover so they feel alive but not buttons */
.tech-chips li {
  transition: background-color .12s ease, color .12s ease, border-color .12s ease
}

.tech-chips li:hover {
  cursor: default;
  user-select: none;
  background-color: #242424;
  /* tiny shift */
  color: #e7e7e7;
  border-color: #2a2a2a;
}




/* ===== Accessibility & Focus Styles ===== */

/* Kill the default focus ring just on interactive elements */
:where(.name-link, .custom-nav a, .icon-link, #motto-box):focus,
:where(.name-link, .custom-nav a, .icon-link, #motto-box):focus-visible {
  outline: none;
}

/* Make keyboard focus look like hover */
.name-link:hover .name-text,
.name-link:focus-visible .name-text { color: var(--color-accent); }

.custom-nav a:hover,
.custom-nav a:focus-visible { color: var(--color-accent); }

.icon-link:hover iconify-icon,
.icon-link:focus-visible iconify-icon { color: var(--color-accent); }

/* Motto: mirror hover/focus to inner text */
#motto-box:hover #motto-button,
#motto-box:focus-visible #motto-button { color: var(--color-accent); }





/* ===== Skills Ticker Layering Fix ===== */

/* Keep "What I work with" above the fades */
#skills { position: relative; }
#skills h2 { position: relative; z-index: 3; }

.skills-icons { position: relative; z-index: 1; }                /* whole ticker below the heading */
.skills-icons::before,
.skills-icons::after {
  z-index: 2;               /* fades above icons… */
  pointer-events: none;     /* …but never block selection/taps */
}
.animate-ticker-scroll { position: relative; z-index: 1; }       /* icons below fades */