/* AjonTec: small mobile fixes for every school website (all designs, also the original one).
   Long words / links from the CMS content break instead of making the page wider than the phone. */
p, li, h1, h2, h3, h4, h5, h6, td, th, blockquote, .footer-top-bar, .footer-dec, .address-list, .txt-holder { overflow-wrap: anywhere; word-break: normal; }
iframe, video, embed, object { max-width: 100%; }
.main-container table, .welcome-area table, .content-area table { max-width: 100%; }
@media (max-width: 767px) {
    .footer-top-bar .float-left, .footer-top-bar .float-right { float: none !important; }
    .main-container img, .welcome-area img, .news-post img, .bio-box img { height: auto; }
}

/* mobile header: Login + menu button on the right, app like bottom bar */
.m-top-login, .m-app-bar { display: none; }
@media (max-width: 991.98px) {
    .main-header .navbar > .container-md, .main-header .navbar > .container { display: flex; align-items: center; flex-wrap: wrap; }
    .main-header .navbar-brand { margin-right: 0; max-width: 55%; }
    .main-header .navbar-brand img { max-height: 48px; width: auto; max-width: 100%; }
    .m-top-login { display: inline-flex !important; align-items: center; gap: 6px; margin-left: auto; margin-right: 10px; padding: 7px 14px; border-radius: 20px;
        background: var(--thm-primary); color: #fff !important; font-weight: 600; font-size: 14px; line-height: 1.2; text-decoration: none; white-space: nowrap; }
    .main-header .navbar-toggler { margin-left: 0 !important; order: 3; }
    .m-top-login { order: 2; }
    .main-header .navbar-collapse { order: 4; flex-basis: 100%; }
    body { padding-bottom: 66px; }
    .m-app-bar { display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #fff; border-top: 1px solid #e5e7eb;
        box-shadow: 0 -4px 18px rgba(0, 0, 0, .08); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
    .m-app-bar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: #64748b !important; text-decoration: none; padding: 2px 0; }
    .m-app-bar a i { font-size: 18px; }
    .m-app-bar a.active, .m-app-bar a:hover { color: var(--thm-primary) !important; }
    .whatsapp-popup { bottom: 78px !important; }
    .back-to-top, #back-to-top, .scroll-top { bottom: 84px !important; }
}
@media (max-width: 380px) { .m-top-login span, .m-top-login { font-size: 13px; padding: 6px 11px; } }