/*
Theme Name: IACM
Theme URI: https://www.iacm.forth.gr
Author: IACM / FORTH
Description: Institutional block theme for the Institute of Applied and Computational Mathematics (IACM/FORTH).
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 8.1
Version: 1.1.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iacm
*/

:root {
  --blue:        #1e63a4;
  --blue-deep:   #17548c;
  --navy:        #12406e;
  --navy-dark:   #0d2f52;
  --navy-tint:   #e8eef5;
  --accent:      #c1502e;
  --surface:     #ffffff;
  --surface-alt: #f4f6f8;
  --text:        #1f2933;
  --text-muted:  #5a6672;
  --rule:        #dfe4ea;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --wide:    1280px;
  --content: 820px;

  --header-h: 104px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; height: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }

.wide  { max-width: var(--wide);    margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.narrow{ max-width: var(--content); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }

a { color: var(--navy); }

/* Reset WordPress's default top margin on landing-page section wrappers. */
.wp-site-blocks > * { margin-block-start: 0; }

/* Sticky footer: .wp-site-blocks grows to fill the body's full viewport
   height, and its footer child is pushed to the end with an auto margin --
   so on short pages (little content between header and footer) the footer
   still sits flush at the bottom of the visible area instead of leaving
   bare background under it. */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.wp-site-blocks > footer { margin-block-start: auto; }

/* ============================================================ utility bar */

.utility {
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--rule);
}

.utility__inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.15rem;
  min-height: 46px;
}

/* Social sits to the left of the language switcher, both flush right. */
.social {
  display: flex;
  align-items: center;
  gap: .15rem;
}

/* The Social Icons core block renders its own markup (ul.wp-block-social-links
   > li.wp-social-link > a.wp-block-social-link-anchor); restyle it to match
   the design's flush, square icon buttons rather than its default pill/circle
   treatment. */
.wp-block-social-links.social {
  gap: 0;
}

.wp-block-social-links.social .wp-social-link {
  width: 34px;
  height: 34px;
  border-radius: 3px;
  margin: 0;
  color: var(--text-muted);
  background: none;
  transition: color .25s var(--ease), background .25s var(--ease);
}

.wp-block-social-links.social .wp-social-link a {
  color: currentColor;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.wp-block-social-links.social .wp-social-link svg {
  width: 21px;
  height: 21px;
}

.wp-block-social-links.social .wp-social-link:hover,
.wp-block-social-links.social .wp-social-link:focus-within {
  color: var(--blue);
  background: var(--navy-tint);
}

.utility__divider {
  width: 1px;
  height: 18px;
  background: var(--rule);
}

.lang {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin: 0;
  /* Offsets .lang__link's inline padding so the last language's text edge
     lands on the container edge, aligning it with CONTACT in the menu below. */
  margin-right: -.55rem;
}

.lang__link {
  font-size: .8rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: .25rem .55rem;
  border-radius: 3px;
  transition: background .25s var(--ease), color .25s var(--ease);
}

.lang__link:hover,
.lang__link:focus-visible { background: var(--navy-tint); color: var(--blue); }

.lang__link[aria-current="true"] {
  background: var(--blue);
  color: #fff;
  font-weight: 600;
}

.lang__sep { color: var(--rule); }

/* ================================================================ header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--navy-dark);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}

/* Official FORTH-IACM lockup. The asset is white on transparent, so it is
   only ever placed on the blue header/footer ground. */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
  padding: .35rem 0;
}

/* Core ships `.wp-block-image img { height:auto; max-width:100%!important }`
   at the same specificity as a single class, and its stylesheet wins on load
   order -- which left the logo at its natural 2114px, swamping the header and
   pushing the document wider than the viewport. Doubling the class raises
   specificity above core, and max-width is reset because core marks it
   !important. Sized on the img itself so the figure can't stretch as a flex
   item. */
.brand.brand__logo {
  margin: 0;
  line-height: 0;
  flex: 0 0 auto;
}

.brand.brand__logo img {
  height: 100px;
  width: auto;
  max-width: none !important;
  display: block;
}

.wp-block-navigation.site-nav,
.site-nav { margin-left: auto; }

.site-nav__list,
.wp-block-navigation.site-nav .wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0; padding: 0;
}

.site-nav__link,
.wp-block-navigation.site-nav .wp-block-navigation-item__content {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
  text-decoration: none;
  padding: .4rem 0;
  position: relative;
  white-space: nowrap;
  transition: color .25s var(--ease);
}

.site-nav__link::after,
.wp-block-navigation.site-nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}

.site-nav__link:hover,
.site-nav__link:focus-visible,
.wp-block-navigation.site-nav .wp-block-navigation-item__content:hover,
.wp-block-navigation.site-nav .wp-block-navigation-item__content:focus-visible { color: #fff; }

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link[aria-current="page"]::after,
.wp-block-navigation.site-nav .wp-block-navigation-item__content:hover::after,
.wp-block-navigation.site-nav .wp-block-navigation-item__content:focus-visible::after,
.wp-block-navigation.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

.site-nav__link[aria-current="page"],
.wp-block-navigation.site-nav a[aria-current="page"] { color: #fff; font-weight: 600; }

.site-nav__caret { font-size: .55em; opacity: .6; margin-left: .25em; }

/* ---------------------------------------------------------- nav dropdowns */

/* Core positions and toggles the submenu; these rules give it the light panel
   look that reads against the navy header.
   The `.has-child` in the selector is not decorative: core's own rules are
   `.wp-block-navigation .has-child .wp-block-navigation__submenu-container`,
   and a shorter selector here silently loses to them on specificity. */
.wp-block-navigation.site-nav .has-child > .wp-block-navigation__submenu-container {
  /* Wide enough that the longest group name ("Underwater Acoustic
     Measurements Laboratory") wraps to two lines at most. */
  width: 21rem;
  min-width: 21rem;
  padding-block: .4rem;
  background: #fff;
  border: 0;
  border-top: 3px solid var(--accent);
  box-shadow: 0 18px 40px rgba(11, 37, 69, .18);
  /* The nav is right-aligned, so a panel growing rightwards from its parent
     runs off screen and widens the document. Anchor it to the item's right
     edge instead, which keeps every panel on screen whatever its position. */
  left: auto;
  right: 0;
}

/* The third level (Administration's Director/Scientific Council, a division's
   groups) opens as its own flyout beside the parent item -- the site's actual
   two-level nesting -- restyled to match the first-level panel rather than
   core's plain list. Opens rightward, matching the reference design. Clamped
   to the viewport so a long group list can't push the panel off-screen on a
   narrow desktop window (it will sit flush against the edge there rather
   than overflow it). */
.wp-block-navigation.site-nav .has-child .has-child > .wp-block-navigation__submenu-container {
  top: -.4rem;
  left: 100%;
  right: auto;
  width: 18rem;
  min-width: 18rem;
  max-width: min(18rem, calc(100vw - 2rem));
  padding-block: .4rem;
  background: #fff;
  border: 0;
  border-top: 3px solid var(--accent);
  box-shadow: 0 18px 40px rgba(11, 37, 69, .18);
}

/* Divisions expands to every group at once, so the panel must scroll rather
   than run past the bottom of the window. */
.wp-block-navigation.site-nav .has-child > .wp-block-navigation__submenu-container {
  max-height: calc(100vh - var(--header-h) - 2rem);
  overflow-y: auto;
}

.wp-block-navigation.site-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding: .55rem 1.15rem;
  font-size: .85rem;
  letter-spacing: .02em;
  text-transform: none;
  white-space: normal;
  color: var(--navy);
}

/* The top-level underline sweep must not follow items into the panel. */
.wp-block-navigation.site-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
  display: none;
}

.wp-block-navigation.site-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation.site-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  background: var(--surface-alt);
  color: var(--navy);
}

.wp-block-navigation.site-nav .has-child .wp-block-navigation__submenu-container a[aria-current="page"] {
  font-weight: 600;
  color: var(--accent);
}

/* Keep the caret aligned with the label rather than sitting on the baseline. */
.wp-block-navigation.site-nav .wp-block-navigation__submenu-icon {
  align-self: center;
  padding: 0;
}

/* The auto margin has to live on this wrapper, not on .nav-toggle itself:
   .wp-block-buttons is the actual flex item in .site-header__inner, and it
   shrink-wraps its single child, so margin-left:auto on the child alone has
   no free space to push into and the toggle sat right next to the logo.
   Doubled class: core's global layout style injects
   `.is-layout-flex > :is(*, div) { margin: 0 }` inline, which -- because
   :is(div) counts as an element selector -- edges out a single class. */
.wp-block-buttons.nav-toggle-wrap {
  margin-left: auto;
}

.wp-block-button.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 3px;
  padding: .5rem .6rem;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}

/* nav-toggle is a core Button block (div.wp-block-button > a); the class
   lives on the outer div (styled above), the inner anchor is reset to
   inherit that box rather than the button-block's default styling. */
.nav-toggle .wp-block-button__link {
  all: unset;
  display: block;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* =============================================================== carousel */

.carousel { position: relative; background: var(--navy-dark); overflow: hidden; }

.carousel__viewport { position: relative; height: clamp(320px, 52vh, 520px); }

.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s var(--ease);
}

.carousel__slide.is-active { opacity: 1; }

.carousel__slide img,
.carousel__slide .wp-block-image {
  width: 100%; height: 100%;
}

.carousel__slide img {
  object-fit: cover;
}

.carousel__slide .wp-block-image {
  margin: 0;
}

/* Weighted to the lower-left, where the caption now sits. */
.carousel__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,   rgba(13,47,82,.88) 0%, rgba(13,47,82,.45) 38%, rgba(13,47,82,.12) 70%),
    linear-gradient(to right, rgba(13,47,82,.55) 0%, rgba(13,47,82,.10) 55%, transparent 100%);
}

.carousel__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(2.75rem, 7vh, 4.5rem);
}

.carousel__caption-inner { width: 100%; }

.carousel__text {
  color: #fff;
  font-size: clamp(1.35rem, 3.1vw, 2.3rem);
  font-weight: 500;
  line-height: 1.28;
  margin: 0;
  text-align: left;
  /* Each caption is ~65 characters; 37ch is the narrowest that still breaks
     all three onto two lines, so 40ch keeps two lines with some slack. */
  max-width: 40ch;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}

.carousel__slide.is-active .carousel__text {
  animation: slide-rise .9s var(--ease) both;
}

@keyframes slide-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* The prev/next arrows and the dots are built from the core Button block
   (a div.wp-block-button wrapping an anchor) rather than a bare <button>
   element, since core blocks have no interactive-button primitive. The
   className lands on the outer div, which keeps the exact position/size
   rules below; the inner anchor is reset to fill it invisibly. */
.carousel__arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  width: 42px; height: 42px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: grid; place-items: center;
  transition: background .25s var(--ease);
}

.carousel__arrow:hover,
.carousel__arrow:focus-within { background: rgba(255,255,255,.28); }

.carousel__arrow--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.carousel__arrow--next { right: clamp(.5rem, 2vw, 1.5rem); }

.carousel__arrow .wp-block-button__link {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: inherit;
}

/* The Buttons block wrapper must not become the arrows' containing block:
   as a zero-width absolutely-positioned box it resolved `right` against
   width 0, throwing the next arrow off-canvas to left:-66px. `display:
   contents` removes the wrapper's box entirely so each arrow positions
   against .carousel instead. */
.carousel__controls {
  display: contents;
}

.carousel__dots {
  position: absolute;
  z-index: 3;
}

.carousel__dots {
  bottom: 1.15rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .55rem;
}

.carousel__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.75);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}

.carousel__dot.is-current { background: #fff; transform: scale(1.25); }

.carousel__dot .wp-block-button__link {
  all: unset;
  display: block;
  width: 100%; height: 100%;
  cursor: pointer;
  border-radius: inherit;
}

/* ================================================================== intro */

.intro { background: var(--surface-alt); }

.intro__inner {
  padding-block: clamp(3rem, 8vw, 5.5rem);
  text-align: center;
}

.intro__text {
  margin: 0;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  line-height: 1.75;
  color: var(--text);
}

/* ============================================================== sections */

.section { padding-block: clamp(3rem, 7vw, 5rem); }
.section--alt { background: var(--surface-alt); }

.section__label {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .5rem 1.1rem;
  margin: 0 0 2.2rem;
}

.section__label--accent { background: var(--accent); }

/* ============================================================== divisions */

.divisions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.division {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.division:hover,
.division:focus-within {
  transform: translateY(-4px);
  border-color: var(--navy);
  box-shadow: 0 14px 34px -20px rgba(18,64,110,.55);
}

.division__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-tint); }

.division__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.division:hover .division__media img { transform: scale(1.04); }

.division__body { padding: 1.15rem 1.25rem 1.4rem; }

.division__name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
}

/* Whole-card click target: the card itself is a div (core Group has no
   anchor tagName), so the heading's link is stretched over the full card
   with a transparent overlay rather than the card element itself being an
   <a>. Hover/focus states above still key off .division because the div
   still spans the full visual area. */
.division__name a {
  color: inherit;
  text-decoration: none;
}

.division__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* =================================================================== news */

.news__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.news__more {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  margin-bottom: 2.2rem;
}

.news__more:hover { text-decoration: underline; }

.news__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
}

/* Archive listing (Events/Job Opportunities/Seminars): one full-width row per
   post instead of the homepage's multi-column card grid. */
.news__grid--list {
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

/* Fixed-height row; only the text side (.news-card__body) gets padding, the
   thumbnail gets its own margin instead so it floats inset from the card's
   edges rather than sitting flush. */
.news__grid--list .news-card {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-top: 0;
  height: 200px;
  overflow: hidden;
}

.news__grid--list .news-card__thumb {
  flex: 0 0 250px;
  width: 250px;
  height: 150px;
  margin: 25px;
}

/* The global ".news-card > *" reset (further down, for the homepage grid)
   zeroes margin-block on every direct child including this one -- same
   specificity as the rule above, but it comes later, so it was winning and
   collapsing the top/bottom margin to 0. One extra class re-wins it. */
.news__grid--list .news-card > .news-card__thumb {
  margin-block: 25px;
}

.news__grid--list .news-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news__grid--list .news-card__body {
  flex: 1 1 auto;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
  padding: 1.35rem 1.6rem;
}

.news__grid--list .news-card__title {
  font-size: 1.02rem;
}

.news__grid--list .news-card__tag {
  margin-top: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* The News section is a real Query Loop: core/post-template renders a <ul>
   (given the news__grid class directly) with one <li> per post, and the
   news-card group sits inside each <li>. Reset the list box and stretch
   each card to fill its grid cell so all four cards stay equal height. */
ul.news__grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.news__grid > li {
  display: flex;
}

ul.news__grid > li > .news-card {
  flex: 1 1 auto;
  width: 100%;
}

.news-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  padding: 1.35rem 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  text-decoration: none;
  color: inherit;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.news-card:hover,
.news-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -20px rgba(31,41,51,.5);
}

.news-card__title {
  margin: 0;
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}

.news-card:hover .news-card__title { color: var(--navy); }

/* Same stretched-link pattern as .division: the post title's own link is
   expanded to cover the whole card. */
.news-card__title a {
  color: inherit;
  text-decoration: none;
}

.news-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.news-card__tag {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
}

.news-card__tag a {
  color: inherit;
  text-decoration: none;
}

/* ================================================================= footer */

.site-footer {
  background: var(--navy-dark);
  color: #dbe7f3;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  margin-top: 0;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  text-align: center;
}

.site-footer .brand.brand__logo img { height: 52px; }

.site-footer__links,
.site-footer .wp-block-navigation__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
  list-style: none;
  margin: 0; padding: 0;
}

.site-footer__links a,
.site-footer .wp-block-navigation-item__content {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  transition: color .25s var(--ease);
}

.site-footer__links a:hover,
.site-footer .wp-block-navigation-item__content:hover { color: #fff; }

.site-footer__copy {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.72);
  margin: 0;
  max-width: 60ch;
}

/* ============================================================= interior */

.page-title-band {
  background: var(--navy);
  color: #fff;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

/* The band spans full width; this inner wrapper aligns its contents with the
   header and the rest of the page. */
.page-title-band__inner {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* Archive pages only. The inner box below carries the visible padding and is
   capped at the "wide" width like the content grid beneath it; this outer
   layer is same-color full-bleed so the two read as one continuous band. */
.page-title-band--narrow {
  background: var(--surface-alt);
  padding-block: 0;
}

.page-title-band--narrow .page-title-band__inner {
  background: var(--surface-alt);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

/* Single news articles (Events/Job Opportunities/Seminars/News) share the
   same lighter band as their archive listings, rather than the navy band
   generic pages (About, Contact, People, Divisions) still use. */
.page-title-band--news {
  background: var(--surface-alt);
}

.page-title-band__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}

.page-title-band--news .page-title-band__heading,
.page-title-band--narrow .page-title-band__heading {
  color: var(--navy);
  padding-bottom: .6rem;
  border-bottom: 4px solid var(--navy);
}

/* Category and date around a single article's title. */
.post-meta__tag,
.post-meta__tag a {
  margin: 0 0 .6rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.post-meta__date {
  margin: .8rem 0 0;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--text-muted);
}

.archive-pagination {
  margin-top: clamp(2rem, 5vw, 3rem);
  font-family: var(--font-mono);
  font-size: .9rem;
}

.wp-block-post-content {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

/* The recovered pages are Joomla/Quix markup that assumed a full-width
   template, so it carries fixed widths and unconstrained images. Without these
   the content runs under the viewport edge and the whole page scrolls
   sideways. */
.page-content {
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  overflow-wrap: break-word;
}

.page-content img,
.page-content iframe,
.page-content video {
  max-width: 100%;
  height: auto;
}

/* Wide tables scroll within their own box rather than widening the page. */
.page-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Contact page: the recovered Joomla markup puts each social icon in its own
   block-level column (#content-row-581 is that row's stable recovered id), so
   without this they stack one per line instead of sitting side by side. */
.page-content #content-row-581 .content-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.page-content #content-row-581 img {
  width: 34px;
  height: 34px;
}

/* Scientific Council page: recovered Quix markup gives each member their own
   row (photo column + text column, stacked by default with no framework
   loaded); #content-column-3853 is the stable recovered id of the column holding
   all the member rows -- scoping there rather than to the page's outer
   section avoids also matching that section's own top-level wrapper row.
   align-items: flex-start plus zeroing the name paragraph's default top
   margin is what actually lines up the photo's top edge with the name --
   without the second part the browser's default <p> margin pushes the name
   down below the photo regardless of the row's own alignment. */
.page-content #content-column-3853 .content-row {
  display: flex;
  align-items: flex-start;
  max-height: 500px;
  margin: 10px;
  padding: 10px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

.page-content #content-column-3853 .content-row > .content-column:first-child {
  flex: 0 0 160px;
}

.page-content #content-column-3853 .content-row > .content-column:first-child img {
  width: 100%;
  height: auto;
  display: block;
}

.page-content #content-column-3853 .content-row > .content-column:last-child {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline-start: 1.25rem;
}

.page-content #content-column-3853 .content-element-text-v2 p:first-child {
  margin-top: 0;
}

@media (max-width: 34rem) {
  .page-content #content-column-3853 .content-row {
    flex-direction: column;
    max-height: none;
  }

  .page-content #content-column-3853 .content-row > .content-column:last-child {
    padding-inline-start: 0;
    padding-top: .75rem;
  }
}

/* Infrastructure/Equipment page. WP core constrains .page-content's children
   to the theme's 820px contentSize via its own stylesheet rule; this page's
   3-column layout needs the full "wide" measure instead. */
.has-wide-page-content .page-content > * {
  max-width: var(--wide);
}

/* Recovered Quix markup: every equipment item is a 3-column row (category
   label, present only on that section's first item | description | photo),
   stacked by default with no framework loaded. .content-item-167 is this page's
   stable recovered container class. Scoped to :has(image) specifically --
   the section-label-only rows, the divider rows and the top jump-link row
   are also plain .content-row/.content-column markup, and without this they'd pick up
   the same column widths meant for the 3-column item rows only. */
.page-content .content-item-167 .content-row:has(.content-element-image-v2) {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-block: 1.5rem;
}

.page-content .content-item-167 .content-row:has(.content-element-image-v2) > .content-column:first-child {
  flex: 0 0 10rem;
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
}

.page-content .content-item-167 .content-row:has(.content-element-image-v2) > .content-column:nth-child(2) {
  flex: 1 1 20rem;
  min-width: 0;
}

.page-content .content-item-167 .content-row:has(.content-element-image-v2) > .content-column:nth-child(2) ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-content .content-item-167 .content-row:has(.content-element-image-v2) > .content-column:last-child {
  flex: 0 0 260px;
}

.page-content .content-item-167 .content-row:has(.content-element-image-v2) > .content-column:last-child img {
  width: 100%;
  height: auto;
  display: block;
}

/* Section dividers, and the jump-link row above the first one. */
.page-content .content-item-167 .content-divider-separator {
  display: block;
  height: 3px;
  background: var(--accent);
  margin-block: 1rem;
}

/* flex-wrap: nowrap plus a horizontal scrollbox, not wrapping to a second
   line -- the three labels are long enough that wrapping (or shrinking to
   fit) reads badly well before the row runs out of room on real phones. */
.page-content .content-item-167 #content-row-75147 p {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 3rem;
  margin: 0 0 1.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-content .content-item-167 #content-row-75147 a {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--navy);
}

.page-content .content-item-167 #content-row-75147 a:hover { color: var(--accent); }

@media (max-width: 40rem) {
  .page-content .content-item-167 #content-row-75147 p {
    justify-content: flex-start;
    gap: 1.5rem;
  }
}

/* The "This page is under construction" placeholder was authored with
   Bootstrap's responsive display-none utilities stacked at every
   breakpoint (i.e. meant to never show); harmless with Bootstrap loaded,
   but this theme carries no framework, so those classes are otherwise
   inert and the placeholder would incorrectly be visible. */
.page-content .content-item-167 [class*="content-d-"][class*="-none"] {
  display: none;
}

@media (max-width: 40rem) {
  .page-content .content-item-167 .content-row:has(.content-element-image-v2) > .content-column:first-child,
  .page-content .content-item-167 .content-row:has(.content-element-image-v2) > .content-column:nth-child(2),
  .page-content .content-item-167 .content-row:has(.content-element-image-v2) > .content-column:last-child {
    flex-basis: 100%;
  }
}

/* ============================================================ entrances */

.reveal { opacity: 0; transform: translateY(12px); animation: reveal .7s var(--ease) both; }
.reveal--1 { animation-delay: .05s; }
.reveal--2 { animation-delay: .15s; }
.reveal--3 { animation-delay: .25s; }
.reveal--4 { animation-delay: .35s; }

@keyframes reveal { to { opacity: 1; transform: none; } }

/* Keep entrance-animated content visible while editing in the block editor,
   where the front-end reveal never fires. */
.editor-styles-wrapper .reveal,
.editor-styles-wrapper .reveal--1,
.editor-styles-wrapper .reveal--2,
.editor-styles-wrapper .reveal--3,
.editor-styles-wrapper .reveal--4 {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* =========================================================== responsive */

@media (max-width: 74rem) {
  .brand.brand__logo img { height: 56px; }
  .site-nav__list,
  .wp-block-navigation.site-nav .wp-block-navigation__container { gap: 1.15rem; }
  .site-nav__link,
  .wp-block-navigation.site-nav .wp-block-navigation-item__content { font-size: .9rem; }
}

@media (max-width: 62rem) {
  :root { --header-h: 88px; }
  .brand.brand__logo img { height: 48px; }
  .site-nav__list,
  .wp-block-navigation.site-nav .wp-block-navigation__container { gap: 1rem; }
  .site-nav__link,
  .wp-block-navigation.site-nav .wp-block-navigation-item__content { font-size: .82rem; }
}

@media (max-width: 52rem) {
  :root { --header-h: 78px; }
  .wp-block-button.nav-toggle { display: block; }
  .site-nav__link,
  .wp-block-navigation.site-nav .wp-block-navigation-item__content { font-size: 1rem; }

  /* Doubled class to out-specify core's `.wp-block-navigation { display: flex }`,
     which otherwise keeps the mobile menu open permanently. */
  .wp-block-navigation.site-nav,
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--blue-deep);
    box-shadow: 0 16px 30px -24px rgba(0,0,0,.5);
    display: none;
    margin-left: 0;
  }

  .wp-block-navigation.site-nav[data-open="true"],
  .site-nav[data-open="true"] { display: block; }

  .site-nav__list,
  .wp-block-navigation.site-nav .wp-block-navigation__container {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem clamp(1rem, 4vw, 2.5rem) 1rem;
  }

  .site-nav__link,
  .wp-block-navigation.site-nav .wp-block-navigation-item__content {
    display: block;
    padding: .85rem 0;
    font-size: 1rem;
    /* Desktop keeps labels on one line; in the stacked panel that forced the
       flex row to the width of the longest group name and scrolled the page. */
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* Flex items default to min-width:auto and refuse to shrink below their
     content, so the menu has to be told it may narrow to the viewport. */
  .wp-block-navigation.site-nav .wp-block-navigation__container,
  .wp-block-navigation.site-nav .wp-block-navigation-item {
    min-width: 0;
    max-width: 100%;
  }

  /* A parent item is a flex row with the label and the toggle caret side by
     side, and the submenu forced onto its own full-width row underneath
     (flex-basis:100% on a wrapping flex item starts a new line) rather than
     beside the label. */
  .wp-block-navigation.site-nav .wp-block-navigation-item.has-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .wp-block-navigation.site-nav .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
    flex: 1 0 100%;
  }

  .site-nav__link::after,
  .wp-block-navigation.site-nav .wp-block-navigation-item__content::after { display: none; }

  /* In the mobile panel there is nowhere to hover, so each submenu is a
     tap-to-expand accordion instead of a hover flyout: collapsed by default,
     indented under its parent instead of floating over the page, and opened
     by the adjacent caret button. That button already toggles
     aria-expanded via the Navigation block's own view script
     (actions.toggleMenuOnClick) -- no custom JS needed, just letting the
     existing control show through instead of hiding it. */
  .wp-block-navigation.site-nav .has-child > .wp-block-navigation__submenu-container {
    position: static;
    width: auto;
    min-width: 0;
    padding: 0 0 0 1rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    height: 0;
    overflow: hidden;
  }

  .wp-block-navigation.site-nav .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
    height: auto;
    overflow: visible;
  }

  /* The desktop flyout rule for the third level (Administration's items, a
     division's groups) is more specific than the reset just above, so it
     still wins here unless repeated at matching specificity: without this,
     the third level keeps its absolute-positioned flyout box even in the
     stacked mobile panel, where there is no hover to trigger it correctly.
     Same collapsed-by-default/tap-to-expand behaviour as the first level. */
  .wp-block-navigation.site-nav .has-child .has-child > .wp-block-navigation__submenu-container {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0 0 0 1rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    height: 0;
    overflow: hidden;
  }

  .wp-block-navigation.site-nav .has-child .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
    height: auto;
    overflow: visible;
  }

  .wp-block-navigation.site-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    /* Desktop's flyout-list rule sets width:100% (correct there, since the
       panel has a fixed width); undone here so the label only takes its own
       content width, leaving room for the toggle caret on the same row
       instead of pushing it onto a line of its own. */
    width: auto;
    padding: .7rem 0;
    font-size: .9rem;
    color: rgba(255,255,255,.8);
  }

  .wp-block-navigation.site-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
  .wp-block-navigation.site-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
    background: transparent;
    color: #fff;
  }

  /* The caret is the accordion's open/close control now, not decorative --
     sized as a tap target and rotated to reflect state. */
  .wp-block-navigation.site-nav .wp-block-navigation__submenu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    padding: 0;
    color: rgba(255,255,255,.85);
  }

  .wp-block-navigation.site-nav .wp-block-navigation-submenu__toggle svg {
    width: 9px;
    height: 9px;
    transition: transform .2s var(--ease);
  }

  .wp-block-navigation.site-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .carousel__viewport { height: clamp(260px, 46vh, 380px); }
  .carousel__arrow { width: 36px; height: 36px; }
  .carousel__caption { padding-bottom: 3.25rem; }
}

@media (max-width: 40rem) {
  /* The fixed-height row layout only works when there's room for the 250px
     thumbnail beside the text; below this width it left the title column so
     narrow that words wrapped one letter per line. Stack thumbnail over text
     instead. */
  .news__grid--list .news-card {
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }

  .news__grid--list .news-card__thumb,
  .news__grid--list .news-card > .news-card__thumb {
    align-self: center;
    margin: 20px 0 16px;
  }

  .news__grid--list .news-card__body {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: 0 1.3rem 1.35rem;
  }
}

@media (max-width: 34rem) {
  :root { --header-h: 68px; }
  .brand.brand__logo img { height: 42px; }
  .utility__inner { min-height: 42px; gap: .7rem; }
  .wp-block-social-links.social .wp-social-link { width: 30px; height: 30px; }
  .wp-block-social-links.social .wp-social-link svg { width: 19px; height: 19px; }
  /* Two lines is not achievable at a readable size on a phone; let it flow. */
  .carousel__text { max-width: 100%; }
  .carousel__scrim {
    background: linear-gradient(to top, rgba(13,47,82,.90) 0%, rgba(13,47,82,.50) 45%, rgba(13,47,82,.20) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .carousel__slide { transition: none; }
}

/* WordPress injects `.is-layout-flow > :not(:first-child) { margin-block-start:
   24px }` into every group. This theme spaces everything itself with padding
   and gap, so that injected margin only causes damage -- it offset all but the
   first division/news card (breaking row alignment) and pushed the carousel
   viewport down, exposing a 24px band of the carousel's dark background under
   the header. Neutralised inside the theme's own containers; prefixing with
   .wp-site-blocks out-specifies core's single-class rule. Post content is
   deliberately left alone so editor-authored pages keep normal block spacing. */
.wp-site-blocks .carousel > *,
.wp-site-blocks .carousel__viewport > *,
.wp-site-blocks .carousel__slide > *,
.wp-site-blocks .carousel__caption > *,
.wp-site-blocks .intro__inner > *,
.wp-site-blocks .divisions__grid > *,
.wp-site-blocks .division > *,
.wp-site-blocks .division__body > *,
.wp-site-blocks .news__grid > *,
.wp-site-blocks .news__grid > li > *,
.wp-site-blocks .news-card > *,
.wp-site-blocks .news__head > *,
.wp-site-blocks .site-header__inner > *,
.wp-site-blocks .site-footer__inner > *,
.wp-site-blocks .utility__inner > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Visually hidden but available to assistive tech. Also the reason the dot
   buttons render at all: WordPress drops Button blocks with empty content. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Carousel controls stay out of the way until the carousel is hovered or
   focused. Keyboard users still get them via :focus-within, and reduced-motion
   users get them permanently since they cannot rely on autoplay. */
.carousel__arrow,
.carousel__dots {
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.carousel:hover .carousel__arrow,
.carousel:focus-within .carousel__arrow,
.carousel:hover .carousel__dots,
.carousel:focus-within .carousel__dots {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .carousel__arrow,
  .carousel__dots { opacity: 1; }
}

/* Touch devices have no hover state, so hover-only controls would be
   permanently invisible there. Keep them visible whenever hovering is
   unavailable. */
@media (hover: none) {
  .carousel__arrow,
  .carousel__dots { opacity: 1; }
}

/* ================================================== bio profile pages */

/* Recovered Community Builder profile markup has no Bootstrap behind it any
   more, so classes like .row/.col-sm-2/.card are inert hooks here, free to
   restyle into the photo+description card and tab strip below. Tab
   switching itself is wired up by bio-profile.js, which moves each pane's
   h2.cbTabNav link into .cbNavBarMenu and toggles .is-active. */

.has-bio-profile .page-title-band { display: none; }

.cbProfile { margin-block-end: clamp(2rem, 5vw, 3rem); }

.cbProfile .cbPosLine1 {
  display: flex;
  align-items: flex-start;
  background: var(--navy-tint);
  border: 1px solid var(--rule);
}

/* .cbPosLineCol1/2 aren't unique to this row -- Community Builder reuses the
   same column classes in the tabs row below, so every rule here is scoped
   through .cbPosLine1 to avoid also affecting that row's content. Height is
   left to the content: the photo keeps its full aspect ratio at a fixed
   width, and the row grows to fit whichever column (photo or text) is
   taller, so nothing scrolls or gets cropped. The top margin matches
   .cbPosLineCol2's padding-top so the photo's top edge lines up with the
   name's. */
.cbProfile .cbPosLine1 .cbPosLineCol1 {
  flex: 0 0 200px;
  margin: 1.25rem 0 1.25rem 1rem;
}

.cbProfile .cbPosLine1 .cbPosLineCol1 img.cbImgPict {
  width: 100%;
  height: auto;
  display: block;
}

.cbProfile .cbPosLine1 .cbPosLineCol2 {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.25rem 1.75rem;
}

.cbProfile .cbProfileTitle {
  margin: 0 0 .5rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 600;
  color: var(--navy);
}

.cbProfile .cbPosSeparator { height: clamp(1.5rem, 3vw, 2rem); }

.cbProfile .cbNavBarOverflowToggle,
.cbProfile .cbNavBarOverflow {
  display: none;
}

.cbProfile .cbNavBarMenu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--rule);
}

.cbProfile .cb-tab-link {
  display: block;
  padding: .85rem 1.4rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-bottom: none;
  margin-inline-end: .35rem;
}

.cbProfile .cb-tab-link.is-active {
  color: var(--navy);
  background: var(--surface);
  font-weight: 600;
}

.cbProfile .cbTabPane {
  display: none;
  padding-block: clamp(1.5rem, 3vw, 2rem);
}

.cbProfile .cbTabPane.is-active { display: block; }

.cbProfile .cbFieldsContentsTab .form-group {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.5rem;
  padding-block: .7rem;
  border-bottom: 1px solid var(--rule);
}

.cbProfile .cbFieldsContentsTab .form-group:last-child { border-bottom: none; }

.cbProfile .cbFieldsContentsTab label {
  flex: 0 0 10rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cbProfile .cbFieldsContentsTab .cb_field {
  flex: 1 1 16rem;
  min-width: 0;
}

@media (max-width: 34rem) {
  .cbProfile .cbPosLine1 { flex-direction: column; }

  .cbProfile .cbPosLine1 .cbPosLineCol1 { flex-basis: auto; }

  .cbProfile .cbFieldsContentsTab label { flex-basis: 100%; }
}

/* ======================================================= job opportunities */

/* Job Opportunities posts have no post_content -- see
   iacm_job_opportunities_archive_table()/iacm_job_opportunities_card() in
   functions.php -- so the archive gets a real data table (matching the old
   site's own column layout) instead of the photo-card grid every other news
   category uses, and each single post gets a label/value card instead of an
   empty content area. */

.job-table-scroll {
  border: 1px solid var(--rule);
  overflow-x: auto;
}

.job-table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  background: var(--surface);
  font-size: .92rem;
}

.job-table th,
.job-table td {
  padding: .75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}

.job-table th {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--navy-tint);
  white-space: nowrap;
}

.job-table tbody tr:hover { background: var(--surface-alt); }

.job-table a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.job-table a:hover { color: var(--navy); text-decoration: underline; }

/* Mirrors the label-left/value-right row pattern used for bio profile
   contact fields (".cbFieldsContentsTab" above), under its own class names
   so neither section's CSS can drift and affect the other. */
.job-card {
  border: 1px solid var(--rule);
  background: var(--surface);
}

.job-card__row {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.5rem;
  padding: .9rem 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.job-card__row:last-child { border-bottom: none; }

.job-card__label {
  flex: 0 0 12rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.job-card__value {
  flex: 1 1 16rem;
  min-width: 0;
  color: var(--text);
}

.job-card__value a { color: var(--navy); }

/* Below this width the table's min-width forces horizontal scrolling on
   every row just to read one cell; a stacked label/value layout (like
   .job-card above) reads far better on a phone than a cramped table. */
@media (max-width: 40rem) {
  .job-table-scroll { overflow-x: visible; border: none; }

  .job-table { min-width: 0; }

  .job-table thead { display: none; }

  .job-table, .job-table tbody, .job-table tr, .job-table td { display: block; width: 100%; }

  .job-table tr {
    margin-bottom: 1rem;
    border: 1px solid var(--rule);
    background: var(--surface);
  }

  .job-table td {
    border-bottom: none;
    padding: .45rem 1rem;
  }

  .job-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .15rem;
  }
}

@media (max-width: 34rem) {
  .job-card__label { flex-basis: 100%; }
}

/* ==================================================== accordion (recovered) */

/* The Preprint Repository page and several Division pages' "Publications"
   sections are recovered Quix accordions: a list of year headers, each
   followed by its own publication list. accordion.js drives the open/close
   state (.content-open + aria-hidden/hidden); this just styles both states. */
.content-accordion {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}

.content-element-accordion-item + .content-element-accordion-item {
  border-top: 1px solid var(--rule);
}

.content-accordion-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--surface-alt);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  cursor: pointer;
}

/* The recovered markup wraps the title span in a <br> before and after it;
   as flex items those push the span away from the left edge instead of
   just adding vertical space the way they would in normal flow. */
.content-accordion-title br {
  display: none;
}

.content-accordion-title:hover,
.content-open > .content-accordion-title {
  background: var(--navy-tint);
}

.content-accordion-title::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--text-muted);
}

.content-open > .content-accordion-title::after {
  content: "\2212";
}

.content-accordion-content {
  padding: 1.5rem 1.5rem 1.75rem;
  background: var(--surface);
}

.content-accordion-content[hidden] {
  display: none;
}

.content-accordion-content ul {
  margin: 0;
  padding-left: 1.25rem;
}

.content-accordion-content li {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.content-accordion-content li:last-child {
  margin-bottom: 0;
}

@media (max-width: 34rem) {
  .content-accordion-title {
    padding: .85rem 1.1rem;
    font-size: .95rem;
  }

  .content-accordion-content {
    padding: 1.1rem;
  }
}