/*
 * Cookie notice bar.
 *
 * Its own file rather than another block in page-inline.css: that file is the
 * legacy footer.php <style> dump and everything added to it inherits the
 * cascade problems documented there. Nothing here is a bare element or theme
 * class selector, so this cannot reach anything the legacy theme styles.
 *
 * Colours are the theme's own, copied from legacy/css/style.css rather than
 * guessed:
 *   bar     .bg-success-gradiant  #0c5081 -> #051c2e   (the stats bar gradient)
 *   button  .btn-danger-gradiant  #f05a2b -> #ff6a5b   (every CTA on the site)
 *   links   .bg-info-gradiant     #27d9e4              (the cyan accent)
 *
 * Note for anyone editing: "success" in this theme is NAVY, not green, and
 * "danger" is the orange CTA, not red. The class names are inherited from
 * Bootstrap and mean nothing here. An earlier version of this file used a
 * green gradient that appears nowhere in the theme.
 *
 * The values are duplicated rather than applied via the theme classes on
 * purpose: .bg-success-gradiant also sets properties this bar does not want,
 * and this theme has documented cascade-order surprises. Self-contained is
 * safer than inherited here.
 */

.tfc-cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1080; /* above the theme's sticky header (1050) and the chat funnel */
  background: #0c5081;
  background: linear-gradient(to right, #0c5081 0%, #051c2e 100%);
  color: #ffffff;
  box-shadow: 0 -2px 12px rgba(5, 28, 46, 0.35);
  padding: 16px 20px;
  /* Keeps the bar clear of the iOS home indicator without moving it on desktop. */
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  /* The chat launcher (css/chat-funnel.css) is fixed at right:20px bottom:20px,
     60px square, at z-index 2147483000 -- far above this bar, so it paints ON
     TOP of it and lands squarely on the "Got it" button. Nothing here can win
     that stacking contest, so reserve the column instead: 20 + 60 + 16 of gap.
     Cheaper and less fragile than moving the launcher while the bar is open,
     which would need its height measured in JS on every resize. */
  padding-right: 96px;
}

/* [hidden] loses to the display rule above in some of the legacy stylesheets,
   so it is restated here where it can win. */
.tfc-cookie-notice[hidden] {
  display: none !important;
}

/* The chat teaser ("Looking for business funding?") is fixed at right:20px
   bottom:92px, which lands on top of this bar's text on a narrow screen and
   makes the notice unreadable. Reserving space cannot help -- the teaser sizes
   itself to the viewport -- so it is suppressed for as long as the bar is up,
   and returns the moment the visitor dismisses it. cookie-notice.js owns the
   body class.
   This is the one rule in this file that reaches outside its own component. It
   is deliberate and narrow: one selector, one property, and the teaser is a
   transient nudge rather than something the visitor came for. */
body.tfc-cookie-notice-open #tfc-chat .tfc-chat-teaser {
  display: none;
}

.tfc-cookie-notice__inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.tfc-cookie-notice__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #ffffff;
}

.tfc-cookie-notice__text a {
  color: #27d9e4;
  text-decoration: underline;
}

.tfc-cookie-notice__text a:hover,
.tfc-cookie-notice__text a:focus {
  color: #ffffff;
}

.tfc-cookie-notice__btn {
  flex: 0 0 auto;
  border: 0;
  border-radius: 4px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #ffffff;
  cursor: pointer;
  background: #f05a2b;
  background: linear-gradient(to right, #f05a2b 0%, #ff6a5b 100%);
  transition: opacity 0.2s ease;
}

.tfc-cookie-notice__btn:hover {
  opacity: 0.88;
  color: #ffffff;
}

.tfc-cookie-notice__btn:focus-visible {
  outline: 2px solid #27d9e4;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .tfc-cookie-notice {
    padding: 14px 16px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    /* Same launcher clearance as desktop. It matters more here: the button
       goes full width when the layout stacks, so without this it runs straight
       under the launcher. */
    padding-right: 92px;
  }

  .tfc-cookie-notice__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    text-align: center;
  }

  .tfc-cookie-notice__text {
    font-size: 12px;
  }

  .tfc-cookie-notice__btn {
    width: 100%;
  }
}