/* Johnson University 2026 header + footer ("chrome"): top row, header, dropdown panels, search, drawer, footer, action bar,
   chat button. Loaded on the 2026 homepage (before ju26-base.css) and on any page viewed with ?hpreview=2026, where the
   legacy style.css loads after it (end of body).

   Scoping (wp-build/e2e/chrome-css.test.mjs): every rule is under a chrome root (.skip, .util, .site-header, .drawer,
   .site-footer, .mbar, .float-circles — each carries class ju26c) or, for the components homepage content shares
   (.btn, .wrap, .vh), under :where(.ju26-home) so homepage specificity is unchanged. The extra .ju26c class also lets these
   rules beat style.css's element rules (button, ul, a, input[type=search]) although style.css comes later.
   Values: Johnson-University-Design-System.md, Storyland prototype lib/ju-base.css (37a2cc9). */
@font-face { font-family: 'Source Sans 3'; src: url('../fonts/2026/SourceSans3-sub.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'PrimedRegular'; src: url('../fonts/2026/Primed-sub.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  /* color (DS) */
  --navy-900: #162b55; --navy-800: #0a2340; --navy-700: #0e2d52; --navy-500: #326195; --navy-400: #374769;
  --orange-500: #e77424; --orange-display: #e77424; --orange-600: #e2670a; --orange-400: #f6940d; --orange-200: #ffb587;
  --ink: #2a2a2a; --gray-500: #a8a8a8; --gray-300: #dcdcdc; --gray-100: #f1f1f1; --cream: #ede7d8; --white: #ffffff;

  /* type (DS scale pinned to one value per level at desktop; floors only for small screens) */
  --font-body: 'Source Sans 3', Arial, Helvetica, sans-serif;
  --font-display: 'PrimedRegular', 'Source Sans 3', sans-serif;
  --fs-display: clamp(72px, 12vw, 172px);
  --fs-sketch: clamp(40px, 4vw, 108px);
  --fs-h1: clamp(40px, 4.2vw, 60px);
  --fs-h2: clamp(30px, 3.5vw, 50px);
  --fs-h3: clamp(22px, 2.25vw, 32px);
  --fs-h4: 18px;
  --fs-lead: clamp(18px, 1.4vw, 20px);   /* PROPOSED addition, not in DS v0.1 */
  --fs-body: 16px;
  --fs-label: 14px;
  --fs-tagline: clamp(44px, 8vw, 116px);   /* PROPOSED: the tagline lockup as one size, until Heath's artwork sets it */

  /* space (DS WordPress scale) */
  --s-20: .44rem; --s-30: .67rem; --s-40: 1rem; --s-50: 1.5rem; --s-60: 2.25rem; --s-70: 3.38rem; --s-80: 5.06rem;
  --section-y: clamp(64px, 8vw, 128px);

  /* shape (DS) */
  --radius-sm: 6px; --radius-md: 10px; --radius-full: 50%;
  --shadow-soft: 0 0 7px 2px rgba(0,0,0,.1); --shadow-card: 0 0 15px 5px rgba(0,0,0,.1);
  --shadow-pop: 10px 10px 20px 5px rgba(0,0,0,.2);
  --ease: all .25s ease;
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --maxw: 1200px; --maxw-wide: 1440px;
  --gutter: clamp(20px, 4vw, 48px);
  --header-h: 80px;
}

/* ---------------- chrome reset: what ju26-base.css's globals give the homepage, plus style.css's element rules undone ----------------
   Specificity html .ju26c <el> = (0,1,2): above style.css's button:first-child / input[type=search] / a:hover (0,1,1), below every
   chrome rule (two classes or more), so it only fills the properties those rules leave unset. */
.ju26c, .ju26c *, .ju26c *::before, .ju26c *::after { box-sizing: border-box; }
html .ju26c { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: 1.5; letter-spacing: normal; text-align: left; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html .ju26c :is(h1, h2, h3, h4, p, ul, ol, li, figure, address) { margin: 0; }
/* style.css: div { width: auto; height: auto; margin: 0 auto } (shrink-wraps every grid/flex item) and
   form { margin: 0 auto }, h1-h6 { font-family; line-height: 1; color: #2a2a2a; text-transform: uppercase } */
html .ju26c :is(div, form) { margin: 0; }
html .ju26c :is(h1, h2, h3, h4, h5, h6) { font-family: inherit; line-height: inherit; color: inherit; text-transform: none; }
html .ju26c :is(ul, ol) { padding: 0; list-style: none; text-align: left; }
html .ju26c :is(img, svg) { display: block; max-width: 100%; }
html .ju26c img { height: auto; }
html .ju26c a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: none; }
html .ju26c a:hover { color: inherit; }
html .ju26c :is(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
html .ju26c button { min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; line-height: inherit; vertical-align: baseline; text-align: inherit; white-space: normal; transform: none; box-shadow: none; position: static; overflow: visible; cursor: pointer; -webkit-appearance: none; appearance: none; }
html .ju26c button::before, html .ju26c button::after { content: none; }
html .ju26c input { width: auto; height: auto; margin: 0; border-radius: 0; outline: none; }
html .ju26c :focus-visible { outline: 3px solid var(--white); outline-offset: 0; box-shadow: 0 0 0 6px var(--navy-900); border-radius: 2px; }
:where(.ju26-home) .vh, .ju26c .vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip.ju26c { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--navy-900); color: var(--white); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 700; }
.skip.ju26c:focus { top: 12px; }
:where(.ju26-home) .wrap, .ju26c .wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
:where(.ju26-home) .wrap-wide, .ju26c .wrap-wide { width: 100%; max-width: calc(var(--maxw-wide) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
/* buttons (DS: navy fill, hover orange with navy text, radius 6, min width ~180) */
:where(.ju26-home) .btn, .ju26c .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; min-width: 180px; padding: 12px 26px; border-radius: var(--radius-sm); border: 2px solid var(--navy-900); background: var(--navy-900); color: var(--white); font-weight: 700; font-size: var(--fs-label); letter-spacing: 1pt; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease-out); }
:where(.ju26-home) .btn:hover, .ju26c .btn:hover { background: var(--orange-500); border-color: var(--orange-500); color: var(--navy-900); }
:where(.ju26-home) .btn:active, .ju26c .btn:active { transform: translateY(1px); }
:where(.ju26-home) .btn--ghost, .ju26c .btn--ghost { background: transparent; color: var(--navy-900); }
:where(.ju26-home) .btn--ghost:hover, .ju26c .btn--ghost:hover { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
:where(.ju26-home) .btn--light, .ju26c .btn--light { background: var(--white); border-color: var(--white); color: var(--navy-900); }
:where(.ju26-home) .btn--light:hover, .ju26c .btn--light:hover { background: var(--orange-500); border-color: var(--orange-500); color: var(--navy-900); }
:where(.ju26-home) .btn--outline-light, .ju26c .btn--outline-light { background: transparent; border-color: var(--white); color: var(--white); }
:where(.ju26-home) .btn--outline-light:hover, .ju26c .btn--outline-light:hover { background: var(--white); border-color: var(--white); color: var(--navy-900); }
:where(.ju26-home) .btn--sm, .ju26c .btn--sm { min-height: 40px; min-width: 0; padding: 8px 18px; }
.ju26c .btn--apply { background: var(--orange-500); border-color: var(--orange-500); color: var(--navy-900); }   /* header Apply: the standout action, orange at rest (Storyland e304a44); navy text on orange per DS contrast rule */
.ju26c .btn--apply:hover { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
/* ---------------- header ---------------- */
.site-header.ju26c { position: sticky; top: 0; z-index: 100; background: var(--white); transition: box-shadow .3s ease, background-color .3s ease; }
.site-header.ju26c.is-scrolled { box-shadow: 0 6px 20px rgba(22,43,85,.08); }
/* logged in: WordPress's admin bar is fixed above the page (32px; 46px under 783px), so the sticky header stops under it;
   under 600px the admin bar scrolls away with the page and the header sticks to the top again */
.admin-bar .site-header.ju26c { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .site-header.ju26c { top: 0; } }
.site-header.ju26c .bar { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); height: var(--header-h); }
.ju26c .brand { display: block; flex: none; }
.ju26c .brand img { height: 30px; width: auto; }
/* primary nav: the live site's sections; each opens a full-width panel of its pages under the header (menus: round5/_tools/menu.py) */
.ju26c .nav { align-self: stretch; margin-right: auto; }
.ju26c .nav-list { display: flex; gap: clamp(14px, 1.6vw, 28px); height: 100%; margin: 0; padding: 0; list-style: none; }
.ju26c .nav-item { display: flex; align-items: center; }   /* full bar height, so the pointer never crosses a gap on its way into the panel */
.ju26c .nav-top { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-label); font-weight: 700; letter-spacing: 1pt; text-transform: uppercase; color: var(--navy-900); text-decoration: none; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 6px 0; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.ju26c .nav-top:hover, .ju26c .nav-top[aria-expanded="true"] { border-color: var(--orange-500); }
.ju26c .chev { width: 12px; height: 12px; flex: none; transition: transform .25s var(--ease-out); }
.ju26c [aria-expanded="true"] > .chev { transform: rotate(180deg); }
.ju26c .mega { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-top: 1px solid var(--gray-300); box-shadow: 0 18px 32px -12px rgba(22,43,85,.22); max-height: var(--mega-max, calc(100svh - var(--header-h))); overflow-y: auto; overscroll-behavior: contain; }   /* --mega-max: the room actually left under the header (set by script; the top row may still be showing) */
.ju26c .mega.is-open { display: block; animation: mega-in .24s var(--ease-out); }
.site-header.ju26c.is-swapping .mega.is-open { animation: none; }   /* moving between sections swaps the panel in place */
.no-js .ju26c .nav-item:is(:hover, :focus-within) > .mega { display: block; }   /* no script: hover or Tab still opens it */
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } }
.ju26c .mega-in { display: grid; grid-template-columns: minmax(240px, 4fr) 8fr; gap: clamp(32px, 4vw, 72px); padding-block: var(--s-60) var(--s-70); }
.ju26c .mega-title { display: inline-flex; align-items: center; gap: .4em; font-size: var(--fs-h3); font-weight: 700; line-height: 1.15; color: var(--navy-900); text-decoration: none; }
.ju26c .mega-title svg { width: .62em; height: .62em; transition: transform .25s var(--ease-out); }
.ju26c .mega-title:hover { color: var(--navy-500); } .ju26c .mega-title:hover svg { transform: translateX(4px); }
.ju26c .mega-intro p { margin-top: var(--s-40); font-size: var(--fs-lead); max-width: 34ch; color: var(--ink); }
.ju26c .mega-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-50) clamp(24px, 3vw, 48px); align-content: start; padding-left: clamp(32px, 4vw, 72px); border-left: 1px solid var(--gray-300); }
.ju26c .mega-h { font-size: var(--fs-label); font-weight: 700; letter-spacing: 1pt; text-transform: uppercase; color: var(--navy-500); margin-bottom: var(--s-30); }
.ju26c .mega-col ul { list-style: none; margin: 0; padding: 0; }
.ju26c .mega-col a { display: inline-block; padding-block: 5px; color: var(--navy-900); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color .2s ease; }
.ju26c .mega-col a:hover { text-decoration-color: var(--orange-500); }
/* search: same panel slot, opened from the utility row */
.ju26c .mega--search .mega-in { display: flex; justify-content: flex-end; padding-block: var(--s-50) var(--s-60); }   /* the field opens under its button, at the right */
.ju26c .mega--search .search-form { width: min(100%, 760px); }
.ju26c .search-form label { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: 1pt; text-transform: uppercase; color: var(--navy-500); margin-bottom: var(--s-30); }
.ju26c .search-row { display: flex; gap: 12px; max-width: 760px; }
.ju26c .search-row input { flex: 1; min-width: 0; min-height: 48px; padding: 10px 14px; font: inherit; font-size: var(--fs-lead); color: var(--ink); background: var(--white); border: 1px solid var(--gray-500); border-radius: var(--radius-sm); }
.ju26c .search-row input:focus-visible { border-color: var(--navy-900); }
/* utility row: secondary links + search + portal, above the header; it scrolls away and the header stays (DS: thin navy utility bar) */
.util.ju26c { background: var(--navy-700); color: var(--white); }
:root { --util-h: 36px; }   /* page textures anchored to the body start below the row, so they stay put against the content */
@media (max-width: 1023px) { :root { --util-h: 0px; } }
.ju26c .util-in { display: flex; align-items: center; justify-content: flex-end; gap: clamp(16px, 2vw, 28px); height: var(--util-h); }
.ju26c .util-links ul { display: flex; gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.util.ju26c a, .ju26c .util-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-label); font-weight: 600; letter-spacing: .5pt; text-transform: uppercase; color: var(--white); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; background: none; border: 0; padding: 4px 0; cursor: pointer; transition: text-decoration-color .2s ease; }
.util.ju26c a:hover, .ju26c .util-btn:hover, .ju26c .util-btn[aria-expanded="true"] { text-decoration-color: var(--orange-500); }
.util.ju26c .util-give { align-self: stretch; padding: 0 24px; background: var(--navy-500); font-weight: 700; letter-spacing: 1pt; text-decoration: none; transition: background-color .2s ease, color .2s ease; }   /* Donate set apart as a filled block, as on live (DS navy-500); last in the row */
.util.ju26c .util-give:hover { background: var(--orange-500); color: var(--navy-900); }
.util.ju26c .util-give:focus-visible { outline: 3px solid var(--white); outline-offset: -6px; box-shadow: none; }   /* the outer ring would fall off the row; draw it inside the block */
.ju26c .util-btn svg { width: 16px; height: 16px; flex: none; }
.ju26c .util-links + .util-btn { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--navy-400); border-radius: 0; }
.no-js .ju26c .util-btn[data-mega] { display: none; }   /* Search needs script to open; without it, the site search page is a link away */
.util.ju26c :focus-visible { outline-color: var(--navy-700); box-shadow: 0 0 0 6px var(--white); }
/* narrow desktops (1024-1279): the five sections + chevrons + actions have to share less width. Labels stay on one line,
   the logo steps down to 26px, spacing tightens, and the panel stacks its intro above three columns instead of wrapping columns. */
.ju26c .nav-top { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-header.ju26c .bar { gap: 16px; }
  .ju26c .brand img { height: 26px; }
  .ju26c .nav-list { gap: 14px; }
  .ju26c .nav-top { letter-spacing: .5pt; gap: 4px; }
  .ju26c .chev { width: 10px; height: 10px; }
  .ju26c .header-actions { gap: 10px; }
  .ju26c .rfi-link { margin-right: 2px; }
  .ju26c .mega-in { grid-template-columns: 1fr; gap: var(--s-50); }
  .ju26c .mega-intro { display: flex; align-items: baseline; gap: var(--s-60); }
  .ju26c .mega-intro p { margin-top: 0; max-width: 60ch; }
  .ju26c .mega-title { flex: none; }
  .ju26c .mega-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-left: 0; border-left: 0; padding-top: var(--s-50); border-top: 1px solid var(--gray-300); }
}
/* 1024-1099: still no room for all of it, so the header's Request Info steps aside (it is in the Admissions menu and the page's form) */
@media (min-width: 1024px) and (max-width: 1099px) { .ju26c .header-actions .rfi-link { display: none; } }
@media (prefers-reduced-motion: reduce) { .ju26c .mega.is-open { animation: none; } .ju26c .chev, .ju26c .mega-title svg { transition: none; } }
.ju26c .header-actions { display: flex; align-items: center; gap: 12px; }
.ju26c .rfi-link { font-size: var(--fs-label); font-weight: 700; color: var(--navy-900); text-decoration: underline; text-decoration-color: var(--orange-500); text-decoration-thickness: 2px; text-underline-offset: 5px; white-space: nowrap; margin-right: 6px; }
.ju26c .rfi-link:hover { color: var(--navy-500); }
.ju26c .menu-btn { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 10px; cursor: pointer; color: var(--navy-900); }
.ju26c .menu-btn span { display: block; height: 2px; background: currentColor; margin: 5px 0; transition: transform .3s var(--ease-out), opacity .2s ease; }
.ju26c .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ju26c .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ju26c .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.drawer.ju26c { position: fixed; inset: var(--header-h) 0 0 0; background: var(--navy-900); color: var(--white); padding: 28px var(--gutter) 40px; display: flex; flex-direction: column; gap: 6px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .3s ease, transform .3s var(--ease-out), visibility 0s .3s; z-index: 99; overflow-y: auto; }
.drawer.ju26c.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity .3s ease, transform .3s var(--ease-out); }
/* drawer: the same sections as accordions (one open at a time), then Request Info, the secondary links and search */
.ju26c .dr-top { display: flex; align-items: center; justify-content: space-between; width: 100%; color: var(--white); text-decoration: none; font: inherit; font-size: var(--fs-h3); font-weight: 700; text-transform: uppercase; text-align: left; padding: 10px 0; background: none; border: 0; border-bottom: 1px solid var(--navy-400); border-radius: 0; cursor: pointer; }
.ju26c .dr-top .chev { width: 20px; height: 20px; color: var(--orange-500); }
.ju26c .dr-panel { padding: var(--s-40) 0 var(--s-50); border-bottom: 1px solid var(--navy-400); }
.ju26c .dr-panel ul { list-style: none; margin: 0 0 var(--s-40); padding: 0; }
.ju26c .dr-panel ul a, .ju26c .dr-overview, .ju26c .dr-util a { display: block; color: var(--white); text-decoration: none; font-size: var(--fs-body); padding-block: 10px; }
.ju26c .dr-overview { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; border-bottom: 2px solid var(--orange-500); padding-bottom: 4px; margin-bottom: var(--s-40); }
.ju26c .dr-overview svg { width: 14px; height: 14px; }
.ju26c .dr-h { font-size: var(--fs-label); font-weight: 700; letter-spacing: 1pt; text-transform: uppercase; color: var(--gray-300); margin-top: var(--s-30); }
.ju26c .dr-util { list-style: none; margin: var(--s-50) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.ju26c .dr-util a { font-weight: 700; }
.ju26c .dr-util .dr-give { grid-column: 1 / -1; margin-top: 10px; }
.ju26c .dr-util .dr-give a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding-block: 0; background: var(--navy-500); border-radius: var(--radius-sm); font-size: var(--fs-label); letter-spacing: 1pt; text-transform: uppercase; transition: background-color .2s ease, color .2s ease; }
.ju26c .dr-util .dr-give a:hover { background: var(--orange-500); color: var(--navy-900); }
.ju26c .search-form--drawer { margin-top: var(--s-50); }
.ju26c .search-form--drawer label { color: var(--gray-300); }
.ju26c .search-form--drawer .search-row input { border-color: var(--white); }
.ju26c .search-form--drawer .btn { background: var(--white); border-color: var(--white); color: var(--navy-900); min-width: 0; }
.ju26c .search-form--drawer .btn:hover { background: var(--orange-500); border-color: var(--orange-500); }
.drawer.ju26c .drawer-ctas { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.drawer.ju26c .drawer-ctas .btn { flex: 1; font-size: var(--fs-label); padding: 12px 18px; border-bottom: 2px solid var(--white); }
.drawer.ju26c .drawer-ctas .btn--light { color: var(--navy-900); }
.drawer.ju26c .drawer-ctas .btn--light:hover { color: var(--navy-900); }

/* mobile sticky action bar (approved wireframe: header sticks on desktop, bar on mobile) */
.mbar.ju26c { display: none; }

@media (max-width: 1023px) {
  :root { --header-h: 68px; }
  .util.ju26c, .ju26c .nav, .ju26c .mega, .ju26c .mega.is-open, .ju26c .header-actions .rfi-link, .ju26c .header-actions .btn--ghost { display: none; }
  .ju26c .menu-btn { display: block; }
  .ju26c .brand img { height: 24px; }
  .ju26c .header-actions .btn { min-width: 0; padding: 8px 16px; min-height: 40px; }
  .site-header.ju26c .bar { justify-content: space-between; }
  .mbar.ju26c { display: grid; grid-template-columns: 1fr 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--white); border-top: 1px solid var(--gray-300); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px; transform: translateY(110%); transition: transform .35s var(--ease-out); }
  .mbar.ju26c.is-on { transform: none; }
  .mbar.ju26c a { display: flex; align-items: center; justify-content: center; min-height: 46px; font-size: var(--fs-label); font-weight: 700; letter-spacing: .5pt; text-transform: uppercase; text-decoration: none; color: var(--navy-900); border-radius: var(--radius-sm); }
  .mbar.ju26c a.is-primary { background: var(--navy-900); color: var(--white); }
}

/* ---------------- footer ---------------- */
.site-footer.ju26c { background: var(--navy-800); color: var(--white); padding: clamp(56px, 6vw, 88px) 0 28px; }
.site-footer.ju26c .cols { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); }
.site-footer.ju26c .f-brand img { height: 28px; width: auto; margin-bottom: 18px; }
.site-footer.ju26c address { font-style: normal; font-size: var(--fs-body); line-height: 1.7; color: var(--gray-300); }
.site-footer.ju26c address a { color: var(--white); text-decoration: none; }
.site-footer.ju26c address a:hover { text-decoration: underline; text-decoration-color: var(--orange-500); }
.site-footer.ju26c h3 { font-size: var(--fs-label); font-weight: 700; letter-spacing: 1pt; text-transform: uppercase; color: var(--orange-400); margin-bottom: 14px; }
.site-footer.ju26c li a { display: inline-block; font-size: var(--fs-body); line-height: 2; color: var(--gray-300); text-decoration: none; }
.site-footer.ju26c li a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--orange-500); }
.site-footer.ju26c .legal a + a { margin-left: 18px; }
.site-footer.ju26c .legal { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--navy-400); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: var(--fs-label); color: var(--gray-300); }
.site-footer.ju26c .legal a { color: var(--gray-300); text-decoration: none; }
.ju26c .social { display: flex; gap: 10px; margin-top: 18px; }
.ju26c .social a { width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid var(--navy-400); display: grid; place-items: center; color: var(--white); transition: background-color .2s ease, border-color .2s ease; }
.ju26c .social a:hover { background: var(--orange-500); border-color: var(--orange-500); color: var(--navy-900); }
.ju26c .social svg { width: 16px; height: 16px; }
@media (max-width: 1023px) { .site-footer.ju26c .cols { grid-template-columns: 1fr 1fr; } .site-footer.ju26c .f-brand { grid-column: 1 / -1; } }
@media (max-width: 1023px) { :where(body.ju26-home), html.ju26-chrome body { padding-bottom: 70px; } }
/* ---------------- phones: mobile-first pass, header/footer/action bar (Joe, 2026-10-20; round5/MOBILE-SPEC.md) ---------------- */
@media (max-width: 767px) {
  :root { --mbar-h: 63px; }   /* the action bar: 8 + 46 + 8 padding, 1 border */
  /* nothing may widen the page sideways: the viewport clips too, not only body (iOS can pan past a body-level clip) */
  /* one Apply on screen: once the action bar is up it carries Apply, so the header's steps aside (and can't take focus) */
  .site-header.ju26c .header-actions .btn:not(.btn--ghost) { transition: opacity .25s ease, visibility 0s; }
  .site-header.ju26c.has-bar .header-actions .btn:not(.btn--ghost) { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
  /* thumb-sized targets in the footer (44px rows; the visual rhythm stays a list) */
  .site-footer.ju26c li a { padding-block: 6px; }
  .site-footer.ju26c address a { display: inline-block; padding-block: 10px; }
  .site-footer.ju26c .legal a { display: inline-block; padding-block: 12px; }
  /* space on the right instead, so a link that wraps to a new line starts flush left */
  .site-footer.ju26c .legal a, .site-footer.ju26c .legal a + a { margin-left: 0; margin-right: 18px; }
  .site-footer.ju26c .legal a:last-child { margin-right: 0; }
}
/* chat button (ju2019 style.css .float-circles; Font Awesome "comment" icon as inline SVG, CC BY 4.0). The Goodkind launcher sits
   on top of it, transparent; header-2026.php raises that launcher by the same amount as this circle below 1024px */
.float-circles.ju26c { position: fixed; right: 20px; bottom: 34px; z-index: 401; }
/* QA 2026-11-04, phones and tablets: the hero's buttons stay put while it is on screen, so the chat button (and Goodkind's see-through
   launcher on top of it) steps aside there. While the action bar is up, AudioEye's button (bottom left, inline bottom: 24px) sits above
   it the way the chat button does, so it never covers Request Info. html.ju26-hero / html.ju26-bar come from header-2026.php and ju26-base.js. */
@media (max-width: 1023px) {
  .float-circles.ju26c { transition: opacity .2s, visibility .2s; }
  .ju26-hero .float-circles.ju26c { visibility: hidden; opacity: 0; pointer-events: none; }
  .ju26-hero .gk-widget-body.gk-widget-body-initial { visibility: hidden !important; pointer-events: none !important; }
  #ae_launcher { transition: bottom .35s var(--ease-out) !important; }   /* moves with the bar's slide */
  .ju26-bar #ae_launcher { bottom: calc(15px + var(--mbar-h, 63px)) !important; }
}
.float-circles.ju26c .live-chat { padding: 18px 0 0; }
.float-circles.ju26c .circle { width: 60px; height: 60px; display: grid; place-items: center; background: #ff6b0e; border-radius: 50%; box-shadow: 0 0 10px 5px rgba(0,0,0,.15); cursor: pointer; }   /* the current site's orange, kept on purpose */
.float-circles.ju26c svg { width: 28px; height: 28px; fill: var(--white); }
@media (max-width: 1023px) { .float-circles.ju26c { bottom: calc(34px + var(--mbar-h, 63px)); } }   /* clear of the action bar */
@media (max-width: 767px) {
  .float-circles.ju26c { right: 15px; bottom: calc(15px + var(--mbar-h, 63px)); padding-right: 5px; }
  .float-circles.ju26c .live-chat { padding-top: 12px; }
}
/* JS-only control: footer links carry navigation without JS */
.no-js .ju26c .menu-btn { display: none; }
/* ---------------- legacy pages under the 2026 header (?hpreview=2026; html.ju26-chrome comes from header.php) ----------------
   The old header was fixed over the page, so style.css pushes the content down to clear it: .content-sections padding-top 49px
   (line 1188), and on "static header" pages 130px / 122px under 1260px plus top: 130px (lines 705, 1194, 1664). The 2026 header is
   sticky and takes its own space, so the content starts right under it. */
html.ju26-chrome .content-sections,
html.ju26-chrome #container.static-header .content-sections { padding-top: 0; top: 0; }
/* .header-shadow (style.css 1744): the dark band fixed under the old transparent header, shown until the page scrolls; it belongs
   to the old header, so it goes with it */
html.ju26-chrome .header-shadow { display: none; }
/* Legacy page content stacks as high as 999 (style.css: .loc-nav / .loc-nav-sub 400, .loc-nav.degrees-landing-page ul 605,
   .heading.brand-style 999); the old header kept its dropdowns above it in .sub-nav (501). The 2026 layers keep their order
   but move above all of it and below the legacy modals (.modal-bg 1100) and Goodkind's widget (9999+). */
html.ju26-chrome .mbar.ju26c { z-index: 998; }
html.ju26-chrome .drawer.ju26c { z-index: 999; }
html.ju26-chrome .site-header.ju26c { z-index: 1000; }
html.ju26-chrome .float-circles.ju26c { z-index: 1001; }
html.ju26-chrome .skip.ju26c { z-index: 1002; }
/* #header stand-in (template-parts/chrome-2026/header.php): invisible, fixed, as tall as the 2026 header. The academics templates
   compute "header bottom" as #header's top + 81px (122px under 768px) + the admin bar, so its top sits that much above the 2026
   header's bottom; scripts that use #header's height to clear the header get the 2026 header's height. */
html.ju26-chrome #header.ju26-header-space { position: fixed; left: 0; right: 0; top: calc(var(--header-h) - 81px); height: var(--header-h); min-height: 0; max-width: none; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; visibility: hidden; pointer-events: none; z-index: -1; transform: none; }
html.ju26-chrome #header.ju26-header-space .main-nav-bar { height: 100%; margin: 0; padding: 0; }
@media (max-width: 767px) { html.ju26-chrome #header.ju26-header-space { top: calc(var(--header-h) - 122px); } }
/* academics-2026-department / -detail: once stuck, their section nav gets an inline top of the old header's 81px / 122px (+ admin
   bar); the 2026 header is 80px / 68px, so on phones that left a 54px gap. Pinned to the 2026 header's bottom instead. */
html.ju26-chrome #loc-nav-sub.is-sticky { top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px)) !important; }
@media (max-width: 600px) { html.ju26-chrome #loc-nav-sub.is-sticky { top: var(--header-h) !important; } }