/* ICPAC branding for the Flood Watch Data Centre.
   Colours are the flood watch site's own custom properties:
       --primary-color   #034930   header green
       --secondary-color #198754   links
       --accent-color    #fbc02d   rule under the header

   STYLE THE VARIABLE, NOT THE ELEMENT.
   STAC Browser paints its top bar with
       #stac-browser > header .site { background: var(--sb-header-background) }
   so a background set on `header` lands on the band BELOW the bar instead --
   `.site` paints over the top of it. Setting the variable colours the bar
   itself and leaves the title band alone, which is what is wanted. */
#stac-browser {
  --sb-header-background: #034930;
  --sb-logo-height: 42px;
}
:root { --icpac-primary:#034930; --icpac-secondary:#198754; --icpac-accent:#fbc02d; }

/* The wrapper must stay unpainted, or the title band picks up the colour. */
#stac-browser > header { background: transparent !important; border-bottom: none !important; }
#stac-browser > header .site { border-bottom: 3px solid var(--icpac-accent); }

/* Everything in the bar reads white on the green. */
#stac-browser > header .site,
#stac-browser > header .site a,
#stac-browser > header .site .btn,
#stac-browser > header .site .btn-header,
#stac-browser > header .site span[role=banner] { color: #fff !important; }
#stac-browser > header .site .btn,
#stac-browser > header .site .btn-header {
  --bs-btn-color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
}
#stac-browser > header .site .btn:hover,
#stac-browser > header .site .btn-header:hover { background-color: rgba(255,255,255,.15) !important; }

/* Logo: explicit height and an auto width that cannot collapse. */
#stac-browser > header .site .header-title .logo {
  height: var(--sb-logo-height) !important;
  width: auto !important;
  min-width: 30px;
  object-fit: contain;
}

/* Title centred in the bar. */
#stac-browser > header .site > .col-md-12 > .title { justify-content: center; }
#stac-browser > header .site > .col-md-12 > .title .header-title { justify-content: center; }

a { color: var(--icpac-secondary); }
a:hover { color: var(--icpac-primary); }
.btn-primary { background-color: var(--icpac-secondary) !important; border-color: var(--icpac-secondary) !important; }
.btn-primary:hover { background-color: var(--icpac-primary) !important; }
.card:hover { border-color: var(--icpac-secondary); }

/* ── Layout ── */
@media (min-width: 1400px) { .container, .container-lg, .container-xl, .container-xxl { max-width: 1660px; } }
footer, .footer, #stac-browser > footer {
  width: 100%; max-width: none; padding-left: 1.1rem; padding-right: 1.1rem;
  border-top: 1px solid rgba(0,0,0,.08);
}
.card-columns { column-gap: .8rem !important; }
.card-columns .card { margin-bottom: .8rem !important; }
@media (min-width: 1500px) { .card-columns:not(.count-1) { column-count: 4 !important; } }
@media (min-width: 1900px) { .card-columns:not(.count-1) { column-count: 5 !important; } }
.card .card-body { padding: .8rem .9rem; }