/* Basic theme tweaks */
:root {
  /* Palette */
  --color-brand-900: #0d4c74; /* primary brand */
  --color-brand-700: #547595;
  --color-brand-500: #8ca1b8;
  --color-brand-300: #c5cfdb;
  --color-white: #ffffff;      /* preferred background */
  --color-ink: #0f1820;        /* primary text */

  /* Alias for existing usages */
  --hdr-primary: var(--color-brand-900);
}

/* Global background and text */
body { background-color: var(--color-white); color: var(--color-ink); }
a { color: var(--color-brand-900); }
a:hover, a:focus { color: var(--color-brand-700); }

/* Site chrome colors */
.site-header { background-color: var(--color-brand-900) !important; }
.site-header .navbar-brand, .site-header .nav-link, .site-header .navbar-text { color: #fff !important; }
.site-header .nav-link:hover, .site-header .nav-link:focus { color: #e6f2fa !important; }

.site-footer { background-color: var(--color-brand-900); color: #fff; }
.site-footer a { color: #e6f2fa; }
.site-footer a:hover { color: #fff; }

/* Sticky footer: footer sits at bottom on short pages */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
footer.site-footer { margin-top: auto; }

.hero { min-height: 50vh; }
.hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35)); }

/* Mobile adjustments */
@media (max-width: 575.98px) {
  .hero { min-height: 35vh; }
  .card-body { padding: .75rem 1rem; }
  .navbar .nav-link { padding: .5rem .75rem; }
}

.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }

/* Image cards: rounded corners with seamless images */
.card.card-hover { border-radius: .75rem; overflow: hidden; }
.card.card-hover .ratio { background: #f8f9fa; }
.card.card-hover .ratio > img { width: 100%; height: 100%; object-fit: contain; display: block; background-color: #fff; }
.card.card-hover img { border-radius: 0; }

.object-fit-cover { object-fit: contain; background-color: #fff; }

/* Contained image boxes for cards (show full image without cropping) */
.img-contain-box { height: 180px; background: #fff; display: block; }
.img-contain-box img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
@media (min-width: 576px) { .img-contain-box { height: 200px; } }
@media (min-width: 768px) { .img-contain-box { height: 220px; } }
@media (min-width: 992px) { .img-contain-box { height: 240px; } }

/* Detail image box on item page */
.detail-img-box { height: 260px; background: #fff; }
.detail-img-box img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
@media (min-width: 768px) { .detail-img-box { height: 300px; } }
@media (min-width: 992px) { .detail-img-box { height: 340px; } }

/* Slideshow fade effect for category/subcategory cards */
.js-cat-slideshow { position: relative; }
.js-cat-slideshow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transition: opacity var(--slide-duration, .6s) ease; }
.js-cat-slideshow img.active { opacity: 1; }

.navbar .btn { white-space: nowrap; }

/* Brand buttons (override Bootstrap primary to use brand palette) */
.btn-primary { background-color: var(--color-brand-900); border-color: var(--color-brand-900); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--color-brand-700); border-color: var(--color-brand-700); }
.btn-outline-light { color:#fff; border-color:#fff; }
.btn-outline-light:hover { background-color:#fff; color: var(--color-brand-900); }
.btn-outline-secondary { color: var(--color-brand-900); border-color: var(--color-brand-300); }
.btn-outline-secondary:hover { background-color: var(--color-brand-300); color: var(--color-ink); }

/* Improve focus styles */
:focus-visible { outline: 3px solid var(--hdr-primary); outline-offset: 2px; }

/* Dividers use brand accent (slimmer, more spacing) */
hr {
  border: 0;
  border-top: 2px solid var(--color-brand-900);
  opacity: 1;
  margin: 1.5rem 0; /* more space above/below */
}

/* Footer */
footer a { text-decoration: none; }