/* Minimal, accessible, image-free portfolio styling */

/* ---------- Theme ---------- */
:root{
  /* Primary: teal (AA+ on white for text) */
  --primary: #0F766E;
  --primary-strong: #0B5F59;

  /* Blue-grey ink */
  --ink: #0F172A;         /* slate-900 */
  --muted: #334155;       /* slate-700 */
  --subtle: #475569;      /* slate-600 */

  /* Lines + surfaces */
  --bg: #FFFFFF;
  --line: #CBD5E1;        /* slate-300 */
  --line-strong: #94A3B8; /* slate-400 */
  --callout-border: #0F766E;

  /* Layout */
  --container: 920px;
  --gutter: 20px;

  /* Type */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Focus */
  --focus: #0F766E;
}

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}

a{
  color: var(--primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover{ color: var(--primary-strong); }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  background:#fff;
  border:2px solid var(--focus);
  padding:10px 12px;
  z-index: 9999;
}
.skip-link:focus{
  left: 12px;
  top: 12px;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Prevent background scroll when mobile menu is open */
html.menu-open,
html.menu-open body{
  height: 100%;
  overflow: hidden;
}

/* ---------- Header / Nav ---------- */
header.site-header{
  position: sticky; /* keep sticky as requested */
  top: 0;
  z-index: 1000;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}

.brand{
  font-weight: 650;
  letter-spacing: 0.2px;
  white-space: nowrap;
  text-transform: uppercase;
}
.brand a{
  color: var(--ink);
  text-decoration: none;
}
.brand a:hover{ color: var(--ink); text-decoration: underline; }

nav.primary{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-links{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Desktop top-level links */
.nav-links a{
  color: var(--muted);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 8px;
}
.nav-links a:hover{
  color: var(--ink);
  text-decoration: underline;
}
.nav-links a[aria-current="page"]{
  color: var(--ink);
  text-decoration: underline;
}

/* ---------- Selected Work dropdown (link + arrow) ---------- */
details.nav-dropdown{
  position: relative;
    display: inline-flex;       /* key fix */
  align-items: center;
}

/* Summary shell (never underlined) */
details.nav-dropdown > summary{
  list-style: none;
  padding: 6px 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
details.nav-dropdown > summary::-webkit-details-marker{ display:none; }

/* Parent link */
.nav-parent-link{
  color: var(--muted);
  text-decoration: none;
}

/* Label: underline lives ONLY here */
.nav-parent-link .nav-label{
  text-decoration: none;
}

/* Chevron arrow */
details.nav-dropdown > summary::after{
  content: "▾";
  font-size: 0.85em;
  transform: translateY(1px);
  text-decoration: none;
}

/* Hover/focus underline ONLY when not current */
details.nav-dropdown:not(.is-current) > summary:hover .nav-label,
details.nav-dropdown:not(.is-current) > summary:focus-within .nav-label{
  color: var(--ink);
  text-decoration: underline;
}

/* Current state (set by JS) */
details.nav-dropdown.is-current .nav-parent-link{
  color: var(--ink);
}
details.nav-dropdown.is-current .nav-label{
  text-decoration: underline;
}

/* Dropdown panel */
.dropdown-panel{
   min-width: 360px;     /* give the content room */
  max-width: 440px;     /* prevent it from getting huge */
  display: none;
  position: absolute;
    left: 0;                    /* key fix */
  right: auto;                /* key fix */
  right: 0;
  top: calc(100% + 8px);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 10px;
  z-index: 1000;
}
.dropdown-panel a{
  white-space: normal;  /* allow wrapping */
  line-height: 2.35;    /* more breathing room */
  padding: 10px 12px;
}

.dropdown-panel a + a{
  margin-top: 2px;      /* slight separation between items */
}

details.nav-dropdown:hover .dropdown-panel,
details.nav-dropdown:focus-within .dropdown-panel,
details.nav-dropdown[open] .dropdown-panel{
  display: block;
}

/* Active case study link */
.dropdown-panel a[aria-current="page"]{
  color: var(--ink);
  text-decoration: underline;
}
/* ---------- Mobile hamburger button ---------- */
/* No circle/border, but keep a good tap target */
.menu-toggle{
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* Hamburger icon (CSS-only, no images) */
.hamburger{
  position: relative;
  width: 22px;
  height: 14px;
  display: inline-block;
}
.hamburger::before,
.hamburger::after{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.hamburger::before{ top: 0; }
.hamburger::after{ bottom: 0; }

/* Middle bar uses an inner element so we can fade it */
.hamburger .bar{
  position: absolute;
  left: 0;
  top: 6px;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: opacity 0.2s ease;
}

/* Animate to X when menu is open */
html.menu-open .hamburger::before{
  transform: translateY(6px) rotate(45deg);
}
html.menu-open .hamburger::after{
  transform: translateY(-6px) rotate(-45deg);
}
html.menu-open .hamburger .bar{
  opacity: 0;
}

/* ---------- Mobile menu panel ---------- */
.mobile-menu{
  display: none; /* becomes visible when menu-open */
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.mobile-menu-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px var(--gutter) 18px;
}
.mobile-menu a{
  display:block;
  padding: 10px 8px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 650;
}
.mobile-menu a:hover{
  background: #F8FAFC;
  color: var(--ink);
  text-decoration: underline;
}
.mobile-menu .group-title{
  margin: 10px 0 6px;
  color: var(--subtle);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mobile-menu .close-row{
  display:flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.mobile-close{
  padding: 8px 12px;
  border-radius: 999px;
  border: 2px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  font-weight: 650;
  cursor: pointer;
}
.mobile-close:hover{
  color: var(--ink);
}

/* ---------- Content ---------- */
main{ padding: 36px 0 64px; }

.kicker{
  color: var(--subtle);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
h1{
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
h2{
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
p{
  margin: 0 0 14px;
  color: var(--muted);
  max-width: 72ch;
}
h4 {
  color: var(--primary-strong);
  font-weight: normal;
  font-style: italic;
}
.lede{ color: var(--muted); font-size: 1.06rem; }

.hr{
  border: none;
  border-top: 1px solid var(--line);
  margin: 26px 0;
}

.text-link{
  display: inline-block;
  margin-top: 6px;
  font-weight: 600;
}

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

.card{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  background: #FFFFFF;
}
.card h3{
  margin: 0 0 6px;
  font-size: 1.06rem;
  color: var(--ink);
}
.card p{ margin: 0; }

.work-list{
  display:flex;
  flex-direction: column;
  gap: 0;
}
.work-item{
  padding: 16px 0;
}
.work-item p { font-weight: normal; }
.work-item + .work-item{
  border-top: 1px solid var(--line);
}
.work-item a{
  font-weight: 700;
  text-decoration: none;
}
.work-item a:hover{ text-decoration: underline; }
.work-item .cta{
  display:inline-block;
  margin-top: 6px;
  font-weight: 600;
}

/* ---------- Resume button (primary nav CTA) ---------- */
.resume-btn{
  background-color: none;
  color: var(--primary);
  border: 2px solid var(--primary);
  border-radius: 5px;
  text-decoration: none;
  padding: 4px;
}

.resume-btn:hover{
  background-color: var(--primary-strong);
  border-color: var(--primary-strong);
  color: #FFFFFF;
}
/* ---------- Case study ---------- */
.breadcrumb{
  margin: 0 0 14px;
  color: var(--muted);
}
.label{
  color: var(--subtle);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.tagline{
  color: var(--muted);
  font-size: 1.06rem;
  margin: 0 0 10px;
}
.jump{
  color: var(--muted);
  margin: 10px 0 0;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
}
.jump b{
  color: var(--ink);
  font-weight: 650;
}
.jump a{
  text-decoration: none;
  font-weight: 650;
}
.jump a:hover{ text-decoration: underline; }

.section-title{
  margin-top: 0;
  font-size: 1.15rem;
}

.callout-question{
  border: 2px solid var(--callout-border);
  border-radius: 12px;
  padding: 14px 14px;
  background: #FFFFFF;
  color: var(--primary);
  font-weight: normal;
  letter-spacing: -0.01em;
  max-width: 78ch;
}
.callout-support{
  margin-top: 10px;
  margin-bottom: 0;
}

.bullets{
  margin: 10px 0 0 18px;
  color: var(--muted);
  max-width: 78ch;
}
.bullets li{ margin: 8px 0; }

.bottom-nav{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.bottom-nav a{
  font-weight: 650;
  text-decoration: none;
}
.bottom-nav a:hover{ text-decoration: underline; }

.back-to-top{
  display:inline-block;
  margin-top: 14px;
  font-weight: 650;
  text-decoration: none;
}
.back-to-top:hover{ text-decoration: underline; }

/* ---------- Footer ---------- */
footer{
  border-top: 1px solid var(--line);
  padding: 18px 0 28px;
  color: var(--subtle);
  font-size: 0.95rem;
}
.footer-inner{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.footer-links{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-links a{
  color: var(--subtle);
  text-decoration: none;
}
.footer-links a:hover{ text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 880px){
  /* Layout */
  .grid-3{
    grid-template-columns: 1fr;
  }

  /* Header layout */
  nav.primary{
    align-items: center;
    gap: 8px;
  }

  /* Hide desktop links; show hamburger */
  .nav-links{
    display: none;
  }

  .menu-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Resume button stays visible and aligned */
  .resume-btn{
    padding: 8px 14px;
    line-height: 1;
    font-size: 0.95rem;
  }
  
  .mobile-parent-link + a{
    padding-left: 22px;
    font-weight: 600;
  }

  .mobile-parent-link + a ~ a{
    padding-left: 22px;
    font-weight: 600;
  }
}
  /* Mobile panel visible only when opened */
  html.menu-open .mobile-menu{
    display: block;
  }
}
/* ---------- Print ---------- */
@media print{
  :root{
    --bg: #FFFFFF;
  }

  html{ scroll-behavior: auto; }
  body{
    background: #FFFFFF;
    color: #000000;
  }

  /* Hide navigation + footer chrome for printing */
  header.site-header,
  .skip-link,
  nav.bottom-nav,
  footer{
    display: none !important;
  }

  /* Expand content width and tighten spacing */
  .container{
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  main{
    padding: 0 !important;
  }

  .hr{
    border-top: 1px solid #999 !important;
    margin: 14px 0 !important;
  }

  p, li{
    color: #000 !important;
  }

  a{
    color: #000 !important;
    text-decoration: underline !important;
  }

  /* Show URLs after links in print (useful for PDFs) */
  a[href^="http"]:after{
    content: " (" attr(href) ")";
    font-size: 0.9em;
  }

  /* Keep callout question visible and clean */
  .callout-question{
    border: 2px solid #000 !important;
    page-break-inside: avoid;
  }

  /* Avoid awkward page breaks inside sections/lists */
  section, ul, li{
    page-break-inside: avoid;
  }

  /* Don’t print “Back to top” */
  .back-to-top{
    display: none !important;
  }
}