@charset "UTF-8";
@font-face {
  font-family: 'Champagne & Limousines'; /* Name your font family */
  src: url('/fonts/Champagne & Limousines.ttf'); /* Locate the .ttf file within your directory*/
}
h2 {
 	color: black;
	font-family: 'Champagne & Limousines', bold;
}
p {
 	color: black;
	font-family: 'Champagne & Limousines', bold;

}
/* === gallery styles === */

/* base clickable image */
.click-to-load {
	cursor: pointer;
	user-select: none;
	-webkit-user-drag: none;
	-moz-user-select: none;
	-ms-user-select: none;
  }
  
  /* Fullscreen overlay that sits above everything */
  .gallery-modal {
	position: fixed;
	inset: 0;                    /* top:0; right:0; bottom:0; left:0; */
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.85);
	z-index: 99999;              /* very high so it's always on top */
  }
  
  /* show */
  .gallery-modal.open { display: flex; }
  
  /* Inner area: fixed size relative to viewport (not sized by image) */
  .gallery-inner {
	position: relative;
	width: min(92vw, 1100px);    /* a little smaller than screen */
	height: min(82vh, 820px);    /* a bit shorter than full height */
	max-width: 1100px;
	max-height: 820px;
	background: transparent;     /* keep overlay dark, inner is just container */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  }
  
  /* The image itself fits inside the inner container */
  .gallery-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;         /* don't stretch; fit within container */
	display: block;
	border-radius: 6px;
  }
  
  /* Close button (X) in top-right of the inner container */
  .gallery-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 10;
	font-size: 22px;
	background: rgba(0,0,0,0.55);
	color: #fff;
	border: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
  }
  .gallery-close:focus { outline: 2px solid rgba(255,255,255,0.6); }
  
  /* Navigation bar centered at bottom of the inner container */
  .gallery-controls {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 14px;                /* sits a little below image inside inner */
	display: flex;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 28px;         /* rounded container */
	background: rgba(255,255,255,0.06); /* subtle background */
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: none;                /* no border as requested */
	box-shadow: 0 8px 20px rgba(0,0,0,0.45);
	z-index: 8;
  }
  
  /* Buttons inside nav */
  .gallery-controls button {
	cursor: pointer;
	background: rgba(255,255,255,0.08);
	color: #fff;
	border: none;                /* NO border */
	padding: 8px 14px;
	border-radius: 20px;         /* pill buttons */
	font-size: 16px;
	min-width: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
  }
  .gallery-controls button:focus {
	outline: 2px solid rgba(255,255,255,0.6);
  }
  
  /* Prev/Next style differences (optional) */
  .gallery-controls .prev { }
  .gallery-controls .next { }
  
  /* Small screens adjustments */
  @media (max-width: 700px) {
	.gallery-inner {
	  width: min(96vw, 960px);
	  height: min(86vh, 720px);
	  border-radius: 8px;
	}
	.gallery-controls {
	  bottom: 10px;
	  padding: 6px 10px;
	  gap: 8px;
	}
	.gallery-controls button { padding: 6px 10px; font-size: 15px; }
  }