/* TOKENS */
:root { --bg:#2c3440; --surface:#616161; --surface-2:#3d4858; --s_menue:#7287a3; --ink:#e8e4dc; --ink-muted:#9aaa9e; --teal:#02D0CD; --teal-dark:#01b0ae; --border:rgba(255,255,255,0.09); --radius:5px; --radius-card:16px; --font-head:'DM Serif Display',Georgia,serif; --font-body:'DM Sans',system-ui,sans-serif; --shadow-card:0 10px 30px rgba(0,0,0,0.3); --transition:0.2s ease; }
body.light { --bg:#f2f0ec; --surface:#e8e4dd; --surface-2:#e8e4dc; --s_menue:#e8e4dd; --ink:#1a1a18; --ink-muted:#5a5a55; --teal:#019997; --teal-dark:#017a78; --border:#d4cfc6; }

/* RESET & BASE */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--font-body); background:var(--bg); color:var(--ink); font-size:16px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--teal); }
img { display:block; max-width:100%; }
.container { max-width:1100px; margin-inline:auto; padding-inline:20px; }

/* HERO */
.site-hero { background:var(--bg); padding-block:0 16px; margin-top:5px; border-bottom:0 solid var(--border); }
.hero-row { display:flex; align-items:center; margin-top:15px; justify-content:space-between; gap:16px; }
.site-hero h1 { font-family:var(--font-head); font-size:clamp(24px,4vw,38px); font-weight:400; line-height:1.1; }
.subtitle { color:var(--teal); font-size:12px; font-weight:500; letter-spacing:0.06em; margin-top:4px; }
.hero-actions { display:flex; align-items:center; gap:10px; }
.hero-logo img { width:110px; height:64px; border-radius:4px; opacity:0.85; transition:opacity var(--transition); }
.hero-logo img:hover { opacity:1; }

/* THEME TOGGLE */
.theme-toggle { display:flex; align-items:center; gap:5px; padding:3px 12px; background:none; border:1px solid var(--border); border-radius:20px; color:var(--ink-muted); font-family:var(--font-body); font-size:11px; font-weight:500; cursor:pointer; transition:background var(--transition),color var(--transition),border-color var(--transition); }
.theme-toggle:hover { background:var(--teal); color:#fff; border-color:var(--teal); }

/* NAV TABS */
.project-tabs { background:var(--surface-2); margin-top:15px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.project-tabs .container { display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding-block:3px; }
.label { font-size:11px; font-weight:600; color:var(--teal); text-transform:uppercase; letter-spacing:0.07em; white-space:nowrap; }
.tabs-list { list-style:none; display:flex; gap:2px; flex-wrap:wrap; padding:0; margin:0; }
.tabs-list li { position:relative; }
.tabs-list a { display:inline-block; padding:6px 12px; font-size:12px; font-weight:500; color:var(--ink-muted); border-bottom:2px solid transparent; transition:color var(--transition),border-color var(--transition); }
.tabs-list a:hover { color:var(--ink); border-color:var(--teal); }
.tabs-list li.current a { color:var(--ink); font-weight:400; border-bottom:2px solid var(--teal); }
.tabs-list a.active { color:#4da39c; font-weight:600; border-bottom:2px solid #4da39c; }

/* SUBMENU */
.arrow { font-size:0.7em; margin-left:4px; }
.tabs-list li.has-submenu { position:relative; }
.tabs-list li.has-submenu .arrow { transition:transform 0.3s; }
.tabs-list li.has-submenu:hover .arrow { transform:rotate(180deg); }
.submenu { list-style:none; position:absolute; top:100%; left:0; background:var(--s_menue); padding:6px 0; margin:0; min-width:180px; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.15); opacity:0; transform:translateY(-8px); pointer-events:none; transition:all 0.25s ease; z-index:100; }
.submenu li a {
  display:block;
  padding:8px 14px;
  font-size:12px;
  color:var(--ink);
  border-bottom:1px solid var(--teal); /* add this */
  transition:background 0.2s,color 0.2s;
}
.submenu li a:hover,.submenu li a.active { background:var(--teal); color:#fff; font-weight:600; }
.has-submenu:hover .submenu,.has-submenu.submenu-open .submenu { opacity:1; transform:translateY(0); pointer-events:auto; }

/* optional: remove border from last item */
.submenu li:last-child a {
  border-bottom:none;
}

@media (max-width:768px) {
  .has-submenu .submenu {
    position:static;
    transform:none;
    opacity:1;
    pointer-events:auto;
    background:var(--s_menue); /* 👈 force submenu background */
    padding:6px 0;
    display:none;
    border-radius:6px; /* optional: keep same look */
  }

  .has-submenu.submenu-open .submenu {
    display:block;
  }
}