/* -*- SCSS -*-
 *
 * Supplementary styles for the FAU26 pages, which emulate the FAU-Elemental
 * WordPress theme of www.dr.tf.fau.de. The base look comes entirely from the
 * theme snapshot under fau26/css/ (see maintenance/bin/update-fau26-shell.sh);
 * this file only styles reality-specific components that have no WordPress
 * analogue. Keep everything here scoped to reality-* classes or to markup we
 * generate ourselves, so a theme snapshot update can never be shadowed
 * accidentally.
 *
 * Unlike reality.scss, this file is plain SCSS (no m4 institution switches):
 * it is only ever compiled for the fau26 target.
 */
/* ---------------------------------------------------------- citations --- */
.bibvenue {
  font-style: italic;
}

.bibauthors {
  font-weight: 600;
}

/* citation-style variants, as emitted by pubList(..., $supportStyleVariants):
 * only the variant matching the preceding selector span is shown (same
 * mechanism as in reality.scss; default is the "loose"/Display style) */
.bibstylevariant {
  display: none;
}

.bibstyleselector[value=bibstyleloose] ~ .bibstylevariant[value=bibstyleloose],
.bibstyleselector[value=bibstylealpha] ~ .bibstylevariant[value=bibstylealpha],
.bibstyleselector[value=bibstyleacmsiggraph] ~ .bibstylevariant[value=bibstyleacmsiggraph],
.bibstyleselector[value=bibstyleIEEEtran] ~ .bibstylevariant[value=bibstyleIEEEtran] {
  display: inline;
}

/* --------------------------------- publication tables (pubList output) --- */
/* neutralise the theme's table decoration for .bibtable: no zebra striping
 * (fully transparent throughout), no tbody outline, no cell borders */
.bibtable tbody {
  border: none;
}

.bibtable tbody tr,
.bibtable tbody tr:nth-child(2n) {
  background-color: transparent;
}

.bibtable tbody tr td {
  border-right: none;
  min-width: 0;
}

/* cell spacing as in the FAU21 stylesheet (reality.scss: .block td and
 * .bibtable *), replacing the theme's roomier var(--Spacing-2x) padding;
 * the extra 3px vertical padding reproduces FAU21's measured ~14px
 * inter-row distance, which the theme's smaller table font (--P-Caption)
 * would otherwise undercut */
.bibtable td {
  padding: calc(0.25ex + 3px) 0.5em;
  vertical-align: top;
}

.bibtable * {
  line-height: 141%;
  margin-top: 7px;
  margin-bottom: 3px;
}

/* thumbnail column: shrink-wrap it (all publication thumbnails share the
 * same width) -- overrides the theme's 10.625rem first-column width; the
 * :not(:last-child) guard keeps thumbnail-less rows (single cell) intact */
.bibtable tbody tr td:first-child:not(:last-child) {
  width: 1px;
  white-space: nowrap;
}

/* top-align the thumbnails: classic pages neutralise the .img-shadow offset
 * trick (reality.scss gives the div a positive and the img a compensating
 * negative margin), which fau26 does not load -- without this, the wrapper
 * div and the img each pick up the 7px .bibtable * margin plus an inline
 * baseline gap, and the thumbnail drifts towards the vertical centre */
.bibtable .img-shadow,
.bibtable .img-shadow img {
  margin: 0;
}

.bibtable .img-shadow img {
  display: block;
}

/* the theme styles a table's first column specially (FAU blue, 10.625rem
 * wide, extra right padding) -- none of that for citations; this selector
 * needs to repeat the min-width/padding neutralisation from above because
 * the theme's td:first-child rule outranks the plain td rules */
.bibtable tbody tr td:first-child {
  color: inherit;
  width: auto;
  min-width: 0;
  padding-right: 0.5em;
}

/* year quick-links atop publications.html: emitted as an h2 (with class
 * yearnav under fau26 only); the theme's h2 scale is far too large for a
 * link row -- use regular body-text size instead */
h2.yearnav {
  font-size: var(--P-Body-Text, 1.125rem);
}

/* giant faded year headings between publication entries, transferred from
 * reality.scss (.bibyeartitle* rules there); geometry identical, colours
 * from the FAU Tech palette: the numerals use --swatch-medium-high (emitted
 * by common-style-from-palette.php from images/fau-tech-palette.json, with
 * the same value as fallback here), and the bottom fade blends into the
 * white WordPress page background via --back-color. Keep these rules after
 * the .bibtable * spacing rule above, which they must override. */
:root {
  --back-color: 255, 255, 255;
}

.bibyeartitlewrapper {
  text-align: right;
  overflow: visible;
  width: 0px;
  margin-left: auto;
  margin-right: 5%;
  height: 64px;
  margin-top: -64px;
  pointer-events: none;
  background: none !important;
}

.bibyeartitle {
  float: right;
  text-align: right;
  width: 300px;
  height: 0px;
  margin-left: -300px;
  color: var(--swatch-medium-high, #e2e7eb);
  letter-spacing: 4px;
  font-size: 128px;
  font-weight: 700;
  /* old-style figures (Source Sans 3 has the onum feature) */
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1;
}

.bibyeartitleeffect {
  float: right;
  width: 300px;
  height: 300px;
  margin-left: -300px;
  margin-bottom: -300px;
  background-image: url("../images/bot-fade-96.png"); /* in case linear-gradient is not supported */
  background-image: linear-gradient(to top, rgb(var(--back-color)), rgba(var(--back-color), 0)) !important;
  background-size: 1px 96px;
  background-repeat: repeat-x;
  background-position: 0px 80px;
}

@media screen and (max-width: 444px) {
  .bibyeartitlewrapper {
    margin-right: 3.333%;
    height: 48px;
    margin-top: -48px;
  }
  .bibyeartitle {
    width: 225px;
    margin-left: -225px;
    letter-spacing: 2px;
    font-size: 96px;
  }
  .bibyeartitleeffect {
    width: 225px;
    height: 225px;
    margin-left: -225px;
    margin-bottom: -225px;
    background-image: url("../images/bot-fade-64.png");
    background-position: 0px 60px;
  }
}
@media screen and (max-width: 370px) {
  .bibyeartitlewrapper {
    margin-right: 2.5%;
    height: 32px;
    margin-top: -32px;
  }
  .bibyeartitle {
    width: 150px;
    margin-left: -150px;
    letter-spacing: 2px;
    font-size: 64px;
  }
  .bibyeartitleeffect {
    width: 150px;
    height: 150px;
    margin-left: -150px;
    margin-bottom: -150px;
    background-image: url("../images/bot-fade-48.png");
    background-position: 0px 40px;
  }
}
/* -------------------------------------------- personal pages (hero) ----- */
/* portrait-friendly hero cover: the theme forces aspect-ratio 3/2 (landscape)
 * on hero-portal covers, which crops the portrait-oriented staff photos into
 * face close-ups; personal-page heroes (personal-page-fau26.php adds the
 * hero-personal class) use a portrait box instead, width-capped and
 * right-aligned in its column */
.wp-block-columns.hero-portal.hero-personal .wp-block-cover {
  aspect-ratio: 3/4;
  max-width: 24rem;
  margin-left: auto;
}

/* the theme gives the white title plate min-width: calc(100% + 5.5rem) so
 * that long page titles overlap the image; with short person names that
 * minimum makes the plate excessively wide -- let it hug the name instead */
.wp-block-columns.hero-portal.hero-personal .wp-block-post-title {
  min-width: 0;
}

@media screen and (max-width: 48rem) {
  /* stacked mobile layout: fall back to the theme's square cover */
  .wp-block-columns.hero-portal.hero-personal .wp-block-cover {
    aspect-ratio: 1/1;
    max-width: unset;
    margin-left: unset;
  }
}
/* ORCID badge in the hero h1: right edge flush with the end of the name,
 * directly beneath its line box, without affecting the layout flow */
.fau26-name-wrap {
  position: relative;
}

.fau26-name-wrap .fau26-orcid {
  position: absolute;
  right: 0;
  top: 100%;
  line-height: 0;
}

.fau26-name-wrap .fau26-orcid img {
  display: block;
}

.fau26-name-wrap .fau26-orcid::before,
.fau26-name-wrap .fau26-orcid::after {
  content: none !important; /* no theme external-link decoration */
}

/* ------------------- citation-style switcher (bibStyleSwitcher() UI) ----- */
/* switcher placement: as in the classic pages, bibStyleSwitcher() sits
 * inside the section heading and floats right of it */
#erdoes {
  float: right;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 1em;
  font-size: var(--P-Body-Text-Small, 0.9rem);
  color: var(--FAU-Col-FAU-Schwarz-90, #1a1a1a);
  line-height: 2; /* roughly centre against the h2 cap height */
}

/* FAU26 rendition of the classic finebuttons radio group: identical markup,
 * FAU colours, inherited Source Sans 3, square corners */
.finebuttons {
  display: inline-block;
}

.finebuttons input {
  display: none;
}

.finebuttons label {
  font-size: var(--P-Caption, 0.8rem);
  font-weight: 400;
  border: 1px solid var(--FAU-Col-FAU-Blau-100, #04316a);
  background-color: transparent;
  color: var(--FAU-Col-FAU-Blau-100, #04316a);
  padding: 0 var(--Spacing-2x, 0.5rem);
  cursor: pointer;
}

.finebuttons label:hover {
  background-color: var(--FAU-Col-FAU-Blau-12_5, #d3dcf2);
}

.finebuttons input[type=radio]:checked + label {
  background-color: var(--FAU-Col-FAU-Blau-100, #04316a);
  color: var(--FAU-Col-FAU-Weiss-100, #fff);
}

/* ------------------------------------------- asset thumbnails + labels --- */
/* FAU-Elemental overlays every div that directly contains an img with a
 * 5% black ::before (generic image framing:
 *   div:not(...):has(>img):before { background-color:rgba(0,0,0,.05); ... }
 * and the pseudo-element is positioned against some larger ancestor, so it
 * bleeds beyond the thumbnail); our shadow-wrapper divs must stay clean.
 * !important: the theme selector's :not()/:has() arguments give it a
 * specificity our scoped selectors cannot cleanly exceed. */
.reality-assetpreviews .assetpreview div::before,
.img-shadow::before {
  content: none !important;
}

/* ------------------------------------ legacy (not yet converted) pages --- */
/* classic pages rendered inside the FAU26 shell: hide the classic SVG
 * definition sheet (common-fau-svg.php) some of them include */
.fau-svg-definitions {
  display: none;
}

.reality-assetpreviews {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 1rem;
  margin-block-start: var(--Spacing-6x, 1.5rem);
}

.reality-assetpreviews .assetpreview {
  width: 148px;
  text-align: center;
  font-size: var(--P-Body-Text-Small, 0.9rem);
  line-height: 1.3;
}

.reality-assetpreviews .assetpreview > a {
  display: block;
  text-align: center;
}

.reality-assetpreviews .assetpreview > a > img {
  border: 0 solid var(--FAU-Col-FAU-Blau-100, #04316a);
  border-bottom-width: 1px;
}

.reality-assetpreviews .assetpreview div {
  width: 148px;
  overflow: hidden;
  border: 0 solid var(--FAU-Col-FAU-Blau-100, #04316a);
  border-bottom-width: 1px;
}

.reality-assetpreviews .assetpreview div > img {
  margin-top: 10px;
  box-shadow: var(--FAU-Col-FAU-Schwarz-25, #bfbfbf) 0 0 10px;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

/* assetPreview() emits light- and dark-mode BibTeX logo variants; the FAU
 * theme is light-only, so pin the light variant */
.reality-assetpreviews .variantDarkMode {
  display: none;
}

/* ---------------------------------------------------------- disclaimer --- */
.reality-disclaimer {
  margin-block-start: var(--Spacing-10x, 2.5rem);
  color: var(--FAU-Col-FAU-Schwarz-62_5, #5e5e5e);
}

/*# sourceMappingURL=reality.fau26.css.map */