/*
* FooGallery Custom CSS
* This file is created by adding custom CSS on FooGallery Settings page in wp-admin
* Created : 29 Aug 2026, 6:38 pm
*/

/* ==================================================
   FOOBOX — CUSTOM DESKTOP VIEWER
   ==================================================
   Custom FooBox styling is used only on desktop.

   1000px and above:
   - Custom minimal viewer
   - Custom image sizing
   - Custom captions
   - Custom arrows
   - Custom overlay

   Below 1000px:
   - These rules do not apply
   - FooBox uses its standard responsive/mobile styles
   ================================================== */

@media screen and (min-width: 1000px) {


/* ==================================================
   FOOBOX — MINIMAL IMAGE VIEWER
   ==================================================
   
   Customizes FooBox into a stripped-down image viewer:
   - Semi-transparent dark overlay
   - No frame or drop shadow
   - No close X
   - Image scaled down to reserve room for caption
   - Caption positioned below image
   - Duplicate caption description hidden
   - Loading spinner hidden
   - Lightweight custom navigation arrows
   ================================================== */


/* ==================================================
   1. MODAL BACKGROUND
   ==================================================
   Semi-transparent black overlay allows the underlying
   project page to remain faintly visible.
*/
body .fbx-modal {
  background: rgba(0, 0, 0, 0.75) !important;
}


/* ==================================================
   2. REMOVE DEFAULT FOOBOX FRAME / CHROME
   ==================================================
   Removes FooBox's background, border, rounded corners,
   and shadow from the main lightbox container.
   
   overflow: visible is important because our navigation
   arrows extend slightly beyond this container.
*/
body .fbx-modal .fbx-inner {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}


/* ==================================================
   3. CLEAN UP IMAGE STAGE
   ==================================================
   Removes any remaining background, border, or shadow
   around the area containing the photograph.
   
   overflow: visible allows the caption to sit below
   the reduced image plane without being clipped.
*/
body .fbx-modal .fbx-stage {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}


/* ==================================================
   4. REMOVE CLOSE CONTROLS
   ==================================================
   FooBox provides:
   - .fbx-close = main top-right X
   - .fbx-close-caption = X associated with caption
   
   We don't need either because the lightbox can still
   be dismissed using its normal overlay / keyboard behavior.
*/
body .fbx-modal button.fbx-close,
body .fbx-modal .fbx-close-caption {
  display: none !important;
}


/* ==================================================
   5. IMAGE PLANE SIZE
   ==================================================
   Reserve 90px at the bottom of the FooBox stage for
   caption text.
   
   IMPORTANT:
   We apply this SAME size to:
   - current image
   - incoming/next image
   - previous image
   
   FooBox preloads images into .fbx-item-next / prev
   before promoting them to .fbx-item-current.
   
   Previously only .fbx-item-current was reduced by 90px.
   That meant an incoming image could briefly render at
   FooBox's full size, then suddenly shrink when it became
   the current image — causing the visible "snap."
   
   Keeping all three planes identical should prevent that.
*/
body .fbx-modal .fbx-item-current,
body .fbx-modal .fbx-item-next,
body .fbx-modal .fbx-item-prev {
  height: calc(100% - 90px) !important;
  max-height: calc(100% - 90px) !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  overflow: hidden !important;
}


/* ==================================================
   /* ==================================================
   6. SCALE ALL IMAGES TO THEIR IMAGE PLANE
   ==================================================
   Keep the image's own element box matched to the
   visible photograph.

   This is important because portrait and landscape
   images have different rendered widths. The caption
   will use this actual image width for alignment.
*/
body .fbx-modal .fbx-item-current,
body .fbx-modal .fbx-item-next,
body .fbx-modal .fbx-item-prev {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body .fbx-modal .fbx-item-current > img.fbx-item-image,
body .fbx-modal .fbx-item-next > img.fbx-item-image,
body .fbx-modal .fbx-item-prev > img.fbx-item-image {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
}

/* ==================================================
   7. CAPTION POSITION + TRANSITION
   ==================================================
   Caption remains positioned beneath the photograph.

   During image advancement JavaScript hides the caption.
   Once the next photograph has loaded, it waits 1000ms
   and then fades the caption back in.

   Only opacity is animated — never position or size.
*/
body .fbx-modal .fbx-caption {
  position: absolute !important;

  top: calc(100% - 90px) !important;
  bottom: auto !important;

  left: 0;
  right: auto !important;

  height: auto !important;

  padding: 4px 0 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  color: #fff !important;
  text-align: left !important;

  box-sizing: border-box !important;

  transform: none !important;
  animation: none !important;

  /* The ONLY animated property */
  transition: opacity 500ms ease !important;
}

/* ==================================================
   8. CAPTION TYPOGRAPHY
   ==================================================
   Apply one consistent typographic treatment to all
   artwork caption information.

   FooBox stores the information in two separate fields:
   - .fbx-caption-title = artwork title / year
   - .fbx-caption-desc  = medium / dimensions

   Keep those fields separate in WordPress for easier
   metadata management, but style them identically here.

   This means individual images do NOT need any manual
   formatting in their metadata fields.
   ================================================== */

body .fbx-modal .fbx-caption-title,
body .fbx-modal .fbx-caption-desc {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  width: 100% !important;
  max-width: 100% !important;

  font-size: 16px !important;
  line-height: 1.35 !important;

  font-style: italic !important;
  font-weight: 400 !important;

  color: rgba(255, 255, 255, 0.78) !important;

  text-align: left !important;

  box-sizing: border-box !important;
}


/*
 Small separation between the title/year and the
 secondary artwork details without changing their
 typography.
*/
body .fbx-modal .fbx-caption-desc {
  margin-top: 2px !important;
}

/* ==================================================
   10. REMOVE LOADING / TRANSITION SPINNER
   ==================================================
   Prevents FooBox's loading indicator from appearing
   between images while navigating.
*/
body .fbx-modal .fbx-loader {
  display: none !important;
}


/* ==================================================
   11. PREVIOUS / NEXT BUTTON CONTAINERS
   ==================================================
   Remove FooBox's normal button backgrounds and shadows.
   
   The buttons remain 48x48px so there is still a generous
   invisible click target even though the visible arrow is small.
*/
body .fbx-modal button.fbx-prev,
body .fbx-modal button.fbx-next {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  top: 50% !important;
  margin: 0 !important;

  width: 48px !important;
  height: 48px !important;

  overflow: visible !important;
  opacity: 1 !important;
}


/* ==================================================
   12. NAVIGATION BUTTON POSITION
   ==================================================
   FooBox anchors the buttons to the left/right edges of
   .fbx-inner.
   
   Translating them by 25px places the arrows slightly
   outside the photograph while keeping them close to
   the image edge.
*/
body .fbx-modal button.fbx-prev {
  left: 0 !important;
  right: auto !important;

  transform: translate(-25px, -50%) !important;
}

body .fbx-modal button.fbx-next {
  right: 0 !important;
  left: auto !important;

  transform: translate(25px, -50%) !important;
}


/* ==================================================
   13. REMOVE FOOBOX'S BUILT-IN SVG ARROWS
   ==================================================
   FooBox's default SVG arrows are visually heavier than
   we want, so hide them completely.
   
   The custom arrows below replace them.
*/
body .fbx-modal button.fbx-prev .fbx-icon,
body .fbx-modal button.fbx-next .fbx-icon {
  display: none !important;
}


/* ==================================================
   14. CUSTOM LIGHTWEIGHT ARROWS
   ==================================================
   Draw a simple white chevron using two 1.5px borders.
   
   This gives us direct control over visual weight without
   modifying FooBox's embedded SVG artwork.
*/
body .fbx-modal button.fbx-prev::before,
body .fbx-modal button.fbx-next::before {
  content: "" !important;

  display: block !important;

  width: 14px !important;
  height: 14px !important;

  border-top: 1.5px solid #fff !important;
  border-left: 1.5px solid #fff !important;

  position: absolute !important;
  top: calc(50% - 45px)  !important;
  left: 50% !important;

  margin: 0 !important;
}


/* Left-facing custom chevron */
body .fbx-modal button.fbx-prev::before {
  transform: translate(-35%, -50%) rotate(-45deg) !important;
}


/* Right-facing custom chevron */
body .fbx-modal button.fbx-next::before {
  transform: translate(-65%, -50%) rotate(135deg) !important;
}


/* ==================================================
   15. REMOVE ANY REMAINING FOOBOX BUTTON SHADOW
   ==================================================
   FooBox adds the .fbx-btn-shadow utility class to its
   controls. Neutralize it globally within this modal.
*/
body .fbx-modal .fbx-btn-shadow {
  box-shadow: none !important;
  text-shadow: none !important;
}

}