/* ==========================================================================
   PROJECT:   Jim Fuhrmann - Dynamic Photo Gallery
   FILE:      style.css
   AUTHOR:    Jim Fuhrmann (https://www.jimfuhrmann.com)
   COPYRIGHT: Copyright (c) 2026 Jim Fuhrmann. All Rights Reserved.
   ========================================================================== */

@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");

/* ==========================================================================
   NO-JS PROOFING FALLBACK PROTECTION
   ========================================================================== */

/* 1. Tell the browser to ignore the mouse on the image entirely */
html[data-proof-mode="true"] .gallery-item img,
html[data-proof-mode="true"] #lightbox-img {
	pointer-events: none;
	-webkit-touch-callout: none; /* Disables the long-press save menu on iOS */
	user-select: none;
}

/* 2. Optional: The "Transparent Brick Wall" Trick */
html[data-proof-mode="true"] .gallery-item::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background: rgba(0, 0, 0, 0); /* Completely transparent invisible layer */
}

/* 1. Hide the credit by default when data attribute is false */
html[data-show-credit="false"] .photographer-credit {
	display: none !important;
}

/* 2. Show the credit when data attribute is true */
html[data-show-credit="true"] .photographer-credit {
	display: inline;
}

/* ==========================================================================
   DYNAMIC PROOF-MODE VECTOR WATERMARK LAYER (SPLIT SCALING)
   ========================================================================== */

/* --- 1. Base Shared Layout Mechanics --- */
html[data-proof-mode="true"] .gallery-item::after,
html[data-proof-mode="true"] #lightbox-image-container::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	pointer-events: none;
	mix-blend-mode: difference;
	background-repeat: repeat;
}

/* --- 2. Thumbnail Grid Optimization (Smaller Tile Bounds) --- */
html[data-proof-mode="true"] .gallery-item::after {
	/* 150x150px tile boundary, 14px font size */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'><text x='50%' y='50%' font-family='sans-serif' font-size='14' font-weight='700' fill='rgba(255, 255, 255, 0.35)' text-anchor='middle' transform='rotate(-45 75 75)'>PROOF</text></svg>");
}

/* --- 3. Lightbox Engine Optimization (Larger Scale-Up Grid Tile) --- */
html[data-proof-mode="true"] #lightbox-image-container::after {
	/* 300x300px tile boundary, 28px font size */
	/* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><text x='50%' y='50%' font-family='sans-serif' font-size='28' font-weight='700' fill='rgba(255, 255, 255, 0.35)' text-anchor='middle' transform='rotate(-45 150 150)'>PROOF</text></svg>"); */
	/* Shrinking tile size to 160x160px forces high-frequency repetition on small mobile screens */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><text x='50%' y='50%' font-family='sans-serif' font-size='22' font-weight='700' fill='rgba(255, 255, 255, 0.35)' text-anchor='middle' transform='rotate(-45 80 80)'>PROOF</text></svg>");
}

/* --- 4. Structural Structural Anchors --- */
.gallery-item {
	position: relative;
	overflow: hidden;
}

/* Gallery Header Logo Layout */
.gallery-logo-wrap {
	display: block;
	margin: 0 auto 18px; /* Centers the container, adds 24px of breathing room under it */
	text-align: center;
}

.logo-link {
	display: inline-block;
	text-decoration: none !important; /* Prevents underlines on image bounds */
	border: none;
	outline: none;
	transition: opacity 0.2s ease;
}

.logo-link:hover {
	opacity: 0.9; /* Subtle visual hint when users hover over the logo link */
}

.gallery-logo {
	display: block;
	max-width: 100%;     /* Prevents logo scaling distortion */
	width: 270px;        /* Restricts logo to an elegant visual scale (Adjust as needed) */
	height: auto;        /* Preserves native aspect ratio dynamically */
	margin: 0 auto;
}

/* Mobile Breakpoint for smaller screens */
@media (max-width: 480px) {
	.gallery-logo {
		width: 220px;    /* Comfortably downscales the logo banner for compact smartphones */
	}
	.gallery-logo-wrap {
		margin-bottom: 16px;
	}
}

.header-divider {
	border: none;               /* Remove the default browser line style */
	height: 1px;                /* Sets the maximum thickness in the absolute center */
	width: 275px;               /* Give it a slightly wider presence so the taper is visible */
	margin: 18px auto 22px auto;          /* Even spacing top and bottom, centered horizontally */
	background: linear-gradient(
		to right, 
		transparent 0%, 
		/* #c7c5c5 50%, */
		#68861b 50%, 
		transparent 100%
	);
	border-radius: 50%;         /* Smooths out the pixel edges for a soft, organic taper */
}

#lightbox-image-container {
	position: relative;
}

html {
	scroll-behavior: smooth;
}
html, body {
	max-width: 100%;
	overflow-x: hidden; /* Hard-stops any horizontal layout spilling */
	position: relative;
}
/* Reset & Base Styles */
* {
    box-sizing: border-box; /* Crucial: stops padding from breaking widths */
    margin: 0;
    padding: 0;
}
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background-color: #f9f9f9;
	color: #333;
	padding: 20px;
}
p {
	font-size: 18px !important; /* Changes all standard paragraph text */
	line-height: 1.6; /* Pro-Tip: Increases vertical space between lines for easier reading */
}

.expiration-notice {
	font-size: 13px;
	color: #777; /* Subtle text gray so it doesn't distract from the primary links */
	margin-top: 8px;
	margin-bottom: 16px;
	font-style: italic;
	text-align: center;
}

/* Cleaner mobile vertical stack spacing adjustment */
@media (max-width: 767px) {
	.expiration-notice {
		margin-top: 12px;
		margin-bottom: 12px;
		font-size: 12px;
	}
}

/* ==========================================================================
   GALLERY HEADER & INTRODUCTORY ELEMENTS
   ========================================================================== */
.gallery-header {
	position: relative;
	top: 2px;
	padding-top: 2px;
	text-align: center;
	margin-bottom: 40px;
}

.gallery-header h1 {
	font-size: 32px; /* Balanced to comfortably fit address text strings */
	font-weight: 700;
	margin: 6px 0 6px 0;
	color: #333333;
	letter-spacing: -0.5px;
}

.gallery-subtitle {
	color: #777;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0 0 20px 0;
	
	/* NEW: Layout alignments to anchor the share icon perfectly */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Minimalist Icon-Only Share Button Rules */
.subtitle-share-btn {
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	color: #68861b; /* Blends perfectly with your default theme color */
	font-size: 16px; /* Sized down slightly so it doesn't visually overpower the text */
	line-height: 1;
	display: inline-flex;
	align-items: center;
	transition: color 0.2s ease, transform 0.2s ease;

	/* CRITICAL OVERRIDES: Insulates icon from uppercase & tracking inherited from parent */
	text-transform: none; 
	letter-spacing: normal;
	margin-left: 10px; /* Generates a clean spatial gap after the word "GALLERY" */
	
	/* Drops the icon down by exactly 2px on its baseline axis */
	transform: translateY(1px);
}

/* Hover state micro-interactions */
.subtitle-share-btn:hover {
	color: #4b6b2c; /* Turns your signature branding green on active hover focus */
	transform: translateY(1px) scale(1.12); /* Subtle premium tactile spring scale */
}

/* Micro-interaction transition state when link is successfully copied */
.subtitle-share-btn.copied {
	color: #28a745 !important; /* Changes to success emerald green */
	transform: translateY(1px) scale(1.0); /* Settles back down to normal scale naturally */
}

.gallery-meta {
	display: inline-block;        /* Shrinks the width to fit the text tightly */
	font-size: 15px !important;   /* Slightly crisper, compact text */
	font-style: italic;
	color: #555;
	background-color: #e6e6e6;    /* Soft, muted neutral background */
	padding: 6px 16px;            /* Generous horizontal breathing room */
	border-radius: 20px;          /* Clean, perfect pill shape */
	margin: 12px auto 16px;       /* Controlled spacing within the header flow */
	border: 1px solid #d6d6d6;    /* Crisp, hairline boundary border */
}

@media (max-width: 480px) {
	.gallery-meta {
		margin: 8px auto 16px;
	}
}

/* Ensure the nested photographer credit link transitions beautifully within the badge */
.gallery-meta .link-text {
	font-style: normal;           /* Keeps the link legible */
	font-weight: 500;
}

/* Ensure long property address strings wrap gracefully on mobile devices */
@media (max-width: 480px) {
	.gallery-header h1 {
		font-size: 26px;
	}
}

@media (max-width: 767px) {
	header.gallery-header ul.icons {
		display: flex;
		flex-direction: column; /* Stacks utility links cleanly on small screens */
		gap: 12px;              /* Consistent vertical breathing room */
		align-items: center;    /* Anchors navigation paths centered under title text */
	}

	header.gallery-header ul.icons li {
		margin-right: 0 !important; /* Strips desktop margin rule overrides */
		line-height: 1.4;           /* Smooth structural spacing for wrapped inline lines */
		text-align: center;
	}
}

/* ==========================================================================
   NAVIGATION CATEGORY FILTER TABS
   ========================================================================== */
.gallery-tabs {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 30px;
	margin-bottom: 8px;
}

.tab-btn {
	background: transparent;
	border: 2px solid #ccc;
	color: #555;
	padding: 8px 24px;
	font-size: 1rem;
	font-weight: 500;
	border-radius: 30px;
	cursor: pointer;
	transition: all 0.25s ease;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.tab-btn.active {
	background-color: #222;
	border-color: #222;
	color: #fff;
}

@media (hover: hover) {
	.tab-btn:hover:not(.active) {
		border-color: #222;
		color: #222;
	}
}

/* ==========================================================================
   RESPONSIVE DISPLAY GRID INTERFACE
   ========================================================================== */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	max-width: 1400px;
	margin: 0 auto;
}

/* ==========================================================================
   UNIFIED GALLERY ITEM CONTAINER WITH CSS MICRO-TRANSITIONS
   ========================================================================== */
.gallery-item {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;       /* Professional architectural aspect ratio locking */
	background-color: #e5e5e5; /* Shimmer placeholder background anchor */
	border-radius: 4px;
	cursor: pointer;
	display: block;

	/* Hardware-Accelerated Micro-Transition Properties */
	opacity: 1;
	transform: scale(1) translateY(0);
	transition: 
		opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: opacity, transform;
}

/* ==========================================================================
   DYNAMIC FILTERING STATES (JAVASCRIPT AUTOMATION TARGETS)
   ========================================================================== */
/* Phase 1: Outbound category removal animation (Fade out & slide down slightly) */
.gallery-item.hidden-leave {
	opacity: 0;
	transform: scale(0.96) translateY(12px);
}

/* Phase 2: Complete layout space termination pass */
.gallery-item.hidden {
	display: none !important;
}

/* Phase 3: Inbound category insertion entry pipeline (Fade in & drop into alignment) */
.gallery-item.hidden-enter {
	opacity: 0;
	transform: scale(0.97) translateY(-10px);
}

/* ==========================================================================
   INTERNAL ASSET ENGAGEMENT GRAPHICS (PHOTO IMAGES)
   ========================================================================== */
.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

@media (hover: hover) {
	.gallery-item:hover img {
		transform: scale(1.05); /* Premium, controlled desktop hover lens expansion */
	}
}

/* ==========================================================================
   1. LIGHTBOX OVERLAY STYLING
   ========================================================================== */
.lightbox {
	display: none;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.95);
	justify-content: center;
	align-items: center;
	touch-action: pan-y; /* Prevents vertical page bouncing while swiping left/right */
}

/* Native Fullscreen adjustments */
#lightbox:fullscreen {
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.95);
	display: flex; 
}

/* ==========================================================================
   2. HORIZONTAL CONTROLS BAR (TOP-RIGHT CORNER)
   ========================================================================== */
.lightbox-controls {
	position: absolute;
	top: 25px;
	right: 25px;
	display: flex;
	flex-direction: row; /* Forces buttons side-by-side */
	align-items: center; /* Centers them perfectly vertically */
	gap: 15px;           /* Clean horizontal spacing between text and X */
	z-index: 120;
}

/* Target the single download button icon uniquely */
#lightbox-single-download {
	color: #ffffff !important; /* Base color: Change this to your preferred hex value */
	opacity: 0.8;
	font-size: 20px;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s, transform 0.2s;
	cursor: pointer;
	width: 30px;
	height: 30px;
}

/* Match the smooth hover popup effect of your other buttons */
#lightbox-single-download:hover {
	opacity: 1;
	transform: scale(1.1); /* Slightly pops the icon out on hover */
	color: #4caf50;        /* Optional: Change the color ONLY when hovered! */
}

/* This forces the container AND the Font Awesome icon inside it to be white */
#lightbox-single-download,
#lightbox-single-download i {
	color: #ffffff !important;
}

/* This controls the hover state */
#lightbox-single-download:hover i {
	color: #ffffff !important;
	opacity: 1;
}

/* Base resets for both header action icons */
.fullscreen-btn, .close-btn {
	background: none;
	border: none;
	color: #ffffff;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.2s, transform 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	line-height: 1;
}

/* Smooth hover animations */
.fullscreen-btn:hover, .close-btn:hover {
	opacity: 1;
	transform: scale(1.1); /* Slightly pops the icon out on hover */
}

/* Target the text button uniquely so it stays sleek and flat */
.fullscreen-btn {
	font-size: 24px; 
	font-family: sans-serif;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 700; /* Bold the dash/brackets slightly so they look cohesive with the X cross */
	white-space: nowrap; /* Prevents the text from breaking into two lines */
}

/* ==========================================================================
   SHARE ACTION BUTTON ELEMENT INTERFACES
   ========================================================================== */
.share-btn {
	background: none;
	border: none;
	color: #ffffff;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.2s, transform 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	line-height: 1;
	font-size: 20px; /* Perfectly scales Font Awesome geometry proportions relative to surrounding layout rules */
}

.share-btn:hover {
	opacity: 1;
	transform: scale(1.1);
}

/* Ensure the shared node color definitions align perfectly with your lightbox controls override architecture */
#lightbox-share-btn,
#lightbox-share-btn i {
	color: #ffffff !important;
}

#lightbox-share-btn:hover i {
	color: #ffffff !important;
	opacity: 1;
}

/* Target the close icon uniquely so it stays big and obvious */
.close-btn {
	font-size: 32px; 
}

/* Sleek, Modern Lightbox Corner Counter Overlay (Centered Bottom) */
.lightbox-counter {
	position: absolute;
	/* Pin to the bottom center */
	bottom: 12px !important;
	left: 50% !important;
	/* Perfect horizontal centering trick independent of element width */
	transform: translateX(-50%) !important; /* Perfect horizontal centering independent of element width */
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #e0e0e0;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	padding: 6px 12px 8px 12px !important;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	z-index: 10;
	pointer-events: none;
	white-space: nowrap;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	/* Global layout resets to prevent any leftover interference */
	margin: 0 !important;
	right: auto !important;
	top: auto !important;
}

/* Ensure perfect layout spacing on tight mobile screens */
@media (max-width: 768px) {
	.lightbox-counter {
		bottom: 90px; /* Shifts slightly higher to clear tighter mobile button placements */
		font-size: 11px;
		padding: 6px 10px 7px 10px !important;
		/* Safety anchors to lock in the center alignment on mobile */
		left: 50% !important;
		right: auto !important;
	}
}

/* ==========================================================================
   3. LIGHTBOX CONTENT (THE IMAGE AND CAPTION CONTAINER)
   ========================================================================== */
/* Premium Fade-In Animation for New Photo Insertion */
#lightbox-img {
	/* animation: lightboxFadeIn 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; */
	animation: lightboxFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	will-change: opacity;
}

@keyframes lightboxFadeIn {
	from {
		opacity: 0;
		transform: scale(0.97);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.lightbox-content {
	width: 100%;
	height: 100%;
	max-width: 95vw;  
	max-height: 85vh; 
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* Big Image Scale adjustments during Fullscreen Mode */
#lightbox:fullscreen .lightbox-content {
	max-width: 98vw;  
	max-height: 90vh; 
}

/* Managed entirely by our JS runtime sizing engine */
.lightbox-image-container {
	position: relative;
	display: block;
	max-width: 100%;
	max-height: 100%;
	/* HARDWARE ACCELERATION: Synchronizes the box layer boundaries with */
	/* the image pixels on scaled displays, eliminating subpixel gaps */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: width, height;
	/* Smooth glide animation transition curve */
	/* transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); */
	transition: none;
}

/* Helper utility utility added dynamically by JS to kill lag during raw touch dragging */
.lightbox-image-container.is-dragging {
	transition: none !important;
}

.lightbox-image-container.is-snapping {
	transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* The actual high-res image element */
#lightbox-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Photo Caption Text */
#lightbox-caption {
	color: #fff;
	margin-top: 15px;
	font-size: 1.1rem;
	text-align: center;
}

#lightbox:fullscreen #lightbox-caption {
	margin-top: 15px;
	font-size: 18px;    
}

/* ==========================================================================
   4. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 768px) {
	.lightbox-counter {
		bottom: 90px; /* Shifts slightly higher to clear tighter mobile button placements */
		padding: 6px 10px 7px 10px;
	}
}

.nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.1);
	color: white;
	border: none;
	padding: 16px;
	font-size: 24px;
	cursor: pointer;
	border-radius: 4px;
	user-select: none;
	transition: background 0.2s;
}
.nav-btn:hover { background: rgba(255, 255, 255, 0.25); }
.prev-btn { left: 20px; }
.next-btn { right: 20px; }

/* Hide mobile nav buttons on small mobile displays to avoid accidental taps */
@media (max-width: 600px) {
	.nav-btn { display: none; } 
}
/* Icons */
ul.icons {
	cursor: default;
	list-style: none;
	padding-left: 0;
}
ul.icons li {
	display: inline-block;
	padding: 0 1em 0 0;
}
ul.icons li:last-child {
	padding-right: 0;
}
ul.icons li .icon:before {
	font-size: 1.5rem;
}
.fa-download, .fa-home, .fas {
	color: #68861b !important;
}
.icons li a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	font-size: 14px;
}
.link-text, .download-text {
	font-weight: 500 !important;
	color: #68861b !important;
}

/* Style alignment override for the primary gallery share button */
.main-share-btn {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: none;
	color: #4b6b2c; /* Matches your beautiful green branding icon accents */
	font-family: inherit;
	font-size: 16px; /* Matches your download text tracking scale */
	font-weight: 500;
	cursor: pointer;
	padding: 4px 8px;
	transition: color 0.2s ease, opacity 0.2s ease;
	text-decoration: underline; /* Keeps typography treatment identical to links */
}

.main-share-btn i {
	margin-right: 6px;
	color: #555; /* Default gray for font-awesome layout node tracking icons */
	transition: color 0.2s ease;
}

/* Elegant micro-interaction states */
.main-share-btn:hover {
	color: #2e441b; /* Darker green fallback on active desktop focus */
	opacity: 0.9;
}

.main-share-btn:hover i {
	color: #2e441b;
}

/* Clean formatting adjustment for the link copied success accent state */
.main-share-btn.copied {
	color: #28a745; /* Success green notification */
	text-decoration: none;
}
.main-share-btn.copied i {
	color: #28a745;
}

/* Footer */
#footer {
	padding: 2.25em 2.25em 1em 2.25em ;
	text-align: center;
	font-size: 18px;
}
#footer .footer-content {
	list-style: none;
	padding: 0;
}
#footer .footer-content li {
	display: inline-block;
	font-size: 0.8em;
	margin-left: 0.35em;
	line-height: 1.7;
	padding: 0;
}
#footer .footer-content li:first-child {
	margin-left: 0;
}
/* Base Style for Download Links and Footer Credit Link */
.link-text, 
.download-text, 
.footer-credit {
	color: #68861b;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 4px; /* Sets precise 4px distance from text */
	transition: color 0.2s ease, text-decoration-style 0.2s ease;
}

/* Hard-override any parent text-decoration resets on the download container anchors */
.icons li a:has(.link-text, .download-text) {
	text-decoration: none !important;
}

/* Hover Style (Fixed Selector Syntax) */
@media (hover: hover) {
	/* 1. Standard hover for standalone items like the footer link */
	.link-text:hover, 
	.footer-credit:hover {
		color: #4b6213; /* A beautiful, readable darker olive shade */
		text-decoration-style: solid; /* Switches dotting to solid on hover */
	}

	/* 2. Unified button hover: Hovering anywhere on the parent anchor 'a' 
	      triggers the smooth style transition on the text inside it. */
	.icons li a:hover .download-text,
	.icons li a:hover .link-text {
		color: #4b6213;
		text-decoration-style: solid;
	}
}
/* Scroll to Top Button */
.scroll-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 45px;
	height: 45px;
	background-color: #333333; /* Matches your footer/dark aesthetic */
	color: #ffffff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
	z-index: 99; /* Just below the lightbox modal layer */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.scroll-to-top:hover {
	background-color: #555555; /* Subtle hover state */
}
.scroll-to-top.show {
	opacity: 1;
	visibility: visible;
}
/* Mobile adjustments */
@media (max-width: 768px) {
	.scroll-to-top {
		bottom: 20px;
		right: 20px;
		width: 40px;
		height: 40px;
		font-size: 16px;
	}
}
/* --- No-JavaScript Resilient Fallbacks --- */
.no-js .gallery-item {
	display: block !important;
	opacity: 1 !important;
}

/* Hide the lazy-load images since their JS triggers won't execute */
.no-js img.js-gallery-img {
	display: none !important;
}

/* Ensure the fallback mirror images look beautiful and fill your grid */
.no-js noscript img {
	display: block !important;
	width: 100%;
	height: auto;
	opacity: 1 !important;
}

.no-js .tab-btn, 
.no-js .gallery-tabs,
.no-js #scrollToTopBtn {
	display: none !important; 
}
/* Miscellaneous */
.no-break {
  white-space: nowrap;
}
/* Margin and Padding */
.mt-0 {
	margin-top: 0px !important;
}
.mt-2 {
	margin-top: 2px !important;
}
.mt-4 {
	margin-top: 4px !important;
}
.mt-6 {
	margin-top: 6px !important;
}
.mt-8 {
	margin-top: 8px !important;
}
.mt-10 {
	margin-top: 10px !important;
}
.mt-12 {
	margin-top: 12px !important;
}
.mt-14 {
	margin-top: 14px !important;
}
.mt-16 {
	margin-top: 16px !important;
}
.mt-18 {
	margin-top: 18px !important;
}
.mt-20 {
	margin-top: 20px !important;
}
.mt-22 {
	margin-top: 22px !important;
}
.mt-24 {
	margin-top: 24px !important;
}
.mt-26 {
	margin-top: 26px !important;
}
.mt-28 {
	margin-top: 28px !important;
}
.mt-30 {
	margin-top: 30px !important;
}
.mt-32 {
	margin-top: 32px !important;
}
.mt-34 {
	margin-top: 34px !important;
}
.mt-36 {
	margin-top: 36px !important;
}
.mt-38 {
	margin-top: 38px !important;
}
.mt-40 {
	margin-top: 40px !important;
}
.mt-42 {
	margin-top: 42px !important;
}
.mt-44 {
	margin-top: 44px !important;
}
.mt-46 {
	margin-top: 46px !important;
}
.mt-48 {
	margin-top: 48px !important;
}
.mt-50 {
	margin-top: 50px !important;
}
.mt-52 {
	margin-top: 52px !important;
}
.mt-54 {
	margin-top: 54px !important;
}
.mt-56 {
	margin-top: 56px !important;
}
.mt-58 {
	margin-top: 58px !important;
}
.mt-60 {
	margin-top: 60px !important;
}
.mr-0 {
	margin-right: 0px !important;
}
.mr-2 {
	margin-right: 2px !important;
}
.mr-4 {
	margin-right: 4px !important;
}
.mr-6 {
	margin-right: 6px !important;
}
.mr-8 {
	margin-right: 8px !important;
}
.mr-10 {
	margin-right: 10px !important;
}
.mr-12 {
	margin-right: 12px !important;
}
.mr-14 {
	margin-right: 14px !important;
}
.mr-16 {
	margin-right: 16px !important;
}
.mr-18 {
	margin-right: 18px !important;
}
.mr-20 {
	margin-right: 20px !important;
}
.mr-22 {
	margin-right: 22px !important;
}
.mr-24 {
	margin-right: 24px !important;
}
.mb-0 {
	margin-bottom: 0px !important;
}
.mb-1 {
	margin-bottom: 1px !important;
}
.mb-2 {
	margin-bottom: 2px !important;
}
.mb-3 {
	margin-bottom: 3px !important;
}
.mb-4 {
	margin-bottom: 4px !important;
}
.mb-5 {
	margin-bottom: 5px !important;
}
.mb-6 {
	margin-bottom: 6px !important;
}
.mb-12 {
	margin-bottom: 12px !important;
}
.mb-14 {
	margin-bottom: 14px !important;
}
.mb-16 {
	margin-bottom: 16px !important;
}
.mb-17 {
	margin-bottom: 18px !important;
}
.mb-20 {
	margin-bottom: 20px !important;
}
.mb-22 {
	margin-bottom: 22px !important;
}
.mb-24 {
	margin-bottom: 24px !important;
}
.mb-26 {
	margin-bottom: 26px !important;
}
.mb-28 {
	margin-bottom: 28px !important;
}
.mb-30 {
	margin-bottom: 30px !important;
}
.mb-32 {
	margin-bottom: 32px !important;
}
.mb-34 {
	margin-bottom: 34px !important;
}
.mb-36 {
	margin-bottom: 36px !important;
}
.mb-38 {
	margin-bottom: 38px !important;
}
.mb-40 {
	margin-bottom: 40px !important;
}
.mb-42 {
	margin-bottom: 42px !important;
}
.mb-46 {
	margin-bottom: 46px !important;
}
.mb-48 {
	margin-bottom: 48px !important;
}
.mb-50 {
	margin-bottom: 50px !important;
}
.mb-52 {
	margin-bottom: 52px !important;
}
.mb-54 {
	margin-bottom: 54px !important;
}
.mb-56 {
	margin-bottom: 56px !important;
}
.mb-58 {
	margin-bottom: 58px !important;
}
.mb-60 {
	margin-bottom: 60px !important;
}
.mb-62 {
	margin-bottom: 62px !important;
}
.mb-64 {
	margin-bottom: 64px !important;
}
.mb-66 {
	margin-bottom: 66px !important;
}
.mb-68 {
	margin-bottom: 68px !important;
}
.mb-70 {
	margin-bottom: 70px !important;
}
.mb-72 {
	margin-bottom: 72px !important;
}
.mb-74 {
	margin-bottom: 74px !important;
}
.mb-76 {
	margin-bottom: 76px !important;
}
.mb-78 {
	margin-bottom: 78px !important;
}
.mb-80 {
	margin-bottom: 80px !important;
}
.ml-0 {
	margin-left: 0px !important;
}
.ml-2 {
	margin-left: 2px !important;
}
.ml-4 {
	margin-left: 4px !important;
}
.ml-6 {
	margin-left: 6px !important;
}
.ml-8 {
	margin-left: 8px !important;
}
.ml-10 {
	margin-left: 10px !important;
}
.ml-12 {
	margin-left: 12px !important;
}
.ml-14 {
	margin-left: 14px !important;
}
.ml-16 {
	margin-left: 16px !important;
}
.ml-18 {
	margin-left: 18px !important;
}
.ml-20 {
	margin-left: 20px !important;
}
.ml-22 {
	margin-left: 22px !important;
}
.ml-24 {
	margin-left: 24px !important;
}
.pl-0 {
	padding-left: 0px !important;
}
.pl-2 {
	padding-left: 2px !important;
}
.pl-4 {
	padding-left: 4px !important;
}
.pl-6 {
	padding-left: 6px !important;
}
.pl-8 {
	padding-left: 8px !important;
}
.pr-0 {
	padding-right: 0px !important;
}
.pr-2 {
	padding-right: 2px !important;
}
.pr-4 {
	padding-right: 4px !important;
}
.pr-6 {
	padding-right: 6px !important;
}
.pr-8 {
	padding-right: 8px !important;
}
.pt-0 {
	padding-top: 0px !important;
}
.pt-2 {
	padding-top: 2px !important;
}
.pt-4 {
	padding-top: 4px !important;
}
.pt-6 {
	padding-top: 6px !important;
}
.pt-8 {
	padding-top: 8px !important;
}
.pt-10 {
	padding-top: 10px !important;
}
.pt-12 {
	padding-top: 12px !important;
}
.pt-14 {
	padding-top: 14px !important;
}
.pt-16 {
	padding-top: 16px !important;
}
.pt-18 {
	padding-top: 18px !important;
}
.pt-20 {
	padding-top: 20px !important;
}
.pt-22 {
	padding-top: 22px !important;
}
.pb-0 {
	padding-bottom: 0px !important;
}
.pb-2 {
	padding-bottom: 2px !important;
}
.pb-4 {
	padding-bottom: 4px !important;
}
.pb-6 {
	padding-bottom: 6px !important;
}
.pb-8 {
	padding-bottom: 8px !important;
}
.pb-10 {
	padding-bottom: 10px !important;
}
.pb-12 {
	padding-bottom: 12px !important;
}
.pb-14 {
	padding-bottom: 14px !important;
}
.pb-16 {
	padding-bottom: 16px !important;
}
.pb-18 {
	padding-bottom: 18px !important;
}
.pb-20 {
	padding-bottom: 20px !important;
}
.pb-22 {
	padding-bottom: 22px !important;
}
.pb-24 {
	padding-bottom: 24px !important;
}
.pb-26 {
	padding-bottom: 26px !important;
}
.pb-28 {
	padding-bottom: 28px !important;
}
.pb-30 {
	padding-bottom: 30px !important;
}
.pb-32 {
	padding-bottom: 32px !important;
}
.pb-34 {
	padding-bottom: 34px !important;
}
.pb-36 {
	padding-bottom: 36px !important;
}
.pb-38 {
	padding-bottom: 38px !important;
}
.pb-40 {
	padding-bottom: 40px !important;
}
.pb-42 {
	padding-bottom: 42px !important;
}
.pb-44 {
	padding-bottom: 44px !important;
}
.pb-46 {
	padding-bottom: 46px !important;
}
.pb-48 {
	padding-bottom: 48px !important;
}
.fc-black {
	color: black;
}
.fc-262626 {
	color: #262626;
}
.fc-3a3a3a {
	color: #3a3a3a;
}
.fc-404040 {
	color: #404040;
}
.fc-262626 {
	color: #4c4c4c;
}
.fc-green {
	color: green;
}
.fc-red {
	color: red;
}
.fs-10 {
	font-size: 10px !important;
}
.fs-12 {
	font-size: 12px !important;
}
.fs-14 {
	font-size: 14px !important;
}
.fs-16 {
	font-size: 16px !important;
}
.fs-18 {
	font-size: 18px !important;
}
.fs-20 {
	font-size: 20px !important;
}
.fs-22 {
	font-size: 22px !important;
}
.fw-normal {
	font-weight: normal !important;
}
.fw-bold {
	font-weight: bold !important;
}
.fw-lighter {
	font-weight: lighter !important;
}
.fw-bolder {
	font-weight: bolder !important;
}
.fw-100, a.fw-100, a.fw-100:hover {
	font-weight: 100;
}
.fw-200, a.fw-200, a.fw-200:hover {
	font-weight: 200;
}
.fw-300, a.fw-300, a.fw-300:hover {
	font-weight: 300;
}
.fw-400, a.fw-400, a.fw-400:hover {
	font-weight: 400; /* Normal */
}
.fw-500, a.fw-500, a.fw-500:hover {
	font-weight: 500;
}
.fw-600, a.fw-600, a.fw-600:hover {
	font-weight: 600;
}
.fw-700, a.fw-700, a.fw-700:hover {
	font-weight: 700; /* Bold */
}
.fw-800, a.fw-800, a.fw-800:hover {
	font-weight: 800;
}
.fw-900, a.fw-900, a.fw-900:hover {
	font-weight: 900;
}

/* Font Styles */
.font-normal {
	font-style: normal;
}
.font-italic {
	font-style: italic;
}
.font-oblique {
	font-style: oblique;
}
.font-initial {
	font-style: initial;
}
.font-inherit {
	font-style: inherit;
}
/* Custom rules applied ONLY when native fullscreen is active */
#lightbox:fullscreen .lightbox-content {
	max-width: 98vw;  /* Push the image closer to the left/right screen edges */
	max-height: 90vh; /* Push the image closer to the top/bottom screen edges */
}

#lightbox:fullscreen #lightbox-img {
	max-height: 88vh; /* Keeps the image large but stops it from crowding the caption */
}

#lightbox:fullscreen #lightbox-caption {
	margin-top: 15px;
	font-size: 18px;  /* Make the caption slightly larger and easier to read on a large TV/Monitor */
}

/* ==========================================================================
   SCROLLBAR RECLAMATION PATCH (REVISED)
   Forces absolute scrollbar track eviction across all browser engine layers
   ========================================================================== */

/* Target the layout root AND any active fullscreen element layers */
html.lightbox-open,
body.lightbox-open,
:-webkit-full-screen,
:fullscreen {
	overflow: hidden !important;
	padding-right: 0px !important;
	margin-right: 0px !important;
}

/* Eliminate scrollbar track allocations in Chrome, Edge, and Brave on Windows */
html.lightbox-open::-webkit-scrollbar,
body.lightbox-open::-webkit-scrollbar,
:fullscreen::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}