/* ============================================================
   SHERMAN JOHNSON — DIRECTOR OF PHOTOGRAPHY SITE STYLES
   shermanjohnson.com/dp/
   ============================================================ */


/* ------------------------------------------------------------ RESET */
body, div, ul, li, h1, h2, textarea, title { margin:0; padding:0; }
img { border:0; }
button { all:unset; display:inline-block; cursor:pointer; }
html, body { height:100%; }


/* ------------------------------------------------------------ BODY */
body {
  background-color:#131313;
  color:#000;
  font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:.9em;
  line-height:1.8em;
  -webkit-font-smoothing:antialiased;
  /* note: -moz-font-smoothing is not a real property, removed */
  text-rendering:optimizeLegibility;
  font-weight:300;
  overflow:auto;
}

/* Dark theme — applied via PHP on body, also toggled by JS on reel pages */
body.is-dark { background-color:#131313; color:#fff; }
body.is-dark #sj, body.is-dark #sj a, body.is-dark #line { color:#fff; }
body.is-dark #menu a { color:#fff; opacity:.75; }


/* ------------------------------------------------------------ TRANSITIONS */
/* Global color/opacity transitions on interactive elements */
body, #sj, #sj a, #line, #menu a {
  transition:background-color 150ms linear, color 150ms linear, opacity 150ms linear;
}

/* Only animate #content height while mobile menu is opening/closing */
body.menu-anim #content { transition:height 300ms linear; }


/* ------------------------------------------------------------ TYPE */
p { margin:.1em 0 20px 0; }
a { color:#fff; opacity:1; text-decoration:none; outline:0; }
.media { color:#000; opacity:1; text-decoration:none; outline:0; }

/* Standard link opacity treatment used on nav and archive links */
.mL  { opacity:.6; transition:opacity 0.2s ease; }
.mL:hover  { opacity:1; }
.mmL { opacity:.6; transition:opacity 0.2s ease; }
.mmL:hover { opacity:1; }

h1 { color:#999; font-weight:400; font-size:2em; line-height:2em; letter-spacing:.1em; margin:25px 0 2px 0; }
h2 { color:#999; font-weight:200; font-size:1.2em; line-height:2em; letter-spacing:.2em; margin:15px 0 7px 0; }
h3 { color:#222; font-weight:200; font-size:.9em; line-height:1.8em; letter-spacing:.2em; margin:15px 0 2px 0; }


/* ------------------------------------------------------------ SEO / HIDDEN BLOCKS */
/* vcard and title blocks are visually hidden — used for SEO and schema markup only */
#hcard-Sherman-Johnson { display:none; }
#title { position:relative; top:0; width:320px; height:1px; margin:0 auto; text-align:center; overflow:hidden; z-index:0; pointer-events:none; }
#title * { pointer-events:none; }

/* ------------------------------------------------------------ HOME TEXT */
#homeText {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ------------------------------------------------------------ HEADER */
#header { position:relative; top:0; left:0; width:100%; overflow:hidden; z-index:10000; }
#headerContent { position:relative; left:0; width:1390px; margin:0 auto; z-index:10001; }
#headerMargin { position:relative; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; }
.headerMargin { margin-top:20px; margin-bottom:20px; }

/* Shrink class toggled by initHeaderShrink() in scripts.js on scroll */
.shrink { margin-top:10px; margin-bottom:10px; }

/* Remove bottom margin on reel pages so player sits flush under header */
body.reel-page .headerMargin { margin-bottom:0; }

#sj { position:relative; margin:0; overflow:hidden; font-size:2em; font-weight:200; line-height:1.5em; letter-spacing:.05em; opacity:1; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; }
#dp { font-weight:100; display:inline; }
#line { display:inline; }


/* ------------------------------------------------------------ MENU */
#menu { position:relative; left:0; text-align:center; padding:0; font-size:.9em; letter-spacing:.1em; overflow:hidden; text-transform:uppercase; z-index:10002; }
#menu * { position:relative; z-index:10002; }
#menu ul { float:left; display:inline; }
#menu ul li { display:inline; list-style:none; padding:0 30px 0 0; }
#menu a { display:inline-block; padding:8px 8px; line-height:1em; }
#menu a:hover { opacity:1 !important; }

#archive { position:relative; margin:1em 1em 3.5em 0; float:right; text-align:right; padding:0; font-size:1.1em; letter-spacing:.1em; overflow:hidden; text-transform:uppercase; }
#plus { font-size:1.3em; }


/* ------------------------------------------------------------ MOBILE MENU */
/* Height and display are controlled by JS (initMobileMenu in scripts.js) */
#mobileMenuContainer { position:relative; width:100%; height:0; overflow:hidden; text-transform:uppercase; z-index:9999; display:none; }
#mobileMenuContainer.is-open { display:block; }
#mobileMenuContainer ul { display:block; }
#mobileMenuContainer ul li { display:block; list-style:none; padding:0; text-align:center; }
#mobileMenuContainer ul li + li { border-top:0; box-shadow:inset 0 1px 0 rgba(70,70,70,1); margin:0 31px; }
#mobileMenuContainer a { display:block; padding:14px 15px; letter-spacing:.18em; font-weight:300; line-height:1.2; -webkit-tap-highlight-color:rgba(255,255,255,0.15); }

#menuToggle { position:absolute; top:5px; left:8px; overflow:hidden; display:none; }
#openMenu { display:block; padding:0 2em 2em 0; }


/* ------------------------------------------------------------ HAMBURGER */
/* Hamburger animation — is-active toggled by initMobileMenu() in scripts.js */
.hamburger { padding:10px 0; display:inline-block; cursor:pointer; transition-property:opacity, filter; transition-duration:0.15s; transition-timing-function:linear; font:inherit; color:inherit; text-transform:none; background-color:transparent; border:0; margin:0; overflow:visible; }
.hamburger-box { width:30px; height:18px; display:inline-block; position:relative; }
.hamburger-inner { display:block; top:50%; margin-top:-2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width:30px; height:3px; background-color:#fff; border-radius:3px; position:absolute; transition-property:transform; transition-duration:0.15s; transition-timing-function:ease; }
.hamburger-inner::before, .hamburger-inner::after { content:""; display:block; }
.hamburger-inner::before { top:-10px; }
.hamburger-inner::after { bottom:-10px; }

/* changed class added by reel pages to keep hamburger white on dark background */
.hamburger-inner.changed, .hamburger-inner.changed::after, .hamburger-inner.changed::before { background-color:#fff; opacity:1; }

.hamburger--collapse-r .hamburger-inner { top:auto; bottom:0; transition-duration:.15s; transition-delay:0; transition-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse-r .hamburger-inner::after { top:-20px; transition:top 0.15s 0.08s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
.hamburger--collapse-r .hamburger-inner::before { transition:top 0.06s 0.10s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.06s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse-r.is-active .hamburger-inner { transform:translate3d(0, -10px, 0) rotate(45deg); transition-delay:0.15s; transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--collapse-r.is-active .hamburger-inner::after { top:0; opacity:0; transition:top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.1s linear; }
.hamburger--collapse-r.is-active .hamburger-inner::before { top:0; transform:rotate(90deg); transition:top 0.1s .1s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }


/* ------------------------------------------------------------ LAYOUT */
#site { position:fixed; top:0; left:0; height:100%; width:100%; margin:0; padding:0; overflow:hidden; color:#fff; z-index:1; }

/* #content is the main scroll container — height set dynamically by scripts.js */
#content { overflow-y:scroll; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding-left:10px; box-sizing:border-box; position:relative; z-index:0; will-change:transform, opacity; }

/* Reserve gutter space so layout doesn't shift when scrollbar appears */
#content { scrollbar-gutter:stable; }

/* Scrollbar styled invisible until hover */
#content::-webkit-scrollbar { width:10px; }
#content::-webkit-scrollbar-track { background:transparent; }
#content::-webkit-scrollbar-thumb { background:transparent; border-radius:6px; }
#content:hover::-webkit-scrollbar-track { background:#111; }
#content:hover::-webkit-scrollbar-thumb { background:#333; }
#content:hover::-webkit-scrollbar-thumb:hover { background:#555; }

#page { position:relative; width:1394px; padding:0; overflow:hidden; margin-left:auto; margin-right:auto; left:0 !important; }


/* ------------------------------------------------------------ PAGE TRANSITIONS */
/* Classes applied by initNavFade() in scripts.js during page navigation */
#content.navOutFade { transition:opacity 300ms linear; opacity:0; }
#content.navOutLeft { transition:transform 260ms ease-out, opacity 260ms linear; transform:translateX(-8%); opacity:0; }
#content.navInFromRight { transform:translateX(8%); opacity:0; }
#content.navInAnimate { transition:transform 260ms ease-out, opacity 260ms linear; transform:translateX(0); opacity:1; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  #content { transition:none !important; }
}


/* ============================================================
   HOME — FULLSCREEN REEL
   body.home-film applied via $bodyClass in index.php
   ============================================================ */

body.home-film { overflow:hidden; background:#000; }
body.home-film #site { position:fixed; inset:0; width:100%; height:100%; overflow:hidden; }

/* Header overlays the video */
body.home-film #header { position:fixed; top:0; left:0; width:100%; z-index:10000; background:transparent; }
body.home-film #headerContent { background:transparent; }
body.home-film #headerMargin { margin-top:20px; margin-bottom:20px; }

/* White header treatment over dark video */
body.home-film #sj, body.home-film #sj a, body.home-film #line { color:#fff; }
body.home-film #menu a { color:#fff; opacity:.75; }
body.home-film #menu a:hover { opacity:1; }
body.home-film .hamburger-inner, body.home-film .hamburger-inner::before, body.home-film .hamburger-inner::after { background-color:#fff; }

/* When mobile menu is open on home, full header matches menu transparency */
body.home-film #header.menu-is-open {
  background:rgba(0,0,0,.15) !important;
  backdrop-filter:blur(4px);
}
body.home-film #header.menu-is-open #headerContent,
body.home-film #header.menu-is-open #headerMargin {
  background:transparent !important;
}

/* Mobile menu on home — fixed, positioned below header by JS, nearly transparent */
body.home-film #mobileMenuContainer {
  position:fixed;
  left:0;
  right:0;
  width:100%;
  z-index:20000;
  background:rgba(0,0,0,.15);
  backdrop-filter:blur(4px);
}
body.home-film #mobileMenuContainer a { color:#fff; }

/* Fullscreen #content canvas */
body.home-film #content { position:fixed; inset:0; width:100%; height:100%; overflow:hidden; z-index:1; padding-left:0; scrollbar-gutter:auto; }
body.home-film #content::-webkit-scrollbar { width:0; height:0; }

/* #page fills the full canvas */
body.home-film #page { width:100%; max-width:none; height:100%; margin:0; padding:0; left:0 !important; right:auto; overflow:visible; box-sizing:border-box; }

/* Video reel */
body.home-film .homeReel { position:absolute; inset:0; width:100%; height:100%; }
body.home-film .homeTrack { position:absolute; inset:0; width:100%; height:100%; transform:none; transition:none; }
body.home-film .homeSlide { position:relative; width:100%; height:100%; overflow:hidden; background:#000; }
body.home-film .homeVideo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* Gradient overlay to keep header text legible */
body.home-film .homeOverlay { position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.42)); pointer-events:none; }

/* Clip title/director meta — currently commented out in index.php but keeping styles in case it's re-enabled */
body.home-film .homeMeta { position:absolute; right:22px; bottom:18px; text-align:right; color:#fff; z-index:5; }
body.home-film .homeMetaTitle { font-size:1.05em; letter-spacing:.08em; text-transform:uppercase; opacity:.92; }
body.home-film .homeMetaDirector { margin-top:6px; font-size:.95em; letter-spacing:.06em; opacity:.75; }

@media only screen and (max-width:700px) {
  body.home-film #headerMargin { margin-top:20px; margin-bottom:0; }
  body.home-film .homeMeta { right:14px; bottom:14px; }
  body.home-film .homeMetaTitle { font-size:.95em; }
  body.home-film .homeMetaDirector { font-size:.9em; }
}


/* ============================================================
   SPOTS / THUMBNAILS
   ============================================================ */

.th { position:relative; display:inline; float:left; overflow:hidden; border:0 solid #000; margin-bottom:40px; background-color:#131313; }
.th a.media { display:block; position:relative; line-height:0; }
.th a.media video { display:block; width:100%; height:auto; }

/* thumbVid class used by progressiveThumbVideos() in scripts.js */
video { position:relative; width:100%; height:auto; border:none; outline:none; top:0; object-fit:cover; display:block; margin-top:0; }
video.thumbVid { background:#000; display:block; width:100%; height:100%; }

.details { position:relative; float:left; bottom:0; padding:5px; display:inline; text-indent:0em; }

/* Thumb hover overlay */
.th .rO { position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; background-color:#000; opacity:.5; z-index:150; pointer-events:none; transform:translateZ(0); }
.th .rC { position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; display:flex; align-items:center; justify-content:center; z-index:200; opacity:0; pointer-events:none; transition:opacity 200ms linear; transform:translateZ(0); }
.th:hover .rC { opacity:1; pointer-events:auto; }

/* Overlay text — flex centered */
.th .rCtext { position:relative; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; z-index:210; color:#fff; }

/* Legacy global rollover text (non-thumb contexts) */
.rCtext { position:relative; display:table-cell; vertical-align:middle; font-size:2.4em; opacity:1; line-height:1.5em; text-align:center; letter-spacing:.1em; z-index:100; }
.rCtextTitle { vertical-align:inherit; font-size:.5em; line-height:1em; text-align:center; letter-spacing:.1em; }
.rCtextType { vertical-align:inherit; font-size:.5em; line-height:1em; text-align:center; letter-spacing:.1em; font-style:italic; }

/* Mobile title shown below thumb on small screens — hidden by default */
.rCtextMobile { position:relative; float:left; display:none; overflow:hidden; border:0 solid #000; margin:0 10px 40px 0; font-size:2em; }


/* ============================================================
   REEL / MEDIA PLAYER
   ============================================================ */

/* Close button (X) — pure CSS, no image needed */
#close { position:absolute; width:30px; height:30px; top:0; right:0; z-index:5000; display:block; float:none; cursor:pointer; margin:0; }
#close::before, #close::after { content:""; position:absolute; top:50%; left:50%; width:100%; height:3px; background-color:#bbb; transform-origin:center; transition:background-color 0.2s linear; }
#close::before { transform:translate(-50%, -50%) rotate(45deg); }
#close::after { transform:translate(-50%, -50%) rotate(-45deg); }
#close:hover::before, #close:hover::after { background-color:#fff; }

#mediaWrap { position:relative; margin:0 auto; width:100%; max-width:1390px; padding-top:40px; overflow:visible; }
#mediaPlayer { position:relative; width:100%; padding:0; margin:0 auto; overflow:visible; height:auto; }

/* #mediaWin sizing is set dynamically by mediaSize() in reel.php inline JS */
#mediaWin { position:relative; display:block; float:none; width:100%; padding:0; margin:0 auto; overflow:hidden; }

/* Ratio box — --ar CSS var is set inline by JS based on spot's ratio from DB */
#mediaWin::before { content:""; display:block; padding-top:calc(100% / var(--ar, 1.7778)); }
#mediaWin iframe, #mediaWin video { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

#mediaInfo { position:relative; float:none; display:block; width:100%; text-align:left; white-space:nowrap; overflow:hidden; padding:10px 5px 0 5px; box-sizing:border-box; }
#mainInfo { position:relative; color:#fff; min-width:50%; float:left; margin-bottom:10px; text-align:left; white-space:nowrap; }
#awards { position:relative; color:#fff; float:right; display:inline; text-align:right; white-space:nowrap; }
#fullDetails { position:relative; float:left; width:100%; margin-top:15px; white-space:normal; display:block; text-indent:0em; }

/* Hidden SEO/height block — positioned off screen */
#height { position:fixed; width:640px; margin-top:10px; text-align:left; bottom:-20em; overflow:hidden; z-index:-150; color:#232323; }

#mediaInfo ul { display:block; }
#mediaInfo ul li { display:block; list-style:none; }

/* Inline reel player z-index safety */
#mediaWrap, #mediaPlayer, #mediaWin { position:relative; z-index:0; }
iframe { position:relative; z-index:0; }


/* ============================================================
   ABOUT
   ============================================================ */

#about { position:relative; margin:0 auto; padding:10px; background-color:#090909; }
#about ul { float:left; display:inline; }
#about ul li { display:inline; list-style:none; margin:0 6px 8px 0; white-space:nowrap; }
#responsive-img1 { width:400px; height:600px; float:left; margin:10px 15px 15px 10px; }

.wrap { display:block; }
.space { padding-left:5px; }
.sub { font-size:.35em; letter-spacing:0; font-style:italic; text-transform:none; }


/* ============================================================
   CONTACT
   ============================================================ */

#connect { position:relative; max-width:670px; margin:0 auto; padding:30px 10px 0 10px; }
#info { position:relative; float:left; margin:0 0 35px 0; display:inline; }
#connectInfo { line-height:1.8em; letter-spacing:.2em; font-size:1.2em; margin:3px 0 40px 0; }
#connectInfo a:hover { opacity:.6; transition:opacity 0.3s ease, transform 0.3s ease; }

.social-container { display:flex; justify-content:center; gap:10px; }
.social { width:25px; height:25px; margin:10px 5px 0 5px; display:inline; }
.social img { width:25px; height:25px; border:0; opacity:.9; transition:opacity 0.3s ease; }
.social a:hover { opacity:.6; transition:opacity 0.3s ease, transform 0.3s ease; }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media only screen and (max-width:1450px) {
  #headerContent { position:relative; left:31px; margin:0; }
  #page { width:100%; padding:0 4px 4px 4px; margin-left:auto; margin-right:auto; left:auto; right:auto; }
  .rCtextMobile { display:none; }
  .rCtext { font-size:2.4em; }
  #menu { display:block; }
  #menuToggle { display:none; }
}

@media only screen and (max-width:900px) {
  #headerContent { left:0; width:100%; margin:0; }
  #dp { display:block; font-size:70%; margin-top:-.8em; }
  #line { display:none; }
  #sj { margin:0; text-align:center; }
  #menu { left:0; }
  #menu ul { float:none; }
  .rCtextMobile { display:none; }
  .rCtext { font-size:2em; }
  #archive { margin:1em 1em 3.5em 0; }
  #awards { float:right; width:auto; text-align:right; }
}

@media only screen and (max-width:760px) {
  #headerContent { width:100%; margin:0; }
  #content { padding-left:0; }
  #page { width:100%; padding:0 4px 4px 4px; margin-left:auto; margin-right:auto; left:auto; right:auto; }
  #menu { display:none; }
  #menuToggle { left:32px; top:7px; display:block; }
  .th { margin-bottom:0; }
  .th .rO { display:none; }
  .th .rC { display:none !important; }
  .rCtextMobile { display:block !important; margin:2px 0 20px 5px; color:#ccc; font-size:1.3em; }
  .rCtext { opacity:1; font-size:1.5em; text-align:left; }
  .rCtextTitle { text-align:left; }
  #archive { margin:3em 1em 3.5em 0; }
  #mediaInfo { font-size:1.1em; line-height:1.4em; white-space:normal; }
  #about img { display:inline; }
  #about { font-size:1em; line-height:1.5em; }
  .responsive-img { width:50%; }
  #responsive-img1 { width:200px; height:300px; }
  #connect { position:relative; max-width:370px; margin:0 auto; padding:0 10px; }
  #awards { float:left; width:100%; text-align:left; }
}

@media only screen and (max-width:500px) {
  #sj { font-size:1.5em; }
  #content { padding-left:0; }
  #page { width:100%; padding:0 4px 4px 4px; margin-left:auto; margin-right:auto; left:auto; right:auto; }
  #menu { bottom:0; right:0; display:none; }
  #menuToggle { left:8px; top:7px; display:block; }
  .rCtextMobile { margin-bottom:20px; display:block; }
  .rCtext { font-size:1.8em; }
  #archive { margin:3em 1em 3.5em 0; }
  #mediaInfo { font-size:1.1em; white-space:normal; }
  #about { font-size:16px; line-height:1.5em; }
  .responsive-img { width:50%; }
  #about { font-size:.8em; }
}