/* The page's main heading (H1) and, on a project or blog post, its date and its services,
   areas or tags. */

.title-block {
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1em;
}

.title-block-title {
    font-size: var(--title-size); /* typography.css */
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    /* A word wider than the column breaks only as a last resort; the lines are evened out */
    overflow-wrap: break-word;
    text-wrap: balance;
}

/* The services, areas or tags: small links in a row that wraps. Each one is a box of its own
   (wolfbuild_project_tags() makes the list), so a long one wraps inside itself instead of
   widening the page. The dots between them are drawn here, not typed: a dot is the background
   of a space, and a browser drops a space at the start or end of a line, so a dot only shows
   between two tags on the same line and is never left alone at the edge of one. */
.title-block-tags {
    margin-top: 0.6em;
    padding: 0;
    list-style: none;
    font-size: 0.6em;
    line-height: 1.8; /* each row is tall enough to tap */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-color);
    overflow-wrap: anywhere;
}

.title-block-tags > li {
    display: inline;
}

.title-block-tags > li + li::before {
    content: " ";
    word-spacing: 0.85em; /* the space, stretched to leave room for the dot */
    background: radial-gradient(circle, rgba(var(--distinct-primary-accent-color), 0.8) 0.1em, transparent 0.12em);
}

.title-block-date {
    margin-top: 0.3em;
    font-size: 0.6em;
    letter-spacing: 0.08em;
    color: var(--text-color);
}

/* A tag's box is a whole row tall (at least 24px), which is also its tap area */
.title-block-tag {
    display: inline-block;
    max-width: 100%;
    min-height: 24px;
    vertical-align: top;
    color: var(--text-color);
}

a.title-block-tag {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
    text-decoration-color: rgba(var(--distinct-primary-accent-color), 0.4);
}

a.title-block-tag:hover {
    text-decoration-color: currentColor;
}

/* Above the projects or the page's text, in the right-hand column. */
.content-area > .title-block {
    text-align: center;
}

/* Contact: the title shares the screen with the two buttons. */
.page-template-contact .content-area > .title-block {
    margin-bottom: 0;
}

/* Page not found. */
.not-found p {
    margin-bottom: 1em;
    text-align: center;
}

.not-found a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Desktop: readable tags and date under the title */
@media only screen and (min-width: 769px) {
    .title-block-tags,
    .title-block-date {
        font-size: 1rem;
    }
}

/* Phones: the columns stack, so every title block is centered, wherever the template puts it.
   The title is never bigger than a long word fits in the column: the widest capital word likely
   in a title (about "DECONTAMINATION") is 9.7 times the font size in Cabin bold, and the column
   is the screen less the side margins (style.css). */
@media only screen and (max-width: 768px) {
    .title-block {
        text-align: center;
    }
    .title-block-title {
        font-size: min(var(--title-size), calc((100vw - 2 * var(--mobile-fixed-content-inline-padding)) / 9.7));
    }
}