/* ==========================================================================
   UI REFRESH
   Loaded after style.css. Additive only - nothing in style.css is deleted,
   so removing this <link> restores the previous look exactly.
   ========================================================================== */

:root {
    --brand: #2f9e5f;
    --brand-dark: #1d6b41;
    --brand-darker: #14532d;
    --brand-tint: #e9f5ee;
    --ink: #1f2937;
    --muted: #667085;
    --line: #e4e7ec;
    --page-bg: #eef1f4;
    --card-bg: #ffffff;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-md: 0 4px 14px rgba(16, 24, 40, .08);
    --radius: 10px;
}

/* --------------------------------------------------------------------------
   PAGE SHELL
   -------------------------------------------------------------------------- */

/* style.css pins this to 95vh, which clips long pages. Deliberately no
   min-height/flex here: the markup closes .body_inner before the footer on
   some pages, so a sticky-footer layout would push the footer off-screen. */
.body_inner {
    height: auto;
    background-color: var(--page-bg);
}

#contact {
    background-color: var(--page-bg);
    color: var(--ink);
}

.pad-top-botm {
    padding-bottom: 32px;
    min-height: 0;
}

/* Bootstrap default, undoing the stray `ol` in style.css's
   `.navbar-sidebar-top ul, ol` rule which indented every list on the site. */
ol {
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 40px;
}

/* --------------------------------------------------------------------------
   TOP BAR + NAV
   -------------------------------------------------------------------------- */

/* Deep brand green rather than grey, so the two logos sit on colour. It is a
   darker green than .navbar-sidebar-top below it, which keeps the logo bar and
   the menu bar reading as two distinct bands instead of one green slab. */
.navbar-default {
    background: linear-gradient(180deg, var(--brand-dark) 0%, var(--brand-darker) 100%);
    border-color: transparent;
    box-shadow: var(--shadow-sm);
}

/* bmajss.png carries an opaque white background; rounding it off makes that
   white read as a deliberate badge on the green instead of a stray box. */
#logo_left img {
    background: #ffffff;
    border-radius: 6px;
}

/* The ICAR mark is green artwork on transparency, so it all but vanished once
   the bar turned green. The same white badge brings it back and pairs it with
   the logo on the left. style.css pulls it up 25px, which clipped it against
   the top of the bar once it had a visible background, so centre it instead. */
#logo_right {
    margin-top: 0;
    margin-left: 18px;
    height: 105px;
    display: flex;
    align-items: center;
}

#logo_right img {
    width: 104px;
    height: 88px;
    margin-top: 0;
    padding: 4px;
    background: #ffffff;
    border-radius: 6px;
    box-sizing: border-box;
    object-fit: contain;
}

.navbar-sidebar-top {
    background: linear-gradient(180deg, #37ab6a 0%, #2f9e5f 100%);
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), var(--shadow-sm);
    padding-left: 0;
}

.navbar-sidebar-top ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 15px;
    list-style: none;
}

.navbar-sidebar-top li {
    display: inline-block;
}

.navbar-sidebar-top li a {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 6px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    transition: background-color .15s ease, color .15s ease;
}

.navbar-sidebar-top li a:hover,
.navbar-sidebar-top li a:focus {
    background-color: rgba(255, 255, 255, .18);
    color: #ffffff;
    text-decoration: none;
}

/* White pill instead of yellow-on-green, which was hard to read. */
.navbar-sidebar-top li a.active,
.navbar-sidebar-top .active {
    background-color: #ffffff;
    color: var(--brand-darker) !important;
    font-weight: 700;
}

.navbar-sidebar-top li a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   PANELS / CARDS
   -------------------------------------------------------------------------- */

#contact .panel,
.panel.panel-default {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

#contact .panel > .panel-heading,
.panel.panel-default > .panel-heading {
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 14px 18px;
    position: relative;
}

#contact .panel > .panel-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--brand);
}

#contact .panel > .panel-heading h4 {
    color: var(--brand-darker);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .2px;
}

#contact .panel > .panel-heading .panel-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   REFERENCE DRAWING
   -------------------------------------------------------------------------- */

.figure-panel {
    margin-bottom: 20px;
}

.figure-body {
    padding: 18px;
    text-align: center;
    background:
        linear-gradient(90deg, rgba(47, 158, 95, .04) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(rgba(47, 158, 95, .04) 1px, transparent 1px) 0 0 / 24px 24px,
        #ffffff;
}

.figure-img {
    max-width: 100%;
    max-height: 520px;
    height: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    padding: 8px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s ease;
}

.figure-body a:hover .figure-img,
.figure-body a:focus .figure-img {
    box-shadow: 0 6px 18px rgba(16, 24, 40, .14);
}

/* --------------------------------------------------------------------------
   ESTIMATE TABLES
   -------------------------------------------------------------------------- */

.table-scroll-wrap {
    border-radius: 0 0 var(--radius) var(--radius);
    scrollbar-width: thin;
}

.table-scroll-wrap::-webkit-scrollbar {
    height: 10px;
}

.table-scroll-wrap::-webkit-scrollbar-thumb {
    background: #c7cdd4;
    border-radius: 10px;
}

.table-scroll-wrap::-webkit-scrollbar-track {
    background: #f1f3f5;
}

.estimate-table {
    border-collapse: separate;
    border-spacing: 0;
}

.estimate-table td,
.estimate-table th {
    vertical-align: middle;
    line-height: 1.35;
}

.estimate-table td.desc,
.estimate-table td:nth-child(2) {
    min-width: 220px;
}

/* The cells carry inline backgrounds, so the focus treatment lives on the
   input itself where it can win without !important on every rule. */
.estimate-table input {
    transition: box-shadow .12s ease, background-color .12s ease;
}

.estimate-table input.inp:hover {
    background-color: #dbe8ff !important;
}

.estimate-table input:focus {
    background-color: #ffffff !important;
    box-shadow: inset 0 0 0 2px var(--brand);
    outline: none;
    position: relative;
    z-index: 1;
}

.estimate-table input.calc {
    cursor: default;
}

.estimate-table input.calc:focus {
    box-shadow: inset 0 0 0 2px #b8bfc7;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.btn-22,
#contact .btn {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: .2px;
    box-shadow: var(--shadow-sm);
    transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}

.btn-success,
#contact .btn-success {
    background-color: var(--brand);
    border-color: var(--brand-dark);
}

.btn-success:hover,
.btn-success:focus,
#contact .btn-success:hover,
#contact .btn-success:focus {
    background-color: var(--brand-dark);
    border-color: var(--brand-darker);
}

.btn-22:active {
    transform: translateY(1px);
    box-shadow: none;
}

.btn-22:focus-visible {
    outline: 3px solid rgba(47, 158, 95, .45);
    outline-offset: 2px;
}

/* Secondary action - reads as "step back", not a primary submit. */
.btn-ghost,
.btn-ghost:focus {
    background-color: #ffffff;
    border: 1px solid var(--brand);
    color: var(--brand-dark);
}

.btn-ghost:hover {
    background-color: var(--brand-tint);
    border-color: var(--brand-dark);
    color: var(--brand-darker);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

#footser-end {
    flex-shrink: 0;
    background: #ffffff;
    border-top: 3px solid var(--brand);
    color: var(--ink);
    padding: 0;
    text-align: left;
}

.footer-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}

.footer-actions .btn {
    margin: 0;
    min-width: 130px;
}

.footer-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 18px 0;
}

.footer_left {
    float: none;
    width: auto;
    padding: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
    text-align: left;
}

.footer_left .footer-org {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.copy_right {
    float: none;
    width: auto;
    padding: 0;
    font-size: 13px;
    color: var(--muted);
    text-align: right;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   HOME HERO
   -------------------------------------------------------------------------- */

/* The author and institute lines. style.css paints these blue over a black
   stroke, which turns muddy against the light, busy photo behind them (and the
   `color:#blue` there is not even valid CSS, so Firefox never got the fill at
   all). White carries the contrast, with a dark halo doing the work the stroke
   used to. -webkit-text-fill-color must be reset explicitly or it keeps
   beating `color` in WebKit. */
#home h3 {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    -webkit-text-stroke: 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .9), 0 0 3px rgba(0, 0, 0, .9);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .navbar-sidebar-top ul {
        gap: 2px;
        padding: 6px 10px;
    }

    .navbar-sidebar-top li a {
        padding: 7px 10px;
        font-size: 13px;
    }

    .footer-meta {
        justify-content: center;
        text-align: center;
    }

    .footer_left,
    .copy_right {
        width: 100%;
        text-align: center;
        white-space: normal;
    }

    .footer-actions .btn {
        flex: 1 1 140px;
    }
}