/* Static site recreation of johnpickensboyd.com */
/* Layout based on Carbonmade framework structure */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #000;
  color: var(--color, #c1c1c1);
  font-family: var(--font-family, 'National Park'), sans-serif;
  font-size: 60%;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link-color, #fff); text-decoration: none; }
a:hover { opacity: 0.8; }

img { max-width: 100%; height: auto; display: block; }

/* === Page Layout === */
.page { display: flex; min-height: 100vh; }
.page.sidenaved { padding-left: 340px; }

/* === Side Navigation === */
.navigation.sidenav {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 340px; z-index: 100;
  display: flex; flex-direction: column;
  background: #000;
  overflow-y: auto;
  padding: 40px 30px;
}
.navigation.sidenav header { flex-shrink: 0; }
.navigation.sidenav header h1 {
  font-family: var(--font-family, 'National Park'), sans-serif;
  font-weight: 800; margin-bottom: 30px;
}
.navigation.sidenav nav {
  flex: 1; overflow-y: auto; min-height: 0;
}
.navigation.sidenav nav a {
  display: block; padding: 3px 0;
  color: var(--link-color, #a3a3a3);
  font-size: 0.85em;
}
.navigation.sidenav nav a.project_link {
  font-size: 0.82em;
}
.navigation.sidenav nav hr {
  border: none; border-top: 1px solid #333; margin: 10px 0;
}
.navigation.sidenav footer {
  flex-shrink: 0; margin-top: 30px;
  color: #666; font-size: 0.85em;
}
.hamburger { display: none; }

/* === Main Content === */
.guts { flex: 1; min-width: 0; }
.content.blocks { padding: 0 40px; }

/* === Thumbnail Grid (Homepage) === */
.block.portfolio.thumbs { padding: 40px 0 80px; }
.block.portfolio.thumbs .grid {
  display: grid;
  grid-auto-columns: 1fr;
  width: 100%;
}
.thumb.box {
  display: block; position: relative; overflow: hidden;
  background: #111;
}
.thumb.box picture { display: block; }
.thumb.box img {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; top: 0; left: 0;
}
.thumb.box .overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.11);
  transition: background 0.3s;
}
.thumb.box:hover .overlay { background: rgba(0,0,0,0.35); }
.thumb.box .content.text {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px;
}
.thumb.box h3 {
  color: #fff; font-weight: 800;
  font-size: clamp(0.6em, var(--font-size, 1.338em), 1.8vw);
}
.grid-item.floating { display: block; }

/* === Project Page === */
.block.framed {
  padding: 36px 0;
  position: relative;
}
.block.framed .background {
  position: absolute; inset: 0; opacity: 0.15;
  pointer-events: none;
}
.block.framed > .content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative; z-index: 1;
}
.block.framed .col-1 { padding-right: 30px; }
.block.framed .col-2 { grid-column: span 2; }
.block.framed .text p { margin: 0; }

.block.no-padding { padding: 0 !important; }
.block.fluid { width: 100%; }
.block.fluid .media { width: 100%; }
.block.fluid .carbon-image { width: 100%; display: block; }
.block.fluid .carbon-image img { width: 100%; height: auto; }
.block.fluid .pdf { width: 100%; }
.block.fluid .pdf img { width: 100%; height: auto; }

.caption-wrapper { padding: 10px 0; }
.caption { font-size: 1.4em !important; line-height: 1.5em; color: var(--color); }

/* === Block spacing === */
.block { padding-top: 0; padding-bottom: 0; }
.block + .block { margin-top: 0; }

/* === Resume page === */
.block.intro > .content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.block.intro .container.col-1 { grid-column: span 1; padding-right: 20px; }
.block.intro .container.col-2 { grid-column: span 3; }

/* === Typography helpers === */
.text h1, .text h2, .text h3, .text h4, .text h5, .text h6 {
  color: var(--accent-color, #ffe9bc); font-weight: 800;
}
.text h5 em { font-style: italic; }
.text p { margin-bottom: 0.5em; line-height: 1.5; }
.text ul, .text ol { padding-left: 1.2em; margin-bottom: 0.5em; }
.text li { line-height: 1.6; }

/* === Mobile === */
@media (max-width: 900px) {
  .page.sidenaved { padding-left: 0; flex-direction: column; }
  .navigation.sidenav {
    position: relative; width: 100%; height: auto;
    padding: 20px;
    flex-direction: row; flex-wrap: wrap;
  }
  .navigation.sidenav header { width: 100%; }
  .navigation.sidenav nav { display: none; }
  .navigation.sidenav nav.open { display: block; width: 100%; }
  .hamburger { display: block; position: absolute; top: 20px; right: 20px; cursor: pointer; }
  .guts { padding-top: 0; }
  .content.blocks { padding: 0 15px; }
  
  .block.framed > .content {
    grid-template-columns: 1fr;
  }
  .block.framed .col-1, .block.framed .col-2 { grid-column: span 1; padding-right: 0; }
  .block.framed .col-1 { margin-bottom: 20px; }

  .block.intro > .content {
    grid-template-columns: 1fr;
  }
  .block.intro .container.col-1 {
    grid-column: span 1; padding-right: 0; margin-bottom: 10px;
  }
  .block.intro .container.col-2 { grid-column: span 1; }

  .block.portfolio.thumbs .content.text { padding: 10px; }
}

/* === Fix for carbon-image wrapper === */
.carbon-image { position: relative; display: block; }
.carbon-image img { position: relative !important; width: 100% !important; height: auto !important; }

/* === SVG placeholder removal === */
svg.placeholder { display: none; }

/* === Branding === */
.branding { display: none; }

/* === Scrollable nav fix === */
nav.scrollable { overflow-y: auto; }