/* ==========================================================================
   Site chrome — fixed header + footer
   Implements the "header_footer" design handoff. Selectors are prefixed `sc-`
   so they never collide with the Webflow classes still used by page bodies.
   ========================================================================== */

:root {
  --sc-blue: #272ccd;
  --sc-blue-dark: #1e22a8;
  --sc-orange: #ff6237;
  --sc-ink: #333333;
  --sc-nav-surface: rgba(255, 255, 255, 0.85);
  --sc-nav-border: rgba(39, 44, 205, 0.16);
  --sc-nav-row-border: rgba(39, 44, 205, 0.12);
  --sc-toggle-border: rgba(39, 44, 205, 0.25);
  --sc-chip-border: rgba(39, 44, 205, 0.3);
  --sc-on-dark: rgba(255, 255, 255, 0.85);
  --sc-legal: rgba(255, 255, 255, 0.8);
  --sc-social-border: rgba(255, 255, 255, 0.3);
  --sc-divider: rgba(255, 255, 255, 0.18);

  --sc-font-mono: "Roboto Mono", monospace;
  --sc-font-body: "Urbanist", sans-serif;

  /* same gutter as the page sections, so the chrome lines up with content */
  --sc-pad-x: clamp(24px, 5vw, 80px);
  --sc-max: 1280px;
  --sc-nav-h: 64px;
}

/* The nav is fixed, so page content is offset by its height. */
body {
  padding-top: var(--sc-nav-h);
}

html {
  scroll-padding-top: var(--sc-nav-h);
}

/* set while the mobile menu is open, so the page cannot scroll behind it */
html.sc-menu-open,
html.sc-menu-open body {
  overflow: hidden;
}

/* ---- header --------------------------------------------------------------- */

.sc-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--sc-nav-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sc-nav-border);
}

.sc-nav *,
.sc-footer * {
  box-sizing: border-box;
}

/* Page sections cap their *content* at 1280 and add the gutter outside it.
   The bar carries its gutter inside the same box, so the cap has to allow for
   it — otherwise the wordmark sits up to 64px inside the page content above
   1280px. */
.sc-nav-row {
  height: var(--sc-nav-h);
  width: 100%;
  max-width: calc(var(--sc-max) + 2 * var(--sc-pad-x));
  margin: 0 auto;
  padding: 0 var(--sc-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.sc-wordmark {
  font-family: var(--sc-font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--sc-blue);
  text-decoration: none;
}

.sc-cursor {
  color: var(--sc-orange);
}

/* Full name in the bar; initials once the bar is sharing space with the
   [menu] toggle. */
.sc-wordmark-short {
  display: none;
}

.sc-links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 30px);
}

.sc-link {
  font-family: var(--sc-font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--sc-ink);
  text-decoration: none;
  padding-bottom: 4px;
  /* the transparent border is always present so hover never shifts layout */
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.sc-link:hover,
.sc-link:focus-visible {
  color: var(--sc-orange);
}

/* "page" on an exact match, "location" on a case study inside /projects */
.sc-link[aria-current] {
  border-bottom-color: var(--sc-orange);
  color: var(--sc-ink);
}

.sc-resume {
  font-family: var(--sc-font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: #ffffff;
  background: var(--sc-orange);
  padding: 9px 16px;
  border-radius: 4px;
  text-decoration: none;
  transition: transform 0.25s ease;
}

.sc-resume:hover,
.sc-resume:focus-visible {
  transform: translateY(-2px);
  color: #ffffff;
}

/* Square outline buttons for the two direct contact routes, sized to match
   the resume button's height so the trio reads as one row. */
.sc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--sc-chip-border);
  border-radius: 4px;
  color: var(--sc-blue);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.25s ease;
}

.sc-icon-btn svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* The LinkedIn mark fills more of its box than the two outline glyphs beside
   it, and reads heavier for being solid, so it draws a little smaller to sit
   at the same optical size. Kept at the same ratio to the other two. */
.sc-icon-linkedin svg {
  width: 12.6px;
  height: 12.6px;
}

.sc-icon-btn:hover,
.sc-icon-btn:focus-visible {
  color: var(--sc-orange);
  border-color: var(--sc-orange);
  transform: translateY(-2px);
}

/* Hover label, matching the tooltip on the homepage hero: blue bubble, mono
   text, a caret under the button. The text is drawn from the aria-label, so
   what a pointer reads and what a screen reader announces are the same string
   and cannot drift. Anchored to the button's right edge rather than centred,
   because the last of the three sits on the page gutter and a centred bubble
   would hang off it.

   Only where there is a pointer to hover with: below 900px these buttons are
   replaced by the ones in the menu panel. */
@media (hover: hover) and (min-width: 901px) {
  .sc-icon-btn {
    position: relative;
  }

  .sc-icon-btn::after,
  .sc-icon-btn::before {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
  }

  .sc-icon-btn::after {
    content: attr(aria-label);
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: max-content;
    max-width: 260px;
    padding: 10px 12px;
    background: var(--sc-blue);
    color: #ffffff;
    border-radius: 6px;
    font-family: var(--sc-font-mono);
    font-size: 11px;
    letter-spacing: 0.6px;
    line-height: 1.4;
    box-shadow: 0 10px 26px rgba(39, 44, 205, 0.28);
    transform: translateY(-4px);
    z-index: 20;
  }

  /* 14 + half of 10 puts the caret on the centre line of a 38px button */
  .sc-icon-btn::before {
    content: "";
    position: absolute;
    top: calc(100% + 5px);
    right: 14px;
    width: 10px;
    height: 10px;
    background: var(--sc-blue);
    transform: rotate(45deg) translateY(-4px);
    z-index: 21;
  }

  .sc-icon-btn:hover::after,
  .sc-icon-btn:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .sc-icon-btn:hover::before,
  .sc-icon-btn:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: rotate(45deg);
  }
}

/* The three call-to-action controls sit in their own group so they share one
   tight gap: the nav's link gap is much wider and would set the resume button
   apart from the two icons beside it. */
.sc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- mobile toggle + panel ------------------------------------------------ */

.sc-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--sc-toggle-border);
  border-radius: 4px;
  min-width: 88px;
  min-height: 44px;
  padding: 0 14px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--sc-font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--sc-blue);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.sc-toggle:hover,
.sc-toggle:focus-visible {
  color: var(--sc-orange);
  border-color: var(--sc-orange);
}

.sc-panel {
  display: none;
  border-top: 1px solid var(--sc-nav-border);
  /* solid, not translucent, so content behind stays legible */
  background: #ffffff;
  padding: 6px var(--sc-pad-x) 22px;
}

/* The open panel is the rest of the screen below the bar, with the routes at
   the top and the actions sitting on the bottom edge. dvh so it does not run
   under the browser's own toolbars, and it scrolls if a short landscape screen
   cannot hold everything. */
.sc-panel.sc-open {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--sc-nav-h));
  height: calc(100dvh - var(--sc-nav-h));
  overflow-y: auto;
}

.sc-panel-link {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--sc-nav-row-border);
  font-family: var(--sc-font-mono);
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--sc-ink);
  text-decoration: none;
}

.sc-panel-link[aria-current] {
  color: var(--sc-orange);
}

.sc-panel-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  /* the gap that pushes the actions to the bottom of the panel */
  margin-top: auto;
  flex: 0 0 auto;
  min-height: 52px;
  background: var(--sc-orange);
  border-radius: 4px;
  font-family: var(--sc-font-mono);
  font-size: 14px;
  letter-spacing: 1px;
  color: #ffffff;
  text-decoration: none;
}

/* the same three buttons as the bar, sharing a row under the CTA */
.sc-panel-contacts {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  margin-top: 10px;
}

.sc-panel-icon {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 1px solid var(--sc-toggle-border);
  border-radius: 4px;
  color: var(--sc-blue);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.sc-panel-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.sc-panel-icon.sc-icon-linkedin svg {
  width: 20px;
  height: 20px;
}

.sc-panel-icon:hover,
.sc-panel-icon:focus-visible {
  color: var(--sc-orange);
  border-color: var(--sc-orange);
}

@media (max-width: 900px) {
  .sc-links {
    display: none;
  }

  .sc-toggle {
    display: inline-flex;
  }

  .sc-wordmark-full {
    display: none;
  }

  .sc-wordmark-short {
    display: inline;
  }
}

/* ---- footer -------------------------------------------------------------- */

.sc-footer {
  background: var(--sc-blue-dark);
  color: #ffffff;
  padding: clamp(40px, 5vw, 60px) var(--sc-pad-x);
}

.sc-footer-grid {
  max-width: var(--sc-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 30px 40px;
  align-items: start;
}

.sc-identity {
  font-family: var(--sc-font-mono);
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
  margin-bottom: 8px;
}

.sc-tagline {
  font-family: var(--sc-font-body);
  font-weight: 300;
  font-size: 17px;
  color: var(--sc-on-dark);
}

.sc-col-label {
  font-family: var(--sc-font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--sc-orange);
  margin-bottom: 14px;
}

.sc-col-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-footer-link {
  font-family: var(--sc-font-mono);
  font-size: 13px;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.sc-footer-link:hover,
.sc-footer-link:focus-visible {
  color: var(--sc-orange);
}

.sc-socials {
  display: flex;
  gap: 12px;
}

.sc-social {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  border: 1px solid var(--sc-social-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease;
}

.sc-social:hover,
.sc-social:focus-visible {
  border-color: var(--sc-orange);
}

.sc-social img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.sc-legal {
  max-width: var(--sc-max);
  margin: 34px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--sc-divider);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  font-family: var(--sc-font-mono);
  font-size: 12px;
  color: var(--sc-legal);
}

.sc-legal-links {
  display: flex;
  gap: 20px;
}

.sc-legal-link {
  color: var(--sc-legal);
  text-decoration: none;
  transition: color 0.2s ease;
}

.sc-legal-link:hover,
.sc-legal-link:focus-visible {
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .sc-link,
  .sc-resume,
  .sc-toggle,
  .sc-social,
  .sc-footer-link {
    transition: none;
  }

  .sc-resume:hover {
    transform: none;
  }
}