/* Public journeys only: leave administration and marketing layouts alone. */
.public-map-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem; }
.public-map-main { flex: 1 1 700px; min-width: 0; max-width: 100%; }
.public-map-aside { flex: 1 1 260px; min-width: 0; }
.map-location-search { max-width: 40rem; }
.public-page .location-results { position: static; float: none; max-height: 20rem; overflow-y: auto; }
.public-page .dropdown-item { white-space: normal; overflow-wrap: anywhere; min-height: 48px; padding: .75rem; }
.public-page .dropdown-item:focus, .public-page .dropdown-item:hover { background: #28366b; color: #fff !important; }
.selected-location { padding: 1rem; border: 2px solid #63c7e8; border-radius: .75rem; margin-bottom: 1rem; overflow-wrap: anywhere; }
.map-browse-link { display: inline-flex; align-items: center; min-height: 48px; text-decoration: underline; }
.public-page :is(input, select, textarea) { font-size: 1rem; }
.public-page :is(.btn, .form-control, .form-select), .public-dialog :is(.btn, .form-control, .form-select) { min-height: 48px; }
.public-page .btn, .public-dialog .btn { white-space: normal; }
.public-page :focus-visible, .public-dialog :focus-visible { outline: 3px solid #ffbf47 !important; outline-offset: 3px; box-shadow: 0 0 0 5px #172042 !important; }
.public-page .submission-actions [role] { display: block; margin: .75rem 0 0 !important; }
.public-page .submission-actions [hidden] { display: none !important; }
.public-page .alert-success { background: #e9f6ec; color: #15572c !important; }
.public-page .submission-actions [role=status]:not([hidden]) { background: #e9f6ec; color: #15572c !important; padding: .75rem; border-left: 4px solid #15572c; }
.public-page [role=alert]:not(:empty), .public-dialog .submission-error:not(:empty) { background: #fff1f0; color: #8b1824 !important; border-left: 4px solid #8b1824; padding: .75rem; }
.public-page [role=status]:not(:empty) { line-height: 1.6; }
.public-dialog { overflow-y: auto; overscroll-behavior: contain; padding: .5rem; }
.public-dialog .modal-dialog { margin: 1rem auto; min-height: calc(100% - 2rem); }
.public-dialog :is(.modal-content, .modal-header, .modal-body, .modal-footer) { background: #fff !important; color: #172033 !important; }
.public-dialog :is(h1, h2, h5, p, span, label, strong, .form-label, .form-control-plaintext) { color: #172033 !important; }
.public-dialog .btn-close { min-width: 44px; min-height: 44px; padding: 0; margin: 0; filter: none; opacity: 1; flex-shrink: 0; }
.public-dialog :is(input, select, textarea) { font-size: 1rem; }
.public-dialog .modal-body { overflow-wrap: anywhere; }
.public-dialog .btn-primary { color: #fff !important; }
.public-mobile-nav { display: none; }
.public-mobile-login { display: none; }
.login-back-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .5rem 1rem; border: 1px solid currentColor; border-radius: .5rem; color: #fff !important; font-size: 1rem; text-decoration: underline; }
.login-back-link:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; }

/* Replace the sidebar, including its collapsed rail, on phones and small tablets. */
@media (max-width: 991.98px) {
    .wrapper:has(.public-page) .leftside-menu,
    .wrapper:has(.public-page) .button-toggle-menu,
    .wrapper:has(.public-page) .navbar-toggle,
    .wrapper:has(.public-page) .topbar-menu,
    body:has(.public-page) #custom-backdrop { display: none !important; }
    .wrapper:has(.public-page) .navbar-custom {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .wrapper:has(.public-page) .topbar { height: auto !important; min-height: 64px; padding: .5rem .75rem; }
    .wrapper:has(.public-page) .logo-topbar { min-height: 0 !important; padding: .25rem !important; }
    .wrapper:has(.public-page) .logo-brand-img { height: 48px !important; max-height: 48px !important; max-width: 150px !important; }
    .wrapper:has(.public-page) .content-page {
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
        min-width: 0;
        min-height: 0;
    }
    .wrapper:has(.public-page) .content { padding-top: 0 !important; margin-top: 0 !important; }
    .wrapper:has(.public-page) .footer { position: static !important; inset: auto !important; width: 100%; height: auto; }
    .wrapper:has(.public-page) .public-mobile-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .75rem 0; }
    .public-mobile-nav a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: .5rem; border: 1px solid #63c7e8; border-radius: .5rem; color: #fff !important; font-size: 1rem; overflow-wrap: anywhere; }
    .public-mobile-nav a.active { background: #394b8a; text-decoration: underline; text-underline-offset: .2em; font-weight: 700; }
    .wrapper:has(.public-page) .public-mobile-login { display: inline-flex; align-items: center; min-height: 48px; padding: .5rem; text-decoration: underline; }
    .wrapper:has(.public-page) :is(.public-mobile-nav a, .public-mobile-login, .logo-brand):focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
}

@media (max-width: 767.98px) {
    .public-page { padding: 1rem .25rem !important; font-size: 1rem; }
    .public-page .card-body { padding: 1rem !important; }
    .public-page h1, .public-page .volunteer-hero h1 { font-size: 2rem; line-height: 1.2; }
    .public-page h2 { font-size: 1.5rem; line-height: 1.3; }
    .public-page .submission-actions .btn { width: 100%; }
    .public-page .form-text { font-size: .9375rem; }
    .public-page .map-desktop-instructions { display: none; }
    .public-map-layout { display: block; }
    .public-map-aside { margin-top: 1rem; }
    .public-page .story-card { overflow-wrap: anywhere; }
    .public-page .d-flex.justify-content-between { flex-wrap: wrap; gap: .75rem; }
    .page-map .map-box { height: 55vh; height: 55svh; min-height: 300px; max-height: 500px; }
    .page-map .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }
    .public-dialog .modal-dialog { width: 100%; max-width: 100%; }
    .public-dialog :is(.modal-header, .modal-body, .modal-footer) { padding: 1rem !important; }
    .public-dialog .modal-footer { gap: .5rem; }
    .public-dialog .modal-footer .btn { flex: 1 1 100%; margin: 0; }
    .wrapper:has(.public-page) .logo-topbar { min-height: 0 !important; padding: .25rem !important; }
    .wrapper:has(.public-page) .logo-brand-img { height: 48px !important; max-height: 48px !important; max-width: 130px !important; }
    .wrapper:has(.public-page) .topbar-menu { gap: .25rem !important; padding-left: 0; }
    .wrapper:has(.public-page) .content-page { margin-left: 0 !important; min-width: 0; }
    .wrapper:has(.public-page) .content > .container-fluid { padding-inline: .75rem; }
    .wrapper:has(.public-page) .public-mobile-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .75rem 0; }
    .public-mobile-nav a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: .5rem; border: 1px solid #63c7e8; border-radius: .5rem; color: #fff !important; font-size: 1rem; }
    .public-mobile-nav a.active { background: #394b8a; text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) {
    .public-page *, .public-dialog * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}