/* The site's own CSS around the ChatDuo chat applet (the "host" side).
   Nothing here styles the applet itself (that is chatduo-chat.css, scoped to .cd): this file puts
   the site palette on the applet's --cd-* variables and implements the header hook from the
   applet's docs/applet.md section 4. Loaded by html/index.php only. */

/* The applet section sits where the old chat module was: directly under the site header. */
.chat-host { padding: 40px 0 50px; }
@media only screen and (max-width: 767px) { .chat-host { padding: 25px 0 35px; } }

/* Height of the slim header row during chats: the header's height and the applet's --cd-top both
   read it, so the chat screen always starts exactly under the row. */
:root { --chat-top: 56px; }

/* Theme: site palette on the applet's variables. The accent must keep 4.5:1 on white (the applet
   uses it for text too): the logo blue #16baf6 is 2.2:1, so it is darkened along its hue to
   #067ca7 (4.7:1). The orange is the site's #ffbf24, the radius the site's button radius. */
#chatduo-chat {
  --cd-font: Montserrat, sans-serif;
  --cd-accent: #067ca7;
  --cd-accent-ink: #fff;
  --cd-accent-2: #ffbf24;
  --cd-radius: 6px;
  --cd-top: var(--chat-top);
}

/* Header hook (U-089): while a chat is on (the applet sets cd-in-chat on <html>) the site header
   becomes one fixed row of --chat-top that keeps the logo, which is the exit (chat-host.js wires it
   to leave()). The chat screen is a fixed layer starting at --cd-top, so the row never covers it. */
html.cd-in-chat #navigation {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--chat-top);
  min-height: 0 !important; /* common.js sets an inline min-height once the page has been scrolled */
  z-index: 9000;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}
html.cd-in-chat #navigation .navbar { position: static; min-height: 0; height: 100%; } /* also undoes .navbar-fixed-top */
html.cd-in-chat #navigation .container { height: 100%; }
html.cd-in-chat #navigation .navbar-brand { display: flex; align-items: center; height: 100%; width: auto; padding: 0; }
html.cd-in-chat #navigation .main-logo { height: 44px; width: auto; }

/* The home copy and footer are under the chat screen while it is on; hide them from the tab order
   and from peeking through. The applet section itself must stay visible (the screen lives in it). */
html.cd-in-chat body > section:not(#chat),
html.cd-in-chat #download-apps,
html.cd-in-chat footer,
html.cd-in-chat .mfp-wrap { visibility: hidden; }