/*
 Theme Name: GeneratePress Child - JW Portfolio
 Template: generatepress
 Version: 1.2.0
 Author: Jake Ward
 Description: Child theme for GeneratePress used across the Multisite (Director / DOP / Colourist / Camera Op).
 Text Domain: gp-jw-child
*/

/* ==========================================================================
   Navigation Position Fix - Float Right
   GeneratePress uses flex on .inside-header, so we use margin-left: auto
   to push the navigation to the right side
   ========================================================================== */

/* Ensure header uses horizontal flex layout on desktop - max specificity */
html body .site-header .inside-header,
html body.nav-float-right .site-header .inside-header,
html body.header-aligned-left .site-header .inside-header,
html body #page .site-header .inside-header,
body.nav-float-right.header-aligned-left .site-header .inside-header,
.site-header#masthead .inside-header,
header.site-header .inside-header,
header#masthead .inside-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  text-align: left !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  padding-top: 60px !important;
  position: relative !important;
}

/* White header background for Director site
   (Glassfull added 2026-09-29: this override was already present for
   Director and DOP - see the black-background version a few lines down -
   but genuinely missing for Glassfull, so its mobile nav's toggled panel
   fell back to GeneratePress's own default near-transparent
   background-color:rgba(0,0,0,.02) instead of a real solid fill, reading
   as a washed-out grey box rather than a clean white one - confirmed via a
   real ~386px-wide render, not just a screenshot guess. Glassfull's page
   background is already forced white (see the 2026-09-29 grey-band fix
   elsewhere in this file), so matching Director's white treatment here is
   the correct, consistent choice rather than inventing a new color.) */
body.site-director .site-header,
body.site-director .main-navigation,
body.site-director .primary-navigation,
body.site-director .navigation-branding,
body.site-director .inside-header,
body.site-glassfull .site-header,
body.site-glassfull .main-navigation,
body.site-glassfull .primary-navigation,
body.site-glassfull .navigation-branding,
body.site-glassfull .inside-header {
  background-color: #fff !important;
}

/* Center the logo absolutely in the header */
.site-header .inside-header .site-logo {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Push navigation to the right - remove ALL right-side spacing */
.nav-float-right #site-navigation,
.nav-float-right #site-navigation.main-navigation,
body.nav-float-right #site-navigation {
  margin-left: auto !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  width: auto !important;
  justify-content: flex-end !important;
}

/* Override the width and centering on navigation */
#site-navigation {
  width: auto !important;
  justify-content: flex-end !important;
}

/* Remove padding from inside-navigation and grid-container */
#site-navigation .inside-navigation,
#site-navigation .inside-navigation.grid-container,
.main-navigation .inside-navigation.grid-container,
.nav-float-right .main-navigation .inside-navigation.grid-container {
  padding-right: 0 !important;
  margin-right: 0 !important;
  justify-content: flex-end !important;
}

/* Remove right padding from the menu itself and align right */
#site-navigation .main-nav,
#site-navigation #primary-menu,
.main-navigation .main-nav,
.main-navigation .main-nav > ul {
  padding-right: 0 !important;
  margin-right: 0 !important;
  justify-content: flex-end !important;
}

/* Hide the mobile menu control wrapper on desktop */
#mobile-menu-control-wrapper {
  display: none !important;
}

/* Mobile styles - restore mobile menu behavior */
@media (max-width: 768px) {
  .inside-header {
    flex-wrap: wrap !important;
  }

  /* The desktop header padding above (padding-top:60px, left/right:40px) is
     network-wide and has no mobile reduction of its own - on a ~390px phone
     that's over 20% of the width eaten on each side, plus a lot of vertical
     whitespace above/below the header content. Harmless-looking on sites
     with a plain white page background (the oversized padding just blends
     into more white), but on any site with a dark/non-white section
     directly below the header (e.g. glassfull.com.au's black hero) it reads
     as a visibly boxed, inset panel floating in a sea of blank space -
     confirmed via a real ~386px-wide iframe render, not a desktop-width
     media-query-forced test artifact (which gave a misleading result here
     earlier - see the session notes). Reduced network-wide since every site
     inherits the oversized base padding.
     Specificity note: for a comma-separated selector list, the cascade
     treats each alternative as its own virtual rule, and the EFFECTIVE
     specificity for a given property is the highest among whichever
     alternatives actually match the real element - not just the first
     listed one. The base rule's own list includes `.site-header#masthead
     .inside-header` (1 id + 2 classes = (1,2,0)) and `header#masthead
     .inside-header` (1 id + 1 class + 1 element = (1,1,1)) - both genuinely
     match here since `.site-header` carries `id="masthead"` and is also a
     `<header>` element on every site - so (1,2,0) is the true bar to beat,
     not the plain `html body .site-header .inside-header` alternative's
     (0,2,2). Confirmed by testing two under-specified overrides first: a
     plain-class one (0,2,2) and a same-tag one (1,1,1) - both left
     padding-top/left/right stuck at their desktop values, changing only
     padding-bottom (the one longhand the base rule's selector list never
     actually sets via any alternative). Copying the exact (1,2,0)
     alternative here is what finally wins the tie via later source order. */
  .site-header#masthead .inside-header {
    padding: 20px !important;
  }

  #mobile-menu-control-wrapper {
    display: flex !important;
    margin-left: auto !important;
  }

  #site-navigation {
    display: none !important;
    flex-basis: 100% !important;
  }

  #site-navigation.toggled {
    display: block !important;
  }
}

/* End Navigation Position Fix */

.thumb-wrap {
  position: relative;
  overflow: hidden;
}

/* Video sits above the image */
.thumb-wrap .hover-trailer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Overlay text sits on top of everything */
.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 0.6em 1.2em;
  font-size: 1rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
  pointer-events: none;
}

.thumb-wrap:hover .overlay-text {
  opacity: 1;
}

/* Archive page grid - matches the real homepage grid's own small 3px gap
   between cells (.jw-role-gallery .wp-block-post-template, functions.php)
   rather than sitting fully flush. Scoped to .jw-archive-gallery only. */
.jw-archive-gallery .wp-block-post-template.is-layout-grid {
  gap: 3px !important;
}

/* Archive page "Banner" view (jw_archive_gallery's view="banner" attribute,
   developer-set only, DOP archive page) - the real DOP homepage's own
   container sizing/inter-row spacing rules for this same markup
   (.dop-project-gallery, .project-banner-dop) are scoped body.site-dop.home,
   so they don't reach the archive page - these are separate, archive-only
   equivalents rather than changes to the home-scoped originals. */
.jw-archive-gallery--banner {
  max-width: 1200px;
  /* !important needed here - this container's own inline style="margin:0"
     (from jw_archive_gallery's PHP output, matching the real homepage's
     .dop-project-gallery markup exactly) otherwise wins over a plain
     margin-left/right:auto and the whole banner column sits flush left
     instead of centered - same reason the equivalent home-scoped rule
     (body.site-dop.home .dop-project-gallery, above) already uses it. */
  margin-left: auto !important;
  margin-right: auto !important;
}

.jw-archive-gallery--banner .project-banner-dop {
  margin: 0 0 40px 0;
}

/* DOP Archive page (post 1086) - keep ANY content added to this page
   (headings, paragraphs, images - not just the gallery itself) inside the
   same centered max-width column the gallery uses, so e.g. left-aligning a
   heading doesn't blow it out to the full page edge while the gallery below
   it stays centered at 1200px. Scoped to this one page by ID rather than a
   custom block className, since editing the page's own content to add a
   className risks clobbering in-progress edits in the block editor - a
   pure CSS, page-ID-scoped rule needs no content changes at all.
   Desktop-only (min-width:769px, matching the banner's own mobile
   breakpoint below): a fixed `width:1200px` (not max-width) locked the
   WHOLE page to that width at every screen size, so on mobile the gallery
   never shrank to fit the viewport and the banner's own "center image
   only" mobile rule never got a narrow-enough box to visibly matter -
   the archive page rendered like a zoomed-out desktop page instead of
   collapsing to one full-width image per project like the real homepage.
   Mobile now falls through to the site-wide `width:100%` rule instead,
   matching the real homepage's own unconstrained mobile behaviour. */
@media (min-width: 769px) {
  body.page-id-1086 .entry-content > .wp-block-group.alignfull > .wp-block-group__inner-container {
    /* All three need !important - a pre-existing site-wide rule
       (.wp-block-query, .wp-block-group__inner-container, ... { max-width:
       none !important; width: 100% !important; ... }, style.css ~391) also
       targets this exact class with !important, and forces the box to fill
       100% of its parent regardless of max-width - meaning margin:auto alone
       computes to 0 (there's no leftover space to center within) unless
       width/max-width are overridden here too, at higher specificity. */
    max-width: 1200px !important;
    width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.jw-archive-gallery--banner .project-banner-dop:last-child {
  margin-bottom: 0;
}

/* Mobile: the gallery still sat inset from the screen edges, unlike the
   real homepage's edge-to-edge single-column images. Cause: the Archive
   page's content lives inside a Group block with a real, editable 40px
   left/right padding (post 1086's own block attributes - a literal
   `padding-left/right:40px` inline style, not a CSS rule) around BOTH the
   "Archive" heading and the gallery shortcode - harmless on desktop
   (the page-1086 fixed-width rule above absorbs it), but on mobile, now
   that that rule only applies at 769px+, the gallery correctly fills
   100% of the Group's own content box - which is itself inset by that
   40px padding each side. Rather than edit the page's own content (this
   file's own standing caution: block-attribute padding is easy to
   accidentally clobber via a later editor save), break the GALLERY back
   out of just that padding with a negative margin, leaving the heading's
   own inset untouched. If the "Archive" heading's own block padding is
   ever changed in the editor, this 40px offset would need updating to
   match. */
@media (max-width: 768px) {
  .jw-archive-gallery--banner {
    margin-left: -40px !important;
    margin-right: -40px !important;
    width: calc(100% + 80px) !important;
    max-width: calc(100% + 80px) !important;
  }
}

.jw-archive-gallery .wp-block-post {
  margin: 0 !important;
  padding: 0 !important;
}

/* Archive page overlay text - match the DOP homepage video gallery's own
   two-line look exactly: project-banner-dop's dark gradient scrim, and a
   bold larger title (.overlay-name) with a smaller non-bold client name
   (.overlay-client) below it, both fading in on hover - instead of the
   small dark-box style .overlay-text otherwise has everywhere else. Scoped
   to .jw-archive-gallery only (Director gets its own separate 5-line poster
   overlay via jw-hover-video-gallery instead - see below). */
.jw-archive-gallery .wp-block-post-featured-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 100%);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
  z-index: 2;
}

.jw-archive-gallery .wp-block-post:hover .wp-block-post-featured-image::after {
  opacity: 1;
}

.jw-archive-gallery .overlay-text {
  z-index: 10;
  background: none;
  padding: 0;
}

.jw-archive-gallery .overlay-text.dop-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  width: auto;
  white-space: nowrap;
}

.jw-archive-gallery .overlay-name {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.jw-archive-gallery .overlay-client {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.2;
}

/* Corner overlay text (bottom-right) */
.overlay-corner {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 0.4em 0.8em;
  font-size: 0.85rem;
  text-align: right;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
  pointer-events: none;
}

.thumb-wrap:hover .overlay-corner {
  opacity: 1;
}

/* White background, dark text for Director site */
body.site-director,
body.site-director .site-content,
body.site-director .wp-block-group.has-background {
  background-color: #fff !important;
  color: #222 !important;
}

/* Black background, white text for DOP site */
body.site-dop,
body.site-dop .site-content,
body.site-dop .wp-block-group.has-background,
body.site-dop .inside-article,
body.site-dop .entry-content {
  background-color: #000 !important;
  color: #fff !important;
}

/* DOP site - add padding above gallery */
body.site-dop .site-content {
  padding-top: 60px !important;
}

/* Ensure links and headings are visible on DOP site, no underlines */
body.site-dop a {
  color: #fff;
  text-decoration: none !important;
}

body.site-dop a:hover {
  color: #fff;
  text-decoration: none !important;
}

/* Restore visible link colour inside page/post content on DOP site */
body.site-dop .entry-content a {
  color: #7eb8f7;
  text-decoration: underline !important;
}

body.site-dop .entry-content a:hover {
  color: #fff;
  text-decoration: underline !important;
}

body.site-dop h1,
body.site-dop h2,
body.site-dop h3,
body.site-dop h4,
body.site-dop h5,
body.site-dop h6 {
  color: #fff !important;
}

/* ==========================================================================
   DOP Site Header & Navigation - Black background, white text
   ========================================================================== */

/* Header background */
body.site-dop .site-header,
body.site-dop .main-navigation,
body.site-dop .primary-navigation,
body.site-dop .navigation-branding,
body.site-dop .inside-header {
  background-color: #000 !important;
}

/* DOP site - Navigation aligned right with gallery edge (1200px centered gallery) */
body.site-dop .site-header .inside-header,
body.site-dop .site-header .inside-header.grid-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 60px 0 20px 0 !important;
  position: relative !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.site-dop .site-header .inside-header .site-logo {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

body.site-dop #site-navigation {
  width: auto !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
}

body.site-dop #site-navigation .inside-navigation,
body.site-dop .main-navigation .inside-navigation {
  justify-content: flex-end !important;
}

body.site-dop .main-navigation .main-nav,
body.site-dop .main-navigation .main-nav > ul {
  justify-content: flex-end !important;
}

body.site-dop #mobile-menu-control-wrapper {
  display: none !important;
}

@media (max-width: 768px) {
  body.site-dop #mobile-menu-control-wrapper {
    display: flex !important;
    margin-left: auto !important;
  }
  body.site-dop #site-navigation {
    display: none !important;
  }
  /* Without this, tapping the hamburger toggles the icon/aria-expanded
     state correctly but the menu never appears: the generic mobile-nav
     rule a few lines above this file's own "Mobile styles - restore mobile
     menu behavior" block already has a #site-navigation.toggled override,
     but its specificity (1 ID, 1 class) loses outright to this DOP-only
     rule (1 ID, 1 class, 1 element - the extra `body` selector), even
     though both are !important - so on jakewarddp.com specifically the nav
     stayed hidden regardless of the toggled state. This rule matches the
     DOP selector's own specificity plus the .toggled class, so it wins. */
  body.site-dop #site-navigation.toggled {
    display: block !important;
  }
}

/* Site title/logo */
body.site-dop .site-title a,
body.site-dop .site-branding a,
body.site-dop .main-title a {
  color: #fff !important;
}

body.site-dop .site-title a:hover,
body.site-dop .site-branding a:hover {
  color: #fff !important;
}

/* Main navigation menu items */
body.site-dop .main-navigation a,
body.site-dop .primary-navigation a,
body.site-dop .main-nav a,
body.site-dop .menu > li > a,
body.site-dop .main-navigation .menu > li > a {
  color: #fff !important;
}

body.site-dop .main-navigation a:hover,
body.site-dop .primary-navigation a:hover,
body.site-dop .main-nav a:hover,
body.site-dop .menu > li > a:hover {
  color: #fff !important;
  background-color: transparent !important;
}

body.site-dop .main-navigation .main-nav ul li:hover > a,
body.site-dop .main-navigation .main-nav ul li.sfHover > a,
body.site-dop .main-navigation .main-nav ul li[class*="current-menu-"] > a {
  background-color: transparent !important;
}

/* Dropdown menus */
body.site-dop .main-navigation ul ul,
body.site-dop .main-navigation .sub-menu {
  background-color: #000 !important;
}

body.site-dop .main-navigation ul ul a,
body.site-dop .main-navigation .sub-menu a {
  color: #fff !important;
}

/* Mobile menu toggle */
body.site-dop .menu-toggle,
body.site-dop .menu-toggle:hover,
body.site-dop .menu-toggle:focus {
  color: #fff !important;
  background-color: transparent !important;
}

body.site-dop .menu-toggle .mobile-menu,
body.site-dop .menu-toggle svg {
  fill: #fff !important;
  color: #fff !important;
}

/* Director site dropdown menus - light theme */
body.site-director .main-navigation ul ul,
body.site-director .main-navigation .sub-menu {
  background-color: #fff !important;
}

body.site-director .main-navigation ul ul a,
body.site-director .main-navigation .sub-menu a {
  color: #222 !important;
}

/* Director site mobile menu toggle - light theme */
body.site-director .menu-toggle,
body.site-director .menu-toggle:hover,
body.site-director .menu-toggle:focus {
  color: #222 !important;
  background-color: transparent !important;
}

body.site-director .menu-toggle .mobile-menu,
body.site-director .menu-toggle svg {
  fill: #222 !important;
  color: #222 !important;
}

/* The last (rightmost) top-level nav item's dropdown - e.g. "Work" - should
   open leftward, not GP's default rightward direction: it sits at the far
   right edge of the header, so a rightward-growing 200px dropdown runs off
   the visible viewport, clipping items like "Food & Beverage". Overriding
   just this one item (via :last-child, so it stays correct if menu items
   are reordered) instead of GP's global "Sub Menu Direction" customizer
   setting, since flipping that globally would risk the same problem in
   reverse for any future dropdown added to a LEFT-side item like Featured. */
.main-navigation .main-nav > ul > li:last-child > .sub-menu {
  left: auto !important;
  right: 0 !important;
  text-align: right !important;
  /* GP's own Customizer "Sub Menu Width" setting outputs a plain (non-
     !important) `.main-navigation ul ul { width: 200px; }` rule - with
     enough dropdown items added (Comedy/Emotive/Sport/Animals/Automotive/
     Fashion & Beauty/Food & Beverage/Travel & Landscape/Working with
     Children), several of the longer labels wrap onto a second line inside
     that fixed 200px box. This selector's own higher specificity already
     overrides GP's width rule with no !important needed - `width: auto`
     lets the dropdown grow to fit its widest item instead. */
  width: auto !important;
  min-width: 200px;
}

.main-navigation .main-nav > ul > li:last-child > .sub-menu a {
  text-align: right !important;
  white-space: nowrap;
}

/* ==========================================================================
   Make gallery full-width edge-to-edge
   ========================================================================== */

/* Remove all max-width constraints on gallery containers */
.site-main .entry-content,
.site-main .inside-article,
.site-main article {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.wp-block-query,
.wp-block-group:has(.wp-block-post-template),
.wp-block-group__inner-container,
.wp-block-post-template {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Reduce space above gallery */
.site-main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.site-main .inside-article {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* The "full-width gallery" rule above (.site-main .inside-article {
   padding-left/right: 0 !important }) zeroes horizontal padding for
   every page network-wide - invisible on Piccolo Shop's product pages
   at desktop width (the centered 1200px .grid-container still leaves
   plenty of margin), but on mobile there's nothing left to keep the
   product title/description/Reviews tab/Add-a-review form off the
   screen edges. Restore it there only. */
@media (max-width: 768px) {
  body.site-piccoloshop.single-product .inside-article {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

.wp-block-query,
.wp-block-group:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.site-main .wp-block-group__inner-container {
  padding-top: 0 !important;
}

/* Remove page header spacing */
.page-header,
.entry-header {
  display: none !important;
}

/* Remove content container top padding */
.site-content .content-area,
.one-container .container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ==========================================================================
   Single Project Page - Spacing
   ========================================================================== */

/* Fix column alignment on project pages - align to top */
.single-projects .wp-block-columns {
  align-items: flex-start !important;
}

.single-projects .wp-block-column {
  margin-top: 0 !important;
}

/* Consistent spacing above and below Vimeo/video embeds on project pages */
.single-projects .wp-block-embed,
.single-projects .wp-block-embed-vimeo,
.single-projects figure.wp-block-embed {
  margin-top: 0.5em !important;
  margin-bottom: 2em !important;
}

/* Limit content width on all project pages */
.single-projects .entry-content {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px;
  padding-right: 20px;
}

/* Add spacing above and below credits paragraph */
.single-projects .entry-content > p:last-of-type {
  margin-top: 2em;
  margin-bottom: 0 !important;
}

/* Consistent spacing above the gallery on project pages */
.single-projects .wp-block-query,
.single-projects .wp-block-group:has(.wp-block-post-template) {
  margin-top: 2em !important;
}

/* Reduce spacing between headings on project pages */
.single-projects .entry-content h1,
.single-projects .entry-content h2,
.single-projects .entry-content h3 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.single-projects .entry-content h1 + h2,
.single-projects .entry-content h1 + h3,
.single-projects .entry-content h2 + h3 {
  margin-top: 0 !important;
}

/* Reduce spacing between video and heading */
.single-projects .jw-video-wrapper {
  margin-bottom: 0.25em !important;
}

.single-projects .jw-video-wrapper + h3,
.single-projects .jw-video-wrapper + .wp-block-heading {
  margin-top: 0.75em !important;
}

.single-projects .wp-block-embed,
.single-projects figure.wp-block-embed {
  margin-bottom: 0.75em !important;
}

/* Add space between embed and following heading */
.single-projects .wp-block-embed + h3,
.single-projects .wp-block-embed + .wp-block-heading,
.single-projects figure.wp-block-embed + h3,
.single-projects figure.wp-block-embed + .wp-block-heading {
  margin-top: 0.75em !important;
}

/* Reduce spacing between heading and paragraph */
.single-projects .entry-content h3 {
  margin-bottom: 0.75em !important;
  font-size: 2.25em !important;
}

.single-projects .entry-content h3 + p {
  margin-top: 0 !important;
}

/* Smaller text for second line of heading */
.single-projects .jw-heading-subtitle {
  font-size: 0.5em !important;
  font-weight: 700;
  display: block;
}

.single-projects .jw-heading-subtitle strong {
  font-size: inherit !important;
  font-weight: inherit;
}

/* ==========================================================================
   Project Credits Two-Column Layout
   ========================================================================== */

.jw-credits-row {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin: 1.5rem 0;
  width: 100%;
}

.jw-credits-left,
.jw-credits-right {
  flex: 1;
}

.jw-credits-left {
  text-align: left;
}

.jw-credits-right {
  text-align: right;
}

.jw-credits-row p {
  margin: 0;
  line-height: 1.8;
}

.jw-credits-row strong {
  font-weight: 600;
}

/* Mobile: Stack columns */
@media (max-width: 600px) {
  .jw-credits-row {
    flex-direction: column;
    gap: 1rem;
  }

  .jw-credits-right {
    text-align: left;
  }
}

/* ==========================================================================
   Project Navigation (Next/Previous)
   ========================================================================== */

.jw-project-nav {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(128, 128, 128, 0.2);
}

.jw-project-nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.jw-project-nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  text-decoration: none !important;
  border-radius: 4px;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  color: #fff !important;
}

.jw-project-nav-link:hover {
  background-color: transparent;
}

.jw-project-nav-disabled {
  opacity: 0;
  pointer-events: none;
}

.jw-project-nav-arrow {
  font-size: 1.5rem;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Arrows move outward on hover */
.jw-project-nav-prev:hover .jw-project-nav-arrow {
  transform: translateX(-10px);
}

.jw-project-nav-next:hover .jw-project-nav-arrow {
  transform: translateX(10px);
}

/* Text brightens on hover */
.jw-project-nav-prev:hover .jw-project-nav-title,
.jw-project-nav-next:hover .jw-project-nav-title {
  opacity: 0.8;
}

.jw-project-nav-text {
  display: flex;
  flex-direction: column;
}

.jw-project-nav-prev .jw-project-nav-text {
  align-items: flex-start;
}

.jw-project-nav-next .jw-project-nav-text {
  align-items: flex-end;
}

.jw-project-nav-label {
  font-size: 1.1rem;
  font-weight: 600;
}

.jw-project-nav-title {
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.jw-project-nav-home {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.jw-project-nav-home .jw-project-nav-label {
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  position: relative;
}

/* Underline element */
.jw-project-nav-home .jw-project-nav-label::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.2s ease, left 0.2s ease;
}

/* Selected Works hover: brighten + underline */
.jw-project-nav-home:hover .jw-project-nav-label {
  opacity: 1;
}

.jw-project-nav-home:hover .jw-project-nav-label::after {
  width: 100%;
  left: 0;
}

/* DOP site (dark theme) */
body.site-dop .jw-project-nav {
  border-top-color: rgba(255, 255, 255, 0.2);
}

body.site-dop .jw-project-nav-link {
  color: #fff;
}

body.site-dop .jw-project-nav-link:hover {
  background-color: transparent;
}

/* Director site (light theme) - !important needed to beat the white-text
   default on .jw-project-nav-link above, which was making this nav
   invisible (white text on this site's white background) */
body.site-director .jw-project-nav-link,
/* Glassfull (light theme, project pages, added 2026-09-29) - same
   invisible-white-on-light-background bug as Director's site above; this
   nav previously never rendered visibly on glassfull.com.au's project
   pages because jw_get_ordered_projects() also always returned empty
   prev/next there (see the 2026-09-29 fix), so the bug was never noticed. */
body.site-glassfull .jw-project-nav-link {
  color: #222 !important;
}

body.site-director .jw-project-nav-link:hover,
body.site-glassfull .jw-project-nav-link:hover {
  background-color: transparent;
}

/* Director site - no color change on hover */
body.site-director a:hover {
  color: inherit;
}

body.site-director .site-title a:hover,
body.site-director .site-branding a:hover {
  color: #222 !important;
}

body.site-director .main-navigation a:hover,
body.site-director .primary-navigation a:hover,
body.site-director .main-nav a:hover,
body.site-director .menu > li > a:hover {
  color: #222 !important;
  background-color: transparent !important;
}

body.site-director .main-navigation .main-nav ul li:hover > a,
body.site-director .main-navigation .main-nav ul li.sfHover > a,
body.site-director .main-navigation .main-nav ul li[class*="current-menu-"] > a {
  background-color: transparent !important;
}

/* Mobile responsive */
@media (max-width: 600px) {
  /* .jw-project-nav-home is position:absolute + left:50% on every screen
     width - on desktop the 1200px-wide row leaves room either side for it,
     but on mobile the Prev/Next links (each holding a real project title,
     sometimes long) are wide enough to sit directly under it, causing
     "Previous"/"Next" and "Selected Works" to visibly overlap. Below this
     breakpoint: Previous stays left, Next stays right (same as desktop),
     and Selected Works drops onto its own centered row underneath - done
     with flex-wrap + order (DOM order is prev, home, next) rather than
     changing the markup: giving Home order:3 and flex-basis:100% forces it
     onto a new line since nothing else can share a "100%-wide" row with it.
     Previous/Next keep the same widths that content give them, so a long
     title wraps onto a second line inside its own link (see
     jw-project-nav-title below) instead of being forced onto one line or
     colliding with its neighbour. */
  .jw-project-nav-inner {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 1rem;
    padding: 0 1rem;
  }

  .jw-project-nav-prev {
    order: 1;
  }

  .jw-project-nav-next {
    order: 2;
    /* When Previous is disabled/hidden (first project in a chain), Next is
       the ONLY item left on this flex line - the container's own
       justify-content:space-between has nothing to space between with a
       single item, so it defaults to flex-start (left), same side Previous
       would have been on. margin-left:auto pushes Next to the right
       unconditionally: with Previous present it just absorbs the row's
       leftover space (same visual result space-between already gave), and
       with Previous absent it's what actually keeps Next pinned right. */
    margin-left: auto;
  }

  .jw-project-nav-home {
    order: 3;
    flex-basis: 100%;
    position: static;
    transform: none;
    justify-content: center;
  }

  .jw-project-nav-link {
    padding: 0.5rem 0.75rem;
  }

  /* Home also carries the .jw-project-nav-link class, so this max-width
     must be scoped to just Prev/Next - applying it generically caps Home's
     own flex-basis:100% row down to 47% too, throwing off its centering. */
  .jw-project-nav-prev,
  .jw-project-nav-next {
    max-width: 47%;
  }

  .jw-project-nav-title {
    white-space: normal;
  }

  .jw-project-nav-label {
    font-size: 0.85rem;
  }

  /* A disabled Prev/Next (first/last project in the chain) is an empty,
     opacity:0 element on desktop purely to hold its flex slot - hide it
     outright here so it doesn't leave an empty gap on the side it would
     have occupied. */
  .jw-project-nav-disabled {
    display: none;
  }
}

/* ==========================================================================
   Main Navigation - Animated Underline Hover
   ========================================================================== */

.main-navigation .main-nav ul li a {
  position: relative;
  color: #555 !important;
  opacity: 0.7;
  text-shadow: none;
  transform: translateY(0);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              text-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Current/selected page - full black (when not hovering on nav) */
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li[class*="current_page_"] > a {
  color: #222 !important;
  opacity: 1;
}

/* When hovering on nav, make all items grey including current page */
.main-navigation:hover .main-nav ul li a,
.main-navigation:hover .main-nav ul li.current-menu-item > a,
.main-navigation:hover .main-nav ul li.current_page_item > a,
.main-navigation:hover .main-nav ul li[class*="current-menu-"] > a,
.main-navigation:hover .main-nav ul li[class*="current_page_"] > a {
  color: #555 !important;
  opacity: 0.7;
}

/* Only the hovered item becomes black */
.main-navigation .main-nav ul li a:hover,
.main-navigation:hover .main-nav ul li a:hover,
.main-navigation:hover .main-nav ul li.current-menu-item > a:hover,
.main-navigation:hover .main-nav ul li.current_page_item > a:hover,
.main-navigation:hover .main-nav ul li[class*="current-menu-"] > a:hover,
.main-navigation:hover .main-nav ul li[class*="current_page_"] > a:hover {
  color: #222 !important;
  opacity: 1;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

/* ==========================================================================
   DOP Site Navigation - Dark Theme Override
   ========================================================================== */

body.site-dop .main-navigation .main-nav ul li a {
  color: #aaa !important;
}

body.site-dop .main-navigation .main-nav ul li.current-menu-item > a,
body.site-dop .main-navigation .main-nav ul li.current_page_item > a,
body.site-dop .main-navigation .main-nav ul li[class*="current-menu-"] > a,
body.site-dop .main-navigation .main-nav ul li[class*="current_page_"] > a {
  color: #fff !important;
}

body.site-dop .main-navigation:hover .main-nav ul li a,
body.site-dop .main-navigation:hover .main-nav ul li.current-menu-item > a,
body.site-dop .main-navigation:hover .main-nav ul li.current_page_item > a,
body.site-dop .main-navigation:hover .main-nav ul li[class*="current-menu-"] > a,
body.site-dop .main-navigation:hover .main-nav ul li[class*="current_page_"] > a {
  color: #aaa !important;
}

body.site-dop .main-navigation .main-nav ul li a:hover,
body.site-dop .main-navigation:hover .main-nav ul li a:hover,
body.site-dop .main-navigation:hover .main-nav ul li.current-menu-item > a:hover,
body.site-dop .main-navigation:hover .main-nav ul li.current_page_item > a:hover,
body.site-dop .main-navigation:hover .main-nav ul li[class*="current-menu-"] > a:hover,
body.site-dop .main-navigation:hover .main-nav ul li[class*="current_page_"] > a:hover {
  color: #fff !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}


/* ==========================================================================
   Non-clickable Projects (disable_project_link)
   ========================================================================== */

.jw-no-link a,
article.jw-no-link a,
.wp-block-post.jw-no-link a {
  pointer-events: none;
  cursor: default;
}

.jw-no-link .thumb-wrap,
article.jw-no-link .thumb-wrap {
  cursor: default;
}

/* Remove default GeneratePress hover styles */
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li a:hover {
  background-color: transparent !important;
}

/* ==========================================================================
   Custom Video Thumbnail Overlay
   ========================================================================== */

.jw-video-wrapper {
  position: relative;
  width: 100%;
}

.jw-video-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.jw-video-thumbnail.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.jw-video-play-btn {
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.jw-video-play-btn:hover {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.8);
}

.jw-video-play-btn svg {
  width: 32px;
  height: 32px;
  color: #fff;
  margin-left: 4px;
}

.jw-video-wrapper .wp-block-embed {
  margin: 0 !important;
}

.jw-cf-wrap {
  position: relative;
}

.jw-cf-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.jw-cf-wrap:hover .jw-cf-play-overlay {
  opacity: 1;
}

.jw-cf-play-overlay.is-hidden {
  opacity: 0 !important;
  pointer-events: none;
}

.jw-cf-wrap .wp-block-embed {
  margin: 0 !important;
}

/* ==========================================================================
   DOP 3-Image Banner Layout
   ========================================================================== */

/* Force one project per row on the DOP homepage only - not scoped .home
   previously, which meant it also broke the grid layout on any other DOP
   page using this same markup, e.g. the Archive page's grid. */
body.site-dop.home .wp-block-post-template {
  display: block !important;
  gap: 0 !important;
}

body.site-dop.home .wp-block-post-template > li {
  width: 100% !important;
  max-width: 100% !important;
}

/* DOP project gallery container */
body.site-dop.home .dop-project-gallery {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0;
  line-height: 0;
  font-size: 0;
}

body.site-dop.home .dop-project-gallery > .project-banner-dop {
  margin: 0 0 40px 0;
  padding: 0;
}

/* Remove margin from last item */
body.site-dop.home .dop-project-gallery > .project-banner-dop:last-child {
  margin-bottom: 0;
}

body.site-dop .project-banner-dop,
body.site-dop .project-banner-dop > a {
  display: block;
  line-height: 0;
  font-size: 0;
}

body.site-dop .project-banner-dop .banner-row {
  display: flex;
  width: 100%;
  line-height: 0;
  font-size: 0;
  position: relative;
}

body.site-dop .project-banner-dop .banner-left,
body.site-dop .project-banner-dop .banner-center,
body.site-dop .project-banner-dop .banner-right {
  flex: 1;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
}

body.site-dop .project-banner-dop .banner-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hide page title on DOP homepage */
body.site-dop.home .entry-header {
  display: none !important;
}

/* Override Gutenberg block spacing variables on DOP homepage */
body.site-dop.home {
  --wp--preset--spacing--20: 0;
  --wp--preset--spacing--30: 0;
  --wp--preset--spacing--40: 0;
  --wp--preset--spacing--50: 0;
  --wp--preset--spacing--60: 0;
  --wp--preset--spacing--70: 0;
  --wp--preset--spacing--80: 0;
  --wp--style--block-gap: 0;
  --wp--style--root--padding-top: 0;
  --wp--style--root--padding-right: 0;
  --wp--style--root--padding-bottom: 0;
  --wp--style--root--padding-left: 0;
}

/* No gaps between banner items - reset wrapper elements only */
body.site-dop.home .wp-block-post-template,
body.site-dop.home .wp-block-post-template > li,
body.site-dop.home .wp-block-group,
body.site-dop.home .wp-block-group[style],
body.site-dop.home .wp-block-group__inner-container,
body.site-dop.home .wp-block-query,
body.site-dop.home .entry-content,
body.site-dop.home .inside-article,
body.site-dop.home .site-main,
body.site-dop.home .content-area,
body.site-dop.home article.page,
body.site-dop.home .is-layout-flow,
body.site-dop.home .is-layout-constrained,
body.site-dop.home .has-global-padding,
body.site-dop.home .alignfull {
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  border: 0 !important;
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  --wp--style--block-gap: 0 !important;
}

/* Reset project card padding only - margin handled by gallery rules */
body.site-dop.home .project-card,
body.site-dop.home .project-banner-dop,
body.site-dop.home article.project-banner-dop {
  padding: 0 !important;
}

/* Reset Gutenberg flow layout spacing (uses margin-block-start on children) */
body.site-dop.home .is-layout-flow > *,
body.site-dop.home .is-layout-flow > * + *,
body.site-dop.home .is-layout-constrained > *,
body.site-dop.home .is-layout-constrained > * + *,
body.site-dop.home .wp-block-post-template > li,
body.site-dop.home .entry-content > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.site-dop .project-banner-dop a {
  display: block;
  line-height: 0;
  font-size: 0;
}

body.site-dop article.project-banner-dop {
  display: block;
  line-height: 0;
}

body.site-dop .project-banner-dop .banner-center.thumb-wrap {
  position: relative;
}

body.site-dop .project-banner-dop .hover-trailer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* DOP Banner hover - darken entire row */
body.site-dop .project-banner-dop .banner-row::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 100%);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 2;
  pointer-events: none;
}

body.site-dop .project-banner-dop:hover .banner-row::after {
  opacity: 1;
}

/* Text overlay on hover - ensure it's above darken layer */
body.site-dop .project-banner-dop .overlay-text {
  z-index: 10;
  opacity: 1;
  background: none;
  padding: 0;
}

/* DOP overlay with name and client on separate lines */
body.site-dop .project-banner-dop .dop-overlay {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.3em !important;
  width: auto !important;
  white-space: nowrap !important;
}

body.site-dop .project-banner-dop .dop-overlay .overlay-name {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-delay: 0s;
}

body.site-dop .project-banner-dop:hover .dop-overlay .overlay-name {
  opacity: 1;
  transition-delay: 0s;
}

body.site-dop .project-banner-dop .dop-overlay .overlay-client {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.2;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-delay: 0s;
}

body.site-dop .project-banner-dop:hover .dop-overlay .overlay-client {
  opacity: 0.8;
  transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-delay: 0.1s;
}

/* Mobile: Center image only */
@media (max-width: 768px) {
  body.site-dop .project-banner-dop .banner-left,
  body.site-dop .project-banner-dop .banner-right {
    display: none;
  }

  body.site-dop .project-banner-dop .banner-center {
    flex: 1;
  }
}

/* ==========================================================================
   Header Layout - Controlled by GeneratePress Customizer
   ========================================================================== */
/*
   Header position is now controlled via:
   Appearance > Customize > Layout > Header

   If you need CSS overrides, add them below.
*/

/* Keep current/selected page black (not blue) */
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li[class*="current_page_"] > a {
  color: #222 !important;
}

/* DOP site - current page white */
body.site-dop .main-navigation .main-nav ul li.current-menu-item > a,
body.site-dop .main-navigation .main-nav ul li.current_page_item > a,
body.site-dop .main-navigation .main-nav ul li[class*="current-menu-"] > a,
body.site-dop .main-navigation .main-nav ul li[class*="current_page_"] > a {
  color: #fff !important;
}

/* ==========================================================================
   Custom Footer
   ========================================================================== */

/* Remove GeneratePress footer spacing */
.site-footer,
.footer-widgets,
.site-info {
  padding: 0 !important;
  margin: 0 !important;
}

.site-content,
.content-area,
.site-main {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.jw-site-footer {
  padding: 1.5rem 0;
  text-align: center;
  margin-top: 1rem;
  background-color: #fff;
}

.jw-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.jw-footer-contact {
  margin-bottom: 1rem;
}

.jw-footer-contact-line {
  margin-bottom: 0.25rem;
}

.jw-footer-contact-line:last-child {
  margin-bottom: 0;
}

.jw-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.jw-footer-menu li {
  margin: 0;
  padding: 0;
}

.jw-footer-menu a {
  color: #555 !important;
  text-decoration: none !important;
  font-size: 0.9rem;
  position: relative;
  opacity: 0.7;
  text-shadow: none;
  transform: translateY(0);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              text-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.jw-footer-menu a:hover {
  color: #222 !important;
  text-decoration: none !important;
  opacity: 1;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}


/* Social Icons */
.jw-social-icons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.jw-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222 !important;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.jw-social-link:hover {
  opacity: 1;
}

.jw-social-link svg {
  width: 20px;
  height: 20px;
}

/* DOP site footer (black background)
   padding-bottom includes an extra 40px on top of the base 24px: on
   jake-ward.com, GP's own default (empty) .site-info bar still renders
   below .jw-site-footer and happens to add exactly 40px of trailing space
   there - that element is deliberately hidden on DOP (see the "hide GP
   default footer" rule below), so this replaces that same 40px directly on
   DOP's own footer to keep the two sites' spacing visually identical. */
body.site-dop .jw-site-footer {
  background-color: #000;
  padding-bottom: 64px;
}

body.site-dop .jw-footer-menu a {
  color: #fff !important;
}

/* DOP — hide GP default footer/site-info (replaced by jw-site-footer)
   Note: .site-footer is NOT hidden here - it's the outer wrapper that
   .jw-site-footer itself renders inside (via the generate_footer hook),
   so hiding the wrapper was collapsing our own footer to 0x0 along with
   GP's default content. Only the actual default content is hidden. */
body.site-dop .site-info,
body.site-dop .footer-widgets {
  display: none !important;
}

/* DOP — page/body background black so no white gap shows */
body.site-dop,
body.site-dop #page {
  background-color: #000 !important;
}

/* DOP homepage - bottom padding before footer
   Matched to jake-ward.com's own spacing 2026-09-14: Director's homepage has
   no extra padding here at all, relying solely on .jw-site-footer's own
   margin-top (1rem/16px) for separation - this rule previously added an
   extra 80px on top of that, which is why DOP's gap looked much larger. */
body.site-dop.home .inside-article,
body.site-dop.home .entry-content,
body.site-dop.home article.page {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Director homepage - remove bottom padding from gallery blocks
   (tightened 20px -> 8px 2026-09-10, then nudged to 20px same day - 8px
   read as too tight between "Selected works" and the thumbnail grid, for
   both the Director and DOP sections) */
body.site-director.home .entry-content > .wp-block-group,
body.site-director.home .entry-content > .wp-block-group > .wp-block-group__inner-container > .wp-block-group {
  padding-bottom: 20px !important;
}

body.site-director.home .inside-article,
body.site-director.home .entry-content,
body.site-director.home article.page {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* -----------------------------------------------------------------------------
   Glassfull Gallery - Two Column Layout
   ----------------------------------------------------------------------------- */
.glassfull-gallery {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.glassfull-gallery-row {
  display: grid;
  grid-template-columns: 60% 40%;
  min-height: 400px;
}

/* Alternate row direction - swap image/text sides */
.glassfull-gallery-row:nth-child(even) {
  grid-template-columns: 40% 60%;
}

.glassfull-gallery-row:nth-child(even) .glassfull-gallery-media {
  order: 2;
}

.glassfull-gallery-row:nth-child(even) .glassfull-gallery-content {
  order: 1;
}

/* Media column (thumbnail + video) */
.glassfull-gallery-media {
  position: relative;
  overflow: hidden;
  background: #000;
}

.glassfull-media-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.glassfull-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.glassfull-hover-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.glassfull-gallery-row:hover .glassfull-hover-video {
  opacity: 1;
}

.glassfull-gallery-row.has-video:hover .glassfull-thumbnail {
  opacity: 0;
}

/* Hover overlay with "See More" and AFC text */
.glassfull-hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
  pointer-events: none;
}

.glassfull-gallery-row:hover .glassfull-hover-overlay {
  opacity: 1;
}

.glassfull-overlay-text,
.glassfull-see-more {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: transform 0.4s ease;
  pointer-events: auto;
  cursor: pointer;
}

.glassfull-overlay-text:hover,
.glassfull-see-more:hover {
  transform: scale(1.1);
}

/* Content column */
.glassfull-gallery-content {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.glassfull-gallery-content.has-bg-image {
  background-size: cover;
  background-position: center;
}

.glassfull-gallery-content.bg-bw {
  filter: grayscale(100%);
}

.glassfull-gallery-content.bg-bw .glassfull-content-link {
  filter: grayscale(0%);
}

.glassfull-content-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.glassfull-content-link {
  text-decoration: none;
  color: inherit;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 30px 50px;
  text-align: left;
}

/* Even rows - text on left, so align to right edge (closest to image) */
.glassfull-gallery-row:nth-child(even) .glassfull-content-link {
  justify-content: flex-end;
  text-align: right;
}

.glassfull-content-link .glassfull-description {
  transition: transform 0.3s ease;
}

.glassfull-gallery-content:hover .glassfull-description {
  transform: scale(1.05);
}

.glassfull-title {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5em 0;
  transition: color 0.3s ease;
}

.glassfull-content-link:hover .glassfull-title {
  color: #ccc;
}

.glassfull-description {
  font-size: 1.1rem;
  color: #fff;
  margin: 0;
  line-height: 1.6;
}

.glassfull-description p {
  margin: 0 0 0.5em 0;
}

.glassfull-description p:last-child {
  margin-bottom: 0;
}

.glassfull-description h1,
.glassfull-description h2,
.glassfull-description h3,
.glassfull-description h4 {
  color: #fff;
  margin: 0 0 0.3em 0;
}

.glassfull-description strong {
  font-weight: 700;
}

.glassfull-description em {
  font-style: italic;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .glassfull-gallery-row {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .glassfull-gallery-media {
    aspect-ratio: 16/9;
  }

  .glassfull-gallery-content {
    padding: 30px 20px;
  }

  .glassfull-title {
    font-size: 1.5rem;
  }
}

/* -----------------------------------------------------------------------------
   Glassfull - Hover Reveal (Service columns)
   ----------------------------------------------------------------------------- */
/* Smooth height transition for columns */
.hover-reveal-parent {
  min-height: 0;
  transition: min-height 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide the detail text by default */
.hover-reveal {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s cubic-bezier(0.4, 0, 0.2, 1), min-height 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Individual lines - hidden by default */
.reveal-line {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Show when JS adds hover-active class */
.hover-reveal-parent.hover-active > .hover-reveal {
  min-height: var(--reveal-max-height, 500px);
  max-height: 1000px;
}

/* Animate lines one by one */
.hover-reveal-parent.hover-active .reveal-line {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--delay, 0s);
}

/* -----------------------------------------------------------------------------
   Image Slider
   ----------------------------------------------------------------------------- */
.jw-image-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.jw-slider-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.jw-slider-image:first-child {
  position: relative;
}

.jw-slider-image.active {
  opacity: 1;
}

/* ==========================================================================
   Piccolo GLX Site Styles
   ========================================================================== */

/* Import Montserrat font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* Base styles for Piccolo GLX site */
body.site-piccologlx {
  background-color: #fff !important;
  color: #0d141a !important;
  font-family: 'Montserrat', sans-serif !important;
}

body.site-piccologlx h1,
body.site-piccologlx h2,
body.site-piccologlx h3,
body.site-piccologlx h4,
body.site-piccologlx h5,
body.site-piccologlx h6 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600;
  line-height: 1.3;
}

body.site-piccologlx h1 { font-size: 64px; }
body.site-piccologlx h2 { font-size: 56px; }
body.site-piccologlx h3 { font-size: 48px; }
body.site-piccologlx h4 { font-size: 40px; }

body.site-piccologlx .site-header,
body.site-piccologlx .inside-header {
  background-color: #fff !important;
  border-bottom: none;
  padding: 8px 20px !important;
}

body.site-piccologlx .main-navigation .main-nav ul li a {
  font-family: 'Montserrat', sans-serif !important;
  color: #0d141a !important;
  font-weight: 400;
  font-size: 16px;
}

/* Hide default page title on Piccolo homepage */
body.site-piccologlx.home .entry-header,
body.site-piccologlx.page .entry-header {
  display: none !important;
}

/* Remove content padding for full-width sections */
body.site-piccologlx .site-main .entry-content {
  padding: 0 !important;
  max-width: none !important;
}

body.site-piccologlx .inside-article {
  padding: 0 !important;
}

body.site-piccologlx .site-content,
body.site-piccologlx .content-area,
body.site-piccologlx .site-main,
body.site-piccologlx .inside-article,
body.site-piccologlx .entry-content,
body.site-piccologlx .piccolo-homepage,
body.site-piccologlx .site.grid-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.site-piccologlx .entry-header {
  display: none !important;
}

body.site-piccologlx .site-main > article {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.site-piccologlx .one-container .container {
  padding-top: 0 !important;
}

/* Override general header styles for Piccolo GLX */
body.site-piccologlx.nav-float-right .site-header .inside-header,
body.site-piccologlx .site-header .inside-header,
body.site-piccologlx header#masthead .inside-header {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ==========================================================================
   Piccolo Homepage - Hero Section
   ========================================================================== */

body.site-piccologlx .piccolo-hero {
  background: #000 url('') center center / cover no-repeat !important;
  min-height: auto !important;
  aspect-ratio: 16 / 9 !important;
  display: flex !important;
  align-items: center !important;
  position: relative;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100vw !important;
  border-radius: 0 !important;
  overflow: hidden;
  margin-left: calc(-50vw + 50%) !important;
}

/* Placeholder gradient for hero until image is added */
body.site-piccologlx .piccolo-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #1a1a1a 0%, #3d2a00 50%, #c97d00 100%);
  z-index: 0;
}

body.site-piccologlx .piccolo-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1224px;
  margin: 0 auto;
  padding: 60px;
}

body.site-piccologlx .hero-content {
  max-width: 500px;
}

body.site-piccologlx .hero-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #fff;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

body.site-piccologlx .hero-title {
  font-size: 48px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 1em;
}

body.site-piccologlx .hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

body.site-piccologlx .hero-buttons .wp-block-button__link {
  padding: 16px 40px;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif !important;
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body.site-piccologlx .btn-primary .wp-block-button__link {
  background-color: #fff !important;
  color: #1a1a1c !important;
  border: none !important;
}

body.site-piccologlx .btn-primary .wp-block-button__link:hover {
  background-color: #f0f0f0 !important;
}

body.site-piccologlx .btn-outline .wp-block-button__link {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}

body.site-piccologlx .btn-outline .wp-block-button__link:hover {
  background-color: rgba(255,255,255,0.1) !important;
}

/* ==========================================================================
   Piccolo Homepage - Category Cards
   ========================================================================== */

body.site-piccologlx .category-cards {
  padding: 100px 20px 60px;
  background: #f8f8f8;
}

body.site-piccologlx .category-cards .wp-block-columns {
  gap: 20px;
}

body.site-piccologlx .category-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  min-height: 200px;
  position: relative;
}

body.site-piccologlx .category-card .card-inner {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

body.site-piccologlx .category-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #222;
  margin: 0 0 1rem 0;
}

body.site-piccologlx .category-card .card-image {
  width: 50%;
  min-height: 180px;
  background: linear-gradient(135deg, #2a2a2a 0%, #4a4a4a 100%);
  background-size: cover;
  background-position: center;
}

body.site-piccologlx .btn-card .wp-block-button__link {
  background-color: #222 !important;
  color: #fff !important;
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
  border-radius: 50px;
}

body.site-piccologlx .btn-card .wp-block-button__link:hover {
  background-color: #444 !important;
}

/* ==========================================================================
   Piccolo Homepage - Featured Section
   ========================================================================== */

body.site-piccologlx .featured-section {
  padding: 60px 20px;
}

body.site-piccologlx .featured-section .wp-block-columns {
  gap: 20px;
  align-items: stretch;
}

body.site-piccologlx .featured-main {
  background: linear-gradient(135deg, #3a3a3a 0%, #5a5a5a 100%);
  border-radius: 12px;
  min-height: 500px;
  position: relative;
  overflow: hidden;
}

body.site-piccologlx .featured-main-inner {
  position: absolute;
  bottom: 40px;
  left: 40px;
  right: 40px;
}

body.site-piccologlx .featured-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

body.site-piccologlx .featured-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1em;
}

body.site-piccologlx .featured-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.site-piccologlx .featured-card {
  flex: 1;
  border-radius: 12px;
  padding: 30px;
  display: flex;
  align-items: flex-end;
  min-height: 240px;
  background-size: cover;
  background-position: center;
}

body.site-piccologlx .featured-lighting {
  background: linear-gradient(135deg, #c4b8a8 0%, #8a7a6a 100%);
}

body.site-piccologlx .featured-rentals {
  background: linear-gradient(135deg, #2a2015 0%, #3d3020 100%);
}

body.site-piccologlx .featured-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

/* ==========================================================================
   Piccolo Homepage - Products Section
   ========================================================================== */

body.site-piccologlx .products-section {
  padding: 60px 20px;
}

body.site-piccologlx .products-header {
  text-align: right;
  margin-bottom: 30px;
}

body.site-piccologlx .products-header p {
  color: #666;
  font-size: 0.9rem;
}

body.site-piccologlx .product-grid {
  gap: 30px;
}

body.site-piccologlx .product-item {
  text-align: left;
}

body.site-piccologlx .product-item .product-image {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);
  border-radius: 8px;
  margin-bottom: 15px;
  background-size: cover;
  background-position: center;
}

body.site-piccologlx .product-item h4 {
  font-size: 1rem;
  font-weight: 500;
  color: #222;
  margin: 0 0 5px 0;
}

body.site-piccologlx .product-price {
  color: #666;
  font-size: 0.95rem;
  margin: 0;
}

/* ==========================================================================
   Piccolo Homepage - Newsletter Section
   ========================================================================== */

body.site-piccologlx .newsletter-section {
  background-color: #1A2233 !important;
  padding: 100px 20px;
  margin-top: 60px;
}

body.site-piccologlx .newsletter-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff !important;
  margin-bottom: 0.5em;
}

body.site-piccologlx .newsletter-subtitle {
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  margin-bottom: 2em;
}

body.site-piccologlx .newsletter-form {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
}

body.site-piccologlx .newsletter-input,
body.site-piccologlx .footer-email-input {
  flex: 1;
  padding: 1rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  background: #fff;
  font-size: 1rem;
  color: #222;
}

body.site-piccologlx .newsletter-input::placeholder,
body.site-piccologlx .footer-email-input::placeholder {
  color: #999;
}

body.site-piccologlx .btn-newsletter .wp-block-button__link {
  background-color: #3a4a64 !important;
  color: #fff !important;
  padding: 1rem 2rem;
  border-radius: 8px;
}

body.site-piccologlx .btn-newsletter .wp-block-button__link:hover {
  background-color: #4a5a74 !important;
}

/* ==========================================================================
   Piccolo Homepage - Footer
   ========================================================================== */

/* Shared footer, now rendered via wp_footer (functions.php) on all four
   Piccolo sites instead of living in GLX's homepage content — page-content
   copies of shared chrome have proven fragile (an editor save silently
   wiped the Shop banner's styling once already). Page background colour
   is deliberately NOT touched here for Film/Shop, which have their own
   white-background designs — the footer bar is self-contained black
   regardless of what's above it. */
body.site-piccologlx .piccolo-footer,
body.site-piccolocamera .piccolo-footer,
body.site-piccolofilm .piccolo-footer,
body.site-piccoloshop .piccolo-footer {
  background-color: #000 !important;
  padding: 60px 20px 30px;
  color: #fff;
}

body.site-piccologlx .piccolo-footer .wp-block-columns,
body.site-piccolocamera .piccolo-footer .wp-block-columns,
body.site-piccolofilm .piccolo-footer .wp-block-columns,
body.site-piccoloshop .piccolo-footer .wp-block-columns {
  max-width: 1200px;
  margin: 0 auto;
}

body.site-piccologlx .piccolo-footer h3,
body.site-piccolocamera .piccolo-footer h3,
body.site-piccolofilm .piccolo-footer h3,
body.site-piccoloshop .piccolo-footer h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1em;
}

body.site-piccologlx .piccolo-footer p,
body.site-piccolocamera .piccolo-footer p,
body.site-piccolofilm .piccolo-footer p,
body.site-piccoloshop .piccolo-footer p {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  line-height: 1.6;
}

body.site-piccologlx .footer-heading,
body.site-piccolocamera .footer-heading,
body.site-piccolofilm .footer-heading,
body.site-piccoloshop .footer-heading {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5) !important;
  margin-bottom: 1em;
  text-transform: uppercase;
}

body.site-piccologlx .footer-social,
body.site-piccolocamera .footer-social,
body.site-piccolofilm .footer-social,
body.site-piccoloshop .footer-social {
  margin-top: 1.5em;
}

body.site-piccologlx .footer-social a,
body.site-piccolocamera .footer-social a,
body.site-piccolofilm .footer-social a,
body.site-piccoloshop .footer-social a {
  color: #fff !important;
}

/* Instagram icon — force white, override brand pink */
body.site-piccologlx .wp-social-link-instagram,
body.site-piccologlx .wp-social-link,
body.site-piccolocamera .wp-social-link-instagram,
body.site-piccolocamera .wp-social-link,
body.site-piccolofilm .wp-social-link-instagram,
body.site-piccolofilm .wp-social-link,
body.site-piccoloshop .wp-social-link-instagram,
body.site-piccoloshop .wp-social-link {
  background-color: transparent !important;
  color: #fff !important;
}

body.site-piccologlx .wp-social-link-instagram svg,
body.site-piccologlx .wp-social-link svg,
body.site-piccolocamera .wp-social-link-instagram svg,
body.site-piccolocamera .wp-social-link svg,
body.site-piccolofilm .wp-social-link-instagram svg,
body.site-piccolofilm .wp-social-link svg,
body.site-piccoloshop .wp-social-link-instagram svg,
body.site-piccoloshop .wp-social-link svg {
  fill: #fff !important;
  color: #fff !important;
}

/* Page background black so no white gap below footer — GLX only, since
   Film and Shop have their own deliberate white-background designs. */
body.site-piccologlx,
body.site-piccologlx #page {
  background-color: #000 !important;
}

body.site-piccologlx .btn-footer .wp-block-button__link {
  background-color: #3a4a64 !important;
  color: #fff !important;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  margin-top: 10px;
}

body.site-piccologlx .footer-bottom,
body.site-piccolocamera .footer-bottom,
body.site-piccolofilm .footer-bottom,
body.site-piccoloshop .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 40px;
  padding-top: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

body.site-piccologlx .footer-bottom p,
body.site-piccolocamera .footer-bottom p,
body.site-piccolofilm .footer-bottom p,
body.site-piccoloshop .footer-bottom p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

body.site-piccologlx .footer-bottom a,
body.site-piccolocamera .footer-bottom a,
body.site-piccolofilm .footer-bottom a,
body.site-piccoloshop .footer-bottom a {
  color: rgba(255,255,255,0.7);
  text-decoration: underline;
}

/* Hide default GP theme footer — piccolo-footer replaces it, everywhere */
body.site-piccologlx .site-footer,
body.site-piccologlx .site-info,
body.site-piccologlx .footer-widgets,
body.site-piccologlx .jw-site-footer,
body.site-piccolocamera .site-footer,
body.site-piccolocamera .site-info,
body.site-piccolocamera .footer-widgets,
body.site-piccolocamera .jw-site-footer,
body.site-piccolofilm .site-footer,
body.site-piccolofilm .site-info,
body.site-piccolofilm .footer-widgets,
body.site-piccolofilm .jw-site-footer,
body.site-piccoloshop .site-footer,
body.site-piccoloshop .site-info,
body.site-piccoloshop .footer-widgets,
body.site-piccoloshop .jw-site-footer {
  display: none !important;
}

/* Page and body background black — prevents white gap under footer */
body.site-piccologlx,
body.site-piccologlx #page,
body.site-piccologlx .site-content {
  background-color: #000 !important;
}

/* Remove GP's 40px bottom padding on the homepage inner container — causes gap under footer */
body.site-piccologlx .piccolo-homepage > .wp-block-group__inner-container {
  padding-bottom: 0 !important;
}

/* "Our Work" outer wrapper is transparent — give it white bg so padding shows correctly */
body.site-piccologlx .gb-element-acff8630 {
  background-color: #fff !important;
}

/* "Our Set ups" outer wrapper — keep black bg (it's on a black section) */
body.site-piccologlx .gb-element-1745dbc2 {
  background-color: #000 !important;
}

/* Instagram icon — remove pink brand background, show white icon */
body.site-piccologlx li.wp-social-link,
body.site-piccologlx li.wp-social-link-instagram {
  background-color: transparent !important;
  box-shadow: none !important;
}

body.site-piccologlx li.wp-social-link svg path,
body.site-piccologlx li.wp-social-link-instagram svg path {
  fill: #ffffff !important;
}

/* Match Lighting/Grip/Van grid width to nav banner (120px padding, 2120px max) */
body.site-piccologlx .gb-element-3d7c604c {
  padding-left: 120px !important;
  padding-right: 120px !important;
  max-width: 2120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   Piccolo GLX - Responsive
   ========================================================================== */

@media (max-width: 768px) {
  body.site-piccologlx .hero-title {
    font-size: 2.5rem;
  }

  body.site-piccologlx .category-card {
    flex-direction: column;
  }

  body.site-piccologlx .category-card .card-image {
    width: 100%;
    min-height: 150px;
  }

  body.site-piccologlx .featured-main {
    min-height: 350px;
  }

  body.site-piccologlx .featured-title {
    font-size: 1.8rem;
  }

  body.site-piccologlx .product-grid {
    flex-wrap: wrap;
  }

  body.site-piccologlx .product-grid .wp-block-column {
    flex-basis: calc(50% - 15px) !important;
  }

  body.site-piccologlx .newsletter-form {
    flex-direction: column;
  }

  body.site-piccologlx .piccolo-footer .wp-block-columns,
  body.site-piccolocamera .piccolo-footer .wp-block-columns,
  body.site-piccolofilm .piccolo-footer .wp-block-columns,
  body.site-piccoloshop .piccolo-footer .wp-block-columns {
    flex-direction: column;
    gap: 30px;
  }
}

/* =============================================================
   Piccolo Master Navigation Bar
   Shown on all four Piccolo blogs (5, 10, 12, 14)
   ============================================================= */

.piccolo-master-nav {
  width: 100%;
  background: #000;
  padding: 0 120px;
  box-sizing: border-box;
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.piccolo-master-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 2240px;
  margin: 0 auto;
  height: 48px;
}

.piccolo-master-logo {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
  white-space: nowrap;
}

.piccolo-master-logo:hover {
  opacity: 1;
  color: #fff;
}

.piccolo-master-links-group {
  display: flex;
  align-items: center;
  gap: 32px;
}

.piccolo-master-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.piccolo-master-link,
.piccolo-master-link--soon {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

a.piccolo-master-link:hover {
  color: #fff;
}

.piccolo-master-link--active {
  color: #fff;
}

.piccolo-master-link--soon {
  cursor: default;
  display: flex;
  align-items: center;
  gap: 7px;
}

.piccolo-soon-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 3px;
  padding: 2px 5px;
  line-height: 1.4;
}

/* Push fixed nav below WP admin bar when logged in */
body.admin-bar .piccolo-master-nav {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .piccolo-master-nav {
    top: 46px;
  }
}

@media (max-width: 768px) {
  .piccolo-master-nav {
    padding: 0 24px;
  }

  .piccolo-master-nav-inner {
    height: 48px;
  }

  /* Cart icon stays visible next to the hamburger; only the site-switcher
     links collapse into the dropdown. */
  .piccolo-master-links-group {
    gap: 16px;
  }

  /* Hide desktop nav links, show hamburger */
  .piccolo-master-links {
    display: none;
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    background: #000;
    padding: 20px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    z-index: 9998;
  }

  .piccolo-master-links.mobile-open {
    display: flex;
  }

  /* Hamburger button */
  .piccolo-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
    margin-left: auto;
  }

  .piccolo-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
  }

  /* Animate to X when open */
  .piccolo-hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .piccolo-hamburger.is-open span:nth-child(2) {
    opacity: 0;
  }
  .piccolo-hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Nav dropdown items full width */
  .piccolo-master-links .piccolo-master-link {
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
  }
}

/* Hide hamburger on desktop */
@media (min-width: 769px) {
  .piccolo-hamburger {
    display: none;
  }
}

/* =============================================================
   Piccolo Shop — cart icon in navigation (blog 14)
   ============================================================= */

.piccolo-cart-icon-link {
  position: relative;
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  line-height: 1;
}

.piccolo-cart-icon-link:hover {
  opacity: 0.7;
}

.piccolo-cart-icon-link svg {
  display: block;
}

.piccolo-cart-count {
  position: absolute;
  top: -7px;
  right: -9px;
  background: #000;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ==========================================================================
   Piccolo GLX (blog 10) fixes
   ========================================================================== */

/* Hide GP site header (branding/nav bar) — piccolo-master-nav replaces it.
   !important because GeneratePress's own dynamic CSS sets display on
   #masthead with an ID selector, which otherwise outranks this rule
   regardless of load order — that's what was showing through as a whole
   extra dark header bar between the new banner and the hero image. */
body.site-piccologlx .site-header,
body.site-piccolocamera .site-header,
body.site-piccoloshop .site-header,
body.site-piccolofilm .site-header {
  display: none !important;
}

/* Offset page content below fixed piccolo-master-nav (48px) on non-hero pages */
body.site-piccologlx #page,
body.site-piccolocamera #page,
body.site-piccoloshop #page,
body.site-piccolofilm #page {
  padding-top: 48px;
}

/* Hero/front pages already get their clearance from the Piccolo banner sitting
   in normal flow below the fixed nav — the 48px above is redundant there and,
   combined with the forced-black #page background, rendered as a solid black
   bar above the hero image. */
body.site-piccologlx.home #page,
body.site-piccolocamera.home #page,
body.site-piccoloshop.home #page,
body.site-piccolofilm.home #page {
  padding-top: 0 !important;
}

/* Hero pages used to pull the hero image up -48px to tuck directly behind
   the fixed nav with zero gap. Now that the shared Piccolo banner sits
   between the nav and #page, that negative margin instead opens a gap
   that exposes GLX's forced-black page background — removed. */
body.site-piccologlx .piccolo-homepage {
  margin-top: 0;
}

/* Hide WordPress page title above hero */
body.site-piccologlx .entry-title,
body.site-piccologlx .entry-header {
  display: none;
}

/* Align hero text left edge with piccolo-master-nav "PICCOLO FILM" logo */
body.site-piccologlx .piccolo-hero .wp-block-cover__inner-container {
  padding-left: 120px;
  padding-right: 120px;
  max-width: 2240px; /* matches jake-ward.com 2000px container + 60px side padding */
  margin: 0 auto;
  box-sizing: border-box;
}

/* Add breathing room above "The ultimate Swiss Army knife" section */
body.site-piccologlx .category-cards {
  padding-top: 80px;
}

@media (max-width: 768px) {
  /* Hero: full viewport height, content in lower-centre */
  body.site-piccologlx .piccolo-hero.wp-block-cover {
    min-height: 88svh !important;
    align-items: center !important;
  }

  body.site-piccologlx .piccolo-hero .wp-block-cover__inner-container {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 30%;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100%;
  }

  body.site-piccologlx .piccolo-hero .hero-content {
    display: block !important;
    max-width: none !important;
    width: 100% !important;
  }

  body.site-piccologlx .piccolo-hero .hero-label {
    display: block !important;
    text-align: center !important;
    color: rgba(255,255,255,0.85) !important;
    margin-bottom: 0.5em !important;
    width: 100% !important;
  }

  body.site-piccologlx .piccolo-hero .hero-title,
  body.site-piccologlx .piccolo-hero .wp-block-heading {
    text-align: center !important;
    width: 100% !important;
  }

  body.site-piccologlx .piccolo-hero .wp-block-buttons,
  body.site-piccologlx .piccolo-hero .hero-buttons {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 1.5rem !important;
  }

  body.site-piccologlx .piccolo-hero .wp-block-button {
    text-align: center !important;
  }

  /* Category cards: override the 400px inline padding from block editor */
  body.site-piccologlx .gb-element-3d7c604c {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 40px !important;
  }

  /* Our Work / Our Set ups headings: kill the oversized padding-right */
  body.site-piccologlx .gb-text-14205855,
  body.site-piccologlx .gb-text-ed7fc634 {
    padding-right: 0 !important;
  }

  /* Reduce heading font size so it fits on one line on mobile */
  body.site-piccologlx .gb-text-a839e02f,
  body.site-piccologlx .gb-text-14205855,
  body.site-piccologlx .gb-text-b6ff42e9,
  body.site-piccologlx .gb-text-ed7fc634 {
    font-size: 1.9rem !important;
    letter-spacing: -1px !important;
    white-space: nowrap !important;
  }

  /* Centre the heading group: flex container centres the inline grid */
  body.site-piccologlx .gb-element-f1539507,
  body.site-piccologlx .gb-element-d2eb7628,
  body.site-piccologlx .gb-element-6628c81c,
  body.site-piccologlx .gb-element-dd839cf0 {
    display: flex !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Shrink grids to content width and centre them */
  body.site-piccologlx .gb-element-cf26d081,
  body.site-piccologlx .gb-element-7c05582c,
  body.site-piccologlx .gb-element-bd9195ce,
  body.site-piccologlx .gb-element-5e386bca {
    display: inline-grid !important;
    grid-template-columns: auto auto !important;
    width: auto !important;
  }

  /* "Our" right-aligned, "Work"/"Set ups" left-aligned — stagger preserved */
  body.site-piccologlx .gb-text-a839e02f,
  body.site-piccologlx .gb-text-b6ff42e9 {
    text-align: right !important;
    justify-content: flex-end !important;
    padding-right: 8px !important;
  }
  body.site-piccologlx .gb-text-14205855,
  body.site-piccologlx .gb-text-ed7fc634 {
    text-align: left !important;
    justify-content: flex-start !important;
    padding-left: 8px !important;
  }

  /* Only reserve dropdown space for the ACTIVE card — not all three */
  .hover-reveal-parent:not(.hover-active) {
    min-height: 0 !important;
  }

  /* Remove transitions on mobile — prevents animated gap from calculateHeights() */
  .hover-reveal-parent {
    transition: none !important;
  }
  .hover-reveal {
    transition: none !important;
    max-height: none !important;
    height: auto !important;
  }
  .hover-reveal-parent:not(.hover-active) .hover-reveal {
    display: none !important;
  }
  .hover-reveal-parent.hover-active .hover-reveal {
    display: block !important;
  }

  /* Override desktop 500px default min-height — use content height only on mobile */
  .hover-reveal-parent.hover-active > .hover-reveal {
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Add bottom breathing room to the black Lighting/Grip/Van section */
  body.site-piccologlx .gb-element-1f807f42 {
    padding-bottom: 40px !important;
  }

  /* Hide empty placeholder block that creates a 100px gap */
  body.site-piccologlx .gb-element-0bc58d5b {
    display: none !important;
  }

  /* Reduce section top padding on mobile */
  body.site-piccologlx .category-cards {
    padding-top: 40px;
  }
}

/* Glassfull mobile title — hidden on desktop, shown on mobile */
.glassfull-mobile-title {
  display: none;
}

/* ==========================================================================
   Glass Full (blog 9) — mobile fixes
   ========================================================================== */
@media (max-width: 768px) {

  /* Add side padding to outer containers so text doesn't bleed off screen */
  body.site-glassfull .gb-element-37201197,
  body.site-glassfull .gb-element-da1747eb,
  body.site-glassfull .gb-element-f1539507,
  body.site-glassfull .gb-element-d2eb7628 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Keep 2-col grids for staggered headings (preserves the diagonal layout) */
  body.site-glassfull .gb-element-410a2614,
  body.site-glassfull .gb-element-b3b5f16e,
  body.site-glassfull .gb-element-cf26d081,
  body.site-glassfull .gb-element-7c05582c {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Remove 250px right padding that makes text too narrow on mobile */
  body.site-glassfull .gb-text-88e513a2,
  body.site-glassfull .gb-text-14205855 {
    padding-right: 0 !important;
  }

  /* Scale down staggered headings so they fit one line */
  body.site-glassfull .gb-text-b14b72a3,
  body.site-glassfull .gb-text-88e513a2,
  body.site-glassfull .gb-text-fb5edf94,
  body.site-glassfull .gb-text-14205855 {
    font-size: 1.6rem !important;
    letter-spacing: -1px !important;
  }

  /* Reduce oversized section padding */
  body.site-glassfull .gb-element-37201197 {
    padding-top: 40px !important;
  }
  body.site-glassfull .gb-element-da1747eb {
    padding-bottom: 40px !important;
  }
  body.site-glassfull .gb-element-f1539507 {
    padding-top: 40px !important;
  }
  body.site-glassfull .gb-element-d2eb7628 {
    padding-bottom: 40px !important;
  }

  /* Pre/Production/Post grid — override 150px padding */
  body.site-glassfull .gb-element-3d7c604c {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 40px !important;
  }

  /* Hide empty placeholder block with 100px top padding */
  body.site-glassfull .gb-element-0bc58d5b {
    display: none !important;
  }

  /* Mobile menu toggle — remove grey square background */
  body.site-glassfull .menu-toggle,
  body.site-glassfull .mobile-menu-control-wrapper .menu-toggle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Reduce the 100px spacer before "Get in touch" */
  body.site-glassfull .wp-block-spacer {
    height: 40px !important;
  }

  /* Gallery: single full-width image per project on mobile */
  body.site-glassfull .glassfull-gallery {
    gap: 0 !important;
  }

  body.site-glassfull .glassfull-gallery-row,
  body.site-glassfull .glassfull-gallery-row:nth-child(even) {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  /* Media fills full width, height determined by image aspect ratio */
  body.site-glassfull .glassfull-gallery-media,
  body.site-glassfull .glassfull-gallery-row:nth-child(even) .glassfull-gallery-media {
    width: 100% !important;
    position: relative !important;
    min-height: 0 !important;
  }

  /* Image sizes naturally — no forced height causing gaps */
  body.site-glassfull .glassfull-media-link {
    height: auto !important;
  }

  body.site-glassfull .glassfull-thumbnail {
    height: auto !important;
    width: 100% !important;
    display: block !important;
    object-fit: unset !important;
  }

  body.site-glassfull .glassfull-gallery-content,
  body.site-glassfull .glassfull-gallery-row:nth-child(even) .glassfull-gallery-content {
    display: none !important;
  }

  /* Hide hover overlay entirely on mobile (no hover on touch) */
  body.site-glassfull .glassfull-hover-overlay {
    display: none !important;
  }

  /* Mobile title — shown over the media image */
  body.site-glassfull .glassfull-mobile-title {
    display: block;
    position: absolute;
    bottom: 16px;
    left: 16px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    pointer-events: none;
    z-index: 5;
  }

  /* "Coming soon" variant — centred */
  body.site-glassfull .glassfull-mobile-coming-soon {
    bottom: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  /* Prevent hover-reveal gap on mobile (same fix as GLX) */
  body.site-glassfull .hover-reveal-parent {
    transition: none !important;
  }
  body.site-glassfull .hover-reveal {
    transition: none !important;
    max-height: none !important;
  }
  body.site-glassfull .hover-reveal-parent:not(.hover-active) .hover-reveal {
    display: none !important;
  }
  body.site-glassfull .hover-reveal-parent.hover-active .hover-reveal {
    display: block !important;
  }
  body.site-glassfull .hover-reveal-parent.hover-active > .hover-reveal {
    min-height: 0 !important;
    max-height: none !important;
  }
  body.site-glassfull .hover-reveal-parent:not(.hover-active) {
    min-height: 0 !important;
  }
}

/* ==========================================================================
   Typographic Banner
   ========================================================================== */

.jw-typo-banner {
  padding: 20px 0 16px;
}

.jw-typo-title {
  font-size: clamp(48px, 8vw, 80px);
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  margin: 0 !important;
}

.jw-typo-line.wp-block-separator {
  width: 60px !important;
  border-top: 2px solid currentColor !important;
  opacity: 0.2 !important;
  margin: 12px 0 0 !important;
}

.jw-typo-sub {
  font-size: 14px !important;
  color: #888 !important;
  margin: 8px 0 0 !important;
}

/* This block's own inner-container inherits a generic 40px bottom padding
   from ".site-main .wp-block-group__inner-container" (style.css ~line 420)
   - that rule is shared by every group block on the site, so it's overridden
   here rather than changed globally. */
.jw-typo-banner .wp-block-group__inner-container {
  padding-bottom: 0 !important;
}

.jw-typo-divider.wp-block-separator {
  opacity: 0.1 !important;
  margin: 48px 0 !important;
}

.jw-typo-banner--dark .jw-typo-title {
  color: #fff !important;
}

.jw-typo-banner--dark .jw-typo-line.wp-block-separator {
  border-color: #fff !important;
}

.jw-typo-banner--dark .jw-typo-sub {
  color: rgba(255,255,255,0.5) !important;
}

.jw-typo-section-title {
  font-size: 14px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #888 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ==========================================================================
   Genre Gallery
   ========================================================================== */

.jw-genre-gallery {
  max-width: 1400px;
  margin: 0 auto;
}

/* --- Featured section --- */
.jw-genre-featured {
  margin-bottom: 24px;
}

.jw-genre-featured-grid.wp-block-post-template {
  display: grid !important;
  gap: 16px !important;
}

.jw-genre-featured--count-1 .jw-genre-featured-grid {
  grid-template-columns: 1fr !important;
}

.jw-genre-featured--count-2 .jw-genre-featured-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

.jw-genre-featured--count-3 .jw-genre-featured-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}

.jw-genre-featured .wp-block-post {
  aspect-ratio: 16 / 9 !important;
}

@media (max-width: 1024px) {
  .jw-genre-featured--count-3 .jw-genre-featured-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .jw-genre-featured--count-2 .jw-genre-featured-grid,
  .jw-genre-featured--count-3 .jw-genre-featured-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- Gallery grid: alternating 3-2 layout with mixed ratios --- */
.jw-genre-grid-list.wp-block-post-template {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.jw-genre-grid-list .wp-block-post {
  overflow: hidden !important;
  background-color: #000 !important;
}

/* Alternating 3-2 pattern */
.jw-genre-grid-list .wp-block-post:nth-child(5n+1),
.jw-genre-grid-list .wp-block-post:nth-child(5n+2),
.jw-genre-grid-list .wp-block-post:nth-child(5n+3) {
  width: calc((100% - 32px) / 3) !important;
  flex: 0 0 calc((100% - 32px) / 3) !important;
  aspect-ratio: 16 / 9 !important;
}

.jw-genre-grid-list .wp-block-post:nth-child(5n+4),
.jw-genre-grid-list .wp-block-post:nth-child(5n+5) {
  width: calc((100% - 16px) / 2) !important;
  flex: 0 0 calc((100% - 16px) / 2) !important;
  aspect-ratio: 4 / 3 !important;
}

@media (max-width: 1024px) {
  .jw-genre-grid-list .wp-block-post:nth-child(5n+1),
  .jw-genre-grid-list .wp-block-post:nth-child(5n+2),
  .jw-genre-grid-list .wp-block-post:nth-child(5n+3),
  .jw-genre-grid-list .wp-block-post:nth-child(5n+4),
  .jw-genre-grid-list .wp-block-post:nth-child(5n+5) {
    width: calc((100% - 16px) / 2) !important;
    flex: 0 0 calc((100% - 16px) / 2) !important;
    aspect-ratio: 16 / 9 !important;
  }
}

@media (max-width: 768px) {
  .jw-genre-grid-list .wp-block-post:nth-child(5n+1),
  .jw-genre-grid-list .wp-block-post:nth-child(5n+2),
  .jw-genre-grid-list .wp-block-post:nth-child(5n+3),
  .jw-genre-grid-list .wp-block-post:nth-child(5n+4),
  .jw-genre-grid-list .wp-block-post:nth-child(5n+5) {
    width: 100% !important;
    flex: 0 0 100% !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* ==========================================================================
   Piccolo Shop — page background matches content (GP's base-2/base-3 split
   otherwise leaves a grey band around the white boxed container)
   ========================================================================== */

body.site-piccoloshop {
  background-color: #fff !important;
}

/* Glassfull — same GP base-2/base-3 grey-band issue as Piccolo Shop above,
   flagged 2026-09-29 via a real screenshot of the Ubank project page (grey
   visible around the white boxed content and below the new footer). */
body.site-glassfull {
  background-color: #fff !important;
}

/* Piccolo sites — shared top banner, now shown on all four Piccolo sites
   (originally Shop-only, class name kept for continuity). Flexbox centering
   (not padding-driven) so the title sits dead-center regardless of
   font/line-height metrics, which otherwise render slightly differently
   between the live page and editor. Colour, size, weight, spacing,
   alignment and height are all editable via Appearance > Customize >
   Piccolo Banner, and set as inline styles by PHP — the values below are
   just structural fallbacks. */
body.site-piccoloshop .piccolo-shop-banner,
body.site-piccolofilm .piccolo-shop-banner,
body.site-piccologlx .piccolo-shop-banner,
body.site-piccolocamera .piccolo-shop-banner {
  display: flex;
  align-items: center;
  padding: 20px;
  margin-bottom: 40px;
}

/* Hero/front pages don't need the banner's normal bottom margin — since the
   body/page background is forced black on these sites, that margin gap
   between the banner and the hero was rendering as a solid black bar. */
body.site-piccologlx.home .piccolo-shop-banner,
body.site-piccolocamera.home .piccolo-shop-banner,
body.site-piccoloshop.home .piccolo-shop-banner,
body.site-piccolofilm.home .piccolo-shop-banner {
  margin-bottom: 0 !important;
}

body.site-piccoloshop .piccolo-shop-banner-title,
body.site-piccolofilm .piccolo-shop-banner-title,
body.site-piccologlx .piccolo-shop-banner-title,
body.site-piccolocamera .piccolo-shop-banner-title {
  margin: 0;
  font-family: 'Montserrat', sans-serif !important;
  /* line-height:1 (not 1.2) keeps the line box close to the glyphs' own
     cap-height — a taller line-height reserves extra space below the
     baseline for descenders (g/y/p) that all-caps text never uses, which
     makes align-items:center visually sit a few px too high. */
  line-height: 1;
  width: 100%;
}

body.site-piccoloshop .piccolo-shop-banner-title a,
body.site-piccolofilm .piccolo-shop-banner-title a,
body.site-piccologlx .piccolo-shop-banner-title a,
body.site-piccolocamera .piccolo-shop-banner-title a {
  transition: opacity 0.2s ease;
}

body.site-piccoloshop .piccolo-shop-banner-title a:hover,
body.site-piccolofilm .piccolo-shop-banner-title a:hover,
body.site-piccologlx .piccolo-shop-banner-title a:hover,
body.site-piccolocamera .piccolo-shop-banner-title a:hover {
  opacity: 0.8;
}

/* Piccolo Shop — thumbnail hover zoom */
body.site-piccoloshop ul.products li.product .woocommerce-loop-product__link,
body.site-piccoloshop .wc-block-grid__product-image {
  display: block;
  overflow: hidden;
}

body.site-piccoloshop ul.products li.product img,
body.site-piccoloshop .wc-block-grid__product-image img {
  transition: transform 0.35s ease;
}

body.site-piccoloshop ul.products li.product .woocommerce-loop-product__link:hover img,
body.site-piccoloshop .wc-block-grid__product-link:hover .wc-block-grid__product-image img {
  transform: scale(1.06);
}

/* Piccolo Shop — uniform thumbnail box (product photos have mixed aspect ratios).
   WC's own CSS makes .wc-block-grid__product-link inline-block, which shrink-wraps
   to the image's natural size instead of filling the grid column — force it to
   stretch full width so a 2-column row's images are proportionally larger than a
   3-column row's, filling the same total row width either way. */
body.site-piccoloshop .wc-block-grid__product-link {
  display: block;
  width: 100%;
}

body.site-piccoloshop .wc-block-grid__product-image {
  aspect-ratio: 1 / 1;
  width: 100%;
}

body.site-piccoloshop .wc-block-grid__product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Piccolo Shop — two-line product titles (name / description split on a real newline) */
body.site-piccoloshop .wc-block-grid__product-title {
  white-space: pre-line;
}

/* Piccolo Shop — single product page: one image at a time with prev/next +
   dots, instead of the default full contact-sheet grid of every photo. */
body.site-piccoloshop.single-product .woocommerce-product-gallery__wrapper.piccolo-gallery-enabled {
  display: block;
  position: relative;
}

body.site-piccoloshop.single-product .woocommerce-product-gallery__wrapper.piccolo-gallery-enabled .woocommerce-product-gallery__image {
  display: none;
}

body.site-piccoloshop.single-product .woocommerce-product-gallery__wrapper.piccolo-gallery-enabled .woocommerce-product-gallery__image.piccolo-gallery-active {
  display: block;
}

body.site-piccoloshop.single-product .piccolo-gallery-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
}

body.site-piccoloshop.single-product .piccolo-gallery-nav > * {
  pointer-events: auto;
}

body.site-piccoloshop.single-product .piccolo-gallery-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: #333 !important;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease;
}

body.site-piccoloshop.single-product .piccolo-gallery-arrow:hover {
  background: #fff;
}

body.site-piccoloshop.single-product .piccolo-gallery-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

body.site-piccoloshop.single-product .piccolo-gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #b7b7b7;
  padding: 0;
  cursor: pointer;
}

body.site-piccoloshop.single-product .piccolo-gallery-dot.is-active {
  background: #1a1a1c;
}

/* Piccolo Shop — thumbnail strip below the main gallery image */
body.site-piccoloshop.single-product .piccolo-gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

body.site-piccoloshop.single-product .piccolo-gallery-thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #f0f0f0;
  cursor: pointer;
  flex-shrink: 0;
}

body.site-piccoloshop.single-product .piccolo-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.site-piccoloshop.single-product .piccolo-gallery-thumb.is-active {
  border-color: #1a1a1c;
}

/* Piccolo Shop — plain description text sits beside the gallery, in the summary column */
body.site-piccoloshop.single-product .piccolo-product-description {
  margin-top: 32px;
}

/* Piccolo Shop — WooCommerce's default buttons (Add to cart, Place order,
   Proceed to checkout, etc.) use WooCommerce's own purple brand colour;
   override to the site's black/dark theme. */
body.site-piccoloshop a.button,
body.site-piccoloshop button.button,
body.site-piccoloshop input.button,
body.site-piccoloshop a.button.alt,
body.site-piccoloshop button.button.alt,
body.site-piccoloshop input.button.alt,
body.site-piccoloshop #respond input#submit,
body.site-piccoloshop .wc-block-grid__product-add-to-cart .wp-block-button__link {
  background-color: #1a1a1c;
  border-color: #1a1a1c;
  color: #fff;
}

body.site-piccoloshop a.button:hover,
body.site-piccoloshop button.button:hover,
body.site-piccoloshop input.button:hover,
body.site-piccoloshop a.button.alt:hover,
body.site-piccoloshop button.button.alt:hover,
body.site-piccoloshop input.button.alt:hover,
body.site-piccoloshop #respond input#submit:hover,
body.site-piccoloshop .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
  background-color: #000;
  border-color: #000;
  color: #fff;
}

/* Piccolo Shop — custom product image lightbox (replaces WooCommerce's own,
   lost when wc-single-product.js was dequeued to stop it fighting the
   gallery carousel). */
.piccolo-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 100000;
  align-items: center;
  justify-content: center;
}

.piccolo-lightbox.is-open {
  display: flex;
}

.piccolo-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

.piccolo-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}

.piccolo-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
}

.piccolo-lightbox-arrow:hover {
  background: rgba(255, 255, 255, 0.3);
}

.piccolo-lightbox-prev {
  left: 24px;
}

.piccolo-lightbox-next {
  right: 24px;
}

body.site-piccoloshop.single-product .woocommerce-product-gallery__image a {
  cursor: zoom-in;
}

/* Piccolo Shop — hover magnifier for the main gallery image: a zoomed crop
   of the full-size photo is shown as a background layer (set via JS) that
   pans to follow the mouse; the plain <img> underneath is hidden while active. */
body.site-piccoloshop.single-product .woocommerce-product-gallery__image {
  overflow: hidden;
}

body.site-piccoloshop.single-product .woocommerce-product-gallery__image.piccolo-zoom-active {
  cursor: zoom-in;
}

body.site-piccoloshop.single-product .woocommerce-product-gallery__image.piccolo-zoom-active img {
  opacity: 0;
}

/* Piccolo Shop — checkout: local pickup pre-arrangement confirmation modal */
.piccolo-pickup-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100000;
  align-items: center;
  justify-content: center;
}

.piccolo-pickup-modal.is-open {
  display: flex;
}

.piccolo-pickup-modal-box {
  background: #fff;
  border-radius: 8px;
  padding: 28px;
  max-width: 420px;
  width: calc(100% - 40px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.piccolo-pickup-modal-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.5;
}

.piccolo-pickup-modal-checkbox input {
  margin-top: 3px;
  flex-shrink: 0;
}

.piccolo-pickup-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.piccolo-pickup-modal-cancel,
.piccolo-pickup-modal-continue {
  padding: 10px 18px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.piccolo-pickup-modal-cancel {
  background: #ececec;
  color: #333;
}

.piccolo-pickup-modal-continue {
  background: #1a1a1c;
  color: #fff;
}

.piccolo-pickup-modal-continue:disabled {
  background: #ccc;
  color: #888;
  cursor: not-allowed;
}

/* Piccolo Film — main site landing page: white background, black text throughout
   (cards keep white text since they sit over a dark photo overlay — see the
   !important on their text-color rules further down, needed since the
   general heading/paragraph rules below now outrank them on specificity). */
body.site-piccolofilm {
  background-color: #fff !important;
  color: #1a1a1c;
}

body.site-piccolofilm .site-content,
body.site-piccolofilm .content-area,
body.site-piccolofilm .entry-content {
  background-color: #fff;
}

body.site-piccolofilm .entry-content {
  padding: 60px 20px 100px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Headings inside image covers (the landing cards) are left out, so they
   inherit the card's white text or use the colour picked in the editor. */
body.site-piccolofilm .entry-content .wp-block-heading:not(.wp-block-cover .wp-block-heading) {
  color: #1a1a1c;
}
body.site-piccolofilm .entry-content .wp-block-heading {
  text-align: center;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.site-piccolofilm .entry-content h1.wp-block-heading {
  font-size: 48px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4em;
}

body.site-piccolofilm .entry-content > .wp-block-paragraph,
body.site-piccolofilm .entry-content > p {
  color: rgba(26, 26, 28, 0.7);
  text-align: center;
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  body.site-piccolofilm .entry-content h1.wp-block-heading {
    font-size: 32px;
  }
}

/* Piccolo Film — main site landing page cards (GLX / Camera / Shop) */
body.site-piccolofilm .piccolo-landing-cards {
  gap: 24px;
  margin-top: 40px;
}

/* .piccolo-landing-card is now a core/cover block — it already handles the
   background image + dim overlay natively, we just need rounded corners
   and the inner content padding/alignment. */
body.site-piccolofilm .piccolo-landing-card.wp-block-cover {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 5 !important;
}

body.site-piccolofilm .piccolo-landing-card .wp-block-cover__inner-container {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  color: #fff !important;
}

body.site-piccolofilm .piccolo-landing-card h3 {
  color: #fff !important;
  margin: 0 0 6px;
  font-size: 1.4rem;
}

body.site-piccolofilm .piccolo-landing-card p {
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 16px;
}

body.site-piccolofilm .piccolo-landing-card .wp-block-button__link {
  background-color: #fff;
  color: #1a1a1c;
  border-radius: 999px;
  padding: 10px 24px;
  font-weight: 600;
}

body.site-piccolofilm .piccolo-landing-card .wp-block-button__link:hover {
  background-color: #eee;
}

body.site-piccolofilm .piccolo-landing-card.is-coming-soon {
  filter: grayscale(0.4);
}

body.site-piccolofilm .piccolo-landing-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: fit-content;
  align-self: center;
}

/* Page background is white again, matching .jw-site-footer's own default —
   kept as an explicit rule so it's clear this was a deliberate match, not
   an oversight, if the page background changes again in future. */
body.site-piccolofilm .jw-site-footer {
  background-color: #fff;
}

@media (max-width: 768px) {
  body.site-piccolofilm .piccolo-landing-cards {
    flex-direction: column;
  }
}

/* Piccolo Shop — bundle-tier picker on Small/Medium Pouch product pages */
body.site-piccoloshop .piccolo-bundle-picker {
  margin: 20px 0;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  overflow: hidden;
}

body.site-piccoloshop .piccolo-bundle-picker-heading {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid #e2e2e2;
  background-color: #f7f8f9;
}

body.site-piccoloshop .piccolo-bundle-tier {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  border-bottom: 1px solid #e2e2e2;
  transition: background-color 0.15s ease;
}

body.site-piccoloshop .piccolo-bundle-tier:last-child {
  border-bottom: none;
}

body.site-piccoloshop .piccolo-bundle-tier:hover {
  background-color: #fafafa;
}

body.site-piccoloshop .piccolo-bundle-tier.is-selected {
  background-color: #f7f8f9;
}

body.site-piccoloshop .piccolo-bundle-tier input[type="radio"] {
  margin: 0;
  accent-color: #1a1a1c;
}

body.site-piccoloshop .piccolo-bundle-tier-label {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.site-piccoloshop .piccolo-bundle-tier-price {
  font-size: 15px;
  font-weight: 700;
}

body.site-piccoloshop .piccolo-bundle-save-badge {
  display: inline-block;
  padding: 2px 8px;
  background-color: #1a1a1c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
}

/* Piccolo Shop checkout — shipping is the primary address, billing optional.
   Reorder the two columns visually so shipping (col-2) appears first, and
   hide WC's native "Ship to a different address?" toggle since it's now
   forced permanently checked (via woocommerce_ship_to_destination='shipping')
   rather than optional — see functions.php and checkout-billing-toggle.js. */
body.site-piccoloshop .woocommerce-checkout .col2-set {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

body.site-piccoloshop .woocommerce-checkout .col2-set .col-1 {
  order: 2;
  flex: 1 1 300px;
  width: auto;
}

body.site-piccoloshop .woocommerce-checkout .col2-set .col-2 {
  order: 1;
  flex: 1 1 300px;
  width: auto;
}

body.site-piccoloshop #ship-to-different-address {
  display: none !important;
}

/* Billing fields hidden by default until "Bill to a different address?" is
   checked — set here (not just via JS) so there's no flash of visible
   billing fields before checkout-billing-toggle.js runs on page load. */
body.site-piccoloshop .woocommerce-billing-fields .billing_address {
  display: none;
}

/* The Reviews tab already shows "Reviews (N)" on its own tab button, so the
   default "1 review for Small Pouch" heading repeating the product name
   above the review list is redundant clutter. */
body.site-piccoloshop .woocommerce-Reviews-title {
  display: none;
}

/* "Add a review" form, collapsed by default behind a native <details>
   disclosure (same pattern as .jw-equipment-details below, dark-text
   variant since the shop's review section sits on a white background). */
body.site-piccoloshop .jw-review-toggle summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  margin: 1.5em 0 0.5em;
}

body.site-piccoloshop .jw-review-toggle summary::-webkit-details-marker {
  display: none;
}

body.site-piccoloshop .jw-review-toggle summary::after {
  content: "▸";
  display: inline-block;
  margin-left: 0.5em;
  color: #333;
}

body.site-piccoloshop .jw-review-toggle[open] summary::after {
  content: "▾";
}

/* Expandable equipment breakdown (native <details>/<summary>) — used on
   direct-link-only quote pages like /testimonalpackages/ */
.jw-equipment-details {
  margin: 6px 0;
}

.jw-equipment-details[open] {
  margin-bottom: 28px;
}

.jw-equipment-details summary {
  cursor: pointer;
  list-style: none;
}

.jw-equipment-details summary::-webkit-details-marker {
  display: none;
}

.jw-equipment-details summary::after {
  content: "▸";
  display: inline-block;
  margin-left: 0.5em;
  color: #fff;
}

.jw-equipment-details[open] summary::after {
  content: "▾";
}

.jw-equipment-details ul {
  margin: 10px 0 4px 1.6em;
  padding: 0;
  font-size: 0.9em;
  opacity: 0.9;
}

.jw-equipment-details li {
  margin-bottom: 4px;
}

.jw-equipment-subheading {
  font-size: 0.9em !important;
  font-weight: bold;
  margin: 10px 0 4px 1.6em !important;
  opacity: 1;
}

.jw-equipment-details li.jw-equipment-label {
  list-style: none;
  font-weight: bold;
  margin-left: -1.2em;
  margin-top: 10px;
}

/* Stills masonry gallery (jakeofalltrades.au/stills/ and anywhere else it's
   embedded, e.g. via [shared_content]) - a matching editor-only version of
   this existed in editor-stills.css but was never wired up for the front
   end, so the gallery only ever displayed as a plain vertical stack. */
.stills-masonry-gallery .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stills-masonry-gallery figure.wp-block-image {
  margin: 0;
  position: relative;
  overflow: hidden;
}

.stills-masonry-gallery figure.wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .stills-masonry-gallery .wp-block-group__inner-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stills-masonry-gallery .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }
}

/* Touch devices: archive-grid overlay text/scrim follow .jw-touch-active (set by
   jw-hover-video-gallery's first-tap/hold logic) instead of the sticky :hover. */
@media (hover: none) {
  .jw-archive-gallery .wp-block-post:not(.jw-touch-active):hover .wp-block-post-featured-image::after,
  .jw-archive-gallery .wp-block-post:not(.jw-touch-active) .thumb-wrap:hover .overlay-text {
    opacity: 0;
  }
  .jw-archive-gallery .wp-block-post.jw-touch-active .wp-block-post-featured-image::after,
  .jw-archive-gallery .wp-block-post.jw-touch-active .overlay-text {
    opacity: 1;
  }
}

/* Touch devices: DOP banner cards and standard cards follow .jw-touch-active
   (set by js/hover-autoplay.js's two-tap logic) instead of the sticky :hover. */
@media (hover: none) {
  body.site-dop .project-banner-dop:not(.jw-touch-active):hover .banner-row::after {
    opacity: 0 !important;
  }
  body.site-dop .project-banner-dop.jw-touch-active .banner-row::after {
    opacity: 1 !important;
  }
  body.site-dop .project-banner-dop:not(.jw-touch-active):hover .dop-overlay .overlay-name,
  body.site-dop .project-banner-dop:not(.jw-touch-active):hover .dop-overlay .overlay-client {
    opacity: 0 !important;
  }
  body.site-dop .project-banner-dop.jw-touch-active .dop-overlay .overlay-name {
    opacity: 1 !important;
  }
  body.site-dop .project-banner-dop.jw-touch-active .dop-overlay .overlay-client {
    opacity: 0.8 !important;
  }
  /* Standard cards only (the active class sits on the .thumb-wrap itself). The
     banner cards' centre .thumb-wrap is NOT the active element (the article is),
     and archive-grid figures are handled by the .jw-archive-gallery rules, so
     both are excluded - otherwise this hid the banner's name/client overlay. */
  .project-card:not(.project-banner-dop) .thumb-wrap:not(.jw-touch-active):hover .overlay-text,
  .project-card:not(.project-banner-dop) .thumb-wrap:not(.jw-touch-active):hover .overlay-corner {
    opacity: 0;
  }
  .project-card:not(.project-banner-dop) .thumb-wrap.jw-touch-active .overlay-text,
  .project-card:not(.project-banner-dop) .thumb-wrap.jw-touch-active .overlay-corner {
    opacity: 1;
  }
  /* No long-press link menu / text selection on cards. */
  .project-card a,
  .project-card img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* jake-ward.com homepage grid + Archive page grid (both render through the
   same .jw-role-gallery wrapper - the Archive page's own grid additionally
   carries .jw-archive-gallery on the SAME element, see jw_archive_gallery()
   in functions.php, so one rule covers both) - on mobile the thumbnails sat
   inset from the screen edges instead of full width like DOP's homepage.
   Root cause: GeneratePress's own container padding (`.one-container
   .site-content`, 40px desktop, reduced to 30px at its own 768px
   breakpoint - confirmed via live stylesheet inspection, no smaller
   breakpoint exists below that). GP does ship a same-breakpoint rule to
   break an `alignfull` block back out of that padding on mobile
   (`.entry-content .alignwide, body:not(.no-sidebar) .entry-content
   .alignfull { margin-left:-30px; width:calc(100% + 60px) }`) - but it's
   explicitly `body:not(.no-sidebar)`, and jake-ward.com's body carries
   `.no-sidebar` (this site's own GP layout setting), so that rule never
   applies here. The gallery's own immediate wrapper (a `wp:group
   alignfull` with its own inline 40px padding) was already separately
   neutralised to 0 at every width by this stylesheet's own earlier
   generic full-width-gallery rule (`.wp-block-group:has(.wp-block-post-
   template) { padding:0 !important }`, ~line 540) - confirmed via
   `getComputedStyle` this leaves `.site-content`'s own padding as the
   ONLY remaining inset, so a single fix here is enough; nothing here
   should be confused with the DOP Archive page's fix (2026-09-23, a few
   rows above) - that page had a SECOND, separate padding source (a real,
   un-neutralised block attribute) on top of the same GP container issue.
   Fixed the same way as that DOP fix: a scoped negative-margin breakout
   rather than zeroing `.site-content` for the whole site (would also
   flush unrelated page text - bios, project pages, etc. - to the screen
   edges on mobile, not just this gallery). Desktop (>768px, this site's
   own 40px .site-content padding) is untouched - only this mobile
   breakpoint is affected, and only this specific gallery wrapper class,
   not `body.site-director`'s `.site-content` generally. */
@media (max-width: 768px) {
  body.site-director .jw-role-gallery {
    margin-left: -30px !important;
    margin-right: -30px !important;
    width: calc(100% + 60px) !important;
    max-width: calc(100% + 60px) !important;
  }
}

/* jw/project-picker (any page using it, e.g. SPORT, Comedy, Emotive, Food &
   Beverage) had ZERO responsive handling of any kind: every grid/row it
   builds (uniform columns, custom columns-per-row, multi-ratio justified
   rows) writes its column count / span / flex / aspect-ratio directly into
   the element's own `style="..."` attribute WITH `!important` on every
   value - and an inline declaration marked !important can never be beaten
   by any external stylesheet rule, !important or not, regardless of
   specificity or source order (this is a hard CSS rule, not a specificity
   fight to win). That inline !important was needed to beat
   jw-hover-video-gallery's own base `ul.wp-block-post-template { display:
   grid; grid-template-columns: repeat(3,1fr) !important }` rule (which,
   not coincidentally, already collapses to a single column on its own
   below 1000px - this exact "1 per row on mobile" behaviour was already
   the network's default; Project Picker's permanent inline override was
   simply blocking it from ever taking effect on ANY screen size).
   Fixed by moving every value that needs to differ by breakpoint OUT of
   the inline style and into CSS custom properties instead (see
   jw-project-picker.php) - custom properties aren't specificity-contested
   the way real CSS properties are, since nothing else on the page sets
   these particular names, so an external rule reading them via var() is
   free to change on any breakpoint without fighting the inline-!important
   rule at all. The `.jw-project-picker` wrapper (added to
   jw_project_picker_render()'s return value) scopes all of this to only
   this block's own output. */
.jw-project-picker .jw-pp-grid {
  grid-template-columns: repeat(var(--jw-pp-columns, 3), 1fr) !important;
}
.jw-project-picker .jw-pp-grid > li {
  grid-column: span var(--jw-pp-span, 1) !important;
}
.jw-project-picker .jw-pp-row > li {
  flex: var(--jw-pp-ratio, 1) 1 0px !important;
  min-width: 0 !important;
  aspect-ratio: auto !important;
}
.jw-project-picker .jw-pp-row {
  aspect-ratio: var(--jw-pp-row-ratio, auto) / 1 !important;
}

@media (max-width: 600px) {
  .jw-project-picker .jw-pp-grid {
    grid-template-columns: 1fr !important;
  }
  .jw-project-picker .jw-pp-grid > li {
    /* 1/-1 spans the grid's only column regardless of the item's own
       --jw-pp-span (a custom-rows span of e.g. 20 on a grid that's just
       been collapsed to one explicit column would otherwise force the
       browser to create extra implicit columns to satisfy it, causing
       horizontal overflow instead of a clean single column). */
    grid-column: 1 / -1 !important;
  }
  .jw-project-picker .jw-pp-row {
    flex-direction: column !important;
    aspect-ratio: auto !important;
  }
  .jw-project-picker .jw-pp-row > li {
    /* Falls back to the tile's own true aspect-ratio (the same numeric
       custom property already used for its flex-grow share on desktop -
       CSS aspect-ratio accepts a single <number> the same way flex-grow
       does), not a fixed 16:9 guess, so a genuinely 9:16 project still
       shows tall on a phone rather than being cropped to land ratio. */
    flex: none !important;
    width: 100% !important;
    aspect-ratio: var(--jw-pp-ratio, 16 / 9) !important;
  }
}

/* ─── jakewarddp.com About page - divider between bio and credits, thicker ─── */
.jw-about-divider.wp-block-separator {
    height: 3px !important;
    border-top-width: 3px !important;
}

/* Piccolo Camera: the site's Additional CSS forces #content to width:100%, and
   GP's 40px .site-content padding sat outside that width (content-box), so the
   whole content column was 80px wider than the white page panel. */
body.site-piccolocamera #content {
    box-sizing: border-box;
}

/* Piccolo Camera homepage: the Piccolo banner is removed here (functions.php),
   so the hero cover is the master banner. Clear the fixed 48px nav and drop
   the content's top padding/margin so the hero sits right under the nav. */
html body.site-piccolocamera.home #page {
    padding-top: 48px !important;
}
body.site-piccolocamera.home #content {
    padding-top: 0 !important;
}
body.site-piccolocamera.home .entry-content {
    margin-top: 0 !important;
}