/* BijakBorong palette based on the supplied navy, white, and gold identity. */
:root {
  --color-brand: #071b2f;
  --color-brand-dark: #041322;
  --color-brand-light: #fff5c4;
  --color-brand-border: #f0d45b;
  --color-surface: #f4f7fa;
  --bb-navy: #071b2f;
  --bb-blue: #102f49;
  --bb-gold: #ffcf18;
  --bb-text: #18314a;
  --bb-muted: #52677d;
}

html,
body {
  background-color: var(--color-surface);
}

/* Brand artwork banner across the top edge of every app view. */
#root main::before {
  content: "";
  display: block;
  width: 100%;
  height: clamp(118px, 18vw, 220px);
  background-color: var(--bb-navy);
  background-image: url("/images/bijakborong-brand.png");
  background-repeat: no-repeat;
  background-position: center 38%;
  background-size: cover;
  border-bottom: 5px solid var(--bb-gold);
}

/* Keep the search field distinct from the navy masthead. */
[class~="bg-[#146b46]"] {
  background-color: var(--bb-blue);
}

/* Replace the old green Pro promotion with the reference gold. */
.bg-gradient-to-r {
  background-image: linear-gradient(110deg, #ffe22e 0%, #ffbf16 100%);
  color: var(--bb-navy);
}

.bg-gradient-to-r :is(h1, h2, h3, p, span, svg) {
  color: var(--bb-navy);
}

/* Active navigation and category icons use pale gold with navy text. */
.bg-brand-light {
  color: var(--bb-navy);
}

/* Keep all interface copy within the navy/blue/white/gold palette. */
[class~="text-gray-900"],
[class~="text-gray-800"],
[class~="text-gray-700"] {
  color: var(--bb-navy);
}

[class~="text-gray-600"] {
  color: var(--bb-text);
}

[class~="text-gray-500"] {
  color: var(--bb-muted);
}

[class~="text-gray-400"] {
  color: #73869a;
}

/* White copy remains crisp on the navy areas. */
[class~="text-white"] {
  color: #fff;
}

@media (max-width: 640px) {
  #root main::before {
    height: 126px;
    background-position: center 38%;
  }
}
/* Fit the desktop content beside the fixed navigation without horizontal overflow. */
@media (min-width: 768px) {
  #root main {
    box-sizing: border-box;
    flex: 0 0 calc(100vw - 16rem);
    width: calc(100vw - 16rem);
    min-width: 0;
  }
}