/* ============================================================================
   public-ui.css - page-level CSS for the PUBLIC site
   ----------------------------------------------------------------------------
   WHY THIS FILE EXISTS, and why new public CSS belongs here rather than in
   css/style.css:

   App_Start/BundleConfig.cs sets BundleTable.EnableOptimizations = false, so
   @Styles.Render("~/Content/css") emits each stylesheet as a plain
   <link href="/css/style.css"> with NO version query. Nothing in that URL ever
   changes, so a browser holding a cached copy keeps serving the old file and
   simply does not receive new rules. That is not theoretical: the Contact Us
   office directory shipped and rendered completely unstyled - bullets showing,
   screen-reader-only labels visible - until the page was hard-refreshed.

   This file is linked separately from _Layout.cshtml with ?v=<file mtime ticks>,
   the same cache-busting the admin layout already uses for admin-ui.css, so an
   edit here always reaches visitors on their next request.

   It is also loaded AFTER the whole ~/Content/css bundle, which means it wins
   ties against css/Custom_.css - the unscoped, last-in-bundle file that styles
   bare `td`, `thead th` and `p, li` site-wide (see CLAUDE.md).

   The systemic fix would be to version every file in the bundle, which means
   re-implementing Styles.Render's output INCLUDING the default BundleOrderer's
   reordering (it hoists jquery-ui.css ahead of the bundle's own first entry, so
   naive enumeration silently changes the cascade). That needs a running site to
   verify and is deliberately left as a follow-up.

   Keep rules scoped to a page/component class. Two things this file must keep
   defending against, both documented in CLAUDE.md:
     * css/Custom_.css sets `p, li { text-align: justify }` with no scope at all,
       so text blocks arrive justified unless told otherwise.
     * Font Awesome 5 (autoReplaceSvg) rewrites <i class="fa fa-x"> into <svg> at
       runtime, so every icon rule must name BOTH `i` and `svg`.
   ============================================================================ */

/* ===== Contact Us page (Views/Home/ContactUs.cshtml) =======================
   The three office address blocks carried Bootstrap 3's `well well-lg`, which
   the public bundle (Bootstrap 4.1) does not define - so they were unstyled and
   spaced with <br> tags inside the panel. They are cards now, in the same
   language as .right-fixed-menu and the office directory below, so the whole
   page reads as one set of components rather than three unrelated ones.

   TWO THINGS THIS FILE HAS TO DEFEND AGAINST, both documented in CLAUDE.md:
     * css/Custom_.css sets `p, li { text-align: justify }` with no scope at all
       and is the LAST file in the ~/Content/css bundle, so every address block
       and every card row arrives justified - big ragged word gaps in a narrow
       column. Each one sets text-align explicitly.
     * Font Awesome 5 (fontawesome-all.js, autoReplaceSvg) rewrites every
       <i class="fa fa-x"> into an <svg> at runtime, so icon rules must name
       BOTH `i` and `svg` or they stop applying a moment after load. */
.contact-page .contact-office {
    height: 100%;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e6e9ec;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
}

.contact-page .contact-office h2.title {
    margin-bottom: 14px;
    font-size: 1.05rem;
}

.contact-page .contact-office > p {
    margin-bottom: 0;
    text-align: left;
    line-height: 1.7;
}

/* ===== Office directory (Views/Home/_BOTBranchesList.cshtml) ===============
   Replaced a DataTable that carried Copy/CSV/Excel/Print buttons over a list of
   places to telephone. Cards, a search box, and the one split that actually
   matters to a visitor: branch or directorate. */
.bot-dir__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.bot-dir__search {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;                    /* allows it to shrink inside the flex row */
}

.bot-dir__search > i,
.bot-dir__search > svg {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 14px;
    transform: translateY(-50%);
    color: #9aa4ad;
    pointer-events: none;            /* clicks fall through to the input */
}

.bot-dir__input {
    width: 100%;
    padding: 9px 12px 9px 36px;
    border: 1px solid #d9dee3;
    border-radius: 8px;
    background: #fff;
    color: #2b3840;
    font-size: .92rem;
}

.bot-dir__input:focus {
    outline: none;
    border-color: #00897b;
    box-shadow: 0 0 0 3px rgba(0,150,136,.15);
}

.bot-dir__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bot-dir__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid #d9dee3;
    border-radius: 999px;
    background: #fff;
    color: #41505c;
    font-size: .86rem;
    line-height: 1;
    cursor: pointer;
}

.bot-dir__chip:hover {
    border-color: #00897b;
    color: #00695f;
}

.bot-dir__chip:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,150,136,.18);
}

.bot-dir__chip.is-active {
    background: #00897b;
    border-color: #00897b;
    color: #fff;
}

.bot-dir__count {
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0,0,0,.07);
    font-size: .78rem;
}

.bot-dir__chip.is-active .bot-dir__count {
    background: rgba(255,255,255,.22);
}

.bot-dir__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bot-dir__item {
    list-style: none;
}

/* Bootstrap 4's reboot already has [hidden]{display:none!important}; stated here
   too so the filter still works if the grid is ever lifted out of this bundle. */
.bot-dir__item[hidden],
.bot-dir__empty[hidden] {
    display: none;
}

.bot-dir__card {
    height: 100%;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #e6e9ec;
    border-left: 3px solid #80cbc4;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
    transition: border-left-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.bot-dir__card:hover {
    border-left-color: #00897b;
    box-shadow: 0 4px 12px rgba(0,0,0,.07);
}

.bot-dir__name {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1f2b33;
    text-align: left;
}

.bot-dir__badge {
    flex: 0 0 16px;
    width: 16px;
    margin-top: 2px;
    color: #00897b;
    text-align: center;
}

.bot-dir__rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bot-dir__row {
    display: flex;
    gap: 9px;
    margin-bottom: 8px;
    font-size: .88rem;
    line-height: 1.55;
    color: #41505c;
    text-align: left;
}

.bot-dir__row:last-child {
    margin-bottom: 0;
}

.bot-dir__row--muted {
    color: #77828b;
}

.bot-dir__row > i,
.bot-dir__row > svg {
    flex: 0 0 15px;
    width: 15px;
    margin-top: 3px;
    color: #9aa4ad;
    text-align: center;
}

.bot-dir__row a {
    color: #00695f;
    border-bottom: 1px solid transparent;
}

.bot-dir__row a:hover,
.bot-dir__row a:focus {
    color: #004d40;
    border-bottom-color: #80cbc4;
    text-decoration: none;
}

/* The field name each icon stands for - announced, never shown. */
.bot-dir__srlabel {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bot-dir__empty {
    margin-top: 16px;
}

@media (max-width: 575.98px) {
    .bot-dir__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    /* flex-basis applies to the MAIN axis, which is now vertical: the
       `flex: 1 1 260px` above would set this box 260px TALL, and the search
       icon - absolutely positioned at top:50% - floated halfway down that
       emptiness, well below the input it belongs to. */
    .bot-dir__search {
        flex: 0 0 auto;
    }

    .bot-dir__grid {
        grid-template-columns: 1fr;
    }
}


/* ===== Bootstrap 3 compatibility shims =====================================
   The views still carry a number of Bootstrap 3 class names. The public bundle
   is Bootstrap 4.1, which defines none of them, and the Bootstrap 3 file at
   css/bootstrap.min.css is NOT loaded (the bundle uses bootstrap/css/...), so
   they style nothing at all and fail silently.

   Only `.img-responsive` is restored here, because it is the one with a
   responsive consequence: without it nothing caps an image's width, so a photo
   wider than its column simply overflows on a narrow screen. 24 views rely on
   it. This is the Bootstrap 3 definition minus `display:block` - the images
   have been rendering inline for as long as the class has been dead, and the
   surrounding layouts are built around that, so restoring block here would move
   things rather than fix them.

   Deliberately NOT shimmed: `.well` (11 uses) and `.form-horizontal` (69) are
   decorative/layout modifiers - defining them now would CHANGE the look of
   pages that have rendered without them for years, which is a redesign, not a
   fix. `.pull-left`/`.pull-right` (122 uses) need no shim: font-awesome.min.css
   happens to define both, so they work by accident. The real cleanup is to
   migrate the markup to `.img-fluid` / `.float-*`; this keeps it working safely
   in the meantime. */
.img-responsive {
    max-width: 100%;
    height: auto;
}