/* ---------------------------------------------------------------------------
   Small screen and button fixes (2026-09-10 responsiveness sweep).

   Linked after the theme's style.css and blog.css. Everything here corrects
   theme rules that break the layout on phones or make buttons unusable; none
   of it changes the desktop design beyond the headings inside long copy.
--------------------------------------------------------------------------- */

/* The theme redefines Bootstrap's .d-flex with white-space: nowrap, so any
   text inside a flex box (card footers, the service header, the photo CTA)
   refused to wrap and ran off the right edge of a phone screen. */
.d-flex {
    white-space: normal;
}

/* The theme gives every .btn overflow: hidden, and a flex item that hides its
   overflow is allowed to shrink below its content: on phones the "Dettagli"
   and "Vedi tutti" buttons collapsed to 16px wide slivers. A button never
   gives up its width. */
.btn,
.btn-main,
a.btn-main {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Rows that put a text block and a button side by side wrap on phones
   instead of squeezing the button. */
@media (max-width: 575.98px) {
    .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: .5rem .75rem;
    }

    .d-flex.justify-content-between > .btn {
        margin-left: auto;
    }
}

/* Headings inside long copy (service descriptions) inherited the theme's
   48px section title size, which is a poster size next to 16px body text.
   Same scale as the blog article body. */
.prose h2 {
    font-size: clamp(20px, 1.7vw + 8px, 26px);
    line-height: 1.3;
    margin: 32px 0 12px;
    text-wrap: balance;
}

.prose h3 {
    font-size: 19px;
    line-height: 1.35;
    margin: 24px 0 10px;
}

.prose p {
    margin-bottom: 16px;
}

/* Page banner title: 60px on a 375px phone ran to three or four lines. */
@media (max-width: 767.98px) {
    #subheader h1,
    #subheader .h1 {
        font-size: clamp(30px, 9vw, 44px);
        line-height: 1.15;
    }

    #subheader .crumb {
        font-size: 14px;
    }

    /* Section titles: the theme's 48px h2 is too much at phone width. */
    h2:not(.sr-only):not(.article-title):not(.prose h2) {
        font-size: clamp(26px, 8vw, 34px);
        line-height: 1.2;
    }
}

/* Bootstrap's widest gutter (gx-5) is wider than the phone container's
   padding, which produced a few pixels of sideways overflow. */
@media (max-width: 767.98px) {
    .row.gx-5 {
        --bs-gutter-x: 1.5rem;
    }
}

/* Buttons keep their size on hover. The theme's arrow buttons change their
   padding when hovered, so the whole row reflowed under the cursor. */
a.btn-fx:hover {
    padding-left: 30px;
    padding-right: 30px;
}

a.btn-main.btn-with-arrow:hover {
    padding-left: 20px;
    padding-right: 40px;
}

/* The theme ships Bootstrap 5.0.2, which has no .bg-opacity-* utilities
   (they arrived in 5.1). "bg-primary bg-opacity-10" therefore painted a solid
   primary circle, and the primary coloured icon inside it disappeared: the
   empty round badges on /servizi, the service page and the wizard. */
.bg-primary.bg-opacity-10 {
    background-color: rgba(74, 124, 210, .1) !important;
    background-color: color-mix(in srgb, var(--primary-color, #4A7CD2) 10%, transparent) !important;
}

.bg-success.bg-opacity-10 {
    background-color: rgba(25, 135, 84, .1) !important;
}

.bg-warning.bg-opacity-10 {
    background-color: rgba(255, 193, 7, .12) !important;
}

.bg-danger.bg-opacity-10 {
    background-color: rgba(220, 53, 69, .1) !important;
}

.bg-info.bg-opacity-10 {
    background-color: rgba(13, 202, 240, .1) !important;
}

.bg-white.bg-opacity-25 {
    background-color: rgba(255, 255, 255, .25) !important;
}

@media (max-width: 767.98px) {
    .row.g-5 {
        --bs-gutter-x: 1.5rem;
    }
}

/* The main call to action, inside the phone menu only: the header column
   that holds it on desktop is hidden by the theme below 992px. */
#mainmenu li.menu-cta-mobile {
    display: none;
}

header.header-mobile #mainmenu li.menu-cta-mobile {
    display: block;
    padding: 18px 0 8px;
    border-bottom: none;
}

/* The theme hides the last menu item's link (its own "last-child" rule), so
   the button forces its display and its light text. */
header.header-mobile #mainmenu li.menu-cta-mobile a.btn-main,
header.header-mobile #mainmenu li.menu-cta-mobile:last-child > a {
    display: block !important;
    color: #fff !important;
    width: 100%;
    text-align: center;
    padding: 12px 24px;
    font-size: 15px;
    line-height: 1.4;
    border-bottom: none;
}