/* ==========================================================================
   Static-deploy overrides
   --------------------------------------------------------------------------
   Squarespace's runtime JS is gone. These rules:
   1. Force-show animated elements that the SS scroll-anim system would reveal
   2. Hide commerce/cart UI we don't use
   3. Re-implement the folder-dropdown menu in pure CSS (editorial style)
   4. Theme nav + logo via body[data-theme="dark|light"]

   Linked from every page in <head>. Edit here, not in `.port-clone.py`.
   ========================================================================== */


/* --- 1. Force-show content the SS scroll-anim JS would reveal ----------- */

[data-animation],
[data-animation-role],
.fluid-image-animation-wrapper,
.image-block-outer-wrapper,
.sqs-block,
.fe-block,
.sqs-html-content > * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.sqs-block { animation: none !important; }
html.loading-site,
html.loading-site body {
  opacity: 1 !important;
  visibility: visible !important;
}
img[data-loaded="false"] { opacity: 1 !important; }


/* --- 2. Hide commerce/cart UI ------------------------------------------- */

#floatingCart,
.sqs-custom-cart,
.sqs-announcement-bar-dropzone:empty {
  display: none !important;
}


/* --- 2b. Plyr UI (used by SS in-content videos) is dead without JS.
   Hide its broken click-to-play overlay so the underlying autoplaying
   <video> shows through. --------------------------------------------- */

.plyr__poster,
.plyr__control,
.plyr__control--overlaid,
.plyr__controls,
.plyr__captions,
.plyr__progress,
.plyr__menu {
  display: none !important;
}
.plyr,
.plyr__video-wrapper,
.video-player {
  background: transparent !important;
  cursor: default !important;
}
.plyr video,
.plyr__video-wrapper video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  pointer-events: auto !important;
}


/* --- 3. Editorial dropdown menu (shared structure) ---------------------- */

#header .header-nav-item--folder { position: relative; }

/* Invisible bridge between the nav button and the dropdown so the mouse
   can slide down without losing :hover. */
#header .header-nav-item--folder::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 10px;
  z-index: 1001;
}

#header .header-nav-folder-content {
  display: block !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-4px) !important;
  min-width: 280px !important;
  padding: 14px 22px 12px !important;
  margin: 0 !important;
  z-index: 1000 !important;
  text-align: left !important;
  white-space: nowrap !important;
  border-radius: 2px !important;
  border: none !important;
  /* Surface */
  background: #ffffff !important;
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.14) !important;
  /* Animation */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  overflow: hidden !important;
  max-height: none !important;
  transition:
    opacity 200ms cubic-bezier(.2, .6, .2, 1),
    transform 260ms cubic-bezier(.2, .6, .2, 1),
    visibility 0s linear 260ms !important;
  counter-reset: nav-item;
}

/* No tip/arrow */
#header .header-nav-folder-content::before { content: none !important; }

#header .header-nav-item--folder:hover .header-nav-folder-content,
#header .header-nav-item--folder:focus-within .header-nav-folder-content,
#header .header-nav-item--folder .header-nav-folder-title:focus + .header-nav-folder-content {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
  transition:
    opacity 240ms cubic-bezier(.2, .6, .2, 1),
    transform 320ms cubic-bezier(.2, .6, .2, 1) !important;
}

#header .header-nav-folder-item {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  counter-increment: nav-item;
}

/* No divider line between items */
#header .header-nav-folder-item + .header-nav-folder-item {
  border-top: none !important;
}

body #header .header-nav-folder-item a,
body[data-theme="dark"] #header .header-nav-folder-item a,
body[data-theme="light"] #header .header-nav-folder-item a {
  display: flex !important;
  align-items: baseline !important;
  gap: 14px !important;
  padding: 9px 0 !important;
  font-family: inherit !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  position: relative !important;
  color: #111111 !important;                    /* main text: black */
  fill: #111111 !important;
  transition: opacity 180ms ease !important;
}

#header .header-nav-folder-item a::before {
  content: counter(nav-item, decimal-leading-zero);
  flex: 0 0 auto;
  font-size: 9px !important;
  letter-spacing: 0.22em !important;
  color: rgba(17, 17, 17, 0.32) !important;     /* numbers: light gray */
  font-variant-numeric: tabular-nums !important;
  transition: color 180ms ease !important;
}

#header .header-nav-folder-item a::after {
  content: '\2192';   /* → */
  margin-left: auto !important;
  padding-left: 14px;
  color: rgba(17, 17, 17, 0.55) !important;
  opacity: 0 !important;
  transform: translateX(-6px) !important;
  transition: opacity 200ms ease, transform 240ms cubic-bezier(.2, .6, .2, 1) !important;
}

body #header .header-nav-folder-item-content,
body[data-theme="dark"] #header .header-nav-folder-item-content,
body[data-theme="light"] #header .header-nav-folder-item-content {
  color: #111111 !important;
}
#header .header-nav-folder-item a:hover { opacity: 0.6 !important; }
#header .header-nav-folder-item a:hover::after { opacity: 1 !important; transform: translateX(0) !important; }


/* --- 4. Theme: dark hero pages (white nav + logo) ----------------------- */

body[data-theme="dark"] {
  --dropdown-bg:        rgba(18, 18, 18, 0.72);
  --dropdown-border:    rgba(255, 255, 255, 0.10);
  --dropdown-divider:   rgba(255, 255, 255, 0.06);
  --dropdown-fg:        rgba(255, 255, 255, 0.78);
  --dropdown-fg-hover:  #ffffff;
  --dropdown-num:       rgba(255, 255, 255, 0.32);
  --dropdown-num-hover: rgba(255, 255, 255, 0.70);
  --dropdown-arrow:     rgba(255, 255, 255, 0.60);
  --dropdown-shadow:    0 22px 48px -18px rgba(0, 0, 0, 0.45),
                        0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

body[data-theme="dark"] #header .header-nav-item a,
body[data-theme="dark"] #header .header-nav-folder-title,
body[data-theme="dark"] #header .header-nav-folder-title-text,
body[data-theme="dark"] #header .header-actions-action a,
body[data-theme="dark"] #header .header-title-text a,
body[data-theme="dark"] #header .header-burger-btn,
body[data-theme="dark"] #header .header-actions svg,
body[data-theme="dark"] #header button {
  color: #ffffff !important;
  fill: #ffffff !important;
}
body[data-theme="dark"] .header-title-logo img {
  filter: brightness(0) invert(1) !important;
}


/* --- 4. Theme: light pages (black nav + logo) --------------------------- */

body[data-theme="light"] {
  --dropdown-bg:        rgba(244, 237, 228, 0.78);
  --dropdown-border:    rgba(17, 17, 17, 0.10);
  --dropdown-divider:   rgba(17, 17, 17, 0.08);
  --dropdown-fg:        rgba(17, 17, 17, 0.70);
  --dropdown-fg-hover:  #111111;
  --dropdown-num:       rgba(17, 17, 17, 0.32);
  --dropdown-num-hover: rgba(17, 17, 17, 0.65);
  --dropdown-arrow:     rgba(17, 17, 17, 0.60);
  --dropdown-shadow:    0 22px 48px -18px rgba(0, 0, 0, 0.18),
                        0 1px 0 rgba(255, 255, 255, 0.50) inset;
}

body[data-theme="light"] #header .header-nav-item a,
body[data-theme="light"] #header .header-nav-folder-title,
body[data-theme="light"] #header .header-nav-folder-title-text,
body[data-theme="light"] #header .header-actions-action a,
body[data-theme="light"] #header .header-title-text a,
body[data-theme="light"] #header .header-burger-btn,
body[data-theme="light"] #header .header-actions svg,
body[data-theme="light"] #header button {
  color: #111111 !important;
  fill: #111111 !important;
}
body[data-theme="light"] .header-title-logo img {
  filter: brightness(0) !important;
}


/* Dropdown surface is intentionally the same on both themes (see above):
   solid white, no border. Theme-scoped --dropdown-* tokens are unused now
   but kept in case you want to restore per-theme surfaces later. */


/* --- 5. Footer-ish 'Contact me:' sections — tighten excess padding ------
   These are trailing single-line contact sections on the home and project
   pages. SS defaults give them ~175px height with ~150px of empty padding
   around one line of text. Reduce to just enough vertical breathing room.
   Selector targets ONLY the last section (not the hero) via :not on an earlier
   sibling. Uses main article section:last-child to be safe. */
footer.sections > section.page-section {
  min-height: auto !important;
}
footer.sections > section.page-section .content-wrapper {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
/* Footer fluid-engine grid has 4 empty 24px rows baked in — collapse. */
footer.sections .fluid-engine {
  grid-template-rows: auto !important;
  row-gap: 0 !important;
}


/* --- 6. FPO placeholder blocks — used on pages where real photo/video is
   coming soon. Renders a 16:9 gray block with "FPO" label. ---------------- */

.fpo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16/9;
  background: #d8d5ce;
  color: rgba(17,17,17,0.45);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
}

.fpo--square { aspect-ratio: 1/1; }
.fpo--tall   { aspect-ratio: 9/16; }
.fpo--wide   { aspect-ratio: 21/9; }

body[data-theme="dark"] .fpo {
  background: #242424;
  color: rgba(255,255,255,0.45);
}
