/* #region CLASS Container */
/* A general use container, e.g., to anchor position:absolute; elements, or enable overflow:auto; */
.container { position: relative; }
/* #endregion */

/* #region CLASS Highlight */
/* For highlighting text; usually ussed in <span>, <b>, <i>, <small>. */
.highlight { color: var(--blue2); }
    .highlight.brighter { color: var(--blue3); }
    .highlight.brightest { color: var(--blue4); }
    .highlight.darker { color: var(--blue1); }
/* #endregion */

/* #region CLASS Rich */
/* An element modifier for indicating a more complex styling options; does noting on its own. */

/* #region Rich + h2 : rich header; */
h2.rich { text-align: left; }
h2.rich > * { display: block; }
h2.rich > *:first-child { color: var(--blue3); font-size: smaller; max-width:80%; }
h2.rich > *:first-child:after { content: ':'; }
h2.rich > *:nth-child(2) { font-weight: bolder; max-width: 80%; }
h2.rich > *:nth-child(3) { font-style: italic; color: var(--blue4); font-size: 90%; }
/* #endregion */

/* #endregion */

/* #region RULE List contents */
/* h5 is a dedicated header for lists; therefore, anything following h5 is a content of the list */
h5 + * { margin-left: 1rem; margin-right: 1rem; display: block }
/* #endregion */

/* #region CLASS Tags */
/* A container for _tag_ elements (e.g., research-topic ) */
.tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.33rem;
    column-gap: 0.5rem; 
}
/* #endregion */

/* #region CLASS Flex-column */
/* A general use class for arranging elements into column */
.flex-column { display: flex; flex-direction: column; row-gap: 0.5rem; margin-bottom: 0.5rem; width: fit-content;}

/* #region Flex-column modifier */
    .flex-column.compact { row-gap: 0.25rem; }
/* #endregion */

/* #endregion */

/* #region CLASS Flex-row */
/* A general use class for arranging elements into row */
:root{
    --col-gap: 0.25rem;
}
.flex-row { display: flex; flex-direction: row; column-gap: var(--col-gap); align-items: center; text-align: center; flex-wrap: wrap;}

/* #region Flex-row modifiers */
 /* #region Compact */
    .flex-row.compact { column-gap: calc(var(--col-gap) / 2 ); }
 /* #endregion */
 /* #region Separators */
    .flex-row.separators { column-gap: 0; }
    .flex-row.separators > * + * { border-left: solid 2px var(--gray); padding-left: var(--col-gap); margin-left: var(--col-gap);}
    .flex-row.separators.compact > * + * { border-left: solid 2px var(--gray); padding-left: calc(var(--col-gap)/2); margin-left: calc(var(--col-gap) / 2);}
 /* #endregion */
/* #endregion */

/* #endregion */

/* #region CLASS Research-topic */
/* A _tag_ style for research topic objects */
.research-topic, a.research-topic, a.research-topic:visited {
    padding: 3px 0.5rem;
    border-radius: 0.25rem;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    color: var(--blue1);
    background-color: var(--gray);
    cursor: pointer;
    text-align: center;
}
    .research-topic:hover, a.research-topic:hover { background-color: var(--blue2); color: white; }
/*  #endregion */