@charset "UTF-8";
.cn-topbar {

    background: var(--cn-bg);
    width: 100%; /* This forces it to behave exactly like cn-band */
}

/*
   MEASURED on p6 and p22: the white band runs 0 -> 201.4, with the logo
   68.6 -> 156.9. So the logo is 88px tall, sitting 68px below the top of the
   page and 45px above the navy bar - the design is deliberately asymmetric,
   more air above the logo than below it.

   It was 60px tall inside 20px symmetric padding, which made the whole band
   100px - half the design's height. Everything below inherited the error.
*/
/*
   WRAPS. The logo is ~418px wide at its artboard height and the three contact
   items need roughly 830 beside it, so the row needs about 1250 to sit on one
   line - the full container. The responsive rule below only started at 767,
   which left everything between 768 and ~1250 overflowing the page: measured
   848px of content in a 753px viewport at exactly 768.

   Wrapping rather than adding another breakpoint, so there is no width at
   which it is broken.
*/
/*
   THE DESKTOP BAND IS A RAMP FROM 1024 TO 1440, NOT A CLIFF AT 1024.

   Everything in this bar was a fixed pixel value taken from the 1440 board:
   logo 109 tall (418 wide), contact strip gaps of 32, padding 58/34. Below
   1440 the container narrows and none of that does, so at anything under
   about 1160 the logo (418) plus the strip (716) no longer fit on one line
   and the strip wrapped under the logo, right-aligned - which is the MacBook
   screenshot the test team sent. And at 1024 the tablet rules hand over to
   these with a jump: the logo goes 84 -> 109 and the padding 40/32 -> 58/34
   in a single pixel of width.

   Each value now ramps from the tablet figure at 1024 to the artboard figure
   at 1440 - so 1440 is still exactly the board, 1024 meets the tablet rules
   with no step, and every width between gets a bar that fits on one line.
   Checked: at 1024 the logo is 322 wide and the strip ~615 against a 976
   container; at 1100, 341 + 646 against 1052; at 1280, 380 + 675 against
   1232. Nothing wraps.

   Re-derive as the type tokens do: slope = (max - min) / 4.16 vw,
   intercept = min - slope * 10.24.
*/
.cn-topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: var(--cn-space-5);
    padding-top: clamp(40px, calc(-4.31px + 4.3269vw), 58px);     /* 40 @1024 -> 58 @1440 */
    padding-bottom: clamp(32px, calc(27.08px + 0.4808vw), 34px);  /* 32 @1024 -> 34 @1440 */
}

/*
   109px, not the 88px the artboard measures.

   ConnectNewLogo.png is 1703x444 but the visible mark is only 1646x360 - it
   carries 42px of transparent padding top and bottom. So a max-height of 88
   renders 71px of actual logo, 19% smaller than the design, which reads as a
   short logo floating in a tall band rather than as a tall band.

   88.3 x (444/360) = 109. At that height the visible mark is 88px tall and
   404px wide, against the artboard's 88.3 x 403. The ink ratio confirms it:
   1646/360 = 4.57, and the artboard's 403/88.3 = 4.56.

   Band total stays 58 + 109 + 34 = 201, which is the measured height.
*/
.cn-topbar-logo {
    display: block;
    /* 84 @1024 (the tablet size, so there is no step) -> 109 @1440 (the board). */
    max-height: clamp(84px, calc(22.46px + 6.0096vw), 109px);
    width: auto;
    max-width: 100%;
}

/*
   The logo link is a flex item, and a flex item shrinks by default. With
   width:auto on the image there is nothing to stop it, so at 375px the anchor
   collapsed to 5x1px and the logo vanished. It must never shrink.
*/
.cn-topbar > .cn-container > a { flex: 0 0 auto; }

/* Contact List */
.cn-topbar-contact {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--cn-space-3);
    align-items: center;
    /* 20 @1024 -> 32 @1440. The strip is three fixed phrases, so the gaps are
       the only part of it that can give; with the logo ramp above this is
       what keeps it on the logo's line all the way down. */
    gap: clamp(20px, calc(-9.54px + 2.8846vw), 32px);
    /*
       YIELD INSIDE THE STRIP BEFORE THE ROW BREAKS.

       The bar's usable width at 1280 is 1120, not the 1232 the container
       alone would give - the band carries its own side padding - and with
       margin-left:auto and no flex-basis the strip sat at its full
       max-content width, so the moment logo + strip exceeded the row the
       WHOLE strip dropped under the logo, right-aligned, and the bar grew
       to 247px. That is the MacBook screenshot.

       flex:1 with min-width:0 lets the strip take whatever is left beside
       the logo and wrap its own three items inside that: at 1440 all three
       on one line as before; at ~1100 the email steps down to a second
       line beside the logo, still right-aligned, and the bar stays one row
       tall. The strip yields; the row never does.
    */
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-end;
}

/* Individual Contact Items */
.cn-topbar-contact-item {
    display: flex;
    align-items: center;
    gap: var(--cn-space-2);
    color: var(--cn-ink-muted);
}

/*
   tel:/mailto: now, not plain text - see topBar.jsp. Inherits the item's own
   muted colour and drops the underline so it keeps reading as the same quiet
   meta line the design draws; the tap target is the whole phrase, not just
   the digits, and a visible underline only appears on hover/focus so a mouse
   or keyboard user still gets the usual affordance that it is a control.
*/
.cn-topbar-contact-link {
    color: inherit;
    text-decoration: none;
}
.cn-topbar-contact-link:hover,
.cn-topbar-contact-link:focus-visible {
    color: var(--cn-cyan);
    text-decoration: underline;
}

/* Icons */
/*
   Font Awesome, which the repo already ships and the live Connect pages
   already load - so this costs no new dependency and no CDN request.

     fa-phone-volume   handset with signal arcs, as the artboard draws it
     fa-envelope-open  open envelope, as the artboard draws it

   Close, not identical: the artboard's envelope carries an @ on the letter
   and Font Awesome's does not. Everything else - filled weight, open flap,
   the two arcs on the phone - matches.
*/
.cn-topbar-icon {
    font-size: 26px;
    line-height: 1;
    color: var(--cn-ink-muted);
    flex: 0 0 auto;
}
/* ==========================================================================
   Connect 2026 - Navbar Component
   ========================================================================== */

/* Safely override the massive padding rule from shell.css without breaking the layout */
/* ==========================================================================
   Connect 2026 - Navbar Flexbox Layout
   ========================================================================== */

/* ==========================================================================
   Connect 2026 - Navbar Flexbox Component
   ========================================================================== */

/* Flexbox replaces every table, align, and spacer cell */
.cn-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--cn-nav-h);
}

/*
   MEASURED ON p1. "Home" starts at x=55.8 and the gap between every pair of
   links is 37.1px - Home ends 102.9 / Content starts 140.0, Library ends
   262.7 / Connect starts 299.8, and so on.

   Two things were wrong. The gap was 24px, so the row read tighter and
   narrower than the artboard. And the links began at the container's own edge
   - 86.4px, where the logo and the search box sit - when the artboard starts
   them 30.6px further left. The nav is the one row that breaks the content
   margin: its right end still lines up, because the search box ends at 1342.3
   which IS the content edge, so only the left side is pulled out.

   The pull-out is scoped to the width where the horizontal nav exists at all;
   below 1280 the row collapses to the disclosure menu and a negative margin
   would drag it off-canvas.
*/
.cn-nav-list {
  display: flex;
  gap: var(--cn-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
   FROM THE ARTBOARD WIDTH UP, NOT FROM 1280.

   Seven links at a 37px gap measure about 881px, and with the 250px search
   box the bar needs ~1131. At 1280 the content column is 1120, so applying
   these from the collapse point would have overflowed the one width where the
   horizontal nav is tightest. Below 1429 the row keeps the 24px gap it has
   always had and stays inside the bar; at and above it, the artboard's own
   numbers apply and there is room to spare.
*/
@media (min-width: 1429px) {
  .cn-nav-list {
    gap: 37px;
    margin-left: -31px;
  }
}

/* Nav links using correct 16px token instead of headline */
.cn-nav-link {
  font-size: var(--cn-text-nav);
  color: var(--cn-ink-invert);
  text-decoration: none;
  white-space: nowrap;
}

/* Replaces the old .active class */
.cn-nav-link--active,
.cn-nav-link:hover,
.cn-nav-link:focus {
  color: var(--cn-cyan);
}

/* Search input exact dimensions from review */
/*
   COLOUR AND BACKGROUND ARE NOT OPTIONAL HERE.

   shell.css resets `input, button, textarea, select { color: inherit }` so a
   control picks up the type colour around it - which is right almost
   everywhere and wrong inside the nav, where the surrounding text is white
   because the bar is navy. The input keeps the browser's own white field, so
   what a reader typed was white on white: the caret moved and nothing
   appeared.

   It did not show while the box was disabled, because nobody could type in
   it. Wiring the search is what made it visible - and it would have been
   invisible on any dark bar the moment anyone tried.
*/
.cn-nav-search input {
  width: var(--cn-search-w);
  height: var(--cn-search-h);
  padding-inline: var(--cn-space-3);
  border: none;
  border-radius: 0;   /* square, as the boards draw the search bar - see the newsletter band */
  font-family: var(--cn-font);
  color: var(--cn-ink-body);
  background: var(--cn-surface);
}

/* The placeholder is the design's grey, not the inherited white either. */
.cn-nav-search input::placeholder {
  color: var(--cn-ink-faint);
  opacity: 1;               /* Firefox dims placeholders by default */
}

/* Visible focus on a control that sits on navy - the browser's default ring
   is drawn in the text colour and disappears against the bar. */
.cn-nav-search input:focus-visible {
  outline: 2px solid var(--cn-cyan);
  outline-offset: 2px;
}

/*
   Disabled until there is a search endpoint - see navBar.jsp. Kept at full
   opacity so the bar still reads as the design draws it; the cursor and the
   title are what tell you it is not live yet. Fading it would look like a
   rendering fault on a bar the artboards show on every screen.
*/
.cn-nav-search input:disabled {
  cursor: not-allowed;
  opacity: 1;
}

/* ============================================================ SUB-MENU === */
.cn-nav-item--menu { position: relative; }

.cn-nav-sub {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: var(--cn-z-dropdown);
  min-width: 220px;
  /*
     CLAMPED TO THE VIEWPORT, NOT JUST 220PX OF HEADROOM.

     Centred under "Events" with no bound, the panel could still run past the
     screen edge on a narrow desktop-class window (a split-screen laptop, a
     tablet in landscape just above the 1280 collapse point) since nothing
     here ever looked past the trigger's own width. This is a ceiling, not a
     size change - it only ever engages when the viewport itself is tighter
     than the panel wants to be.
  */
  max-width: calc(100vw - 2 * var(--cn-space-4));
  margin: 10px;
  padding: var(--cn-space-2) 0;
  transform: translateX(-50%);
  background: var(--cn-surface);
  border-radius: var(--cn-radius-md);
  box-shadow: var(--cn-shadow-raised);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--cn-dur) var(--cn-ease), visibility var(--cn-dur) var(--cn-ease);
}
.cn-nav-sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.cn-nav-item--menu:hover > .cn-nav-sub,
.cn-nav-item--menu:focus-within > .cn-nav-sub {
  opacity: 1;
  visibility: visible;
}

.cn-nav-sub__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--cn-space-5);
  font-size: var(--cn-text-body);
  color: var(--cn-ink);
  text-decoration: none;
  white-space: nowrap;
}
.cn-nav-sub__link:hover,
.cn-nav-sub__link:focus-visible,
.cn-nav-sub__link--active {
  background: var(--cn-band-grey);
  color: var(--cn-cyan);
  outline: none;
}

/* ========================================================== RESPONSIVE === */
/*
   T-07's mobile half. Before this, .cn-nav-list was 803px wide inside a 328px
   bar, so EVERY ONE of the 24 screens scrolled sideways on a phone.

   COLLAPSE POINT IS 1280, NOT 768. Seven links need 803px and the search
   another 250; the bar overflows any container narrower than about 1100. A
   768px breakpoint would have left tablets broken.

   Built on native <details>/<summary>, the same zero-JS pattern as the topic
   chips - see chip.css. No JavaScript, works with JS off.
*/

/* Desktop: the disclosure control does not exist, and cn-nav__row is not a
   box - both its children (the disclosure and the search toggle) fall back
   into the plain flex row .cn-nav has always laid out, so this whole
   sub-1280 system costs nothing at 1280 and up. */
.cn-nav__toggle { display: none; }
.cn-nav__disclosure { display: contents; }
.cn-nav__row { display: contents; }
.cn-nav__search-toggle { display: none; }

/*
   Safeguard, mirroring the chips. A closed <details> hides its content by UA
   behaviour, not by our CSS - so someone who collapses the menu on a phone and
   then rotates to landscape would find the nav gone, with no visible control
   to reopen it. This forces the list back at desktop width.
*/
@media (min-width: 1280px) {
  .cn-nav__disclosure > .cn-nav-list { display: flex; }
  /*
     Same reasoning, same fix, for the search box and every submenu: nav.js
     sets [hidden] below 1280 and a reader who resizes past that point with
     one already hidden must not be left with no way to reach it - a search
     box that never comes back, or an Events submenu stuck collapsed with no
     chevron left to reopen it, since the chevron itself is display:none up
     here.

     [hidden] on the attribute alone, not just the class, so each beats
     shell.css's own "[hidden] means hidden" rule on specificity - (0,2,0)
     against its (0,1,0) - rather than depending on nav.css loading after
     shell.css in head.jsp, which is true today and easy to get backwards
     later without anything here breaking loudly. .cn-nav-sub goes back to
     block, not flex - hover/focus-within still governs its opacity and
     visibility exactly as if the attribute had never been set.
  */
  .cn-nav-search[hidden] { display: flex !important; }
  .cn-nav-sub[hidden] { display: block !important; }
}

.cn-nav__toggle::-webkit-details-marker { display: none; }
.cn-nav__toggle::marker { content: ""; }

/*
   ONE COMPACT ROW BELOW 1280, NOT A TALL STACK.

   Before this, the search box was a sibling of the menu toggle with
   order:0/margin-left:auto and no width of its own - which put it on its
   OWN line, right-aligned above an empty gap, with the "Menu" toggle on a
   second line below it: two rows of chrome before a phone reader saw the
   toggle at all, and a floating box that read as disconnected from the menu
   it sits beside.

   cn-nav__row (navBar.jsp) now holds both controls side by side - the
   disclosure flexes to fill the row, the search toggle is a fixed 44px
   square beside it - and the actual search FORM (a sibling of the row, not
   inside it) drops full-width below when opened, same shape the nav list
   already uses. See nav.js for what opens it.
*/
@media (max-width: 1279px) {
  .cn-nav {
    flex-wrap: wrap;
    height: auto;
    padding-block: var(--cn-space-3);
    gap: var(--cn-space-3);
  }

  .cn-nav__row {
    display: flex;
    align-items: center;
    gap: var(--cn-space-3);
    width: 100%;
  }

  .cn-nav__disclosure {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
  }

  .cn-nav__toggle {
    display: flex;
    align-items: center;
    gap: var(--cn-space-3);
    min-height: 44px;              /* T-40 tap target */
    padding-inline: var(--cn-space-2);
    color: var(--cn-ink-invert);
    font-size: var(--cn-text-nav);
    font-weight: var(--cn-fw-semibold);
    cursor: pointer;
    list-style: none;
  }

  /* Drawn, not a font glyph, so it cannot fail to load. */
  .cn-nav__toggle::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
  }

  /*
     THE ICON BUTTON BESIDE IT. nav.js un-hides this the moment it confirms
     it can run the toggle - see the [hidden] default in navBar.jsp. A
     square the same 44px height as the menu toggle, so the row reads as one
     control bar rather than two mismatched heights.
  */
  .cn-nav__search-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--cn-radius-pill);
    background: transparent;
    color: var(--cn-ink-invert);
    font-size: 18px;
    cursor: pointer;
  }
  .cn-nav__search-toggle:hover,
  .cn-nav__search-toggle:focus-visible { color: var(--cn-cyan); }
  .cn-nav__search-toggle:focus-visible {
    outline: 2px solid var(--cn-cyan);
    outline-offset: 2px;
  }

  .cn-nav-list {
    flex-direction: column;
    gap: 0;
    padding-block: var(--cn-space-2);
  }

  /* Full-width rows so the whole strip is the tap target, not just the text. */
  .cn-nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    white-space: normal;
  }

  /*
     FULL WIDTH, BELOW THE ROW - opened by the search toggle (nav.js sets/
     clears [hidden]), or always open with JS off, in which case this is
     exactly the "search box under the menu" layout the page has always had.
     44px tall here, not the desktop 41: --cn-search-h is a desktop artboard
     measurement, and every control on this row down to the toggle beside it
     is already a 44px touch target.
  */
  .cn-nav-search {
    width: 100%;
    margin-top: 0;
  }
  .cn-nav-search input {
    width: 100%;
    height: 44px;
  }

  /*
     COLLAPSIBLE, NOT ALWAYS OPEN - see the note on nav.js and
     navBar.jsp's own cn-nav-item__head.

     .cn-nav-sub's OWN rules below undo the desktop dropdown (static, no
     shadow, always painted) exactly as before; whether the reader actually
     sees it now comes down to the [hidden] attribute nav.js drives, which
     [hidden]{display:none!important} in shell.css handles with no extra
     rule needed here for the collapsed state itself.
  */
  .cn-nav-item__head {
    display: flex;
    align-items: center;
  }
  .cn-nav-item__head > .cn-nav-link { flex: 1 1 auto; }

  /*
     THE CHEVRON. nav.js un-hides this the moment it confirms it can drive
     the collapse - same [hidden]-in-the-markup contract as the search
     toggle beside it, and the same 44px square so every control on this
     menu shares one tap-target size.
  */
  .cn-nav-item__expand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--cn-ink-invert);
    font-size: 14px;
    cursor: pointer;
  }
  .cn-nav-item__expand:hover,
  .cn-nav-item__expand:focus-visible { color: var(--cn-cyan); }
  .cn-nav-item__expand:focus-visible {
    outline: 2px solid var(--cn-cyan);
    outline-offset: -2px;
  }
  /* Points down closed, flips to point up open - the same affordance a
     <select> or an accordion gives, so "there is more here" reads at a
     glance without waiting for a press to find out. */
  .cn-nav-item__expand i { transition: transform var(--cn-dur) var(--cn-ease); }
  .cn-nav-item__expand[aria-expanded="true"] i { transform: rotate(180deg); }

  .cn-nav-sub {
    position: static;
    min-width: 0;
    max-width: none;
    padding: 0 0 var(--cn-space-2) var(--cn-space-5);
    transform: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .cn-nav-sub::before { display: none; }
  .cn-nav-sub__link { color: var(--cn-ink-invert); font-size: var(--cn-text-nav); }
  .cn-nav-sub__link:hover,
  .cn-nav-sub__link:focus-visible,
  .cn-nav-sub__link--active { background: transparent; color: var(--cn-cyan); }
}

@media (max-width: 767px) {
  /* Contact details wrap under the logo rather than crushing it. */
  .cn-topbar-inner { flex-wrap: wrap; gap: var(--cn-space-3); }
  .cn-topbar-contact {
    /* A full-width row of its own under the 44px logo, left-aligned - the
       phone layout this has always had. flex:1 above would otherwise stand
       it beside the logo. */
    flex: 0 0 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--cn-space-2) var(--cn-space-5);
  }
  .cn-topbar-logo { max-height: 44px; }
}


/*
   The 68/45 split is an artboard measured at 1440. On a phone it eats a third
   of the first screen, so it comes back to the spacing scale below 768.
*/
@media (max-width: 767px) {
  .cn-topbar-inner {
    padding-top: var(--cn-space-6);
    padding-bottom: var(--cn-space-5);
  }
  .cn-topbar-logo { max-height: 68px; }
}


/*
   Between 768 and 1023 the bar has wrapped onto two lines, so the artboard's
   58/34 padding is holding open a header half a screen tall. The measured
   values only ever described the one-line 1440 layout.
*/
/*
   A RANGE, not a max-width. This block is written after the 767px one, so as
   a plain max-width:1023 it also matched every phone and overrode it - the
   logo rendered at 84px tall, which is 322px wide, inside a 320px viewport.
   Measured: 334 of content in a 320 screen.

   Bounding it below 768 makes the two blocks independent of source order.
*/
@media (min-width: 768px) and (max-width: 1023px) {
  .cn-topbar-inner {
    padding-top: var(--cn-space-10);
    padding-bottom: var(--cn-space-8);
  }
  .cn-topbar-logo { max-height: 84px; }
}