/* Theme + palette system (light/dark + triad palette) */

/* Let the browser style built-in UI correctly */
html { color-scheme: light dark; }

/* Explicit overrides (manual toggle can set data-theme) */
html[data-theme="dark"]{
  --bg: var(--bg-dark);
  --text: var(--text-dark);
  --muted: var(--muted-dark);
  --accent: var(--accent-dark);
  --accent2: var(--accent2-dark);
  --accent3: var(--accent3-dark);
  --card: var(--card-dark);
  --border: var(--border-dark);
}

html[data-theme="light"]{
  --bg: var(--bg-light);
  --text: var(--text-light);
  --muted: var(--muted-light);
  --accent: var(--accent-light);
  --accent2: var(--accent2-light);
  --accent3: var(--accent3-light);
  --card: var(--card-light);
  --border: var(--border-light);
}

/* Default: follow system */
@media (prefers-color-scheme: dark){
  html:not([data-theme]){
    --bg: var(--bg-dark);
    --text: var(--text-dark);
    --muted: var(--muted-dark);
    --accent: var(--accent-dark);
    --accent2: var(--accent2-dark);
    --accent3: var(--accent3-dark);
    --card: var(--card-dark);
    --border: var(--border-dark);
  }
}

@media (prefers-color-scheme: light){
  html:not([data-theme]){
    --bg: var(--bg-light);
    --text: var(--text-light);
    --muted: var(--muted-light);
    --accent: var(--accent-light);
    --accent2: var(--accent2-light);
    --accent3: var(--accent3-light);
    --card: var(--card-light);
    --border: var(--border-light);
  }
}

/* Yellow + Maroon + Teal palette (coherent, non-ridiculous) */
html[data-palette="triad"]{
  /* DARK */
  --bg-dark:rgb(26, 26, 22);
  --text-dark:#e9d3b3;
  --muted-dark:rgb(218, 219, 224);

  /* Teal = primary */
  --accent2-dark:rgb(100, 245, 225);

  /* Yellow = highlight */
  --accent-dark:#ffd025;

  /* Maroon = emphasis */
  --accent3-dark:#e74976;

  --card-dark:rgba(255,255,255,.05);
  --border-dark:rgba(255,255,255,.12);

  /* LIGHT */
  --bg-light:#fbf6de;
  --text-light:rgb(27, 23, 16);
  --muted-light:rgb(82, 68, 48);

  /* Teal (deeper for contrast) */
  --accent2-light:rgb(0, 90, 86);

  /* Yellow becomes gold */
  --accent-light:#966e00;

  /* True maroon */
  --accent3-light:#c10030;

  --card-light:rgba(0,0,0,.04);
  --border-light:rgba(0,0,0,.10);
}

/* Global links + accents */
a { color: var(--accent); }
a:hover { text-decoration-color: var(--accent2); }

.theme-toggle:hover { border-color: var(--accent2); }

/* Optional: subtle maroon emphasis badge */
.badge {
  display:inline-block;
  padding:.15rem .5rem;
  border-radius:999px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--accent3) 18%, var(--card));
  color: var(--text);
}

/* Base layout */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

/* Nav */
nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

nav a {
  color: var(--muted);
  text-decoration: none;
  padding: .35rem .6rem;
  border: 1px solid transparent;
  border-radius: 10px;
}

nav a:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--card);
}

/* Typography */
h1 { font-size: 2.4rem; margin-bottom: .5rem; }
h2 { margin-top: 2.2rem; margin-bottom: .8rem; color: var(--accent); font-size: 1.3rem; }
p { color: var(--muted); margin-bottom: 1rem; }
small { color: var(--muted); }

/* Cards */
.card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* Home page helpers */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* THIS is the key */
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.nav__links {
  display: flex;
  gap: .8rem;
  margin-left: auto;   /* extra safety: pushes links right */
}


.nav__brand {
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--card);
  width: 2.3rem;
  height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}


.hero {
  padding: 1.2rem 0 2rem 0;
}

.kicker {
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
}

.lead {
  font-size: 1.1rem;
  margin-top: 0.8rem;
}

.hero__cta {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}

.btn{
  display: inline-block;
  padding: .55rem .9rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--accent);
  color: #07110d;              /* good on teal in DARK theme */
  text-decoration: none;
  font-weight: 600;
}

.btn--ghost{
  background: transparent;
  color: var(--text);          /* readable in both themes */
}

.btn--ghost:hover{
  border-color: var(--accent2);
  background: color-mix(in srgb, var(--accent2) 10%, transparent);
}

/* LIGHT theme: accent becomes dark teal -> primary button needs white text
   IMPORTANT: apply ONLY to non-ghost buttons */
html[data-theme="light"] .btn:not(.btn--ghost){
  color:#ffffff;
}
@media (prefers-color-scheme: light){
  html:not([data-theme]) .btn:not(.btn--ghost){
    color:#ffffff;
  }
}


.meta {
  margin-top: 1.1rem;
  color: var(--muted);
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}

.sep { color: var(--muted); }

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (min-width: 720px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

.card h2 {
  margin-top: 0;
}

.links { margin-bottom: 0; }

.bullets {
  margin-left: 1.2rem;
  color: var(--muted);
}

.footer {
  margin-top: 3rem;
  color: var(--muted);
}

.hl{
  color: var(--accent2);
  font-weight: 650;
}

.profile{
  display:flex;
  gap: 1.20rem;
  align-items: flex-start;
  margin-top: .9rem;
}

.avatar{
  width: 179px;
  height: 179px;
  border-radius: 50px;      /* use 999px if you want it circular */
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--card);
  flex: 0 0 auto;
  margin: 17px;
}

/* If your photo has a big white frame baked in, this helps visually */
.avatar{
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

@media (max-width: 640px){
  .profile{ flex-direction: column; }
  .avatar{ width: 118px; height: 118px; }
}

.social{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top: 1rem;
}

.social-icons{
  display:flex;
  gap:.55rem;
  margin-top: .9rem;
}

.iconlink{
  width: 38px;
  height: 38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  text-decoration: none;
}

.iconlink svg{
  width: 18px;
  height: 18px;
}

.iconlink:hover{
  color: var(--accent2);           /* yellow on hover */
  border-color: var(--accent2);
}

@media (max-width: 520px){
  .iconlink{ width: 36px; height: 36px; }
}

.edu { list-style: none; margin-left: 0; }
.edu__item { padding: .55rem 0; border-top: 1px solid var(--border); }
.edu__item:first-child { border-top: 0; padding-top: 0; }

.edu__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}

.edu__title { color: var(--accent2); font-weight: 650; }
.edu__date { color: var(--muted); white-space: nowrap; }

.edu__meta { color: var(--muted); margin-top: .15rem; }

.project__links{
  margin-top: .9rem;
  margin-bottom: 0;
  color: var(--muted);
}

.project__links a{
  color: var(--accent);
  text-decoration: none;
}

.project__links a:hover{
  text-decoration: underline;
  text-decoration-color: var(--accent2);
  text-underline-offset: 3px;
}

/* Simple thumbnail gallery (no JS) */
.gallery{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem;
  margin-top: 1rem;
}

.thumb{
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  display: block;
}

.thumb img{
  width: 100%;
  height: 105px;
  object-fit: cover;
  display: block;
}

@media (max-width: 1080px){
  .gallery{ grid-template-columns: 1fr; }
  .thumb img{ height: 180px; }
}

.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin-top: 1rem;
}

.contact-btn{
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  text-decoration: none;
  color: var(--text);
}

.contact-btn:hover{
  border-color: var(--accent2);
}

.contact-ic{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--card) 80%, transparent);
  color: var(--accent);
  flex: 0 0 auto;
}

.contact-ic svg{
  width: 20px;
  height: 20px;
}

.contact-txt strong{
  display: block;
  font-size: 1rem;
  margin-bottom: .15rem;
}

.contact-txt small{
  color: var(--muted);
}

@media (max-width: 720px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* Compact the contact tiles */
.contact-grid{
  gap: .65rem;
}

.contact-btn{
  padding: .65rem .75rem;
  border-radius: 12px;
}

.contact-ic{
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.contact-ic svg{
  width: 16px;
  height: 16px;
}

/* Remove the second line to reduce clutter */
.contact-txt small{
  display: none;
}

.contact-row{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top: 1rem;
}

.contact-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem 1.15rem;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--card);
  text-decoration:none;
  color: var(--text);
}

.contact-pill svg{
  width: 90px;
  height: 70px;
  color: var(--accent); /* teal */
}

.contact-pill span{
  color: var(--muted);
  font-weight: 600;
}

.contact-pill:hover{
  border-color: var(--accent2);
}

.contact-pill:hover svg{
  color: var(--accent2); /* yellow on hover */
}

.contact-pill:hover span{
  color: var(--text);
}

.notes-list{
  list-style: none;
  margin-left: 0;
}

.notes-list li{
  padding: .7rem 0;
  border-top: 1px solid var(--border);
}

.notes-list li:first-child{
  border-top: 0;
  padding-top: 0;
}

.note-meta{
  color: var(--muted);
  margin-top: .25rem;
  font-size: .95rem;
}

.lang{
  display:flex;
  align-items:center;
  gap:.4rem;
  margin-left: .4rem;
}

.lang__link{
  color: var(--muted);
  text-decoration: none;
  padding: .2rem .35rem;
  border-radius: 8px;
  border: 1px solid transparent;
}

.lang__link:hover{
  color: var(--text);
  border-color: var(--border);
  background: var(--card);
}

.lang__link.is-active{
  color: var(--text);
  border-color: var(--border);
  background: var(--card);
}

.lang{
  display:flex;
  align-items:center;
  gap:.45rem;
}

.lang__btn{
  width: 2.15rem;
  height: 2.15rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  text-decoration: none;
}

.flag{
  font-size: 1.05rem; /* keeps emoji from being huge */
  line-height: 1;
}

/* Hover / focus */
.lang__btn:hover{
  border-color: var(--accent2);
}

.lang__btn:focus-visible{
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

/* Active language */
.lang__btn.is-active{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Screen-reader only text */
.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;
}