/*!
 * StaticPress theme "Blocksy" - components.css
 *
 * Layer 3 of 4: the reusable pieces.
 *
 *   4-components/buttons/*      .ct-button and friends
 *   6-layout/entries/*          [data-archive] / [data-cards] cards
 *   4-components/entry-meta     .entry-meta
 *   6-layout/entries/entry-excerpt
 *   4-components/pagination     .ct-pagination
 *   6-layout/sidebar/*          .ct-widget / .widget-title
 *   2-basics/content-spacing    .entry-content typography
 *
 * The entry card in the original is driven by the archive `data-*` attributes
 * (data-archive / data-cards / data-layout); the same attributes are printed
 * by the templates, so the rules below stay one to one with the SCSS.
 */

/* -------------------------------------------------------------- buttons */
.ct-button,
.ct-button-ghost,
button.ct-button,
[type='submit'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--theme-button-min-height);
    padding: var(--theme-button-padding);
    border: none;
    cursor: pointer;
    user-select: none;
    text-align: center;
    border-radius: var(--theme-button-border-radius);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    background-color: var(--theme-button-background-initial-color);
    color: var(--theme-button-text-initial-color);
    transition: var(--theme-transition);
}

.ct-button:hover,
.ct-button:focus,
button.ct-button:hover,
[type='submit']:hover {
    background-color: var(--theme-button-background-hover-color);
    color: var(--theme-button-text-hover-color);
}

.ct-button--lg {
    min-height: 48px;
    padding: 8px 28px;
    font-size: 16px;
}

.ct-button-ghost {
    border: 1px solid var(--theme-border-color);
    background-color: transparent;
    color: var(--theme-palette-color-4);
}

.ct-button-ghost:hover,
.ct-button-ghost:focus {
    border-color: var(--theme-palette-color-1);
    background-color: transparent;
    color: var(--theme-palette-color-1);
}

/* ---------------------------------------------------------- entry cards */
[data-archive='default'] .entry-card {
    text-align: start;
}

[data-archive='default'] .card-content {
    display: flex;
    flex-direction: column;
}

[data-archive='default'] .card-content > * {
    margin-block: 0 var(--card-element-spacing);
}

[data-archive='default'] .card-content > *:last-child {
    margin-bottom: 0;
}

[data-cards='boxed'] .entry-card {
    position: relative;
    padding: var(--card-inner-spacing);
    border: var(--card-border);
    border-radius: var(--theme-border-radius);
    background-color: var(--theme-palette-color-8);
    box-shadow: var(--theme-box-shadow);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

[data-cards='boxed'] .entry-card:hover {
    border-color: rgba(40, 114, 250, 0.35);
    box-shadow: var(--theme-box-shadow-strong);
}

/* A card is one hotspot, not just the glyphs of its headline: the headline
   link is stretched over the whole card, so the padding, the excerpt, the meta
   row and the picture block all open the post. The card itself is the
   positioning context of that overlay. */
.entry-card {
    position: relative;
}

.entry-card .entry-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* The links and buttons that live inside a card stay clickable above the
   stretched headline link: the category of a post card, the button of a
   download card. */
.entry-card .entry-meta a,
.entry-card .entry-card-button {
    position: relative;
    z-index: 2;
}

.entry-card .ct-media-container {
    display: block;
    overflow: hidden;
    border-radius: var(--theme-image-border-radius);
}

.entry-card .ct-media-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* boundless image: bleed over the card padding, squared off at the sides
   (6-layout/entries/entry-thumbnail.scss) */
.entry-card .boundless-image {
    width: calc(100% + var(--card-inner-spacing) * 2);
    margin-inline: calc(var(--card-inner-spacing) * -1);
}

.entry-card .boundless-image:first-child {
    margin-top: calc(var(--card-inner-spacing) * -1);
}

.entry-card .boundless-image:first-child:not(:only-child) {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

.entry-card .boundless-image:last-child {
    margin-bottom: calc(var(--card-inner-spacing) * -1);
}

.entry-card .boundless-image:last-child:not(:only-child) {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

.entry-card .boundless-image:not(:first-child):not(:last-child) {
    border-radius: 0;
}

/* --------------------------------------------------------------------------
   Article picture taken out of the body (`ct-media-contain`).

   The renderer hands every card the picture of the article (the manual cover,
   or the first picture of the body - app/post_media.py). A body picture can be
   any shape at all (portrait screenshot, wide banner, long capture), so it is
   shown complete and centred (`object-fit: contain`, never stretched, never
   cropped) over a blurred copy of itself that fills the box: the frame stays
   full, nothing of the picture is lost.

   The blur layer is an <img>, not a background-image, so no URL has to be
   escaped into a style attribute and the browser reuses one cached fetch. The
   foreground layer is `position: relative`, which paints it above the absolute
   blur layer and keeps the height of the box driven by the picture itself.
   -------------------------------------------------------------------------- */
.ct-media-container.ct-media-contain {
    position: relative;
    overflow: hidden;
}

.ct-media-container.ct-media-contain .ct-media-blur {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(22px) saturate(1.1);
    transform: scale(1.08);
    opacity: 0.55;
}

.ct-media-container.ct-media-contain img.ct-media-img {
    position: relative;
    object-fit: contain;
}

/* The card media container is static by default; the layers above need it to
   be a positioning context of its own. */
.entry-card .ct-media-container.ct-media-contain {
    position: relative;
}

.entry-title {
    margin: 0;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -0.01em;
}

.entry-card .entry-title {
    font-size: 20px;
}

.entry-title a {
    color: var(--theme-palette-color-4);
}

.entry-title a:hover,
.entry-title a:focus {
    color: var(--theme-link-hover-color);
}

/* The two lead cards of the enhanced grid carry a larger headline, which is
   what makes the front page read as a news page without any image. */
@media (min-width: 1000px) {
    [data-layout='enhanced-grid'] > *:nth-child(5n + 1) .entry-title,
    [data-layout='enhanced-grid'] > *:nth-child(5n + 2) .entry-title {
        font-size: 24px;
    }
}

@media (max-width: 689.98px) {
    .entry-card .entry-title {
        font-size: 18px;
    }
}

/* A card without any picture keeps its own accent rule, so the text-only grid
   still has a visual anchor where the image would have been. */
.entry-card--text::before {
    content: '';
    display: block;
    width: 34px;
    height: 3px;
    margin-bottom: 18px;
    border-radius: 2px;
    background-color: var(--theme-palette-color-1);
}

.entry-excerpt {
    max-width: 100%;
    color: var(--theme-text-color);
    font-size: 15px;
}

.entry-card .entry-excerpt p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ------------------------------------------------------------- entry meta */
.entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--theme-text-color);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.entry-meta li {
    display: inline-flex;
    align-items: center;
}

.entry-meta li svg {
    margin-inline-end: 6px;
}

.entry-meta[data-type*='slash'] li:not(:last-of-type)::after {
    content: '/';
    margin-inline: 9px;
    opacity: 0.45;
}

.entry-meta .meta-categories {
    letter-spacing: 0.1em;
}

.entry-meta .meta-categories a,
.entry-meta .meta-categories span {
    color: var(--theme-palette-color-1);
}

.entry-meta .meta-categories a:hover {
    color: var(--theme-link-hover-color);
}

.entry-meta .meta-tags span {
    margin-inline-end: 0.27em;
}

/* ------------------------------------------------------------ pagination */
.ct-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: var(--spacing, 50px);
}

[data-pagination='simple'] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text-color);
}

[data-pagination='simple'] .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    border-radius: var(--theme-border-radius);
    border: 2px solid transparent;
    color: var(--theme-palette-color-4);
}

[data-pagination='simple'] .page-numbers.current {
    color: var(--theme-text-active-color);
    background: var(--theme-link-hover-color);
}

[data-pagination='simple'] .page-numbers:not(.dots):not(.current):hover {
    border-color: var(--theme-link-hover-color);
    color: var(--theme-link-hover-color);
}

[data-pagination='simple'] .prev,
[data-pagination='simple'] .next {
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 0 17px;
    white-space: nowrap;
    border-color: var(--theme-border-color);
}

[data-pagination='simple'] .prev {
    grid-column: 1;
    justify-self: start;
}

[data-pagination='simple'] .next {
    grid-column: 3;
    justify-self: end;
}

[data-pagination='simple'] .page-numbers.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

[data-pagination='simple'] > .ct-pagination-numbers {
    grid-column: 2;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -5px;
}

[data-pagination='simple'] > .ct-pagination-numbers .page-numbers {
    flex: 0 0 41px;
    width: 41px;
    margin: 5px;
}

[data-pagination='simple'] .page-numbers.dots {
    border: 0;
    cursor: default;
    opacity: 0.6;
}

@media (max-width: 689.98px) {
    [data-pagination='simple'] {
        grid-template-columns: 1fr;
        grid-row-gap: 16px;
        justify-items: center;
    }

    [data-pagination='simple'] .prev,
    [data-pagination='simple'] .next,
    [data-pagination='simple'] > .ct-pagination-numbers {
        grid-column: 1;
    }

    [data-pagination='simple'] .prev,
    [data-pagination='simple'] .next {
        justify-self: center;
    }
}

/* -------------------------------------------------------- sidebar widgets */
.ct-widget {
    color: var(--theme-text-color);
}

.ct-sidebar .ct-widget:not(:last-child) {
    margin-bottom: var(--sidebar-widgets-spacing);
}

.ct-sidebar .widget-title {
    position: relative;
    margin: 0 0 18px;
    padding-bottom: 12px;
    color: var(--theme-palette-color-4);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.ct-sidebar .widget-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 3px;
    border-radius: 2px;
    background-color: var(--theme-palette-color-1);
}

.ct-widget-content {
    font-size: 15px;
}

.ct-widget-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-widget-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--theme-border-color);
}

.ct-widget-list li:last-child {
    border-bottom: 0;
}

.ct-widget-list a {
    color: var(--theme-palette-color-4);
}

.ct-widget-list a:hover {
    color: var(--theme-link-hover-color);
}

.ct-widget-count {
    color: var(--theme-text-color);
    font-size: 12.5px;
}

.ct-widget-empty {
    color: var(--theme-text-color);
    font-size: 14px;
}

.tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-cloud-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--theme-border-color);
    border-radius: 999px;
    background-color: var(--theme-palette-color-8);
    color: var(--theme-palette-color-4);
    font-size: 13px;
}

.tag-cloud-link:hover {
    border-color: var(--theme-palette-color-1);
    color: var(--theme-palette-color-1);
}

.tag-cloud-link span {
    color: var(--theme-text-color);
    font-size: 11.5px;
}

/* --------------------------------------------------------- section title */
.ct-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 40px 0 18px;
    color: var(--theme-palette-color-4);
    font-size: 20px;
    font-weight: 700;
}

.ct-section-title::before {
    content: '';
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background-color: var(--theme-palette-color-1);
}

/* ---------------------------------------------------------- tag chips */
.entry-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--theme-border-color);
}

.entry-tags-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-end: 4px;
    color: var(--theme-palette-color-4);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.entry-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background-color: var(--theme-palette-color-6);
    color: var(--theme-palette-color-4);
    font-size: 13px;
}

.entry-tag:hover {
    background-color: var(--theme-palette-color-1);
    color: #ffffff;
}

.entry-tag span {
    font-size: 11.5px;
    opacity: 0.7;
}

/* ------------------------------------------------------ reading counter */
/* End of the article, printed by templates/post.html and filled by main.js.
   The [hidden] override is required: the author rule above outranks the user
   agent `[hidden] { display: none }`, so without it the placeholder would be
   visible before - and without - the counter. */
.ct-post-views {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    color: var(--theme-palette-color-4);
    font-size: 13px;
}

.ct-post-views[hidden] {
    display: none;
}

.ct-post-views .ct-icon {
    opacity: 0.75;
}

.ct-post-views-value {
    color: var(--theme-palette-color-1);
    font-size: 15px;
    font-weight: 700;
}

/* ------------------------------------------------------- article content */
.ct-post-lead {
    margin-bottom: 1.6em;
    padding-inline-start: 18px;
    border-inline-start: 3px solid var(--theme-palette-color-1);
    color: var(--theme-palette-color-4);
    font-size: 17px;
    line-height: 1.7;
}

.entry-content {
    color: var(--theme-text-color);
}

.entry-content > *:last-child {
    margin-bottom: 0;
}

.entry-content h2 {
    margin-top: 1.6em;
    font-size: 27px;
}

.entry-content h3 {
    margin-top: 1.4em;
    font-size: 22px;
}

.entry-content h4 {
    margin-top: 1.3em;
    font-size: 19px;
}

.entry-content li {
    margin-bottom: 0.4em;
}

.entry-content a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.entry-content img {
    border-radius: var(--theme-image-border-radius);
}

.entry-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* ---------------------------------------------------------- entry footer */
.entry-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--theme-border-color);
}

.entry-footer-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    margin-inline-end: auto;
    color: var(--theme-text-color);
    font-size: 13px;
}

/* ----------------------------------------------------------- no results */
.ct-no-results {
    text-align: start;
}

.ct-no-results .entry-content {
    margin-top: 1.5em;
}

.ct-archive-back {
    margin: 30px 0 0;
    font-size: 14px;
}

/* --------------------------------------------------------- back to top */
.ct-back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--theme-border-radius);
    background-color: var(--theme-dark-surface);
    color: #ffffff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--theme-transition);
}

.ct-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.ct-back-to-top:hover,
.ct-back-to-top:focus {
    background-color: var(--theme-palette-color-1);
    color: #ffffff;
}

@media (max-width: 689.98px) {
    .ct-back-to-top {
        right: 14px;
        bottom: 14px;
        width: 38px;
        height: 38px;
    }
}