/* ==========================================================================
   Responsive & UX patch layer
   Loaded AFTER style.css so these rules can safely override it.
   Nothing here changes the visual design — it only fixes overflow,
   touch-target, and mobile-input issues found across the site.
   ========================================================================== */

/* Prevent any stray fixed-width element from creating horizontal scroll
   on small screens (safety net, does not affect desktop layout). */
html {
    overflow-x: hidden;
}

/* Any image or embedded video should never exceed its container,
   whatever fixed width/height attributes the original markup has. */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Tables that were not wrapped in .table-responsive still get a
   horizontal-scroll fallback instead of breaking the layout. */
table {
    max-width: 100%;
}

/* iOS Safari auto-zooms the page when a focused input's font-size is
   under 16px. Bootstrap's .form-control is already 16px on desktop but
   several custom inputs on this site drop below that on mobile. */
@media (max-width: 767px) {
    input,
    select,
    textarea {
        font-size: 16px;
    }
}

/* Comfortable tap targets on touch devices (WCAG 2.5.5 recommends 44px).
   Only applied to nav/menu links and buttons, so it never changes the
   size of inline text links inside paragraphs. */
@media (max-width: 991px) {
    nav ul li a,
    .menu li a,
    .btn,
    button.btn,
    .button-style,
    .button-styleh {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Visible keyboard focus outline for accessibility (many of this site's
   buttons/links currently have no visible focus state). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #1089ff;
    outline-offset: 2px;
}

/* Long words/URLs (short-link results, API keys, etc.) should wrap
   instead of overflowing their container on narrow screens. */
.short-link,
.long-link,
code,
pre {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* --------------------------------------------------------------------
   Header logo size fix
   --------------------------------------------------------------------
   The logo <img> used the invalid HTML attribute height="40px" (the
   height/width attributes must be unitless numbers, not CSS units).
   Browsers ignore invalid values and fall back to the image's natural
   size (388x135px) instead of the intended 40px tall — that's what
   was making the whole header render oversized. The height attribute
   itself is now fixed to height="40" on every page, and this rule is
   a safety net so the logo can never balloon back to full size again
   even if the markup or the image file changes later. */
#logo img,
.navbar-brand img {
    height: 40px;
    width: auto;
    max-width: 100%;
}

/* --------------------------------------------------------------------
   Shorten-box width fix (index / create-short-url / create-custom-url)
   --------------------------------------------------------------------
   style.css has several conflicting mobile rules for this widget's
   width — e.g. #ardyacsl is set to 130% and later 80%; #term_lnkiy's
   margin fights between two !important values; several elements use
   percentages above 100% (117%–133%) to compensate for a parent
   shrunk to 75%, which only happens to cancel out under one exact
   set of assumptions (Bootstrap's default .container padding, no
   extra ancestor margins). It works today but will silently overflow
   the screen the moment any of those assumptions change.
   This block replaces the whole compensation chain with a plain,
   robust 100% layout: the parent is no longer shrunk, so children
   never need to be wider than their own container. Visually
   equivalent to the intended result, just not dependent on
   magic-number math. */
@media only screen and (max-width: 750px) {
    .longhomelink {
        width: 100% !important;
    }
    .textUrlLong,
    .short_new_link,
    #term_lnkiy,
    #ardyacsl {
        width: 100% !important;
        margin-left: 0 !important;
    }
}