/* theme.css — custom theme layered OVER Bootstrap 5.
 *
 * Reproduces the look of strikeaposeatl.com (rebranded "Strike a Pose Studios")
 * with native Bootstrap structure. Tokens come from capture/theme.json:
 * accent red rgb(184,49,47), near-black text rgb(34,34,34), white bg,
 * Poppins headings + Open Sans body.
 */

:root {
  /* --- Brand palette --- */
  --brand-primary: #b8312f;        /* accent red (rgb 184,49,47) */
  --brand-primary-dark: #9a2725;   /* hover */
  --brand-dark: #111111;           /* near-black headings / dark pill buttons */
  --brand-body: #222222;           /* body text (rgb 34,34,34) */
  --brand-muted: #555555;
  --brand-light: #f6f6f6;
  --brand-white: #ffffff;

  /* --- Typography --- */
  --font-base: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Poppins", var(--font-base);
  --font-size-base: 1rem;

  /* --- Map brand tokens onto Bootstrap variables --- */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 184, 49, 47;
  --bs-body-color: var(--brand-body);
  --bs-body-font-family: var(--font-base);
  --bs-body-font-size: var(--font-size-base);
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: var(--brand-primary-dark);
}

body {
  font-family: var(--font-base);
  color: var(--brand-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--brand-dark);
  letter-spacing: -0.01em;
}

.display-1, .display-2, .display-3, .display-4 { font-family: var(--font-heading); font-weight: 800; }

/* Brand accent helpers */
.text-brand { color: var(--brand-primary) !important; }
.bg-brand { background-color: var(--brand-primary) !important; }
.text-dark-ink { color: var(--brand-dark) !important; }

/* Headings stay light on dark/colored hero sections */
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.hero-dark h1, .hero-dark h2, .hero-dark h3, .hero-dark h4,
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6 {
  color: #fff;
}

a { color: var(--brand-primary); }
a:hover { color: var(--brand-primary-dark); }

/* --- Buttons: the site uses pill buttons (red + black) --- */
.btn { border-radius: 50rem; font-weight: 600; padding: .65rem 1.75rem; }

.btn-primary,
.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary-dark);
  --bs-btn-hover-border-color: var(--brand-primary-dark);
  --bs-btn-active-bg: var(--brand-primary-dark);
  --bs-btn-active-border-color: var(--brand-primary-dark);
}

.btn-ink {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-dark);
  --bs-btn-border-color: var(--brand-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-active-bg: #000;
}

.btn-outline-ink {
  --bs-btn-color: var(--brand-dark);
  --bs-btn-border-color: var(--brand-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
}

/* --- Header / nav --- */
.site-navbar {
  background: var(--brand-white);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.navbar-brand { display: inline-flex; align-items: center; gap: .15rem; }
.brand-wordmark {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 1.35rem;
  color: var(--brand-dark);
  text-transform: uppercase;
  line-height: 1;
}
.brand-wordmark .cam {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary);
  color: #fff;
  border-radius: .35rem;
  width: 1.7rem; height: 1.4rem;
  margin: 0 .15rem;
  font-size: .9rem;
}
.brand-wordmark .accent { color: var(--brand-primary); }

.site-navbar .nav-link {
  color: var(--brand-dark);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .95rem;
  padding: .4rem .8rem;
}
.site-navbar .nav-link:hover { color: var(--brand-primary); }
.site-navbar .nav-link.active {
  color: #fff;
  background: var(--brand-primary);
  border-radius: 50rem;
}
.site-navbar .nav-cta .nav-link,
.site-navbar .nav-cta .nav-link.active {
  color: var(--brand-primary);
  background: transparent;
}

/* --- Sections --- */
.section { padding-top: 4rem; padding-bottom: 4rem; }
.hero-dark {
  background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55));
  background-size: cover;
  background-position: center;
  color: #fff;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  font-size: .8rem;
  color: var(--brand-primary);
}

/* Service / feature cards */
.feature-card { border: 0; }
.feature-card img { border-radius: .5rem; }

/* Logo strip (client logos) */
.logo-strip img {
  max-height: 46px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .8;
  transition: opacity .2s, filter .2s;
}
.logo-strip img:hover { filter: none; opacity: 1; }

/* Stars */
.stars { color: #f5b50a; letter-spacing: .1em; }

/* --- Footer (light, matches original) --- */
.site-footer {
  background: var(--brand-white);
  color: var(--brand-body);
  border-top: 1px solid rgba(0,0,0,.08);
}
.site-footer h2, .site-footer h3, .site-footer h4 { color: var(--brand-dark); }
.site-footer a { color: var(--brand-body); text-decoration: none; }
.site-footer a:hover { color: var(--brand-primary); }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: .6rem;
  background: var(--brand-dark); color: #fff; margin-right: .5rem;
}
.footer-social a:hover { background: var(--brand-primary); color: #fff; }

/* Utility */
.rounded-xl { border-radius: 1rem !important; }
/* Landscape photos in uniform grids: fill + crop. */
.object-cover { object-fit: cover; }
.ratio-cover img, .img-cover { width: 100%; height: 100%; object-fit: cover; }
/* Portrait / tall-skinny photos: show the WHOLE photo, never cropped. The light
   backdrop fills the letterbox area so it reads as intentional. */
.object-contain { object-fit: contain; background: #f4f4f4; }