:root{
  --bg:#f7f2e7;      /* soft beige */
  --fg:#1c1c1c;      /* dark text */
  --accent:#2a6f97;  /* calm blue */
}
html {
  scroll-behavior: smooth;
}

html,body{
  background:var(--bg);
  color:var(--fg);
}
/* ===== Intro animation for navbar + header ===== */

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  body * { transition: none !important; animation: none !important; }
}

/* Start state (before body.nav-ready is added) */
body:not(.nav-ready) .navbar {
  transform: translateY(-10px) scale(0.98);
  opacity: 0;
}
body:not(.nav-ready) .navbar .navbar-brand img {
  width: 44px; height: 44px;         /* smaller logo on init */
}
body:not(.nav-ready) .navbar .nav-link {
  opacity: 0;
  transform: translateY(-6px);
}

/* Final state + transitions */
.navbar {
  transition: transform 600ms ease, opacity 600ms ease, padding 600ms ease;
}
.navbar .navbar-brand img {
  transition: width 600ms ease, height 600ms ease, transform 600ms ease;
}
.navbar .nav-link {
  transition: opacity 500ms ease 150ms, transform 500ms ease 150ms, color .2s ease;
}
body.nav-ready .navbar {
  transform: none;
  opacity: 1;
  /* grow the vertical padding a touch for the "getting bigger" feel */
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
body.nav-ready .navbar .navbar-brand img {
  width: 60px; height: 60px;         /* your normal logo size */
}
body.nav-ready .navbar .nav-link {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: fade/slide for the first hero or page header content */
body:not(.nav-ready) .hero,
body:not(.nav-ready) header.text-center {   /* your gallery page header */
  opacity: 0;
  transform: translateY(8px);
}
body.nav-ready .hero,
body.nav-ready header.text-center {
  transition: opacity 700ms ease 120ms, transform 700ms ease 120ms;
  opacity: 1;
  transform: none;
}

/* Navbar tweaks (larger) */
.navbar .navbar-brand span{font-size:1.35rem}
.navbar .nav-link{font-size:1.08rem}

/* Accent button (if needed elsewhere) */
.btn-accent{
  background:var(--accent);
  color:#fff;
  border:none;
}
.btn-accent:hover{filter:brightness(0.95)}

/* Carousel image sizing (16:9 look) */
.slider-img{
  object-fit:cover;
  height: min(66vh, 720px);   /* tall on desktop, shorter on phones */
}

/* Text on photos: subtle backdrop for readability */
.carousel-caption{
  background:linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.55) 100%);
  left:0; right:0; bottom:0;
  padding:2rem 2rem 1.5rem;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}
.carousel-caption .slide-title{
  color:#fff; margin:0 0 .25rem;
  font-weight:800;
}
.carousel-caption .slide-text{
  color:#e9edf2; margin:0;
  font-size:1.05rem;
}

/* Footer social links color */
.social-link{color:#1c1c1c}
.social-link:hover{color:var(--accent)}

/* Small spacing tune on footer group on tiny screens */
@media (max-width: 576px){
  .footer-socials{gap:1rem}
}
/* About Us section */
section.bg-white{
  background:#fff;
  color:var(--fg);
}

section.bg-white h2{
  font-size:2rem;
}

.text-accent {
  color: var(--accent);
}
#contact h2 {
  font-size: 2rem;
}

.gallery-title{
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem; font-weight: 700; color: var(--fg, #1c1c1c);
  margin-bottom: .5rem;
}
.gallery-subtitle{
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 400; letter-spacing: .01em;
  font-size: 1.35rem; color: var(--accent, #2a6f97);
}

/* Minimal card grid */
.object-cover{ object-fit: cover; }
.gallery-card .card-body{ padding: 1rem 1rem 1.25rem; }
.gallery-card h3{ font-weight: 700; }
.gallery-card{ transition: transform .18s ease, box-shadow .18s ease; }
.gallery-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }

/* Modal sizing: ~75% viewport on desktop, larger on phones */
.modal-75{ max-width: 75vw; }
.modal-75 .modal-content{ height: 75vh; }
@media (max-width: 992px){
  .modal-75{ max-width: 95vw; }
  .modal-75 .modal-content{ height: 85vh; }
}

/* Split layout inside modal */
.modal-split{
  display: flex; gap: 1rem;
  height: calc(100% - 112px); /* minus header+footer */
}
.modal-left, .modal-right{ flex: 1 1 0; min-height: 0; }
.modal-left{ flex-basis: 60%; }
.modal-right{ flex-basis: 40%; overflow: auto; padding-right: .25rem; }

/* Carousel visuals in modal */
.modal-img{ object-fit: cover; }
.modal .carousel-caption{
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  left: 0; right: 0; bottom: 0; padding: 1rem 1.25rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.modal .slide-title{ color: #fff; margin: 0 0 .15rem; font-weight: 800; }
.modal .slide-text{ color: #e9edf2; margin: 0; }

/* ===== Modal Close Button Polish ===== */

/* ===== Custom Close Button ===== */
/* ===== Square X Close Button ===== */
.btn-close-icon {
  background: none;
  border: none;
  padding: 0;
  margin-left: auto;   /* forces it to top-right */
  font-size: 1.6rem;   /* larger than default */
  color: #dc3545;      /* Bootstrap red */
  cursor: pointer;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
}

.btn-close-icon:hover {
  color: #bb2d3b;      /* darker red on hover */
  transform: scale(1.15);
}

.btn-close-icon:focus {
  outline: none;
  box-shadow: none;
}

/* Card cover aspect ratio */
.ratio-4x3{ --bs-aspect-ratio: 75%; }

/* Footer social links hover */
.social-link{ color:#1c1c1c; }
.social-link:hover{ color: var(--accent, #2a6f97); }



/* ---- GLOBAL CAROUSEL FIT ---- */
/* Make every carousel occupy its parent height */
.carousel,
.carousel .carousel-inner,
.carousel .carousel-item { height: 100%; }

/* Make images fill the slide area without distortion */
.carousel .carousel-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crop to fill; switch to 'contain' if you prefer no cropping */
  object-position: center;
}

/* ---- MODAL CAROUSEL (project modal) ---- */
#pmCarousel,
#pmCarousel .carousel-inner,
#pmCarousel .carousel-item { height: 100%; }

/* Left pane of modal must define the height anchor */
.modal-left { display: flex; }
.modal-left > .carousel { flex: 1 1 auto; }

/* If you ever want NO cropping in modal, add this helper class to the <img> */
.img-contain { object-fit: contain !important; background:#00000010; } /* light bg behind letterbox */