/* Project-wide utility classes. Promote a rule here once a second leaf
   template needs it; keep genuinely one-off styling inline in that
   template instead. */

/* Shrink a table column to its content width and keep it on one line
   (e.g. an action or unit-of-measure column in an otherwise stretchy
   table). */
td.tight, th.tight {
  width: 1%;
  white-space: nowrap;
}

/* Right-aligned action cell in a list table's row. */
.table-action {
  text-align: right;
}

/* Strip the underline off every link; breadcrumb links additionally go
   grey instead of the default link color. */
a {
  text-decoration: none !important;
}

.breadcrumb-item a {
  color: grey;
}

/* Highlights the column a list table is currently ordered by (see
   jinja/list/__query.jinja2's `sortable()` macro). */
.text-gold {
  color: var(--altid-gold) !important;
}

/* Fixed-width debit/credit cell, so the Dr and Cr columns stay the same
   width whether or not a given row has a value in them. The width has to
   be forced on the cell's content, not just the cell, since a table's
   automatic column layout sizes each column independently to its own
   widest content. */
td.dc {
  width: 6em;
}
td.dc > .dc-value {
  display: inline-block;
  min-width: 4em;
}

/* Two icons stacked vertically inside a table cell, e.g. an up/down pair. */
table .stacked {
  font-size: 0.9em;
  line-height: 1;
}
table .stacked .stacked-top {
  display: block;
  position: relative;
  top: 2px;
  left: 0px;
}
table .stacked .stacked-bottom {
  display: block;
  position: relative;
  bottom: 2px;
  left: 0px;
}

/* Two symbols stacked vertically outside a table (e.g. an up/down pair
   next to a value). */
.symbol-stack {
  display: inline-block;
  position: relative;
  height: 2em;
  line-height: 1em;
  vertical-align: middle;
}
.symbol-stack .up,
.symbol-stack .down {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}
.symbol-stack .up {
  top: 0;
}
.symbol-stack .down {
  bottom: 0;
}

/* Highlight an element blue on hover, e.g. a clickable list row. */
.blue-on-hover {
  transition: background-color 0.3s ease, color 0.3s ease;
}
.blue-on-hover:hover {
  background-color: #3399ff;
  color: #fff;
}

/* Home page hero carousel (see highlight/_carousel.jinja2): each slide
   stacks a solid-sand title band, the highlight's image, and a solid-sand
   text band directly on top of one another with no vertical gap, so the
   navy text always sits on a flat, fully opaque background regardless of
   the photo behind it. Two thin decorative bands (`.highlight-hero-fade`)
   are absolutely positioned over the top and bottom edges of the image —
   anchored via `top`/`bottom` offsets equal to the title's/text's own
   fixed height, i.e. exactly where the image begins/ends — each fading
   from opaque sand to transparent to soften the seam between the flat
   title/text bands and the photo.

   From md up, `highlight/_carousel_js.jinja2` sizes `.highlight-carousel`
   itself in JS to exactly fill the viewport below the navbar/breadcrumb
   header and above the fixed footer, so the whole carousel is visible
   with no scrolling when the page loads at the top. Everything below is
   built to absorb that height without any further arithmetic: the
   carousel is a column flexbox, its title/text bands keep their fixed
   rem heights (`flex: 0 0 auto`), and the image simply grows to fill
   whatever is left (`flex: 1 1 auto`) — so the same JS-set pixel height
   works regardless of header/footer size. The two fade bands fall back
   to a static vh-based height approximating 1/5 of the image's old
   fixed height until the JS resizes them to exactly 1/5 of the image's
   actual (now dynamic) rendered height. Below md the whole scheme is
   turned back into plain block flow — the JS leaves this breakpoint
   alone — since a viewport-fit hero fights the anti-cropping, aspect-
   ratio-driven image sizing that phones need instead (see below).

   Each title/text band is a fixed-height outer box (so it never grows
   past a couple of lines) wrapping an inner line-clamped span that
   ellipsizes its own text — the outer box's own `overflow: hidden` is a
   plain block clip, kept separate from the inner webkit-box line-clamp
   so it reliably backstops the odd sub-pixel sliver browsers sometimes
   let a clamped line leak past its own clip. */
.highlight-carousel {
  display: flex;
  flex-direction: column;
}
.highlight-carousel .carousel-inner {
  flex: 1 1 auto;
  min-height: 0;
}
.highlight-carousel .carousel-item {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.highlight-carousel .carousel-item.active,
.highlight-carousel .carousel-item-next,
.highlight-carousel .carousel-item-prev,
.highlight-hero-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.highlight-hero-link {
  color: inherit;
}
.highlight-hero-image {
  display: block;
  flex: 1 1 auto;
  min-height: 240px;
  width: 100%;
  margin: 0;
  object-fit: cover;
}
.highlight-hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 14vh;
  min-height: 84px;
  max-height: 144px;
  pointer-events: none;
}
.highlight-hero-fade-top {
  top: 8.25rem;
  background: linear-gradient(to bottom, var(--altid-sand) 0%, transparent 100%);
}
.highlight-hero-fade-bottom {
  bottom: 6rem;
  background: linear-gradient(to top, var(--altid-sand) 0%, transparent 100%);
}
.highlight-hero-title,
.highlight-hero-text {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.75rem 1.75rem;
  color: var(--altid-navy);
  text-align: left;
  overflow: hidden;
  background: var(--altid-sand);
}
.highlight-hero-title {
  height: 8.25rem;
  font-family: var(--altid-font-display);
}
.highlight-hero-text {
  height: 6rem;
}
.highlight-hero-title-clamp,
.highlight-hero-text-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.highlight-hero-title-clamp {
  -webkit-line-clamp: 2;
}
.highlight-hero-text-clamp {
  line-height: 1.5rem;
  -webkit-line-clamp: 3;
}
/* Rendered as a plain dot row below the hero image, rather than
   Bootstrap's default overlay, so it never collides with the title or
   text bands stacked above/below the picture itself. */
.highlight-carousel .carousel-indicators {
  position: static;
  flex: 0 0 auto;
  margin: 0.75rem 0 0;
}
.highlight-carousel .carousel-indicators [data-bs-target] {
  background-color: var(--altid-navy-light);
}
.highlight-carousel .carousel-indicators .active {
  background-color: var(--altid-gold);
}
/* Below md, undo the viewport-fit column flexbox above entirely: a
   fixed vh-tall image box no longer matches Highlight images' required
   4:3 aspect ratio (see highlight.validators), so `cover` would crop
   the sides. Sizing the box to that same 4:3 ratio instead makes
   `cover` a no-op — the whole image fits with nothing cropped — but
   only works as plain block flow, so JS leaves `.highlight-carousel`
   unsized here and this block resets everything else to match. */
@media (max-width: 767.98px) {
  .highlight-carousel,
  .highlight-carousel .carousel-item.active,
  .highlight-carousel .carousel-item-next,
  .highlight-carousel .carousel-item-prev,
  .highlight-hero-link {
    display: block;
  }
  .highlight-carousel .carousel-inner,
  .highlight-carousel .carousel-item {
    height: auto;
  }
  .highlight-hero-image {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .highlight-hero-fade {
    height: auto;
    aspect-ratio: 20 / 3;
  }
}