/* ---- Brand tokens (pulled from embracemarketing.co.uk) ---- */
  :root{
    --emb-navy:#10192E;      /* body text / bar background */
    --emb-mint:#43EFC6;      /* accent */
    --emb-white:#ffffff;
    --emb-bar-h-big:64px;    /* expanded bar height (desktop) */
    --emb-bar-h-min:40px;    /* minimised bar height (desktop) */
  }

  /* ---- Bar shell ---- */
  #emb-webinar-bar{
    position:fixed; top:0; left:0; right:0; z-index:100001;
    background:var(--emb-navy);
    color:var(--emb-white);
    font-family:"Source Sans Pro",Helvetica,Arial,sans-serif;
    border-bottom:2px solid var(--emb-mint);
    box-shadow:0 2px 14px rgba(16,25,46,.25);
    cursor:pointer;                 /* whole bar is clickable */
    transform:translateY(0);
    transition:height .35s ease, padding .35s ease;
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
  }
  /* Slide-in entrance: starts off-screen above, eases down. Only applied
     for first-time visitors (see JS). Returning/minimised visitors skip it. */
  #emb-webinar-bar.emb-offscreen{ transform:translateY(-110%); }
  #emb-webinar-bar.emb-anim-in{
    transition:transform .55s cubic-bezier(.22,.61,.36,1), height .35s ease, padding .35s ease;
  }
  #emb-webinar-bar .emb-inner{
    /* Desktop: full width, aligned to the site header's container.
       --emb-align-l / --emb-align-r are set by bar.js from #main-header .container. */
    max-width:none; height:var(--emb-bar-h-big);
    margin:0; padding:0 calc(var(--emb-align-r, 40px) + 42px) 0 var(--emb-align-l, 40px);
    display:flex; align-items:center; gap:18px;
    transition:height .35s ease;
  }
  #emb-webinar-bar.emb-min .emb-inner{ height:var(--emb-bar-h-min); }

  /* ---- Copy ---- */
  #emb-webinar-bar .emb-copy{
    flex:1 1 auto; min-width:0;
    font-family:"Lexend",Helvetica,Arial,sans-serif;
    font-weight:600; line-height:1.15;
    font-size:16px; letter-spacing:.1px;
    transition:font-size .35s ease;
  }
  #emb-webinar-bar .emb-copy .emb-lead{ color:var(--emb-mint); }
  #emb-webinar-bar .emb-copy .emb-cta-text{
    text-decoration:underline; text-underline-offset:3px;
    white-space:nowrap;
  }
  #emb-webinar-bar.emb-min .emb-copy{ font-size:13px; }

  /* The full message is always shown (including mobile — see the mobile block
     at the end of the stylesheet, which stacks copy above the timer). */
  #emb-webinar-bar .emb-copy .emb-long{ display:inline; }

  /* ---- Flip-clock countdown ---- */
  #emb-webinar-bar .emb-countdown{
    flex:0 0 auto; display:flex; align-items:center; gap:8px;
  }
  #emb-webinar-bar .emb-unit{ text-align:center; }
  #emb-webinar-bar .emb-flip{
    position:relative; display:inline-block;
    min-width:42px; padding:6px 7px;
    background:#1b2742; border-radius:6px;
    font-family:"Lexend",monospace; font-weight:700;
    font-size:20px; line-height:1; color:var(--emb-white);
    box-shadow:inset 0 -1px 0 rgba(0,0,0,.35);
    transition:min-width .35s ease, font-size .35s ease, padding .35s ease;
  }
  /* split-flap hinge line */
  #emb-webinar-bar .emb-flip::after{
    content:""; position:absolute; left:0; right:0; top:50%;
    height:1px; background:rgba(0,0,0,.45); transform:translateY(-.5px);
  }
  #emb-webinar-bar .emb-flip.emb-anim{ animation:embFlip .5s ease; }
  @keyframes embFlip{
    0%{ transform:rotateX(0deg); }
    45%{ transform:rotateX(-88deg); filter:brightness(.6); }
    55%{ transform:rotateX(-88deg); filter:brightness(.6); }
    100%{ transform:rotateX(0deg); filter:brightness(1); }
  }
  #emb-webinar-bar .emb-label{
    display:block; margin-top:4px;
    font-family:"Source Sans Pro",sans-serif; font-weight:600;
    font-size:9px; letter-spacing:1px; text-transform:uppercase;
    color:rgba(255,255,255,.6);
    transition:font-size .35s ease, margin .35s ease;
  }
  /* Minimised sizing — same bar, smaller text + countdown.
     In minimised mode the label sits BESIDE the number (inline) instead of
     stacked above/below, so the timer stays compact and readable. */
  #emb-webinar-bar.emb-min .emb-flip{ min-width:0; padding:3px 6px; font-size:14px; }
  #emb-webinar-bar.emb-min .emb-flip::after{ display:none; }   /* drop the split-flap hinge when tiny */
  #emb-webinar-bar.emb-min .emb-unit{ display:inline-flex; align-items:baseline; gap:4px; }
  #emb-webinar-bar.emb-min .emb-label{ display:inline; margin-top:0; font-size:11px; letter-spacing:.4px; }
  #emb-webinar-bar.emb-min .emb-countdown{ gap:12px; }

  /* ---- Minimise / expand toggle ---- */
  #emb-webinar-bar .emb-toggle{
    position:absolute; top:50%; right:var(--emb-align-r, 14px); transform:translateY(-50%);
    width:26px; height:26px; padding:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid rgba(255,255,255,.35);
    border-radius:50%; color:var(--emb-white);
    transition:background .2s, border-color .2s;
  }
  #emb-webinar-bar .emb-toggle:hover{
    background:var(--emb-mint); border-color:var(--emb-mint); color:var(--emb-navy);
  }
  #emb-webinar-bar .emb-toggle svg{ width:13px; height:13px; display:block; }
  #emb-webinar-bar .emb-toggle .emb-ico-expand{ display:none; }
  #emb-webinar-bar.emb-min .emb-toggle .emb-ico-min{ display:none; }
  #emb-webinar-bar.emb-min .emb-toggle .emb-ico-expand{ display:block; }

  /* =========================================================
   *  MOBILE ONLY (<= 680px)  — desktop above is unchanged.
   *  The bar grows taller and stacks: the full message sits on its
   *  own row(s), the timer on a row below. Height is auto so it fits
   *  1-2 text rows + the timer. Big mode = larger timer (labels under
   *  numbers); minimised mode = compact timer (labels beside numbers).
   * ========================================================= */
  @media(max-width:680px){
    /* Stack vertically and let the height grow (both modes). */
    #emb-webinar-bar .emb-inner,
    #emb-webinar-bar.emb-min .emb-inner{
      height:auto;
      flex-direction:column;
      align-items:flex-start;
      gap:8px;
      padding:12px 50px 12px 16px;   /* right padding leaves room for the toggle */
    }

    /* Pin the minimise/expand button to the top-right of the taller bar. */
    #emb-webinar-bar .emb-toggle{ top:10px; right:14px; transform:none; }

    /* Copy: full message, comfortable wrapping. */
    #emb-webinar-bar .emb-copy{ font-size:15px; line-height:1.3; }
    #emb-webinar-bar.emb-min .emb-copy{ font-size:13px; }
    #emb-webinar-bar .emb-copy .emb-cta-text{ white-space:normal; }

    /* Timer gets its own full-width row. */
    #emb-webinar-bar .emb-countdown{ width:100%; }

    /* BIG mode: bigger timer, labels stacked under the numbers. */
    #emb-webinar-bar .emb-flip{ min-width:48px; padding:8px 9px; font-size:24px; }
    #emb-webinar-bar .emb-flip::after{ display:block; }
    #emb-webinar-bar .emb-unit{ display:block; }
    #emb-webinar-bar .emb-label{ display:block; margin-top:5px; font-size:10px; }
    #emb-webinar-bar .emb-countdown{ gap:10px; }

    /* MINIMISED mode on mobile: hide the timer, show the message only. */
    #emb-webinar-bar.emb-min .emb-countdown{ display:none; }
  }

  /* Hidden until JS decides initial state (avoids flash) */
  #emb-webinar-bar[hidden]{ display:none; }