:root {
  --primary-accent: #f8b600; /* Starting point, replacing --navbar-border-top */
  --navbar-border-top: #f8b600; /* Same value as requested */
  --button-border: #c69400; /* A deeper/darker shade for buttons */
  --link-focus: #b88000; /* Slightly desaturated/darker for focused links */
  --form-shadow: rgba(
    248,
    182,
    0,
    0.6
  ); /* Transparent form shadow derived from #f8b600 */
  --pagination-bg: #ffe699; /* A much lighter version for backgrounds */
  --link-hover-bg: #e6aa00; /* Darker, closer to orange for hover states */
  --navbar-focus: #ffd966;
  --bs-primary-rgb: 248, 182, 0; /* RGB values for the primary accent */
}

.no-link {
  color: inherit; /* Inherit the color from the parent element */
  text-decoration: none; /* Remove underline */
}

.btn-outline-primary {
  color: var(--primary-accent);
  border-color: var(--button-border);
}

.btn-primary {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--primary-accent);
  --bs-btn-border-color: var(--button-border);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--link-hover-bg);
  --bs-btn-hover-border-color: var(--link-focus);
  --bs-btn-focus-shadow-rgb: 248, 182, 0; /* based on --form-shadow */
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--link-focus);
  --bs-btn-active-border-color: var(--button-border);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: var(--primary-accent);
  --bs-btn-disabled-border-color: var(--button-border);
}

.text-bg-primary {
  color: #000 !important;
  background-color: var(--primary-accent);
}

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  color: #000;
  background-color: var(--link-focus);
  border-color: var(--button-border);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* matches Bootstrap's default */
}

.btn:hover {
  color: #000;
  background-color: var(--link-hover-bg);
  border-color: var(--link-focus);
}

/* Album shortcode styles: thumbnails and lightbox */
.album-grid-img {
  width: 100%;
  height: 220px; /* uniform thumbnail height */
  object-fit: contain; /* preserve aspect ratio without cropping */
  object-position: center;
  background-color: #f8f9fa; /* subtle neutral background for letterbox areas */
}

#lightboxImage {
  max-height: 75vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#lightboxModal .modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}