/* ==========================================================================
 * Kulima page header (the photo banner at the top of record pages).
 * --------------------------------------------------------------------------
 * Phase 18: moved out of the inline <style> block in includes/head.php and the
 * style="" attributes on each page's <h1>/<p class="lead">, so the
 * Content-Security-Policy can run without 'unsafe-inline' for styles.
 *
 * The background photo is chosen per request by head.php. It reaches the CSS
 * through <meta name="kulima-hero-image">, which js/kulima-page-hero.js turns into
 * the --kulima-hero-image custom property (CSSOM writes are CSP-safe).
 * ========================================================================== */
:root {
  --kulima-hero-image: url('../../app-assets/img/gallery/default-bg.jpg');
}

.page-header {
  background-color: var(--kulima-green-900, #0f3d22);
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--kulima-hero-image);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: var(--kulima-space-7, 3rem) var(--kulima-space-4, 1rem);
  color: var(--kulima-color-on-primary, #fcfdfc);
  margin-bottom: var(--kulima-space-6, 2rem);
  text-align: center;
  border-radius: var(--kulima-radius-xl, 1rem);
}

/* Title: harvest amber on the darkened photo (the 50% black overlay keeps it
 * well above 4.5:1). Shadow is a legibility aid on busy photos, not decoration. */
.page-header h1,
.page-header .page-header__title {
  font-family: var(--kulima-font-heading, inherit);
  font-size: var(--kulima-font-size-2xl, 3rem);
  font-weight: var(--kulima-font-weight-bold, 700);
  line-height: 1.1;
  color: var(--kulima-amber-300, #efc158);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  overflow-wrap: anywhere;
}

.page-header .lead,
.page-header .page-header__lead {
  font-size: var(--kulima-font-size-md, 1.25rem);
  font-weight: var(--kulima-font-weight-semibold, 600);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  color: var(--kulima-color-on-primary, #fcfdfc);
}

@media (max-width: 575.98px) {
  .page-header {
    padding: var(--kulima-space-6, 2rem) var(--kulima-space-3, 0.75rem);
    border-radius: var(--kulima-radius-lg, 0.75rem);
  }
}

/* Full-bleed photo backdrop for the sign-in, registration and business-selection
 * screens (replaces their style="background: …" attributes). */
.kulima-photo-bg {
  background-color: var(--kulima-green-900, #0f3d22);
  background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), var(--kulima-hero-image);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}