/* ---------------------------------------------------------------
   BCL Community — brand overrides
   Source of truth: bcl.my

     brand yellow  #ffdb00   (--primary-yellow; 17 CTAs on the marketing site)
     ink           #111111   (bcl.my never puts white text on the yellow)
     hover         #e8c700   (darkened brand yellow)

   Answer hardcodes color:#fff on .btn-primary and a light grey on the
   navbar. Against #ffdb00 white is 1.42:1 — fails WCAG badly.
   Ink #111111 is 13.9:1 — passes AA and AAA.
   --------------------------------------------------------------- */

:root {
  --bcl-yellow: #ffdb00;
  --bcl-yellow-hover: #e8c700;
  --bcl-ink: #111111;
}

/* Primary buttons: dark ink on brand yellow */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:disabled,
.btn-primary.disabled {
  color: var(--bcl-ink) !important;
  border-color: transparent !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--bcl-yellow-hover) !important;
}

.btn-primary:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(255, 219, 0, 0.5) !important;
}

/* Navbar sits directly on the yellow bar */
.navbar.theme-light,
.navbar.theme-light .navbar-brand,
.navbar.theme-light .nav-link,
.navbar.theme-light .navbar-nav .nav-link,
.navbar.theme-light a:not(.btn) {
  color: var(--bcl-ink) !important;
}

.navbar.theme-light .nav-link:hover,
.navbar.theme-light a:not(.btn):hover {
  color: #000 !important;
  opacity: 0.75;
}

/* "Log in" is rendered as .btn.btn-link.link-primary, so `link-primary`
   resolves to the brand yellow -- yellow text on the yellow navbar, which
   reads as washed-out grey. The navbar rule above uses a:not(.btn) and
   deliberately skips buttons, so it never applied here. */
.navbar .btn-link,
.navbar .link-primary,
.navbar .btn-link.link-primary,
.navbar a.link-primary {
  color: var(--bcl-ink) !important;
}

.navbar .btn-link:hover,
.navbar .link-primary:hover,
.navbar a.link-primary:hover {
  color: #000 !important;
  opacity: 0.75;
}

/* "Sign up" in the navbar — ink border so it reads as a control */
.navbar .btn-light,
.navbar .btn-outline-light {
  color: var(--bcl-ink) !important;
  border-color: rgba(17, 17, 17, 0.35) !important;
  background-color: transparent !important;
}

.navbar .btn-light:hover,
.navbar .btn-outline-light:hover {
  background-color: rgba(17, 17, 17, 0.08) !important;
}

.navbar-brand {
font-weight: bold;
}

/* ---------------------------------------------------------------
   Answer meta. Intended shape:

       Hanny Ramzy
       1h ago • edited 1h ago

   The DOM differs by auth state, which is why this only broke for guests:

     logged in   .d-flex.flex-column > [ div.name , a[ time · span · time ] ]
     guest       .d-flex.flex-column > [ div.name , time , span , time ]

   Logged out there is no anchor (the timeline link needs auth), so the
   three timestamp nodes become direct children of a flex-column and each
   takes its own row.

   Fix that holds for both: switch to a wrapping row and give the name
   a full-width basis, so it owns line 1 and whatever follows — anchor or
   loose time nodes — flows together on line 2.
   --------------------------------------------------------------- */
.small.text-secondary.d-flex.flex-column {
  flex-flow: row wrap !important;
  align-items: center;
}

.small.text-secondary.d-flex.flex-column > div:first-child {
  flex: 0 0 100%;
}

.small.text-secondary.d-flex.flex-column > a {
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   Reputation score next to usernames.

   Answer renders it as a bare number — <span title="Reputation">1</span> —
   with the meaning only in a hover tooltip. That reads as an unexplained
   figure to a first-time visitor, and there is no hover at all on mobile.
   Append a quiet "rep" label so it is self-explanatory inline.
   --------------------------------------------------------------- */
span[title="Reputation"]::before {
  content: "•";
  font-weight: 400;
  opacity: 0.5;
  margin-right: 0.35em;
}

span[title="Reputation"]::after {
  content: " rep";
  font-weight: 400;
  opacity: 0.7;
  margin-left: 0.1em;
}

/* ---------------------------------------------------------------
   Question-list meta row (avatar · author · timestamp).

   The row is align-items:normal, so each flex item stretches to the 24px
   row height. The author block centres its own content, but the <time>
   has a 21px line-height inside that stretched 24px box — so "1h ago"
   renders 1.5px above the author's baseline. Centre the row.
   --------------------------------------------------------------- */
.list-group-item .d-flex.flex-wrap.text-secondary.small {
  align-items: center;
}

/* Search field on the yellow bar */
.navbar .form-control {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(17, 17, 17, 0.2) !important;
  color: var(--bcl-ink) !important;
}

.navbar .form-control::placeholder {
  color: rgba(17, 17, 17, 0.55) !important;
}

/* Links: raw #ffdb00 text on white is 1.4:1 and unreadable, so link text
   keeps Answer's own colour. Only filled surfaces use the yellow. */

/* ---------------------------------------------------------------
   Legal entity line.
   Answer appends custom_footer as a bare <div> directly to <body>,
   outside its own <footer> and outside the layout container — so it
   lands full-bleed and detached. Constrain and quieten it so it reads
   as a continuation of the footer.
   --------------------------------------------------------------- */
.bcl-legal {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1rem 1.25rem;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--bs-secondary-color, #6c757d);
}

/* -----------------------------------------------------------------
   The Meilisearch plugin stamps a "Search by meilisearch" logo beside
   the Search Results heading. Anchor has an empty href, so match on
   the svg it wraps.
   ----------------------------------------------------------------- */
a:has(> span > svg.max-width-200) {
  display: none !important;
}

/* ---------------------------------------------------------------
   The user dropdown is rendered inside .navbar, so the ink rules above
   reach .dropdown-item and paint it #111111. Correct on the yellow bar,
   invisible on the dark dropdown panel — hence dark mode only.
   Hand the items back to Bootstrap's dropdown variables.
   --------------------------------------------------------------- */
.navbar.theme-light .dropdown-menu a.dropdown-item {
  color: var(--bs-dropdown-link-color) !important;
}

.navbar.theme-light .dropdown-menu a.dropdown-item:hover,
.navbar.theme-light .dropdown-menu a.dropdown-item:focus {
  color: var(--bs-dropdown-link-hover-color) !important;
  background-color: var(--bs-dropdown-link-hover-bg) !important;
}

.navbar.theme-light .dropdown-menu a.dropdown-item:active,
.navbar.theme-light .dropdown-menu a.dropdown-item.active {
  color: var(--bs-dropdown-link-active-color) !important;
  background-color: var(--bs-dropdown-link-active-bg) !important;
}

/* data-bs-theme="dark" serves a white stroke — 1.10:1 on brand yellow. */
.navbar .navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2817,17,17,0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}