/*
 * One visual signature for every interior page hero.
 * The homepage uses .bh-home-hero and is intentionally not selected here.
 */
:root {
  --bh-inner-hero-backdrop:
    radial-gradient(circle at 86% 22%, rgba(87, 182, 245, .34), transparent 34%),
    linear-gradient(126deg, #061f36 0%, #07477f 60%, #0a62b0 100%);
  --bh-inner-hero-overlay:
    linear-gradient(90deg, rgba(3, 26, 45, .42), transparent 68%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 14px);
}

/* Every inner Elementor page uses the whole available viewport. The homepage
 * has its own layout and is deliberately excluded. Individual text, card and
 * grid modules retain their local maximum widths for readable content. */
body:not(.home) .elementor > .e-con.e-parent {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* The hero content frame follows the 1200px standard used on Donacije. */
.bheip-shell.bheip-hero__inner,
.bhcl-shell,
.bh-program-page .bhp-shell.bhp-hero__inner,
.bhea-shell.bhea-hero__inner,
.bh-ep-shell,
.bhec-page .bhec-shell.bhec-hero__inner,
.bh-page-hero > .bh-shell {
  width: min(1200px, calc(100% - 40px)) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

/* Standard Elementor and theme-built internal pages. */
.bh-page-hero,
.bheip-hero,
.bhcl-hero,
.bh-program-page .bhp-hero,
.bhea-hero,
.bhec-page .bhec-hero,
.bh-ep-hero {
  background: var(--bh-inner-hero-backdrop) !important;
  background-image: var(--bh-inner-hero-backdrop) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* The same quiet texture sits above every shared background. */
.bh-page-hero::after,
.bheip-hero::after,
.bhcl-hero::after,
.bh-program-page .bhp-hero::after,
.bhea-hero::after,
.bhec-page .bhec-hero::after {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--bh-inner-hero-overlay) !important;
}

/* Elementor can store a per-page image on ::before; remove it here so the
 * shared backdrop is visible on every normal interior hero. */
.bhea-page .bhea-hero::before,
.bhec-page .bhec-hero::before {
  background: none !important;
}

/* The petition archive uses a red/blue underline instead of an image-led bar. */
.bh-ep-hero::after {
  background: linear-gradient(90deg, #e50101 0 19%, #0a62b0 19% 100%) !important;
}

/* Preserve image-led detail heroes for individual petitions: their photo is
 * case-specific evidence and remains visible by design. */
.heroji-petition-hero,
.bh-home-hero {
  --bh-sih-preserve-content-image: 1;
}

@media (max-width: 782px) {
  .bheip-shell.bheip-hero__inner,
  .bhcl-shell,
  .bh-program-page .bhp-shell.bhp-hero__inner,
  .bhea-shell.bhea-hero__inner,
  .bh-ep-shell,
  .bhec-page .bhec-shell.bhec-hero__inner,
  .bh-page-hero > .bh-shell {
    width: min(1200px, calc(100% - 28px)) !important;
  }

  /* Mobile interior pages must never inherit the dark body text colour inside
   * the dark-blue hero. This applies to the shared content copy only; button
   * colours continue to come from their Elementor/theme component styles. */
  body:not(.home) :is(
    .bh-page-hero,
    .bheip-hero,
    .bhcl-hero,
    .bh-program-page .bhp-hero,
    .bhea-hero,
    .bhec-page .bhec-hero,
    .bh-ep-hero
  ) {
    color: #fff !important;
    background-image:
      linear-gradient(104deg, rgba(3, 22, 40, .70) 0%, rgba(3, 22, 40, .44) 58%, rgba(3, 22, 40, .18) 100%),
      var(--bh-inner-hero-backdrop) !important;
  }

  body:not(.home) :is(
    .bh-page-hero,
    .bheip-hero,
    .bhcl-hero,
    .bh-program-page .bhp-hero,
    .bhea-hero,
    .bhec-page .bhec-hero,
    .bh-ep-hero
  ) :is(.elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-widget-text-editor li) {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  }

  /* Keep the two participation actions legible and easy to tap without
   * changing the homepage header. */
  body:not(.home) .bh-site-header .bh-mobile-quick-actions {
    gap: .3rem;
  }

  body:not(.home) .bh-site-header .bh-mobile-quick-action {
    min-width: auto;
    min-height: 2.75rem;
    gap: .26rem;
    padding: .4rem .48rem;
    font-size: .7rem;
    letter-spacing: 0;
    line-height: 1;
  }

  body:not(.home) .bh-site-header .bh-mobile-quick-action--report {
    min-width: 4.55rem;
    background: #fff;
    border-color: #075da6;
    color: #075da6;
  }

  body:not(.home) .bh-site-header .bh-mobile-quick-action--join {
    min-width: 4.95rem;
    background: #e50101;
    border-color: #e50101;
    color: #fff;
  }

  body:not(.home) .bh-site-header .bh-mobile-quick-action > span:first-child {
    font-size: 1rem;
  }

  body:not(.home) .bh-site-header .bh-mobile-quick-action:focus-visible {
    outline: 3px solid #ffd54a;
    outline-offset: 2px;
  }

  /* Program navigation stays horizontally scrollable, but its affordance and
   * text are now visible enough for touch use. */
  body:not(.home) .bhp-program-index {
    padding-bottom: 10px !important;
    scrollbar-width: thin;
    scrollbar-color: #0a62b0 #dcebf6;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  body:not(.home) .bhp-program-index .bhp-index-link {
    scroll-snap-align: start;
  }

  body:not(.home) .bhp-program-index .elementor-button {
    min-height: 44px;
    font-size: 12px;
    line-height: 1.25;
  }
}

@media (max-width: 430px) {
  body:not(.home) .bh-site-header .bh-header-inner {
    gap: .28rem;
  }

  body:not(.home) .bh-site-header .bh-brand {
    width: clamp(5.85rem, 29vw, 7rem);
  }

  body:not(.home) .bh-site-header .bh-mobile-quick-action {
    padding: .36rem .35rem;
    font-size: .66rem;
  }

  body:not(.home) .bh-site-header .bh-mobile-quick-action--report {
    min-width: 4.2rem;
  }

  body:not(.home) .bh-site-header .bh-mobile-quick-action--join {
    min-width: 4.58rem;
  }
}


/* Canonical desktop header shared by every interior route and script. */
@media (min-width: 1121px) {
  body:not(.home) .bh-site-header .bh-header-inner { gap: 10px !important; }
  body:not(.home) .bh-site-header .bh-primary-nav .menu { gap: 8px !important; flex-wrap: nowrap !important; }
  body:not(.home) .bh-site-header .bh-primary-nav .menu > li { flex: 0 0 auto; }
  body:not(.home) .bh-site-header .bh-primary-nav .menu > li > a {
    font-size: 14px !important;
    line-height: 1.25 !important;
    letter-spacing: -.015em !important;
    white-space: nowrap !important;
  }
}