/* ==========================================================================
   Dylan Kayyem - shared site chrome
   Design tokens, the floating glass navbar, the mobile tab bar, the footer
   and the tooltip. Loaded by every page (portfolio and case studies) ahead
   of that page's own stylesheet so they all share one look.
   ========================================================================== */

:root {
  --text-color: #1a1c20;
  --text-muted: #5b6472;
  --text-faint: #8a93a0;
  --link-color: #2f5fe6;
  --link-hover: #1f46b8;
  --accent-soft: #e6edff;
  --background-color: #f6f7f9;
  --surface: #ffffff;
  --border: #e3e6ea;
  --border-strong: #cfd4db;
  /* Liquid glass surfaces */
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-bg-strong: rgba(255, 255, 255, 0.68);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-edge: rgba(26, 28, 32, 0.07);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.35);
  --glass-blur: blur(22px) saturate(170%);
  --shadow-sm: 0 2px 6px rgba(31, 38, 135, 0.05), 0 10px 30px rgba(31, 38, 135, 0.07);
  --shadow-md: 0 6px 14px rgba(31, 38, 135, 0.08), 0 18px 48px rgba(31, 38, 135, 0.12);
  --glass-fallback: rgba(255, 255, 255, 0.92);
  --glass-solid: #ffffff;
  /* Small controls: pill buttons, chips, icon buttons */
  --control-bg: rgba(255, 255, 255, 0.55);
  --control-bg-hover: rgba(255, 255, 255, 0.78);
  --control-border: rgba(255, 255, 255, 0.85);
  --control-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --control-shadow: 0 2px 8px rgba(31, 38, 135, 0.06);
  --chip-bg: rgba(255, 255, 255, 0.6);
  --chip-border: rgba(255, 255, 255, 0.85);
  --accent-tint: rgba(47, 95, 230, 0.10);
  --accent-ring: rgba(47, 95, 230, 0.22);
  --accent-glow: rgba(47, 95, 230, 0.35);
  --quote-color: rgba(47, 95, 230, 0.16);
  /* The dark "puck" button (Email in the nav) */
  --puck-bg: linear-gradient(180deg, rgba(60, 64, 72, 0.98), rgba(26, 28, 32, 0.98));
  --puck-bg-hover: linear-gradient(180deg, rgba(40, 44, 52, 1), rgba(0, 0, 0, 1));
  --puck-color: #ffffff;
  --puck-border: rgba(255, 255, 255, 0.35);
  --puck-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 12px rgba(26, 28, 32, 0.25);
  /* Form fields */
  --input-bg: rgba(255, 255, 255, 0.55);
  --input-bg-hover: rgba(255, 255, 255, 0.75);
  --input-bg-focus: rgba(255, 255, 255, 0.9);
  --input-border: rgba(255, 255, 255, 0.9);
  --input-shadow: inset 0 1px 2px rgba(26, 28, 32, 0.06);
  --mono-base: #e9edf6;
  --mono-c1: rgba(79, 124, 255, 0.80);
  --mono-c2: rgba(165, 110, 255, 0.62);
  --mono-c3: rgba(45, 196, 184, 0.62);
  --mono-c4: rgba(255, 140, 185, 0.55);
  --mono-glass: rgba(255, 255, 255, 0.40);
  --mono-sheen: rgba(255, 255, 255, 0.34);
  --mono-ink-a: #3d6dff;
  --mono-ink-b: #8257ff;
  --mono-ink-c: #14b1a4;
  --mono-shadow: rgba(26, 28, 32, 0.16);
  --footer-border: rgba(255, 255, 255, 0.8);
  --radius: 24px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --container: 1100px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-gap: clamp(72px, 10vw, 128px);
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

/* The case-study pages keep their own body fonts and resets, so the chrome
   carries everything it needs to render the same everywhere. */
nav,
nav *,
.tabbar,
.tabbar *,
.site-footer,
.site-footer *,
.tip,
.tip * {
  box-sizing: border-box;
}

nav,
.tabbar,
.site-footer,
.tip {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

nav,
.tabbar,
.site-footer {
  font-size: 16px;
  line-height: 1.65;
}

nav a,
.tabbar a,
.site-footer a {
  text-decoration: none;
}

.site-footer p,
.case-study .site-footer p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

@media (prefers-reduced-motion: reduce) {
  nav *,
  .tabbar *,
  .tip {
    transition: none !important;
    animation: none !important;
  }
}

/* Glass surface primitive */
.glass,
.education-section li,
.experience-section li,
.projects-section li,
.skills-section .cells .cell,
.testimony-section .group,
.contact-section .group form,
.resume-frame,
nav {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-edge), var(--shadow-sm);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .education-section li,
  .experience-section li,
  .projects-section li,
  .skills-section .cells .cell,
  .testimony-section .group,
  .contact-section .group form,
  .resume-frame,
  nav {
    background: var(--glass-fallback);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass,
  .education-section li,
  .experience-section li,
  .projects-section li,
  .skills-section .cells .cell,
  .testimony-section .group,
  .contact-section .group form,
  .resume-frame,
  nav {
    background: var(--glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */

nav {
  position: sticky;
  top: 12px;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  height: 64px;
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--container);
  margin: 12px auto clamp(40px, 7vw, 80px);
  padding: 0 10px 0 22px;
  border-radius: var(--radius-pill);
}

nav .left a {
  color: var(--text-color);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

nav .right {
  display: flex;
  align-items: center;
  gap: 4px;
}

nav .right a svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

nav .right a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  transition: background-color 0.15s ease, color 0.15s ease;
}

nav .right a:hover {
  color: var(--text-color);
  background: var(--control-bg-hover);
}

nav .right a:last-child {
  color: var(--puck-color);
  background: var(--puck-bg);
  box-shadow: var(--puck-shadow);
  margin-left: 6px;
  padding: 8px 16px;
}

nav .right a:last-child:hover {
  background: var(--puck-bg-hover);
}

/* Theme toggle (sun / moon) */
nav .right .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 4px;
  padding: 0;
  border-radius: 50%;
  color: var(--text-color);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  box-shadow: var(--control-highlight), 0 0 0 1px var(--glass-edge);
  cursor: pointer;
  font: inherit;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

nav .right .theme-toggle:hover {
  background: var(--control-bg-hover);
}

nav .right .theme-toggle:active {
  transform: scale(0.94);
}

nav .right .theme-toggle svg {
  width: 17px;
  height: 17px;
}

nav .right .theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] nav .right .theme-toggle .icon-sun {
  display: block;
}

:root[data-theme="dark"] nav .right .theme-toggle .icon-moon {
  display: none;
}

/* Case-study pages butt their own hero up against the navbar. Their Webflow
   stylesheets also pin <body> to one viewport tall, which would stop the
   sticky navbar once you scroll past that; let the body size to its content. */
.case-study nav {
  margin-bottom: 0;
}

.case-study body {
  height: auto;
  min-height: 100%;
}

/* Clip (not hide) sideways overflow from the old 100vw Webflow blocks: clip
   keeps html/body out of scroll-container territory, so the sticky navbar
   still works and phones don't widen the viewport to fit the spill. */
html.case-study,
.case-study body {
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--footer-border);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  padding: 28px var(--gutter) 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  max-width: var(--container);
  margin: 0 auto;
  font-size: 14px;
  color: var(--text-muted);
}

.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.site-footer .footer-links a {
  color: var(--text-muted);
  font-weight: 500;
}

.site-footer .footer-links a:hover {
  color: var(--text-color);
}

/* --------------------------------------------------------------------------
   Mobile tab bar (hidden on larger screens)
   -------------------------------------------------------------------------- */

.tabbar {
  display: none;
}

/* --------------------------------------------------------------------------
   Tooltip (one shared glass bubble, driven by tooltip.js)
   -------------------------------------------------------------------------- */

.tip {
  position: fixed;
  z-index: 200;
  max-width: 240px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-edge), var(--shadow-md);
  color: var(--text-color);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.tip.below {
  transform: translateY(-4px) scale(0.98);
}

.tip.show {
  opacity: 1;
  transform: none;
}

.tip .tip-title {
  display: block;
  font-weight: 600;
}

.tip .tip-sub {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 1px;
}

.tip .tip-hint {
  display: block;
  color: var(--link-color);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 4px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tip {
    background: var(--glass-fallback);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .tip {
    background: var(--glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

[data-tip] {
  -webkit-tap-highlight-color: transparent;
}

.stack img[data-tip],
.collegemark[data-tip],
.wordmark[data-tip],
.logo[data-tip],
.hd[data-tip] {
  cursor: default;
}

/* ==========================================================================
   Dark theme
   Follows the system setting unless the visitor picks one with the toggle,
   which stores data-theme on <html>.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --text-color: #eef0f4;
  --text-muted: #a7afbb;
  --text-faint: #7d8694;
  --link-color: #8ab0ff;
  --link-hover: #b3caff;
  --accent-soft: rgba(138, 176, 255, 0.16);
  --background-color: #0c0e13;
  --surface: #151821;
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --glass-bg: rgba(24, 28, 38, 0.55);
  --glass-bg-strong: rgba(34, 39, 52, 0.72);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-edge: rgba(0, 0, 0, 0.35);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  --glass-blur: blur(24px) saturate(150%);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25), 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 14px rgba(0, 0, 0, 0.30), 0 18px 48px rgba(0, 0, 0, 0.45);
  --glass-fallback: rgba(21, 24, 33, 0.95);
  --glass-solid: #151821;
  --control-bg: rgba(255, 255, 255, 0.08);
  --control-bg-hover: rgba(255, 255, 255, 0.15);
  --control-border: rgba(255, 255, 255, 0.16);
  --control-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --control-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  --chip-bg: rgba(255, 255, 255, 0.08);
  --chip-border: rgba(255, 255, 255, 0.14);
  --accent-tint: rgba(138, 176, 255, 0.14);
  --accent-ring: rgba(138, 176, 255, 0.30);
  --accent-glow: rgba(47, 95, 230, 0.45);
  --quote-color: rgba(138, 176, 255, 0.18);
  --puck-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(222, 227, 236, 0.98));
  --puck-bg-hover: linear-gradient(180deg, #ffffff, #cfd6e3);
  --puck-color: #1a1c20;
  --puck-border: rgba(255, 255, 255, 0.6);
  --puck-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 12px rgba(0, 0, 0, 0.35);
  --input-bg: rgba(255, 255, 255, 0.06);
  --input-bg-hover: rgba(255, 255, 255, 0.10);
  --input-bg-focus: rgba(255, 255, 255, 0.12);
  --input-border: rgba(255, 255, 255, 0.14);
  --input-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  --mono-base: #181d2e;
  --mono-c1: rgba(96, 136, 255, 0.78);
  --mono-c2: rgba(160, 108, 255, 0.62);
  --mono-c3: rgba(44, 186, 176, 0.58);
  --mono-c4: rgba(255, 120, 175, 0.44);
  --mono-glass: rgba(22, 26, 38, 0.26);
  --mono-sheen: rgba(255, 255, 255, 0.16);
  --mono-ink-a: #86aaff;
  --mono-ink-b: #bb9cff;
  --mono-ink-c: #5fe4d3;
  --mono-shadow: rgba(0, 0, 0, 0.45);
  --footer-border: rgba(255, 255, 255, 0.10);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --text-color: #eef0f4;
  --text-muted: #a7afbb;
  --text-faint: #7d8694;
  --link-color: #8ab0ff;
  --link-hover: #b3caff;
  --accent-soft: rgba(138, 176, 255, 0.16);
  --background-color: #0c0e13;
  --surface: #151821;
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --glass-bg: rgba(24, 28, 38, 0.55);
  --glass-bg-strong: rgba(34, 39, 52, 0.72);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-edge: rgba(0, 0, 0, 0.35);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  --glass-blur: blur(24px) saturate(150%);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25), 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 14px rgba(0, 0, 0, 0.30), 0 18px 48px rgba(0, 0, 0, 0.45);
  --glass-fallback: rgba(21, 24, 33, 0.95);
  --glass-solid: #151821;
  --control-bg: rgba(255, 255, 255, 0.08);
  --control-bg-hover: rgba(255, 255, 255, 0.15);
  --control-border: rgba(255, 255, 255, 0.16);
  --control-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --control-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  --chip-bg: rgba(255, 255, 255, 0.08);
  --chip-border: rgba(255, 255, 255, 0.14);
  --accent-tint: rgba(138, 176, 255, 0.14);
  --accent-ring: rgba(138, 176, 255, 0.30);
  --accent-glow: rgba(47, 95, 230, 0.45);
  --quote-color: rgba(138, 176, 255, 0.18);
  --puck-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(222, 227, 236, 0.98));
  --puck-bg-hover: linear-gradient(180deg, #ffffff, #cfd6e3);
  --puck-color: #1a1c20;
  --puck-border: rgba(255, 255, 255, 0.6);
  --puck-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 12px rgba(0, 0, 0, 0.35);
  --input-bg: rgba(255, 255, 255, 0.06);
  --input-bg-hover: rgba(255, 255, 255, 0.10);
  --input-bg-focus: rgba(255, 255, 255, 0.12);
  --input-border: rgba(255, 255, 255, 0.14);
  --input-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  --mono-base: #181d2e;
  --mono-c1: rgba(96, 136, 255, 0.78);
  --mono-c2: rgba(160, 108, 255, 0.62);
  --mono-c3: rgba(44, 186, 176, 0.58);
  --mono-c4: rgba(255, 120, 175, 0.44);
  --mono-glass: rgba(22, 26, 38, 0.26);
  --mono-sheen: rgba(255, 255, 255, 0.16);
  --mono-ink-a: #86aaff;
  --mono-ink-b: #bb9cff;
  --mono-ink-c: #5fe4d3;
  --mono-shadow: rgba(0, 0, 0, 0.45);
  --footer-border: rgba(255, 255, 255, 0.10);
}

/* Theme-specific artwork: monochrome logos ship a light variant for dark mode */
img.dark-only {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.light-only {
    display: none;
  }
  :root:not([data-theme="light"]) img.dark-only {
    display: block;
  }
}

:root[data-theme="dark"] img.light-only {
  display: none;
}

:root[data-theme="dark"] img.dark-only {
  display: block;
}

/* --------------------------------------------------------------------------
   Mobile: icon-only navbar, bottom tab bar, stacked footer
   -------------------------------------------------------------------------- */

@media (max-width: 740px) {
  nav {
    top: 8px;
    height: 56px;
    width: calc(100% - 2 * var(--gutter));
    margin-top: 8px;
    padding: 0 6px 0 16px;
  }

  nav .right {
    gap: 6px;
  }

  nav .right a {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-color);
    background: var(--control-bg);
    border: 1px solid var(--control-border);
    box-shadow: var(--control-highlight), 0 0 0 1px var(--glass-edge);
  }

  nav .right .theme-toggle {
    width: 38px;
    height: 38px;
    margin-left: 0;
  }

  nav .right a svg {
    width: 18px;
    height: 18px;
  }

  nav .right a span {
    display: none;
  }

  nav .right a:last-child {
    margin-left: 0;
    padding: 0;
    color: var(--puck-color);
    border-color: var(--puck-border);
  }

  body {
    padding-bottom: 96px;
  }

  .tabbar {
    position: fixed;
    top: auto;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    height: auto;
    width: min(420px, calc(100% - 2 * var(--gutter)));
    max-width: none;
    margin: 0;
    padding: 6px;
    border-radius: var(--radius-pill);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-edge), var(--shadow-md);
  }

  .tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 52px;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    transition: color 0.15s ease, background-color 0.15s ease;
  }

  .tabbar a svg {
    width: 21px;
    height: 21px;
  }

  .tabbar a.active {
    color: var(--link-color);
    background: var(--control-bg-hover);
    box-shadow: var(--control-highlight), 0 0 0 1px var(--glass-edge), var(--control-shadow);
  }

  .site-footer {
    padding-bottom: 20px;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 32px;
  }
}