/*
Theme Name: Nathan Devery Portfolio
Theme URI: https://nathandevery.com
Author: Nathan Devery
Description: Custom one-page portfolio theme with a video hero banner and an admin-managed video gallery (Gallery Videos custom post type).
Version: 2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jordan-voss
*/

/* ---------- tokens ---------- */
:root{
  --paper: #EFF1EA;
  --paper-raised: #E6E9E0;
  --ink: #16181C;
  --ink-soft: #4B4F55;
  --ink-faint: #8A8E90;
  --line: rgba(22,24,28,0.14);
  --accent: #4655A8;
  --accent-ink: #F3F4FF;
  --gold: #F0AF00;

  --serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1120px;
  --gap: 24px;
}

/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
/* Anchor targets land below the sticky header, not hidden behind it */
#gallery, #contact{ scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
p{ margin: 0; }
a{ color: inherit; }
ul{ margin: 0; padding: 0; list-style: none; }
dl{ margin: 0; }

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  z-index: 100;
}
.skip-link:focus{ left: 16px; top: 16px; }

a:focus-visible,
button:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(239,241,234,0.86);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 6px;
  padding: 14px 0;
}
.wordmark{
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
}
.wordmark .tagline{
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-faint);
  white-space: nowrap;
}
@media (max-width: 640px){
  .wordmark .tagline{ display: none; }
}
.main-nav{ display: flex; flex-wrap: wrap; gap: 20px 28px; }
.main-nav a{
  text-decoration: none;
  font-size: 17px;
  color: var(--ink-soft);
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease;
}
.main-nav a:hover{ color: var(--ink); border-color: var(--ink); }

/* ---------- hero ---------- */

/* Screen-reader/SEO-only heading — kept for document structure and search
   engines even though only the "Watch the full reel" button is visible. */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* reveal animation, one time on load */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  animation: reveal-up 700ms cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: 200ms;
}
@keyframes reveal-up{
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; animation: none; }
}

/* ---------- footer ---------- */
.site-footer{
  background: var(--ink);
  color: var(--paper);
  padding: 88px 0 40px;
}

/* ---------- responsive ---------- */
@media (max-width: 520px){
  .main-nav{ gap: 18px; }
  .wrap{ padding: 0 20px; }
}

/* ---------- video gallery ---------- */
.gallery{
  padding: 96px 0;
  border-top: 1px solid var(--line);
}
/* Wider than the standard content width, so the thumbnails can run bigger
   (~30% larger) while staying 4 columns wide. */
.gallery > .wrap{ max-width: 1460px; }

.gallery-head{ max-width: 56ch; margin-bottom: 32px; }
.gallery-head h2{ font-size: 30px; margin-bottom: 12px; }
.gallery-head p{ color: var(--ink-soft); font-size: 16px; }

.filter-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.filter-tab{
  font-family: var(--sans);
  font-size: 14px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 9px 16px;
  border-radius: 20px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.filter-tab:hover{ border-color: var(--ink); color: var(--ink); }
.filter-tab.is-active{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* "Request a Quote" — a call to action among the filter pills, not a filter */
.filter-tab-cta{
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  margin-left: 4px;
}
.filter-tab-cta:hover{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.video-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.video-card{
  display: block;
  font-family: var(--sans);
  color: var(--ink);
}
.video-card[hidden]{ display: none; }

.video-thumb-btn{
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.video-thumb{
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-raised);
}
.video-thumb svg{ width: 100%; height: 100%; display: block; }

.play-badge{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms ease, background 160ms ease;
}
.play-badge svg{ width: 20px; height: 20px; fill: var(--ink); }
.video-thumb-btn:hover .play-badge,
.video-thumb-btn:focus-visible .play-badge{ transform: scale(1.08); background: #ffffff; }

.video-meta{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 14px 2px 0;
  text-decoration: none;
  color: inherit;
}
.video-meta:hover .video-title{ color: var(--accent); }
.video-title{ font-size: 15px; font-weight: 500; transition: color 160ms ease; }
.video-tag{ font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }

/* ---------- lightbox ---------- */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox[hidden]{ display: none; }
.lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15,16,18,0.86);
}
.lightbox-panel{
  position: relative;
  width: 100%;
  max-width: 1150px;
  z-index: 1;
}
.lightbox-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}
.lightbox-frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.lightbox-title{
  color: var(--paper);
  font-size: 15px;
  margin-top: 16px;
}
.lightbox-close{
  position: absolute;
  top: -44px;
  right: 0;
  background: none;
  border: none;
  color: var(--paper);
  cursor: pointer;
  padding: 8px;
}
.lightbox-close svg{ width: 22px; height: 22px; }

@media (max-width: 1100px){
  .video-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px){
  .video-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .video-grid{ grid-template-columns: 1fr; }
  .lightbox-close{ top: -40px; }
}

/* ---------- hero video banner ---------- */
.hero-banner{
  position: relative;
  height: min(78vh, 720px);
  min-height: 460px;
  overflow: hidden;
  background: var(--ink);
}
.hero-video-wrap{
  position: absolute;
  inset: 0;
}
.hero-video{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;   /* 16:9 oversized to cover any container, like object-fit: cover */
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.hero-video-native{
  /* A native <video> can just use object-fit — no oversizing hack needed. */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: none;
  object-fit: cover;
}
.hero-scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,16,20,0.25) 0%, rgba(15,16,20,0.55) 55%, rgba(15,16,20,0.88) 100%);
}
.hero-banner-content{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 64px;
  z-index: 2;
  display: flex;
  justify-content: center;
}
.hero-watch-link{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  background: var(--accent);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  padding: 18px 36px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: background 160ms ease, transform 160ms ease;
}
.hero-watch-link:hover{
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-2px);
}

@media (max-width: 640px){
  .hero-banner{ height: min(64vh, 560px); }
  .hero-banner-content{ bottom: 36px; }
  .hero-watch-link{ font-size: 16px; padding: 15px 28px; }
}

/* ---------- contact form ---------- */
.footer-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.footer-intro{ max-width: 420px; }
.footer-intro h2{ color: var(--paper); font-size: 30px; margin-bottom: 14px; }
.footer-intro p{ color: rgba(239,241,234,0.72); margin-bottom: 20px; font-size: 16px; }

.footer-form-card{
  background: var(--paper);
  border-radius: 8px;
  padding: 36px;
}
.hp-field{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-row{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.form-row label{
  font-size: 13.5px;
  color: var(--ink-soft);
}
.form-row .required{ color: var(--gold-dark, #B37A00); }
.form-row .optional{ color: var(--ink-faint); font-size: 12.5px; }

.form-row input,
.form-row textarea{
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 11px 13px;
  resize: vertical;
}
.form-row input:focus-visible,
.form-row textarea:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.form-submit{
  font-family: var(--sans);
  font-size: 15px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  cursor: pointer;
  transition: background 160ms ease;
}
.form-submit:hover{ background: var(--accent); }

.form-note{
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ink-soft);
  min-height: 1.2em;
}

@media (max-width: 880px){
  .footer-grid{ grid-template-columns: 1fr; gap: 40px; }
  .footer-form-card{ padding: 28px; }
}

/* ---------- gallery thumbnail images (added for WP featured images) ---------- */
.video-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-empty{
  color: var(--ink-soft);
  font-size: 15px;
  grid-column: 1 / -1;
}

/* ---------- static pages (e.g. Privacy Policy) ---------- */
.static-page{
  padding: 140px 0 100px;
}
.static-page-inner{
  max-width: 760px;
}
.static-page-inner h1{
  font-size: 38px;
  margin-bottom: 32px;
}
.static-page-content{
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.7;
}
.static-page-content h2{
  font-size: 22px;
  color: var(--ink);
  margin: 40px 0 14px;
}
.static-page-content h2:first-child{ margin-top: 0; }
.static-page-content p{ margin-bottom: 16px; }
.static-page-content ul{
  margin: 0 0 16px 0;
  padding-left: 20px;
  list-style: disc;
}
.static-page-content li{ margin-bottom: 6px; }
.static-page-content a{ color: var(--accent); }

/* ---------- footer legal link ---------- */
.footer-legal{
  margin-top: 24px;
}
.footer-legal a{
  color: rgba(239,241,234,0.6);
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px solid rgba(239,241,234,0.3);
  padding-bottom: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}
.footer-legal a:hover{
  color: var(--paper);
  border-color: var(--paper);
}

/* ---------- single video page (/work/...) ---------- */
.single-video{
  padding: 140px 0 100px;
}
.single-video-inner{
  max-width: 1100px;
}
.back-to-gallery{
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  padding: 9px 16px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  margin-bottom: 32px;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.back-to-gallery:hover{
  color: #ffffff;
  border-color: var(--accent);
  background: var(--accent);
}

.single-video-inner h1{
  font-size: 36px;
  margin-bottom: 28px;
}
.single-video-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 32px;
}
.single-video-frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.single-video-description{
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 68ch;
}
.single-video-description p{ margin-bottom: 16px; }

/* Smaller than the big hero-banner CTA — this one sits inline with body
   copy, not over a video banner, so it shouldn't be nearly as large. */
.single-video-cta{
  display: inline-flex;
  padding: 12px 22px;
  font-size: 15px;
}

@media (max-width: 880px){
  .single-video-frame{ aspect-ratio: 16 / 9; }
}