/* Copyright (c) 2026 Transmin Limited. All rights reserved.
 *
 * Styling for the behaviour that the stripped Google Sites bundle used to
 * apply as inline style. Everything else about this site's appearance still
 * comes from the mirrored Google stylesheets; nothing here restyles content.
 */

/* --- Nav dropdown panels ---------------------------------------------------
 * The panels ship with an inline `display:none` that the Google runtime used
 * to clear. Keeping the attribute (rather than stripping it in fetch.py) means
 * the menus stay closed for a visitor with no JavaScript instead of every
 * submenu rendering expanded, so the override has to carry !important.
 */
.oGuwee.cw-open { display: block !important; }

/* Chevron flips while its menu is open. `.mBHtvb > svg` is already scaled 2x
 * by the Google sheet, so the desktop rule has to restate that scale — a bare
 * rotate() would silently drop it and shrink the arrow to half size.
 */
.j10yRb > svg,
.mBHtvb > svg { transition: transform 0.2s ease; }
li.cw-expanded > .PsKE7e .j10yRb > svg { transform: rotate(180deg); }
li.cw-expanded > .PsKE7e .mBHtvb > svg { transform: scale(2) rotate(180deg); }

/* --- Mobile drawer scrim ---------------------------------------------------
 * `.TxnWlb` is defined by the Google sheet as a fixed, fully transparent,
 * zero-width layer; the runtime gave it size and opacity. z-index sits below
 * the drawer's own 70 so the drawer stays clickable above it.
 */
.TxnWlb.cw-open {
  width: 100%;
  opacity: 0.5;
  z-index: 60;
  transition: opacity 0.5s;
}
body.cw-nav-open { overflow: hidden; }

/* Keyboard users need to see where they are: the Google build relied on its
 * own focus machinery, which went with the bundle.
 */
.j10yRb:focus-visible,
.mBHtvb:focus-visible,
.DXsoRd:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* --- Self-hosted contact form ---------------------------------------------
 * Replaces the retired Mailchimp hosted form. The iframe is sized by a
 * postMessage from the embed (see site.js); the height here is the fallback
 * that applies if that handshake never happens, so a failed message degrades
 * to an inner scrollbar rather than a clipped form.
 */
.cancha-contact-embed {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.cancha-contact-embed iframe {
  display: block;
  width: 100%;
  min-height: 900px;
  border: 0;
}
.cancha-contact-fallback {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.9em;
  opacity: 0.75;
}
.cancha-contact-fallback a { text-decoration: underline; color: inherit; }

@media print {
  .cancha-contact-embed { display: none; }
}

/* --- Cancha assistant (floating chat widget) -------------------------------
 * Copied shape from workshop.transmin.com/index.html's inline #cha-chat
 * block (workshop/index.html:1420-1435) — the mirror is the only host that
 * lacked a launcher. Fixed bottom-right, z-index above the nav/drawer (60)
 * and page content but does not overlap the in-page .cancha-contact-embed
 * iframe on /contact-us (that one is static-flow, this is position:fixed).
 */
#cha-chat { position: fixed; right: 20px; bottom: 20px; z-index: 9999; font-family: 'Open Sans', system-ui, sans-serif; }
#cha-chat-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F57900;
  color: #fff;
  border: none;
  border-radius: 28px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
  transition: background .15s, transform .15s;
}
#cha-chat-toggle:hover { background: #CE5C00; transform: translateY(-1px); }
#cha-chat-panel[hidden] { display: none; }
#cha-chat-panel {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: 380px;
  max-width: calc(100vw - 40px);
  height: 560px;
  max-height: calc(100vh - 110px);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
  display: flex;
  flex-direction: column;
  border: 1px solid #D3D7CF;
}
#cha-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Cancha orange, matching #cha-chat-toggle above and the site's own
     buttons. This was #204A87 (Rekupa Sky Blue), carried over verbatim from
     the widget's original theme — the panel header rendered blue on an
     orange site while the launcher beside it was correct. Caught in a real
     browser; computed style inside the iframe was already orange, because
     the blue lives on the HOST panel chrome, not in the widget. */
  background: #CE5C00;
  color: #fff;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 14px;
}
#cha-chat-close { background: none; border: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
#cha-chat-frame { border: 0; width: 100%; flex: 1; }
@media (max-width: 480px) {
  #cha-chat-toggle span { display: none; }
  #cha-chat-toggle { padding: 14px; border-radius: 50%; }
}
@media (prefers-reduced-motion: reduce) {
  #cha-chat-toggle { transition: none; }
}