/* ==========================================================================
   Blackbird Production Services — site styles
   Loaded after Bootstrap 5.3 (CDN). Palette: Royal Plum & Gold.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root,
[data-bs-theme="dark"] {
  --bb-bg: #1A1020;
  --bb-surface: #2A1B33;
  --bb-text: #F7F1E8;
  --bb-purple: #6A2C91;
  --bb-purple-hover: #7D38A8;
  --bb-purple-active: #5A2479;
  --bb-gold: #D4AF37;
  --bb-gold-hover: #E6C65A;
  --bb-gold-soft: rgba(212, 175, 55, 0.15);

  /* Map onto Bootstrap's variables */
  --bs-body-bg: var(--bb-bg);
  --bs-body-color: var(--bb-text);
  --bs-secondary-color: rgba(247, 241, 232, 0.72);
  --bs-border-color: rgba(247, 241, 232, 0.12);
  --bs-link-color: var(--bb-gold);
  --bs-link-color-rgb: 212, 175, 55;
  --bs-link-hover-color: var(--bb-gold-hover);
  --bs-link-hover-color-rgb: 230, 198, 90;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --nav-logo-height: 67px;
}

/* ---------- Type ---------- */
h1, h2, h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  letter-spacing: -0.01em;
}
.eyebrow {
  color: var(--bb-gold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
}
.text-gold { color: var(--bb-gold) !important; }
.bg-surface { background: var(--bb-surface) !important; }

/* ---------- Buttons ---------- */
.btn-bb {
  --bs-btn-bg: var(--bb-purple);
  --bs-btn-border-color: var(--bb-purple);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--bb-purple-hover);
  --bs-btn-hover-border-color: var(--bb-purple-hover);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--bb-purple-active);
  --bs-btn-active-border-color: var(--bb-purple-active);
  --bs-btn-focus-shadow-rgb: 212, 175, 55;
}
.btn-outline-gold {
  --bs-btn-color: var(--bb-gold);
  --bs-btn-border-color: var(--bb-gold);
  --bs-btn-hover-bg: var(--bb-gold);
  --bs-btn-hover-border-color: var(--bb-gold);
  --bs-btn-hover-color: var(--bb-bg);
  --bs-btn-active-bg: #C29F2F;
  --bs-btn-active-border-color: #C29F2F;
  --bs-btn-active-color: var(--bb-bg);
  --bs-btn-focus-shadow-rgb: 212, 175, 55;
}

/* ---------- Navigation ---------- */
.site-nav .navbar-brand img { height: var(--nav-logo-height); width: auto; display: block; }
.site-nav .nav-link { color: rgba(247, 241, 232, 0.8); }
.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible,
.site-nav .nav-link.active { color: var(--bb-gold); }

/* Home: nav floats over the full-screen carousel */
.site-nav--overlay {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  background: linear-gradient(180deg, rgba(26, 16, 32, 0.9) 0%, rgba(26, 16, 32, 0) 100%);
}
/* Inner pages: solid, sticky */
.site-nav--solid {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1020;
  background: var(--bb-surface);
  border-bottom: 1px solid var(--bs-border-color);
}
/* Opened mobile menu needs a solid backing over photos */
@media (max-width: 767.98px) {
  :root { --nav-logo-height: 55px; }
  .site-nav .navbar-collapse.show,
  .site-nav .navbar-collapse.collapsing {
    background: var(--bb-surface); margin-top: .75rem; padding: .5rem 1rem; border-radius: .5rem;
  }
}

/* ---------- Home hero carousel ---------- */
.hero-carousel .carousel-item { height: 100vh; height: 100svh; min-height: 560px; }
.hero-carousel .carousel-item img { width: 100%; height: 100%; object-fit: cover; }
.hero-carousel .carousel-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(26, 16, 32, .94) 0%, rgba(26, 16, 32, .55) 45%, rgba(26, 16, 32, .15) 75%);
}
.hero-caption { position: absolute; inset: auto 0 0 0; z-index: 5; padding-bottom: 6rem; }
/* Arrows sit in the photo area above the caption so they never cover the text */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next { z-index: 6; width: 8%; top: 12%; bottom: auto; height: 36%; }
@media (max-width: 767.98px) {
  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next { display: none; }  /* swipe + dots on phones */
}
.hero-carousel .carousel-indicators { z-index: 6; }
/* Beat Bootstrap's [data-bs-theme=dark] carousel rules (black dots, inverted arrows) */
[data-bs-theme="dark"] .carousel .carousel-indicators [data-bs-target] { background-color: var(--bb-gold); }
[data-bs-theme="dark"] .carousel .carousel-control-prev-icon,
[data-bs-theme="dark"] .carousel .carousel-control-next-icon { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }

/* ---------- Inner page header ---------- */
.page-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
  background: var(--bb-surface);
}
.page-hero > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(26, 16, 32, .95) 0%, rgba(26, 16, 32, .5) 100%);
}
.page-hero > .container { position: relative; z-index: 1; }

/* ---------- Components ---------- */
.service-card {
  background: var(--bb-surface);
  border: 1px solid var(--bs-border-color);
  border-top: 3px solid var(--bb-gold);
}
/* height:auto stops the img height attribute overriding aspect-ratio, so every tile is the same size */
.photo-tile { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; border-radius: .5rem; }
.photo-feature { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; border-radius: 1rem; }
.cta-band { border: 1px solid var(--bb-gold); background: var(--bb-gold-soft); }
.gold-rule { width: 56px; height: 3px; background: var(--bb-gold); border: 0; opacity: 1; }
.contact-card { background: var(--bb-surface); border: 1px solid var(--bs-border-color); }

/* ---------- Footer ---------- */
.site-footer img { height: 44px; width: auto; }
.site-footer a { color: rgba(247, 241, 232, 0.75); text-decoration: none; }
.site-footer a:hover { color: var(--bb-gold); }

/* Small headings above lists: sans, cream, with a gold underline (Playfair in gold
   was too thin to read at this size) */
.list-heading {
  font-family: var(--bs-body-font-family);
  font-size: 1.05rem; font-weight: 600; letter-spacing: .01em;
  color: var(--bb-text);
  padding-bottom: .5rem; border-bottom: 2px solid var(--bb-gold);
  display: inline-block;
}

/* Lists with gold diamond markers */
.gold-list { list-style: none; padding-left: 0; }
.gold-list li { position: relative; padding-left: 1.4rem; margin-bottom: .45rem; color: var(--bs-secondary-color); }
.gold-list li::before {
  content: ""; position: absolute; left: .2rem; top: .62em;
  width: .45rem; height: .45rem; background: var(--bb-gold); transform: rotate(45deg);
}
@media (min-width: 576px) { .gold-list.two-col { columns: 2; column-gap: 2rem; } .gold-list.two-col li { break-inside: avoid; } }