/*
Theme Name:  Frank Portfolio
Theme URI:   https://www.dutchmonkey.com/
Author:      Frank D. Strack
Description: A clean, minimal portfolio theme showcasing personal projects.
Version:     1.0.3
License:     GNU General Public License v2 or later
Tags:        portfolio, one-page, clean, minimal
*/

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-bg:       #ffffff;
  --color-text:     #1a1a1a;
  --color-muted:    #5f6368;
  --color-accent:   #3663af;
  --color-border:   #e5e7eb;
  --color-card-bg:  #f9fafb;
  --font-sans:      'Inter', system-ui, -apple-system, sans-serif;
  --max-width:      1100px;
  --radius:         10px;
}

html  { font-size: 16px; scroll-behavior: smooth; }

body  {
  font-family: var(--font-sans);
  background:  var(--color-bg);
  color:       var(--color-text);
  line-height: 1.6;
}

a           { color: var(--color-accent); text-decoration: none; }
a:hover     { text-decoration: underline; }
img         { max-width: 100%; display: block; }

/* ============================================================
   Layout
   ============================================================ */
.container {
  max-width: var(--max-width);
  margin:    0 auto;
  padding:   0 2rem;
}

/* ============================================================
   Site Header — sticky white bar, shrinks on scroll
   ============================================================ */
.site-header {
  position:      sticky;
  top:           0;
  height:        150px;
  background:    #ffffff;
  border-bottom: 1px solid var(--color-border);
  z-index:       200;
  padding:       0 2rem;
  display:       flex;
  align-items:   center;
  transition:    height 0.3s ease;
}

.site-header--shrunk { height: 70px; }

/* Custom logo */
.custom-logo-link { display: block; line-height: 0; }

.custom-logo {
  height:     125px;
  width:      auto;
  max-width:  400px;
  transition: height 0.3s ease;
}

.site-header--shrunk .custom-logo { height: 52px; }

/* Fallback site name */
.site-title-text {
  font-size:      1.5rem;
  font-weight:    700;
  color:          var(--color-text);
  letter-spacing: 0.01em;
}
.site-title-text:hover { text-decoration: none; opacity: 0.75; }

/* ============================================================
   Navigation
   ============================================================ */
.site-nav { margin-left: auto; }

.nav-menu {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  gap:        0.5rem;
}

.nav-item--dropdown { position: relative; }

.nav-toggle {
  display:     inline-flex;
  align-items: center;
  gap:         0.3rem;
  background:  none;
  border:      none;
  cursor:      pointer;
  font-family: var(--font-sans);
  font-size:   0.9rem;
  font-weight: 600;
  color:       var(--color-text);
  padding:     0.5rem 0.875rem;
  border-radius: 6px;
  transition:  background 0.15s ease, color 0.15s ease;
}

.nav-toggle:hover { background: var(--color-card-bg); color: #db4b26; }

.nav-arrow {
  width:       14px;
  height:      14px;
  stroke:      currentColor;
  stroke-width: 2.5;
  fill:        none;
  flex-shrink: 0;
  transition:  transform 0.2s ease;
}

.nav-item--dropdown.is-open .nav-arrow { transform: rotate(180deg); }

/* Dropdown */
.dropdown-menu {
  display:       none;
  position:      absolute;
  top:           calc(100% + 6px);
  right:         0;
  background:    #ffffff;
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow:    0 8px 24px rgba(0, 0, 0, 0.1);
  min-width:     240px;
  list-style:    none;
  padding:       0;
  margin:        0;
  overflow:      hidden;
  z-index:       300;
}

.nav-item--dropdown.is-open .dropdown-menu { display: block; }

.dropdown-menu li + li { border-top: 1px solid var(--color-border); }

.dropdown-menu a {
  display:      block;
  padding:      0.75rem 1.25rem;
  font-size:    0.875rem;
  font-weight:  500;
  color:        var(--color-text);
  transition:   background 0.12s ease, color 0.12s ease;
}

.dropdown-menu a:hover {
  background:      var(--color-card-bg);
  color:           #db4b26;
  text-decoration: none;
}

/* Project cards need scroll-margin-top so the sticky header doesn't cover them */
.project-card { scroll-margin-top: 80px; }

/* ============================================================
   WordPress Admin Bar offsets
   ============================================================ */
/* Admin bar is 32px tall on desktop, 46px on mobile */
.admin-bar .site-header        { top: 32px; }
.admin-bar .project-card       { scroll-margin-top: 112px; }

@media screen and (max-width: 782px) {
  .admin-bar .site-header      { top: 46px; }
  .admin-bar .project-card     { scroll-margin-top: 126px; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position:    relative;
  min-height:  45vh;
  display:     flex;
  align-items: center;
  background:  #0f172a;
  overflow:    hidden;
}

.hero-bg {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
  opacity:             0.4;
}

.hero-content {
  position: relative;
  z-index:  2;
  padding:  2.5rem 2rem;
  width:    100%;
}

/* Two-column layout: text | headshot */
.hero-inner {
  display:     flex;
  align-items: center;
  gap:         3.5rem;
}

.hero-text { flex: 1; min-width: 0; }

.hero-eyebrow {
  font-size:      0.8rem;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          #db4b26;
  margin-bottom:  0.875rem;
}

.hero-title {
  font-size:     clamp(2rem, 4.5vw, 3.25rem);
  font-weight:   700;
  color:         #ffffff;
  line-height:   1.1;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size:   1.05rem;
  color:       rgba(255, 255, 255, 0.7);
  line-height: 1.75;
}

/* Headshot */
.hero-photo { flex-shrink: 0; }

.hero-photo img {
  width:         200px;
  height:        200px;
  object-fit:    cover;
  border-radius: 50%;
  border:        3px solid #db4b26;
  display:       block;
}

/* Placeholder shown when no headshot is uploaded */
.hero-photo-placeholder {
  width:         200px;
  height:        200px;
  border-radius: 50%;
  border:        2px dashed rgba(255, 255, 255, 0.25);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     0.75rem;
  font-weight:   600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:         rgba(255, 255, 255, 0.35);
  text-align:    center;
  padding:       1rem;
  line-height:   1.5;
}

/* ============================================================
   About
   ============================================================ */
.about {
  padding:       5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.about-inner { max-width: 100%; }

.section-label {
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-accent);
  margin-bottom:  1rem;
}

.about-bio {
  font-size:   1.125rem;
  color:       var(--color-muted);
  line-height: 1.85;
}

.social-links {
  display:     flex;
  gap:         0.75rem;
  margin-top:  1.25rem;
  width:       fit-content;
  align-items: center;
}

.social-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  border:          1.5px solid var(--color-border);
  color:           var(--color-accent);
  transition:      border-color 0.15s ease, background 0.15s ease;
}

.social-icon:hover {
  text-decoration: none;
  border-color:    var(--color-accent);
  background:      #eaf0f9;
}

.social-icon svg {
  width:       18px;
  height:      18px;
  fill:        var(--color-accent);
  flex-shrink: 0;
}

/* ============================================================
   Projects
   ============================================================ */
.projects { padding: 5rem 0 6rem; }

.projects-header          { margin-bottom: 3rem; }
.projects-header h2       { font-size: 1.75rem; font-weight: 700; margin-top: 0.5rem; }

.projects-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   1.75rem;
}

/* ============================================================
   Project Card
   ============================================================ */
.project-card {
  background:     var(--color-card-bg);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius);
  overflow:       hidden;
  transition:     box-shadow 0.2s ease, transform 0.2s ease;
  display:        flex;
  flex-direction: column;
  position:       relative;
}

/* Invisible overlay that makes the whole card clickable */
.card-overlay-link {
  position: absolute;
  inset:    0;
  z-index:  2;
}

/* Visible link sits above the overlay so it still works independently */
.project-link {
  position: relative;
  z-index:  3;
}

.project-card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.project-card-thumb {
  aspect-ratio: 16 / 9;
  overflow:     hidden;
  flex-shrink:  0;
}

.project-card-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.project-card-thumb .thumb-placeholder {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       3rem;
}

.project-card--game    .thumb-placeholder { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%); }
.project-card--space   .thumb-placeholder { background: linear-gradient(135deg, #0c0a1e 0%, #1a1040 100%); }
.project-card--cycling .thumb-placeholder { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); }
.project-card--music   .thumb-placeholder { background: linear-gradient(135deg, #1a0a0a 0%, #3d1515 100%); }

.project-card-body {
  padding:        1.5rem;
  display:        flex;
  flex-direction: column;
  flex:           1;
}

.project-tag {
  display:        inline-block;
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-accent);
  background:     #eaf0f9;
  padding:        0.2rem 0.6rem;
  border-radius:  4px;
  margin-bottom:  0.875rem;
  align-self:     flex-start;
}

.project-card-body h3 {
  font-size:     1.1rem;
  font-weight:   700;
  margin-bottom: 0.625rem;
  color:         var(--color-text);
}

.project-card-body p {
  font-size:     0.9375rem;
  color:         var(--color-muted);
  line-height:   1.7;
  margin-bottom: 1.25rem;
  flex:          1;
}

.project-link {
  display:     inline-flex;
  align-items: center;
  gap:         0.35rem;
  font-size:   0.875rem;
  font-weight: 600;
  color:       var(--color-accent);
  transition:  gap 0.15s ease;
  align-self:  flex-start;
}

.project-link:hover  { text-decoration: none; gap: 0.55rem; }
.project-link::after { content: '→'; }

/* ============================================================
   Site Footer
   ============================================================ */
.site-footer {
  padding:    2.5rem 0;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size:  0.875rem;
  color:      var(--color-muted);
}

/* ============================================================
   Responsive — Tablet (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  .projects-grid { grid-template-columns: 1fr; }

  .hero-inner {
    flex-direction: column-reverse;
    gap:            2rem;
    text-align:     center;
  }

  .hero-photo img,
  .hero-photo-placeholder { width: 140px; height: 140px; }
}

/* ============================================================
   Responsive — Mobile (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  .container          { padding: 0 1.25rem; }
  .site-header        { height: 90px; padding: 0 1.25rem; }
  .site-header--shrunk { height: 56px; }
  .custom-logo        { height: 70px; }
  .site-header--shrunk .custom-logo { height: 44px; }
  .nav-toggle         { font-size: 0.8rem; padding: 0.4rem 0.6rem; }
  .hero-content       { padding: 2rem 1.25rem; }
  .hero-subtitle      { font-size: 1rem; }
  .about              { padding: 3rem 0; }
  .about p            { font-size: 1rem; }
  .projects           { padding: 3rem 0 4rem; }
  .projects-header h2 { font-size: 1.4rem; }
  .project-card-body  { padding: 1.25rem; }
}