/* Shared mobile-responsive styles for the misctools "Useful SEO Tools" pages
   (Text Case Converter, JSON to Text, Anchor Text & Spintax, etc). Every tool
   view wraps its content in .tool-container, so these rules apply the same
   fix consistently across all of them instead of duplicating per-file CSS. */
@media (max-width: 575.98px) {
    /* Connected Bootstrap btn-groups (conversion mode / format toggles) don't
       wrap by default, so longer labels overflow past the card edge on a
       phone. Break them into a normal 2-per-row grid instead. */
    .tool-container .btn-group[role="group"] {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .tool-container .btn-group[role="group"] .btn {
        flex: 1 1 calc(50% - 6px);
        margin: 0 !important;
        border-radius: 0.375rem !important;
    }

    /* Primary submit/copy actions are easier to tap at full width on mobile. */
    .tool-container form > .row button[type="submit"],
    .tool-container .copyBtn {
        width: 100%;
    }

    /* A few tool card-headers pack a title plus one or more button groups
       into one unwrapped flex row (e.g. the Anchor Text & Spintax generator),
       which overflows/overlaps on narrow screens. Let those wrap too. */
    .tool-container .card-header.d-flex {
        flex-wrap: wrap;
        gap: 8px;
    }
}