:root {
  --border: #dcdcdc;
  --text: #111111;
  --muted: #6b6b6b;
  --bg: #ffffff;
  --bg-alt: #f8f9fa;
}

html {
  scroll-behavior: smooth; /* base smooth scroll; JS will offset for sticky header */
}

body {
  font-family: "Oswald", sans-serif;
  color: var(--text);
  background: var(--bg);
}

.bio {
  text-align: justify;
}

/* Title typography to echo the mockup (bold, centered, spaced) */
.site-title {
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Navbar look: light with subtle borders like mockup */
#mainNav.navbar {
  --bs-navbar-nav-link-padding-x: 1rem;
  background: var(--bg);
  z-index: 1050; /* above content and header */
}
#mainNav .nav-link {
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}
#mainNav .nav-link.active {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 6px;
}

header {
  background: var(--bg);
}
header .border-bottom,
#mainNav.border-top,
#mainNav.border-bottom,
footer.border-top {
  border-color: var(--border) !important;
}

.section-title {
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}

/* Placeholder images */
.img-placeholder {
  background: linear-gradient(135deg, #f2f2f2, #e6e6e6);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* Sticky navbar helper spacing when fixed */
body.has-sticky-offset main {
  /* offset will be set via JS to match navbar height */
  padding-top: var(--sticky-offset, 0px);
}

/* Small tweak for better section spacing */
.section {
  scroll-margin-top: 100px; /* extra safety for anchor jump with sticky header */
}

footer {
  background: var(--bg);
}

/* Equal-width navbar items from md and up */
@media (min-width: 768px) {
  #mainNav .navbar-nav {
    display: flex;
    width: 100%;
  }
  #mainNav .navbar-nav .nav-item {
    flex: 0 0 25%;
    max-width: 25%;
  }
  #mainNav .navbar-nav .nav-link {
    display: block;
    text-align: center;
    width: 100%;
  }
}

/* Responsive tweaks */
@media (max-width: 575.98px) {
  #mainNav .navbar-nav {
    gap: 0.25rem !important;
  }
  .exh-thumb {
    padding: 0px !important;
  }
}

/* Exhibitions list: slightly smaller text */
#exhibitions ul > li {
  font-size: 0.95rem;
}

.nav-link {
  color: var(--text);
}

/* Force-hide GLightbox description/title if any */
.gdesc, .gdesc-inner { display: none !important; }

/* Ensure GLightbox control buttons are visible and well positioned */
.glightbox-open .gbtn {
  position: absolute;
  width: 44px;
  height: 44px;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10000 !important;
  color: #fff !important;
  background: rgba(0,0,0,0.5) !important;
  border-radius: 50% !important;
  transition: none !important;
  backdrop-filter: saturate(1.2) blur(0.5px);
}
.glightbox-open .gclose { top: 16px; right: 16px; }
.glightbox-open .gprev { top: 50%; left: 16px; transform: translateY(-50%); }
.glightbox-open .gnext { top: 50%; right: 16px; transform: translateY(-50%); }
.glightbox-open .gbtn svg,
.glightbox-open .gbtn span,
.glightbox-open .gbtn i {
  width: 100%;
  height: 100%;
  fill: #fff !important;
  color: #fff !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
/* Size inline SVG paths nicely inside circular buttons */
.glightbox-open .gbtn svg { width: 24px; height: 24px; display: block; margin: 10px auto; }
.glightbox-open .gbtn:before,
.glightbox-open .gbtn:after { opacity: 1 !important; }

/* Artworks tiles: hover transparent overlay and full-tile link */
.artworks-img {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.artworks-img .overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0);
  transition: 0.2s ease;
}
.artworks-img .overlay-text {
  color: #fff;
  font-size: 0.9rem;
  text-align: center;
  padding: 0.25rem 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.artworks-img:hover .overlay,
.artworks-img:focus .overlay,
.artworks-img:focus-visible .overlay {
  background: rgba(0,0,0,0.35);
}
.artworks-img:hover .overlay-text,
.artworks-img:focus .overlay-text,
.artworks-img:focus-visible .overlay-text {
  opacity: 1;
}

.paintings-title,
.multimedial-title {
  font-weight: 700;
}

.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 30px;
    z-index: 99999;
    background-color: var(--text);
    width: 50px;
    height: 50px;
    border-radius: 50px;
    transition: all 0.4s;
}

.scroll-top i {
    font-size: 24px;
    color: var(--bg);
    line-height: 0;
}

.scroll-top:hover {
    background-color: color-mix(in srgb, var(--muted), transparent 20%);
    color: var(--bg);
}

.scroll-top.active {
    visibility: visible;
    opacity: 1;
    bottom: 30px;
}

@media screen and (max-width: 768px) {

  .scroll-top.active {
      bottom: 1rem;
      right: 15px;
      width: 40px;
      height: 40px;
  }

}

.accordion-item,
.accordion-button {
    box-shadow: none !important;
}

/* Make active accordion button white text and black background */
.accordion-button:not(.collapsed) {
    color: var(--bg);
    background-color: rgba(17, 17, 17, 0.85);
}

.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}