/* Maultasch Bulletin Plugin Styles */

/* ===================================
   Bulletin latest
   =================================== */
/*
 * The shortcode must be embedded inside a position:relative, content-width
 * ancestor (e.g. Bootstrap ".container.position-relative"), so that the offsets
 * below are measured from the site's content edge rather than the viewport.
 * The widget then tracks the slider corner and never sticks out past the site
 * width - the 3rem inset is the slack the tilt needs, see the transform below.
 */
.maultasch-bulletin-latest {
    /*
     * The width is pinned rather than derived from the content, and that is the
     * whole point of this rule.
     *
     * An absolutely positioned box with width:auto and only one horizontal inset
     * is shrink-to-fit: it takes the width of its widest child. Here that child
     * is the download button, whose label is translated - so the German string
     * made the widget wider than the English one. The cover below is width:100%
     * with a padding-top aspect ratio, so a wider widget also meant a taller
     * cover; anchored top/right, it grew leftward and downward. The cover
     * changed size and moved whenever the language changed.
     *
     * A fixed width breaks that chain at the source: everything inside is now
     * measured against a constant, so no string in any language can resize or
     * move the cover. Raise the value with care - see the tilt note below.
     */
    --maultasch-bulletin-latest-width: 200px;
    --maultasch-bulletin-latest-tilt: 14deg;
    /*
     * Distance between the cover and the button. Zero is deliberate: the tilt
     * swings the cover's lower corner about 20px below its layout box, and at
     * zero the button overlaps and hides it, which is the intended tucked look.
     * Raise this to roughly 1.25rem to let that corner show instead.
     */
    --maultasch-bulletin-latest-gap: 0;
    /*
     * How far the button may reach left of the cover. It only limits how much
     * room a long label may take - it never adds width, because the button
     * sizes to its text. Past roughly 22rem the button starts to look like a
     * banner across the slider rather than a label under the cover.
     */
    --maultasch-bulletin-latest-btn-max: 20rem;

    position: absolute;
    top: 21rem;
    right: 3rem;
    width: var(--maultasch-bulletin-latest-width);

    display: flex;
    flex-direction: column;
    gap: var(--maultasch-bulletin-latest-gap);
}

/*
 * The widget is a plugin rendering into an unknown theme, so it cannot assume
 * the border-box reset that Bootstrap happens to provide here. Without this,
 * the button's width:100% plus its padding would overflow the fixed width.
 */
.maultasch-bulletin-latest,
.maultasch-bulletin-latest * {
    box-sizing: border-box;
}

.maultasch-bulletin-latest .maultasch-bulletin-image-wrap {
    position: relative;
    width: 100%;
    padding-top: 135%;
    overflow: hidden;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    /*
     * The tilt makes the painted box wider than the layout box: at 200px / 141%
     * the corners swing roughly 31px past each edge. right: 3rem leaves enough
     * slack for that, which is why the width and the angle have to be raised
     * together, not independently - otherwise the cover pokes past the site's
     * content edge.
     */
    transform: rotate(var(--maultasch-bulletin-latest-tilt));
}
.maultasch-bulletin-latest .maultasch-bulletin-image-wrap:hover {
    transform: none;
    box-shadow: none;
}

.maultasch-bulletin-latest .maultasch-bulletin-image-wrap img.maultasch-bulletin-cover {
    border-radius: 4px;
    box-shadow: 0 5px 2px rgba(0, 0, 0, 0.12);
}

/* Spacing between the cover and the button is the flex gap above. */
.maultasch-bulletin-latest .maultasch-bulletin-content {
    padding: 0;
}

/*
 * Scoped to the container rather than matched on the button class alone. Both
 * Bootstrap's .btn and the archive stylesheet's .maultasch-bulletin-btn are
 * single-class rules that set width, padding and min-width, so a bare
 * .maultasch-bulletin-latest-button would only win by loading later - which it
 * currently does by accident, because the shortcode enqueues its stylesheet
 * during rendering and WordPress then prints it in the footer. Two classes make
 * these declarations win on specificity instead, whatever the load order.
 */
.maultasch-bulletin-latest .maultasch-bulletin-latest-button {
    /* Paints over the corner the tilted cover swings downward. */
    position: relative;
    z-index: 1;

    background-color: #8a3c3c;
    color: #fff;
    border: none;

    /*
     * The button sizes to its own text and overhangs the cover to the left, so
     * that the long German and Italian labels stay on one line.
     *
     * This is only safe because the container above has a fixed width. The
     * original bug was that the button's content width fed back into the
     * container, which then resized the cover; now the container is a constant,
     * so the button can be as wide as it likes without anything else moving.
     * It overflows the container rather than widening it.
     *
     * flex-end pins the button's right edge to the cover's right edge, so the
     * growth goes leftward over the slider instead of outward past the site's
     * content edge. min-width keeps short labels (English) flush with the cover
     * exactly as before, so only the languages that need the room take it.
     */
    align-self: flex-end;
    width: max-content;
    min-width: 100%;
    max-width: var(--maultasch-bulletin-latest-btn-max);

    /*
     * Kept as the safety net for the cap above: a label too long even for
     * max-width wraps to a second line rather than overflowing. The button is
     * the last item in a top-anchored column, so that extra line extends
     * downward and still moves nothing above it.
     */
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
    line-height: 1.25;
    padding: 0.5rem 0.75rem;
}

/*
 * Flex items refuse to shrink below their min-content width by default, which
 * would let a long word push the button wider than its container. This lets the
 * label shrink so overflow-wrap can do its job.
 */
.maultasch-bulletin-latest .maultasch-bulletin-btn-label {
    min-width: 0;
}

/* Keeps the icon at its natural size rather than squashing it. */
.maultasch-bulletin-latest .maultasch-bulletin-latest-button .fa {
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .maultasch-bulletin-latest {
        display: none;
    }
}